95 lines
5.0 KiB
TypeScript
Executable File
95 lines
5.0 KiB
TypeScript
Executable File
|
||
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;
|