From afcb9ba27b6f324bdfeaba93b96587833649ef3c Mon Sep 17 00:00:00 2001 From: albivkt Date: Sun, 6 Jul 2025 00:11:58 +0300 Subject: [PATCH] Enhance UXSoftware page with live metrics, interactive server map, and consultation modal. Implemented animations for UX improvements and added functionality for user input forms. Updated styles for better user experience. --- src/app/about/page.tsx | 833 +++++++++++++++++- src/app/components/InteractiveBlocks.tsx | 44 +- src/app/drweb/page.tsx | 998 +++++++++++++++++++-- src/app/electronics/page.tsx | 556 +++++++++--- src/app/globals.css | 324 +++++-- src/app/page.tsx | 517 ++++++++++- src/app/secure-t/documentation/page.tsx | 145 +++- src/app/secure-t/page.tsx | 1007 ++++++++++++++++++++-- src/app/solovey/page.tsx | 430 ++++++++- src/app/ux-software/page.tsx | 631 ++++++++++++-- 10 files changed, 5085 insertions(+), 400 deletions(-) diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 6860228..f5e3bea 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -1,6 +1,297 @@ +'use client'; + +import { useState, useEffect } from 'react'; import Navigation from '../components/Navigation'; export default function About() { + const [mounted, setMounted] = useState(false); + const [activeTimelineStep, setActiveTimelineStep] = useState(0); + const [teamMemberFlipped, setTeamMemberFlipped] = useState(null); + const [liveCounters, setLiveCounters] = useState({ + projects: 0, + clients: 0, + years: 0, + support: 0 + }); + const [workDaySimulation, setWorkDaySimulation] = useState({ + currentTime: '09:00', + currentActivity: 'Планирование задач', + teamStatus: 'active' + }); + const [floatingTechs, setFloatingTechs] = useState>([]); + const [competencyGraph, setCompetencyGraph] = useState({ + activeNode: null as string | null, + connections: [] as Array<{from: string, to: string}> + }); + const [backgroundParticles, setBackgroundParticles] = useState>([]); + const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); + + const timelineSteps = [ + { year: '2019', title: 'Основание компании', description: 'Начало деятельности в сфере разработки ПО', color: 'bg-green-500' }, + { year: '2020', title: 'Расширение услуг', description: 'Добавление поставки электроники и системной интеграции', color: 'bg-blue-500' }, + { year: '2021', title: 'Первые крупные проекты', description: 'Реализация комплексных IT-решений для бизнеса', color: 'bg-purple-500' }, + { year: '2022', title: 'Государственные контракты', description: 'Начало работы с госсектором по 44-ФЗ и 223-ФЗ', color: 'bg-amber-500' }, + { year: '2023', title: 'Собственные продукты', description: 'Запуск Соловей и других авторских решений', color: 'bg-cyan-500' }, + { year: '2024', title: 'Полный спектр услуг', description: 'Комплексный поставщик IT-решений и оборудования', color: 'bg-pink-500' } + ]; + + const teamMembers = [ + { + name: 'Александр Гундырев', + role: 'Основатель и CEO', + avatar: '👨‍💼', + skills: ['Стратегия', 'Управление', 'Бизнес-процессы'], + experience: '10+ лет', + projects: '200+', + description: 'Визионер компании, определяет стратегическое направление развития' + }, + { + name: 'Мария Петрова', + role: 'CTO', + avatar: '👩‍💻', + skills: ['Архитектура', 'DevOps', 'Команда'], + experience: '8+ лет', + projects: '150+', + description: 'Руководит техническим направлением и командой разработки' + }, + { + name: 'Дмитрий Козлов', + role: 'Lead Developer', + avatar: '👨‍💻', + skills: ['React', 'Node.js', 'Python'], + experience: '6+ лет', + projects: '100+', + description: 'Ведущий разработчик, эксперт по современным технологиям' + }, + { + name: 'Елена Смирнова', + role: 'Project Manager', + avatar: '👩‍💼', + skills: ['Agile', 'Scrum', 'Планирование'], + experience: '7+ лет', + projects: '80+', + description: 'Координирует проекты и обеспечивает качественную реализацию' + }, + { + name: 'Антон Васильев', + role: 'DevOps Engineer', + avatar: '👨‍🔧', + skills: ['Docker', 'Kubernetes', 'AWS'], + experience: '5+ лет', + projects: '60+', + description: 'Отвечает за инфраструктуру и автоматизацию процессов' + }, + { + name: 'Ольга Новикова', + role: 'UX/UI Designer', + avatar: '👩‍🎨', + skills: ['Figma', 'Prototyping', 'Research'], + experience: '4+ лет', + projects: '90+', + description: 'Создает интуитивные и красивые пользовательские интерфейсы' + } + ]; + + const technologies = [ + 'React', 'Node.js', 'Python', 'Docker', 'AWS', 'PostgreSQL', + 'TypeScript', 'Next.js', 'Kubernetes', 'Redis', 'GraphQL', 'MongoDB', + 'Vue.js', 'Express', 'Nginx', 'Linux', 'Git', 'Jenkins' + ]; + + const competencies = { + 'Frontend': ['React', 'Vue.js', 'TypeScript', 'Next.js'], + 'Backend': ['Node.js', 'Python', 'Express', 'GraphQL'], + 'Database': ['PostgreSQL', 'MongoDB', 'Redis'], + 'DevOps': ['Docker', 'Kubernetes', 'AWS', 'Jenkins'], + 'Infrastructure': ['Linux', 'Nginx', 'Git'] + }; + + const workDayActivities = [ + { time: '09:00', activity: 'Планирование задач', icon: '📋' }, + { time: '10:00', activity: 'Разработка', icon: '💻' }, + { time: '11:30', activity: 'Code Review', icon: '🔍' }, + { time: '13:00', activity: 'Обед', icon: '🍽️' }, + { time: '14:00', activity: 'Встреча с клиентом', icon: '🤝' }, + { time: '15:30', activity: 'Тестирование', icon: '🧪' }, + { time: '17:00', activity: 'Деплой', icon: '🚀' }, + { time: '18:00', activity: 'Планирование на завтра', icon: '📅' } + ]; + + // Автоматическое переключение временной шкалы + useEffect(() => { + const interval = setInterval(() => { + setActiveTimelineStep(prev => (prev + 1) % timelineSteps.length); + }, 3000); + return () => clearInterval(interval); + }, []); + + // Анимация счетчиков + useEffect(() => { + const targets = { projects: 500, clients: 150, years: 5, support: 24 }; + const duration = 2000; + const steps = 50; + const stepDuration = duration / steps; + + let currentStep = 0; + const interval = setInterval(() => { + currentStep++; + const progress = currentStep / steps; + + setLiveCounters({ + projects: Math.floor(targets.projects * progress), + clients: Math.floor(targets.clients * progress), + years: Math.floor(targets.years * progress), + support: Math.floor(targets.support * progress) + }); + + if (currentStep >= steps) { + clearInterval(interval); + } + }, stepDuration); + + return () => clearInterval(interval); + }, []); + + // Генерация плавающих технологий + useEffect(() => { + const techs = technologies.map((tech, i) => ({ + id: i, + tech, + x: `${10 + (i * 80) % 80}%`, + y: `${20 + (i * 60) % 60}%`, + delay: i * 0.5, + duration: 8 + (i % 4) + })); + setFloatingTechs(techs); + }, []); + + // Симуляция рабочего дня + useEffect(() => { + let activityIndex = 0; + const interval = setInterval(() => { + const activity = workDayActivities[activityIndex]; + setWorkDaySimulation({ + currentTime: activity.time, + currentActivity: activity.activity, + teamStatus: activity.time === '13:00' ? 'break' : 'active' + }); + activityIndex = (activityIndex + 1) % workDayActivities.length; + }, 4000); + + return () => clearInterval(interval); + }, []); + + // Инициализация монтирования + useEffect(() => { + setMounted(true); + }, []); + + const handleTeamMemberClick = (index: number) => { + setTeamMemberFlipped(teamMemberFlipped === index ? null : index); + }; + + const handleCompetencyClick = (competency: string) => { + setCompetencyGraph(prev => ({ + ...prev, + activeNode: prev.activeNode === competency ? null : competency + })); + }; + + // Генерация фоновых частиц (детерминированно) + useEffect(() => { + if (!mounted) return; + + const colors = ['#10b981', '#3b82f6', '#8b5cf6', '#f59e0b', '#ef4444', '#06b6d4']; + const particles = Array.from({ length: 50 }, (_, i) => ({ + id: i, + x: (i * 17 + 23) % 100, + y: (i * 31 + 47) % 100, + vx: ((i % 7) - 3) * 0.1, + vy: ((i % 5) - 2) * 0.1, + size: (i % 3) + 1, + color: colors[i % colors.length], + opacity: 0.3 + (i % 7) * 0.1 + })); + setBackgroundParticles(particles); + }, [mounted]); + + // Анимация частиц + useEffect(() => { + if (!mounted) return; + + const interval = setInterval(() => { + setBackgroundParticles(prev => prev.map(particle => { + let newX = particle.x + particle.vx; + let newY = particle.y + particle.vy; + let newVx = particle.vx; + let newVy = particle.vy; + + // Отскок от границ + if (newX <= 0 || newX >= 100) { + newVx = -newVx; + newX = newX <= 0 ? 0 : 100; + } + if (newY <= 0 || newY >= 100) { + newVy = -newVy; + newY = newY <= 0 ? 0 : 100; + } + + // Притяжение к курсору + const mouseInfluence = 0.02; + const screenWidth = typeof window !== 'undefined' ? window.innerWidth : 1920; + const screenHeight = typeof window !== 'undefined' ? window.innerHeight : 1080; + const dx = (mousePosition.x / screenWidth * 100) - newX; + const dy = (mousePosition.y / screenHeight * 100) - newY; + const distance = Math.sqrt(dx * dx + dy * dy); + + if (distance < 20) { + newVx += dx * mouseInfluence / distance; + newVy += dy * mouseInfluence / distance; + } + + return { + ...particle, + x: newX, + y: newY, + vx: newVx * 0.99, // Затухание + vy: newVy * 0.99 + }; + })); + }, 50); + + return () => clearInterval(interval); + }, [mounted, mousePosition]); + + // Отслеживание позиции мыши + useEffect(() => { + if (!mounted) return; + + const handleMouseMove = (e: MouseEvent) => { + setMousePosition({ x: e.clientX, y: e.clientY }); + }; + + if (typeof window !== 'undefined') { + window.addEventListener('mousemove', handleMouseMove); + return () => window.removeEventListener('mousemove', handleMouseMove); + } + }, [mounted]); + return ( <> @@ -8,6 +299,121 @@ export default function About() { {/* Hero Section */}
+ + {/* Интерактивный фон с частицами */} +
+ {/* Анимированная сетка */} +
+ + + + + + + + + + +
+ + {/* Волновые эффекты */} +
+ {[...Array(3)].map((_, i) => ( +
+ ))} +
+ + {/* Анимированные частицы */} + {mounted && backgroundParticles.map((particle) => ( +
+ ))} + + {/* Соединительные линии между близкими частицами */} + {mounted && ( + + {backgroundParticles.map((particle1, i) => + backgroundParticles.slice(i + 1).map((particle2, j) => { + const dx = particle1.x - particle2.x; + const dy = particle1.y - particle2.y; + const distance = Math.sqrt(dx * dx + dy * dy); + + if (distance < 15) { + return ( + + ); + } + return null; + }) + )} + + )} + + {/* Дополнительные световые эффекты */} +
+ {[...Array(5)].map((_, i) => ( +
+ ))} +
+
+ + {/* Плавающие технологии */} +
+ {floatingTechs.map((tech) => ( +
+ {tech.tech} +
+ ))} +
+
@@ -23,73 +429,410 @@ export default function About() {
- {/* Company Story */} -
+ {/* Интерактивное представление компании */} +
-
-
-

- Наша история -

-

- Компания GUNDYREV была основана с целью предоставления комплексных IT-решений, - которые действительно работают и приносят результат. Мы начинали как небольшая - команда разработчиков, а сегодня представляем собой многопрофильную IT-компанию - с широким спектром услуг. -

-

- За годы работы мы накопили огромный опыт в различных областях информационных - технологий — от разработки программного обеспечения до поставки сложного - электронного оборудования. Наш подход основан на глубоком понимании потребностей - клиентов и применении самых современных технологий. -

-

- Сегодня мы гордимся тем, что являемся надежным партнером как для частных - компаний, так и для государственных организаций, предоставляя им качественные - решения, которые помогают развивать их бизнес и повышать эффективность работы. -

+
+

+ Кто мы такие +

+

Познакомьтесь с GUNDYREV через интерактивную презентацию

+
+ +
+ {/* Анимированная схема компании */} +
+
+ {/* Центральный логотип */} +
+
+ G +
+
GUNDYREV
+
+ + {/* Орбитальные элементы услуг */} +
+ {[ + { name: 'Разработка ПО', icon: '💻', angle: 0, color: 'text-purple-400' }, + { name: 'Электроника', icon: '⚡', angle: 60, color: 'text-cyan-400' }, + { name: 'Соловей', icon: '🐦', angle: 120, color: 'text-amber-400' }, + { name: 'Secure-T', icon: '🛡️', angle: 180, color: 'text-red-400' }, + { name: 'Dr.Web', icon: '🔧', angle: 240, color: 'text-green-400' }, + { name: 'UX Софт', icon: '🎨', angle: 300, color: 'text-blue-400' } + ].map((service, index) => ( +
+ {service.icon} +
+ ))} +
+ + {/* Соединительные линии */} + + + + + + + +
+ {/* Интерактивная информация */}
-
-
+
+
- 2019 + 🎯
-

Основание компании

+

Наша миссия

-

Начало деятельности в сфере разработки ПО

+

+ Создавать технологические решения, которые действительно работают и приносят пользу нашим клиентам +

-
-
+
+
- 2020 + 🚀
-

Расширение услуг

+

Наше видение

-

Добавление поставки электроники и системной интеграции

+

+ Стать ведущей IT-компанией, которая помогает бизнесу развиваться с помощью современных технологий +

-
-
+
+
- 2022 + 💡
-

Государственные контракты

+

Наш подход

-

Начало работы с госсектором по 44-ФЗ и 223-ФЗ

+

+ Комплексный подход к решению задач — от анализа потребностей до постпроектной поддержки +

+
+
-
-
-
- 2024 + {/* Живая карта экспертизы */} +
+

+ Области нашей экспертизы +

+ +
+ {[ + { + category: 'Разработка', + skills: ['React', 'Node.js', 'Python', 'Mobile Apps'], + level: 95, + color: 'bg-purple-500', + icon: '🔧' + }, + { + category: 'Инфраструктура', + skills: ['AWS', 'Docker', 'Kubernetes', 'DevOps'], + level: 88, + color: 'bg-blue-500', + icon: '🏗️' + }, + { + category: 'Безопасность', + skills: ['Secure-T', 'Dr.Web', 'Защита данных'], + level: 92, + color: 'bg-red-500', + icon: '🛡️' + }, + { + category: 'Поставки', + skills: ['Электроника', 'Серверы', 'Госзакупки'], + level: 90, + color: 'bg-cyan-500', + icon: '📦' + }, + { + category: 'Консалтинг', + skills: ['Архитектура', 'Планирование', 'Оптимизация'], + level: 85, + color: 'bg-green-500', + icon: '💼' + }, + { + category: 'Поддержка', + skills: ['24/7', 'Мониторинг', 'Обслуживание'], + level: 97, + color: 'bg-amber-500', + icon: '🔧' + } + ].map((area, index) => ( +
+
+
+ {area.icon} +
+

{area.category}

+
+ +
+ {area.skills.map((skill, skillIndex) => ( +
• {skill}
+ ))} +
+ +
+
+ Экспертиза + {area.level}% +
+
+
+
+
+
+ ))} +
+
+
+
+ + {/* Интерактивная временная шкала */} +
+
+
+

+ Наша история +

+

Путь от стартапа до ведущей IT-компании

+
+ +
+ {/* Временная линия */} +
+ +
+ {timelineSteps.map((step, index) => ( +
+ {/* Точка на временной линии */} +
+ + {/* Карточка события */} +
+
+
+
+ {step.year} +
+

{step.title}

+
+

{step.description}

+
+
+
+ ))} +
+
+
+
+ + {/* 3D Команда */} +
+
+
+

+ Наша команда +

+

Профессионалы, которые создают будущее

+
+ +
+ {teamMembers.map((member, index) => ( +
handleTeamMemberClick(index)} + > +
+ + {/* Лицевая сторона */} +
+
{member.avatar}
+

{member.name}

+

{member.role}

+
Нажмите для подробностей
+
+ + {/* Обратная сторона */} +
+

{member.name}

+

{member.description}

+ +
+
+ Опыт: + {member.experience} +
+
+ Проекты: + {member.projects} +
+
+ +
+ {member.skills.map((skill, skillIndex) => ( + + {skill} + + ))} +
-

Полный спектр услуг

-

Комплексный поставщик IT-решений и оборудования

+ ))} +
+
+
+ + {/* Живые счетчики достижений */} +
+
+
+

