166 lines
7.4 KiB
TypeScript
166 lines
7.4 KiB
TypeScript
|
|
|||
|
|
import React from 'react';
|
|||
|
|
import { motion } from 'framer-motion';
|
|||
|
|
import { SectionProps } from '../types';
|
|||
|
|
|
|||
|
|
const Hero: React.FC<SectionProps> = ({ id, onOpenModal }) => {
|
|||
|
|
// Grid config for the background animation
|
|||
|
|
const GRID_ROWS = 10;
|
|||
|
|
const GRID_COLS = 20;
|
|||
|
|
const dots = Array.from({ length: GRID_ROWS * GRID_COLS });
|
|||
|
|
const smoothEase: [number, number, number, number] = [0.645, 0.045, 0.355, 1.000];
|
|||
|
|
|
|||
|
|
const handleOpenSpecs = () => {
|
|||
|
|
if (onOpenModal) {
|
|||
|
|
onOpenModal({
|
|||
|
|
title: 'Спецификация Системы v2.5.0-RC',
|
|||
|
|
type: 'table',
|
|||
|
|
theme: 'dark',
|
|||
|
|
content: {
|
|||
|
|
headers: ['Параметр', 'Значение', 'Описание'],
|
|||
|
|
rows: [
|
|||
|
|
['Архитектура', 'Transformer++ (MoE)', 'Гибридная архитектура Mixture of Experts для оптимизации инференса'],
|
|||
|
|
['Параметры', '70B (Int8 Quantization)', 'Базовая модель, дообученная на закрытых датасетах РБ'],
|
|||
|
|
['Контекстное окно', '128k токенов', 'Позволяет анализировать объемные юридические документы целиком'],
|
|||
|
|
['Датасет', '50 лет архивов', 'Оцифрованные стенограммы заседаний, НПА, указы'],
|
|||
|
|
['Развертывание', 'On-Premise (Air-gapped)', 'Полная изоляция от глобальной сети интернет'],
|
|||
|
|
['Инференс', '20ms / token', 'Высокая скорость генерации на кластере H100']
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleLaunch = () => {
|
|||
|
|
if (onOpenModal) {
|
|||
|
|
onOpenModal({
|
|||
|
|
title: 'Запрос на развертывание',
|
|||
|
|
type: 'form',
|
|||
|
|
theme: 'dark',
|
|||
|
|
content: {
|
|||
|
|
text: 'Для запуска системы в вашем контуре требуется предварительное согласование архитектуры.'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<section id={id} className="h-[100dvh] w-full flex flex-col items-center justify-between relative overflow-hidden bg-theme-main text-center px-4 snap-start shrink-0 border-b border-theme py-20 md:py-24">
|
|||
|
|
|
|||
|
|
{/* Wipe Effect for Hero (Reveals on load) */}
|
|||
|
|
<motion.div
|
|||
|
|
className="absolute inset-0 z-50 bg-[#ff4b4b] pointer-events-none"
|
|||
|
|
initial={{ y: "0%" }}
|
|||
|
|
animate={{ y: "-100%" }}
|
|||
|
|
transition={{ duration: 0.8, ease: smoothEase, delay: 0.2 }}
|
|||
|
|
/>
|
|||
|
|
<motion.div
|
|||
|
|
className="absolute inset-0 z-40 bg-[#20e3b2] pointer-events-none"
|
|||
|
|
initial={{ y: "0%" }}
|
|||
|
|
animate={{ y: "-100%" }}
|
|||
|
|
transition={{ duration: 0.8, ease: smoothEase, delay: 0.3 }}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* Animated Grid Background */}
|
|||
|
|
<div className="absolute inset-0 flex items-center justify-center pointer-events-none opacity-20 overflow-hidden">
|
|||
|
|
<div
|
|||
|
|
className="grid gap-1"
|
|||
|
|
style={{ gridTemplateColumns: `repeat(${GRID_COLS}, 1fr)` }}
|
|||
|
|
>
|
|||
|
|
{dots.map((_, i) => (
|
|||
|
|
<motion.div
|
|||
|
|
key={i}
|
|||
|
|
initial={{ scale: 0, opacity: 0 }}
|
|||
|
|
animate={{
|
|||
|
|
scale: [0, 1, 0.5, 1],
|
|||
|
|
opacity: [0, 0.8, 0.2, 0.5],
|
|||
|
|
backgroundColor: Math.random() > 0.8 ? '#ff4b4b' : (Math.random() > 0.5 ? '#20e3b2' : '#333')
|
|||
|
|
}}
|
|||
|
|
transition={{
|
|||
|
|
duration: 3,
|
|||
|
|
repeat: Infinity,
|
|||
|
|
repeatType: "reverse",
|
|||
|
|
delay: Math.random() * 2,
|
|||
|
|
ease: "easeInOut"
|
|||
|
|
}}
|
|||
|
|
className="w-4 h-4 md:w-8 md:h-8 rounded-sm"
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex-1 flex flex-col justify-center items-center z-10 max-w-5xl mx-auto relative w-full mt-8 md:mt-0">
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0, scaleX: 0 }}
|
|||
|
|
animate={{ opacity: 1, scaleX: 1 }}
|
|||
|
|
transition={{ duration: 0.8, ease: "circOut", delay: 1 }}
|
|||
|
|
className="flex justify-center mb-4 md:mb-8"
|
|||
|
|
>
|
|||
|
|
<div className="px-4 py-2 border border-[#20e3b2] bg-[#20e3b2]/10 text-[#20e3b2] font-mono text-[10px] md:text-xs font-bold tracking-widest uppercase">
|
|||
|
|
Статус Системы: Онлайн
|
|||
|
|
</div>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
<div className="relative overflow-hidden">
|
|||
|
|
<motion.h1
|
|||
|
|
initial={{ y: "100%" }}
|
|||
|
|
animate={{ y: 0 }}
|
|||
|
|
transition={{ duration: 1.2, ease: smoothEase, delay: 0.8 }}
|
|||
|
|
className="text-[12vw] md:text-7xl lg:text-8xl xl:text-[8rem] font-black tracking-tighter text-theme-main leading-[0.85]"
|
|||
|
|
>
|
|||
|
|
СУВЕРЕННАЯ
|
|||
|
|
</motion.h1>
|
|||
|
|
</div>
|
|||
|
|
<div className="relative overflow-hidden mb-6 md:mb-10">
|
|||
|
|
<motion.h1
|
|||
|
|
initial={{ y: "100%" }}
|
|||
|
|
animate={{ y: 0 }}
|
|||
|
|
transition={{ duration: 1.2, delay: 0.9, ease: smoothEase }}
|
|||
|
|
className="text-[12vw] md:text-7xl lg:text-8xl xl:text-[8rem] font-black tracking-tighter text-[#ff4b4b] leading-[0.85]"
|
|||
|
|
>
|
|||
|
|
LLM СИСТЕМА
|
|||
|
|
</motion.h1>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0 }}
|
|||
|
|
animate={{ opacity: 1 }}
|
|||
|
|
transition={{ delay: 1.2, duration: 1 }}
|
|||
|
|
className="flex flex-col items-center w-full"
|
|||
|
|
>
|
|||
|
|
<p className="text-sm md:text-base text-theme-muted max-w-3xl mx-auto mb-8 font-mono px-4 leading-relaxed">
|
|||
|
|
<span className="text-theme-main">Башкортостан</span> создаст первый в России прецедент федерального масштаба: внедрения генеративного искусственного интеллекта в контур власти без рисков для национальной безопасности.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto px-6 sm:px-0">
|
|||
|
|
<button
|
|||
|
|
onClick={handleLaunch}
|
|||
|
|
className="w-full sm:w-auto px-6 py-4 bg-[#ff4b4b] text-white font-bold rounded-sm hover:bg-transparent hover:text-[#ff4b4b] border border-transparent hover:border-[#ff4b4b] transition-all duration-200 uppercase tracking-wider text-xs font-mono"
|
|||
|
|
>
|
|||
|
|
ЗАПУСТИТЬ
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={handleOpenSpecs}
|
|||
|
|
className="w-full sm:w-auto px-6 py-4 border border-theme text-theme-main font-bold rounded-sm hover:bg-theme-card transition-colors duration-200 uppercase tracking-wider text-xs font-mono"
|
|||
|
|
>
|
|||
|
|
СПЕЦИФИКАЦИИ
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</motion.div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<motion.div
|
|||
|
|
className="w-full flex justify-between px-6 md:px-10 font-mono text-[10px] md:text-xs text-theme-muted z-10 pb-4 md:pb-0"
|
|||
|
|
initial={{ opacity: 0 }}
|
|||
|
|
animate={{ opacity: 1 }}
|
|||
|
|
transition={{ delay: 2 }}
|
|||
|
|
>
|
|||
|
|
<span>ЛИСТАЙТЕ ВНИЗ</span>
|
|||
|
|
<span className="hidden md:inline">ВЕРСИЯ 2.5.0-RC</span>
|
|||
|
|
</motion.div>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default Hero;
|