Initial commit gov-llm-v2

components/Metrics.tsx

@@ -0,0 +1,108 @@
+
+import React from 'react';
+import SectionWrapper from './SectionWrapper';
+import { motion } from 'framer-motion';
+import { PieChart } from 'lucide-react';
+import { SectionProps } from '../types';
+
+const Metrics: React.FC<SectionProps> = ({ onOpenModal }) => {
+  const handleOpenReport = () => {
+      if (onOpenModal) {
+        onOpenModal({
+          title: 'Экономический Эффект',
+          type: 'article',
+          theme: 'light',
+          content: {
+            text: `Прогноз экономической эффективности внедрения Суверенной LLM к 2026 году:
+
+            1. **Оптимизация ФОТ**
+            Высвобождение до 30% рабочего времени сотрудников аппарата, занятых рутинной обработкой документов. Это эквивалентно экономии 1.2 млрд рублей в год.
+
+            2. **Импортозамещение ПО**
+            Отказ от зарубежных проприетарных решений (Microsoft 365 Copilot, Notion AI, Zoom AI) сохранит в бюджете порядка 400 млн рублей ежегодно.
+
+            3. **Ускорение процессов**
+            Сокращение сроков согласования НПА с 14 до 3 дней.
+            Ускорение обработки обращений граждан в 10 раз.
+
+            4. **Снижение ошибок**
+            Минимизация юридических рисков и штрафов за счет автоматической проверки документов на соответствие законодательству.`
+          }
+        });
+      }
+  };
+
+  return (
+    <SectionWrapper id="metrics" transitionEffect="sand">
+      <div className="max-w-7xl mx-auto px-6 md:px-12 w-full h-full flex flex-col justify-center items-center text-center">
+        
+        {/* Header Section */}
+        <div className="mb-12 md:mb-20 flex flex-col items-center z-10">
+          <div className="flex items-center gap-2 mb-4">
+               <div className="w-2 h-2 bg-[#ff4b4b]"></div>
+               <span className="text-[#ff4b4b] font-mono text-xs tracking-widest">05. ЭКОНОМИКА</span>
+          </div>
+          <h3 className="text-4xl md:text-6xl lg:text-7xl font-black text-theme-main tracking-tighter uppercase leading-none">
+            ЭФФЕКТ<br/><span className="text-theme-muted">ВНЕДРЕНИЯ</span>
+          </h3>
+            <p className="text-theme-muted text-lg mb-8 max-w-2xl">
+               <br/> Внедрение суверенной LLM — это конкретные экономические и управленческие метрики, которые должны быть достигнуты уже в среднесрочной перспективе.
+            </p>
+            
+            <button 
+                onClick={handleOpenReport}
+                className="inline-flex items-center gap-2 px-6 py-2 border border-theme text-theme-main hover:bg-theme-card transition-all rounded-full text-xs font-bold uppercase tracking-wide"
+            >
+                <PieChart className="w-4 h-4" />
+                Финансовая модель
+            </button>
+        </div>
+
+        {/* Metrics Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-12 w-full max-w-6xl z-10">
+          <MetricCard 
+              value="8X" 
+              label="Ускорение" 
+              desc="Сокращение рутины при подготовке НПА, анализе стенограмм и входящей корреспонденции." 
+              delay={0.2}
+          />
+          <MetricCard 
+              value="+15%" 
+              label="Эффективность" 
+              desc="Повышение исполнительской дисциплины по Нацпроектам." 
+              delay={0.4}
+          />
+          <MetricCard 
+              value="0₽" 
+              label="Стоимость Лицензий" 
+              desc="Полное импортозамещение. Бюджетные средства инвестируются в региональную IT-отрасль." 
+              delay={0.6}
+          />
+        </div>
+      </div>
+    </SectionWrapper>
+  );
+};
+
+const MetricCard: React.FC<{value: string, label: string, desc: string, delay: number}> = ({ value, label, desc, delay }) => (
+    <motion.div 
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ delay, duration: 0.6 }}
+        whileHover={{ y: -5 }}
+        className="flex flex-col items-center justify-start pt-8 pb-8 px-4 border-t border-theme hover:bg-theme-card/50 transition-colors duration-300 w-full"
+    >
+        <div className="text-6xl md:text-8xl font-black mb-6 text-theme-main group-hover:text-[#ff4b4b] transition-colors duration-300 tracking-tighter">
+            {value}
+        </div>
+        <div className="text-xs font-bold text-theme-main mb-3 font-mono uppercase tracking-widest border-b border-theme/20 pb-2 inline-block">
+            {label}
+        </div>
+        <div className="text-theme-muted text-sm md:text-base leading-relaxed max-w-[200px]">
+            {desc}
+        </div>
+    </motion.div>
+)
+
+export default Metrics;