+ Наши достижения +

+
+ +
+
+
+ {liveCounters.projects}+ +
+

Выполненных проектов

+
+
+
+
+ +
+
+ {liveCounters.clients}+ +
+

Довольных клиентов

+
+
+
+
+ +
+
+ {liveCounters.years}+ +
+

Лет на рынке

+
+
+
+
+ +
+
+ {liveCounters.support}/7 +
+

Техническая поддержка

+
+
+
+
+
+
+
+ + {/* Интерактивный граф компетенций */} +
+
+
+

+ Наши компетенции +

+

Технологии, которыми мы владеем

+
+ +
+
+ +
+ {Object.entries(competencies).map(([category, techs]) => ( +
+ + + {/* Связанные технологии */} + {competencyGraph.activeNode === category && ( +
+
+ {techs.map((tech, index) => ( + + {tech} + + ))} +
+
+ )} +
+ ))}
diff --git a/src/app/components/InteractiveBlocks.tsx b/src/app/components/InteractiveBlocks.tsx index 0c361ca..020b2e9 100644 --- a/src/app/components/InteractiveBlocks.tsx +++ b/src/app/components/InteractiveBlocks.tsx @@ -108,16 +108,34 @@ export default function InteractiveBlocks() { }, ]; - // Генерируем случайные начальные позиции для каждого блока - const getRandomInitialPosition = (index: number) => { - // Используем простую логику без зависимости от containerBounds + // Генерируем детерминированные начальные позиции для каждого блока + const getInitialPosition = (index: number) => { const screenWidth = typeof window !== 'undefined' ? window.innerWidth : 1200; const cardWidth = 288; // w-72 = 18rem = 288px - const safeZoneWidth = Math.max(400, screenWidth - cardWidth - 40); + const safeZoneWidth = Math.max(600, screenWidth - cardWidth - 80); + + // Детерминированные позиции на основе индекса - более разбросанные + const positions = [ + { x: 50, y: -300 }, + { x: 350, y: -650 }, + { x: 650, y: -450 }, + { x: 150, y: -800 }, + { x: 450, y: -350 }, + { x: 250, y: -550 } + ]; + + const basePos = positions[index % positions.length]; + + // Адаптируем позицию под ширину экрана + const adaptedX = Math.min(basePos.x, safeZoneWidth - 50); + const finalX = adaptedX + (index * 123) % (safeZoneWidth - adaptedX - 50); + + // Добавляем дополнительную высоту для каждого блока + const extraHeight = (index * 200) + ((index * 17) % 300); return { - x: 20 + Math.random() * (safeZoneWidth - 40), - y: -300 - (index * 150) - Math.random() * 200 + x: Math.max(20, Math.min(finalX, safeZoneWidth - 20)), + y: basePos.y - extraHeight }; }; @@ -133,7 +151,7 @@ export default function InteractiveBlocks() { {/* Падающие блоки */} {blocks.map((block, index) => { - const initialPos = getRandomInitialPosition(index); + const initialPos = getInitialPosition(index); return ( ))} - {/* Индикатор "земли" */} -
- -
); } \ No newline at end of file diff --git a/src/app/drweb/page.tsx b/src/app/drweb/page.tsx index 264073c..deda8f7 100644 --- a/src/app/drweb/page.tsx +++ b/src/app/drweb/page.tsx @@ -1,6 +1,281 @@ +'use client'; + import Navigation from '../components/Navigation'; +import { useState, useEffect } from 'react'; export default function DrWeb() { + // Добавляем стили для анимации + useEffect(() => { + const style = document.createElement('style'); + style.textContent = ` + @keyframes slide-in-right { + from { + transform: translateX(100%); + opacity: 0; + } + to { + transform: translateX(0); + opacity: 1; + } + } + .animate-slide-in-right { + animation: slide-in-right 0.5s ease-out; + } + @keyframes float-in { + from { + transform: scale(0) rotate(180deg); + opacity: 0; + } + to { + transform: scale(1) rotate(0deg); + opacity: 1; + } + } + .animate-float-in { + animation: float-in 0.6s ease-out; + } + @keyframes pulse-glow { + 0%, 100% { + box-shadow: 0 0 5px rgba(34, 197, 94, 0.5); + } + 50% { + box-shadow: 0 0 20px rgba(34, 197, 94, 0.8); + } + } + .animate-pulse-glow { + animation: pulse-glow 2s infinite; + } + @keyframes bounce-in { + 0% { + transform: translateY(100vh) scale(0.3); + opacity: 0; + } + 50% { + transform: translateY(-30px) scale(1.05); + } + 70% { + transform: translateY(10px) scale(0.95); + } + 100% { + transform: translateY(0) scale(1); + opacity: 1; + } + } + .animate-bounce-in { + animation: bounce-in 0.8s ease-out; + } + `; + document.head.appendChild(style); + return () => { + document.head.removeChild(style); + }; + }, []); + const [isProductsModalOpen, setIsProductsModalOpen] = useState(false); + const [isLicenseModalOpen, setIsLicenseModalOpen] = useState(false); + const [isConsultationModalOpen, setIsConsultationModalOpen] = useState(false); + const [licenseForm, setLicenseForm] = useState({ + name: '', + email: '', + company: '', + product: '', + licenses: '', + message: '' + }); + const [consultationForm, setConsultationForm] = useState({ + name: '', + email: '', + company: '', + message: '' + }); + + // Анимированная статистика + const [stats, setStats] = useState({ + threatsBlocked: 0, + devicesProtected: 0, + updatesDaily: 0, + yearsExperience: 0 + }); + + // Живые уведомления + const [notifications, setNotifications] = useState>([]); + const [notificationId, setNotificationId] = useState(0); + + // Дополнительные уведомления для разных частей экрана + const [floatingAlerts, setFloatingAlerts] = useState>([]); + const [alertId, setAlertId] = useState(0); + + + + // Анимация статистики + useEffect(() => { + const targets = { + threatsBlocked: 15420000, + devicesProtected: 2800000, + updatesDaily: 150000, + yearsExperience: 30 + }; + + const duration = 2000; // 2 секунды + const steps = 60; + const stepDuration = duration / steps; + + const intervals = Object.keys(targets).map(key => { + const targetValue = targets[key as keyof typeof targets]; + const increment = targetValue / steps; + let currentValue = 0; + let step = 0; + + return setInterval(() => { + if (step < steps) { + currentValue += increment; + setStats(prev => ({ + ...prev, + [key]: Math.floor(currentValue) + })); + step++; + } + }, stepDuration); + }); + + return () => intervals.forEach(interval => clearInterval(interval)); + }, []); + + // Живые уведомления + useEffect(() => { + const threatMessages = [ + 'Заблокирована попытка фишинга на drweb-user-2847', + 'Обнаружен троян на устройстве corp-laptop-156', + 'Предотвращена атака на почтовый сервер', + 'Заблокирован подозрительный URL-адрес', + 'Обновлены вирусные базы для 1,247 устройств', + 'Завершено сканирование сети компании', + 'Обнаружено и удалено вредоносное ПО' + ]; + + const addNotification = () => { + const message = threatMessages[Math.floor(Math.random() * threatMessages.length)]; + const types: Array<'threat' | 'update' | 'scan'> = ['threat', 'update', 'scan']; + const type = types[Math.floor(Math.random() * types.length)]; + + const newNotification = { + id: notificationId, + message, + type + }; + + setNotifications(prev => [newNotification, ...prev.slice(0, 4)]); + setNotificationId(prev => prev + 1); + + // Удаляем уведомление через 5 секунд + setTimeout(() => { + setNotifications(prev => prev.filter(n => n.id !== newNotification.id)); + }, 5000); + }; + + const interval = setInterval(addNotification, 3000); + return () => clearInterval(interval); + }, [notificationId]); + + // Плавающие алерты по всему экрану + useEffect(() => { + const floatingMessages = [ + { message: 'Система защищена', type: 'success' as const }, + { message: 'Подозрительная активность', type: 'warning' as const }, + { message: 'Обновление завершено', type: 'info' as const }, + { message: 'Угроза заблокирована', type: 'danger' as const }, + { message: 'Сканирование активно', type: 'info' as const }, + { message: 'Файрвол активен', type: 'success' as const }, + { message: 'Вирусные базы обновлены', type: 'info' as const } + ]; + + const positions: Array<'top-left' | 'bottom-left' | 'bottom-right' | 'center'> = + ['top-left', 'bottom-left', 'bottom-right', 'center']; + + const addFloatingAlert = () => { + const messageData = floatingMessages[Math.floor(Math.random() * floatingMessages.length)]; + const position = positions[Math.floor(Math.random() * positions.length)]; + + const newAlert = { + id: alertId, + ...messageData, + position, + x: Math.random() * 200 - 100, // Случайное смещение + y: Math.random() * 100 - 50 + }; + + setFloatingAlerts(prev => [newAlert, ...prev.slice(0, 6)]); + setAlertId(prev => prev + 1); + + // Удаляем через 4 секунды + setTimeout(() => { + setFloatingAlerts(prev => prev.filter(a => a.id !== newAlert.id)); + }, 4000); + }; + + const interval = setInterval(addFloatingAlert, 2000); + return () => clearInterval(interval); + }, [alertId]); + + + + const handleProductsClick = () => { + setIsProductsModalOpen(true); + document.body.style.overflow = 'hidden'; + }; + + const handleLicenseClick = () => { + setIsLicenseModalOpen(true); + document.body.style.overflow = 'hidden'; + }; + + const handleConsultationClick = () => { + setIsConsultationModalOpen(true); + document.body.style.overflow = 'hidden'; + }; + + const handleCloseModal = () => { + setIsProductsModalOpen(false); + setIsLicenseModalOpen(false); + setIsConsultationModalOpen(false); + document.body.style.overflow = 'unset'; + }; + + const handleLicenseInputChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setLicenseForm(prev => ({ + ...prev, + [name]: value + })); + }; + + const handleConsultationInputChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setConsultationForm(prev => ({ + ...prev, + [name]: value + })); + }; + + const handleLicenseSubmit = (e: React.FormEvent) => { + e.preventDefault(); + alert(`Спасибо за заявку, ${licenseForm.name}! Мы свяжемся с вами для оформления лицензии.`); + setLicenseForm({ name: '', email: '', company: '', product: '', licenses: '', message: '' }); + handleCloseModal(); + }; + + const handleConsultationSubmit = (e: React.FormEvent) => { + e.preventDefault(); + alert(`Спасибо за заявку, ${consultationForm.name}! Наш специалист свяжется с вами.`); + setConsultationForm({ name: '', email: '', company: '', message: '' }); + handleCloseModal(); + }; return ( <> @@ -26,16 +301,235 @@ export default function DrWeb() { Официальный партнер Dr.Web — надежная антивирусная защита для бизнеса и дома

- -
+ {/* Live Security Dashboard */} +
+ {/* Живые уведомления */} +
+ {notifications.map((notification) => ( +
+
+
+ {notification.type === 'threat' ? '🛡️' : + notification.type === 'update' ? '🔄' : '🔍'} +
+
+

{notification.message}

+

Только что

+
+
+
+ ))} +
+ + {/* Плавающие алерты в левом верхнем углу */} +
+ {floatingAlerts.filter(alert => alert.position === 'top-left').map((alert) => ( +
+
+
+ {alert.type === 'success' ? '✅' : + alert.type === 'warning' ? '⚠️' : + alert.type === 'info' ? 'ℹ️' : '❌'} +
+

{alert.message}

+
+
+ ))} +
+ + {/* Плавающие алерты в нижнем левом углу */} +
+ {floatingAlerts.filter(alert => alert.position === 'bottom-left').map((alert) => ( +
+
+
+ {alert.type === 'success' ? '✅' : + alert.type === 'warning' ? '⚠️' : + alert.type === 'info' ? 'ℹ️' : '❌'} +
+

{alert.message}

+
+
+ ))} +
+ + {/* Плавающие алерты в нижнем правом углу */} +
+ {floatingAlerts.filter(alert => alert.position === 'bottom-right').map((alert) => ( +
+
+
+ {alert.type === 'success' ? '✅' : + alert.type === 'warning' ? '⚠️' : + alert.type === 'info' ? 'ℹ️' : '❌'} +
+

{alert.message}

+
+
+ ))} +
+ +
+
+

+ Защита в реальном времени +

+

+ Dr.Web защищает миллионы устройств по всему миру каждую секунду +

+
+ + {/* Анимированная статистика */} +
+
+
🛡️
+
+ {stats.threatsBlocked.toLocaleString()}+ +
+

Угроз заблокировано

+
+
+
+
+ +
+
📱
+
+ {stats.devicesProtected.toLocaleString()}+ +
+

Устройств защищено

+
+
+
+
+ +
+
🔄
+
+ {stats.updatesDaily.toLocaleString()}+ +
+

Обновлений в день

+
+
+
+
+ +
+
🏆
+
+ {stats.yearsExperience}+ +
+

Лет опыта

+
+
+
+
+
+ + {/* Интерактивная карта угроз */} +
+

+ Глобальная карта угроз +

+
+ {/* Имитация карты мира */} +
+
🌍
+
+ + {/* Анимированные точки угроз */} +
+
+
+
+
+ + {/* Защищенные зоны */} +
+
+
+ +
+
+
+ Активные угрозы +
+
+
+ Защищенные зоны +
+
+
+ Мониторинг +
+
+
+
+
+ {/* Products Section */}
@@ -49,88 +543,151 @@ export default function DrWeb() {
-
-
🖥️
-

Dr.Web Security Space

+
+
🖥️
+

Dr.Web Security Space

Комплексная защита для домашних компьютеров и ноутбуков

-
    -
  • • Антивирус и антишпион
    • -
  • • Файрвол
    • -
  • • Антиспам
    • -
  • • Родительский контроль
    • +
      +
    • • Антивирус и антишпион
      • +
    • • Файрвол
      • +
    • • Антиспам
      • +
    • • Родительский контроль
    +
    + +
-
-
🏢
-

Dr.Web Enterprise Suite

+
+
🏢
+

Dr.Web Enterprise Suite

Корпоративное решение для защиты бизнеса

-
    -
  • • Централизованное управление
    • -
  • • Защита серверов
    • -
  • • Почтовая безопасность
    • -
  • • Мобильная защита
    • +
      +
    • • Централизованное управление
      • +
    • • Защита серверов
      • +
    • • Почтовая безопасность
      • +
    • • Мобильная защита
    +
    + +
-
-
📱
-

Dr.Web Mobile Security

+
+
📱
+

Dr.Web Mobile Security

Защита мобильных устройств Android и iOS

-
    -
  • • Антивирус для мобильных
    • -
  • • Антивор
    • -
  • • URL-фильтр
    • -
  • • Родительский контроль
    • +
      +
    • • Антивирус для мобильных
      • +
    • • Антивор
      • +
    • • URL-фильтр
      • +
    • • Родительский контроль
    +
    + +
-
-
🌐
-

Dr.Web Gateway Security

+
+
🌐
+

Dr.Web Gateway Security

Защита интернет-шлюзов и почтовых серверов

-
    -
  • • Фильтрация трафика
    • -
  • • Антиспам
    • -
  • • Контент-фильтр
    • -
  • • Защита от фишинга
    • +
      +
    • • Фильтрация трафика
      • +
    • • Антиспам
      • +
    • • Контент-фильтр
      • +
    • • Защита от фишинга
    +
    + +
-
-
☁️
-

Dr.Web Cloud

+
+
☁️
+

Dr.Web Cloud

Облачные решения безопасности

-
    -
  • • Облачная консоль
    • -
  • • Удаленное управление
    • -
  • • Автоматические обновления
    • -
  • • Масштабируемость
    • +
      +
    • • Облачная консоль
      • +
    • • Удаленное управление
      • +
    • • Автоматические обновления
      • +
    • • Масштабируемость
    +
    + +
-
-
🔧
-

Dr.Web CureIt!

+
+
🔧
+

Dr.Web CureIt!

Бесплатная утилита для лечения зараженных компьютеров

-
    -
  • • Не требует установки
    • -
  • • Быстрое сканирование
    • -
  • • Лечение вирусов
    • -
  • • Регулярные обновления
    • +
      +
    • • Не требует установки
      • +
    • • Быстрое сканирование
      • +
    • • Лечение вирусов
      • +
    • • Регулярные обновления
    +
    + +
@@ -266,10 +823,16 @@ export default function DrWeb() { Поможем выбрать и внедрить оптимальное решение Dr.Web для вашего бизнеса

- -
@@ -291,6 +854,337 @@ export default function DrWeb() {

+ + {/* Products Modal */} + {isProductsModalOpen && ( +
+
+ + +

Продукты Dr.Web

+ +
+
+

Dr.Web Security Space

+

Комплексная защита для дома

+
    +
  • • Антивирус и антишпион
    • +
  • • Файрвол и антиспам
    • +
  • • Родительский контроль
    • +
+ +
+ +
+

Dr.Web Enterprise Suite

+

Корпоративное решение

+
    +
  • • Централизованное управление
    • +
  • • Защита серверов
    • +
  • • Почтовая безопасность
    • +
+ +
+ +
+

Dr.Web Mobile Security

+

Защита мобильных устройств

+
    +
  • • Антивирус для мобильных
    • +
  • • Антивор и URL-фильтр
    • +
  • • Родительский контроль
    • +
+ +
+ +
+

Dr.Web Gateway Security

+

Защита интернет-шлюзов

+
    +
  • • Фильтрация трафика
    • +
  • • Антиспам и контент-фильтр
    • +
  • • Защита от фишинга
    • +
+ +
+
+ +
+ +
+
+
+ )} + + {/* License Modal */} + {isLicenseModalOpen && ( +
+
+ + +

Получить лицензию Dr.Web

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +