95 lines
5.0 KiB
TypeScript
95 lines
5.0 KiB
TypeScript
|
|
|||
|
|
import React from 'react';
|
|||
|
|
import SectionWrapper from './SectionWrapper';
|
|||
|
|
import { Server, ShieldCheck, Cpu, Info } from 'lucide-react';
|
|||
|
|
import { motion } from 'framer-motion';
|
|||
|
|
import { SectionProps } from '../types';
|
|||
|
|
|
|||
|
|
const Infrastructure: React.FC<SectionProps> = ({ onOpenModal }) => {
|
|||
|
|
const handleDetailsClick = () => {
|
|||
|
|
if (onOpenModal) {
|
|||
|
|
onOpenModal({
|
|||
|
|
title: 'Техническая Спецификация ЦОД',
|
|||
|
|
type: 'table',
|
|||
|
|
theme: 'dark',
|
|||
|
|
content: {
|
|||
|
|
headers: ['Компонент', 'Характеристика', 'Примечания'],
|
|||
|
|
rows: [
|
|||
|
|
['Вычислительные узлы', 'GPU Кластер A100/H100', 'Собственность РБ'],
|
|||
|
|
['СХД', 'All-Flash массивы', 'Скорость доступа <1мс'],
|
|||
|
|
['Каналы связи', 'Защищенные ВОЛС', 'Изолированный контур'],
|
|||
|
|
['Безопасность', 'ФСТЭК К1', 'Гостайна'],
|
|||
|
|
['Энергоснабжение', 'Tier III', 'Резервирование 2N+1']
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<SectionWrapper id="infra" transitionEffect="wipe-right">
|
|||
|
|
<div className="max-w-7xl mx-auto px-6 md:px-12 w-full h-full flex flex-col justify-center">
|
|||
|
|
<div className="flex flex-col lg:flex-row gap-12 lg:gap-16 items-center lg:items-start justify-center">
|
|||
|
|
<motion.div
|
|||
|
|
className="w-full lg:w-1/2 flex flex-col justify-center"
|
|||
|
|
initial={{ opacity: 0, x: -50 }}
|
|||
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|||
|
|
viewport={{ once: true }}
|
|||
|
|
transition={{ duration: 0.8, ease: [0.645, 0.045, 0.355, 1.000] }}
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center gap-2 mb-4">
|
|||
|
|
<div className="w-2 h-2 bg-[#20e3b2]"></div>
|
|||
|
|
<span className="text-[#20e3b2] font-mono text-xs tracking-widest">01. ИНФРАСТРУКТУРА</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h3 className="text-4xl md:text-6xl lg:text-7xl font-black mb-6 text-theme-main tracking-tighter leading-none">
|
|||
|
|
АППАРАТНЫЙ<br/>
|
|||
|
|
<span className="text-theme-muted">КОНТРОЛЬ</span>
|
|||
|
|
</h3>
|
|||
|
|
<p className="text-theme-muted text-base md:text-lg mb-8 leading-relaxed font-light max-w-md">
|
|||
|
|
Интеллект Республики должен жить в её стенах. Стратегия цифрового суверенитета: отказ от аренды в пользу капитализации собственных активов. ЦОД станет "железным" сердцем Кампуса.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<motion.button
|
|||
|
|
onClick={handleDetailsClick}
|
|||
|
|
whileHover={{ x: 5 }}
|
|||
|
|
className="flex items-center gap-2 text-[#20e3b2] font-mono text-sm uppercase hover:underline underline-offset-4 w-fit"
|
|||
|
|
>
|
|||
|
|
<Info className="w-4 h-4" />
|
|||
|
|
Подробнее о мощностях
|
|||
|
|
</motion.button>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
<div className="w-full lg:w-1/2 space-y-4 flex flex-col justify-center">
|
|||
|
|
{[
|
|||
|
|
{ icon: Server, title: "Фундамент на десятилетие", desc: "Архитектура дата-центра будет спроектирована на годы вперед." },
|
|||
|
|
{ icon: ShieldCheck, title: "Контур Гостайны", desc: "Изолированный конвейер обработки данных по стандартам требованиий ФСТЭК." },
|
|||
|
|
{ icon: Cpu, title: "Суверенный Кремний", desc: "Формирование суверенного вычислительного кластера (HPC) в собственности Республики." }
|
|||
|
|
].map((item, idx) => (
|
|||
|
|
<motion.div
|
|||
|
|
key={idx}
|
|||
|
|
initial={{ opacity: 0, x: 50 }}
|
|||
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|||
|
|
viewport={{ once: true }}
|
|||
|
|
transition={{ delay: 0.2 + idx * 0.15, duration: 0.6, ease: [0.645, 0.045, 0.355, 1.000] }}
|
|||
|
|
whileHover={{ x: -10 }}
|
|||
|
|
className="flex items-start gap-4 md:gap-6 p-4 md:p-6 border-l border-theme bg-theme-card hover:bg-theme-card/80 hover:border-[#ff4b4b] transition-all duration-300 group cursor-default"
|
|||
|
|
>
|
|||
|
|
<div className="mt-1">
|
|||
|
|
<item.icon className="w-5 h-5 text-[#ff4b4b]" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h4 className="text-theme-main font-bold text-lg md:text-xl mb-1 font-mono uppercase">{item.title}</h4>
|
|||
|
|
<p className="text-theme-muted text-sm leading-relaxed">{item.desc}</p>
|
|||
|
|
</div>
|
|||
|
|
</motion.div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</SectionWrapper>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default Infrastructure;
|