BivekiGroup/gunderev
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor and enhance various components across the application. Updated global styles for improved animations and added new icons for better visual representation. Removed UX Software page and related references. Improved functionality in the Contacts, Electronics, and Secure-T pages with new icons and layout adjustments.

Browse Source
This commit is contained in:
albivkt
2025-08-13 15:44:34 +03:00
parent 89d65ccb43
commit 068077dd29
15 changed files with 592 additions and 1253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
src/app/about/page.tsx
View File

@ -2,6 +2,138 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import Navigation from '../components/Navigation'; import Navigation from '../components/Navigation';
import {
User,
Code,
UserCog,
Wrench,
Palette,
ClipboardList,
Monitor,
Utensils,
Handshake,
TestTube,
Rocket,
Calendar,
Briefcase,
Settings,
Users,
Building2,
Award,
Target,
Lightbulb,
Zap,
Star,
CheckCircle,
TrendingUp,
Globe,
Shield,
Database,
Server,
Cpu,
Network,
Smartphone,
Tablet,
Laptop,
Printer,
Camera,
Headphones,
Keyboard,
Mouse,
HardDrive,
Wifi,
Bluetooth,
Usb,
Power,
Battery,
Volume2,
Mic,
Video,
Phone,
Mail,
MapPin,
Clock,
DollarSign,
FileText,
Package,
Truck,
Home,
CheckSquare,
AlertCircle,
Info,
HelpCircle,
BookOpen,
GraduationCap,
Trophy,
Medal,
Crown,
Heart,
ThumbsUp,
MessageSquare,
PhoneCall,
MailOpen,
Send,
Download,
Upload,
Share2,
Link,
ExternalLink,
ArrowRight,
ArrowLeft,
ChevronRight,
ChevronLeft,
Plus,
Minus,
X,
Search,
Filter,
SortAsc,
SortDesc,
Eye,
EyeOff,
Lock,
Unlock,
Key,
CreditCard,
ShoppingCart,
ShoppingBag,
Tag,
Percent,
BarChart3,
PieChart,
LineChart,
Activity,
TrendingDown,
AlertTriangle,
XCircle,
Check,
Circle,
Square,
Triangle,
Hexagon,
Octagon,
Star as StarIcon,
Heart as HeartIcon,
Smile,
Frown,
Meh,
ThumbsDown,
GitBranch,
GitCommit,
GitMerge,
GitPullRequest,
Github,
Gitlab,
Chrome,
Apple,
Slack,
Facebook,
Twitter,
Instagram,
Linkedin,
Youtube,
Twitch
} from 'lucide-react';
export default function About() { export default function About() {
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
@ -55,7 +187,7 @@ export default function About() {
{ {
name: 'Александр Гундырев', name: 'Александр Гундырев',
role: 'Основатель и CEO', role: 'Основатель и CEO',
avatar: '👨‍💼', avatar: <User className="w-8 h-8" />,
skills: ['Стратегия', 'Управление', 'Бизнес-процессы'], skills: ['Стратегия', 'Управление', 'Бизнес-процессы'],
experience: '10+ лет', experience: '10+ лет',
projects: '200+', projects: '200+',
@ -64,7 +196,7 @@ export default function About() {
{ {
name: 'Мария Петрова', name: 'Мария Петрова',
role: 'CTO', role: 'CTO',
avatar: '👩‍💻', avatar: <Code className="w-8 h-8" />,
skills: ['Архитектура', 'DevOps', 'Команда'], skills: ['Архитектура', 'DevOps', 'Команда'],
experience: '8+ лет', experience: '8+ лет',
projects: '150+', projects: '150+',
@ -73,7 +205,7 @@ export default function About() {
{ {
name: 'Дмитрий Козлов', name: 'Дмитрий Козлов',
role: 'Lead Developer', role: 'Lead Developer',
avatar: '👨‍💻', avatar: <Monitor className="w-8 h-8" />,
skills: ['React', 'Node.js', 'Python'], skills: ['React', 'Node.js', 'Python'],
experience: '6+ лет', experience: '6+ лет',
projects: '100+', projects: '100+',
@ -82,7 +214,7 @@ export default function About() {
{ {
name: 'Елена Смирнова', name: 'Елена Смирнова',
role: 'Project Manager', role: 'Project Manager',
avatar: '👩‍💼', avatar: <UserCog className="w-8 h-8" />,
skills: ['Agile', 'Scrum', 'Планирование'], skills: ['Agile', 'Scrum', 'Планирование'],
experience: '7+ лет', experience: '7+ лет',
projects: '80+', projects: '80+',
@ -91,7 +223,7 @@ export default function About() {
{ {
name: 'Антон Васильев', name: 'Антон Васильев',
role: 'DevOps Engineer', role: 'DevOps Engineer',
avatar: '👨‍🔧', avatar: <Wrench className="w-8 h-8" />,
skills: ['Docker', 'Kubernetes', 'AWS'], skills: ['Docker', 'Kubernetes', 'AWS'],
experience: '5+ лет', experience: '5+ лет',
projects: '60+', projects: '60+',
@ -100,7 +232,7 @@ export default function About() {
{ {
name: 'Ольга Новикова', name: 'Ольга Новикова',
role: 'UX/UI Designer', role: 'UX/UI Designer',
avatar: '👩‍🎨', avatar: <Palette className="w-8 h-8" />,
skills: ['Figma', 'Prototyping', 'Research'], skills: ['Figma', 'Prototyping', 'Research'],
experience: '4+ лет', experience: '4+ лет',
projects: '90+', projects: '90+',
@ -123,14 +255,14 @@ export default function About() {
}; };
const workDayActivities = [ const workDayActivities = [
{ time: '09:00', activity: 'Планирование задач', icon: '📋' }, { time: '09:00', activity: 'Планирование задач', icon: <ClipboardList className="w-5 h-5" /> },
{ time: '10:00', activity: 'Разработка', icon: '💻' }, { time: '10:00', activity: 'Разработка', icon: <Monitor className="w-5 h-5" /> },
{ time: '11:30', activity: 'Code Review', icon: '🔍' }, { time: '11:30', activity: 'Code Review', icon: <Search className="w-5 h-5" /> },
{ time: '13:00', activity: 'Обед', icon: '🍽️' }, { time: '13:00', activity: 'Обед', icon: <Utensils className="w-5 h-5" /> },
{ time: '14:00', activity: 'Встреча с клиентом', icon: '🤝' }, { time: '14:00', activity: 'Встреча с клиентом', icon: <Handshake className="w-5 h-5" /> },
{ time: '15:30', activity: 'Тестирование', icon: '🧪' }, { time: '15:30', activity: 'Тестирование', icon: <TestTube className="w-5 h-5" /> },
{ time: '17:00', activity: 'Деплой', icon: '🚀' }, { time: '17:00', activity: 'Деплой', icon: <Rocket className="w-5 h-5" /> },
{ time: '18:00', activity: 'Планирование на завтра', icon: '📅' } { time: '18:00', activity: 'Планирование на завтра', icon: <Calendar className="w-5 h-5" /> }
]; ];
// Автоматическое переключение временной шкалы // Автоматическое переключение временной шкалы
@ -462,12 +594,12 @@ export default function About() {
{/* Орбитальные элементы услуг */} {/* Орбитальные элементы услуг */}
<div className="absolute inset-0"> <div className="absolute inset-0">
{[ {[
{ name: 'Разработка ПО', icon: '💻', angle: 0, color: 'text-purple-400' }, { name: 'Разработка ПО', icon: <Monitor className="w-6 h-6" />, angle: 0, color: 'text-purple-400' },
{ name: 'Электроника', icon: '⚡', angle: 60, color: 'text-cyan-400' }, { name: 'Электроника', icon: <Zap className="w-6 h-6" />, angle: 60, color: 'text-cyan-400' },
{ name: 'Соловей', icon: '🐦', angle: 120, color: 'text-amber-400' }, { name: 'Соловей', icon: <Star className="w-6 h-6" />, angle: 120, color: 'text-amber-400' },
{ name: 'Secure-T', icon: '🛡️', angle: 180, color: 'text-red-400' }, { name: 'Secure-T', icon: <Shield className="w-6 h-6" />, angle: 180, color: 'text-red-400' },
{ name: 'Dr.Web', icon: '🔧', angle: 240, color: 'text-green-400' }, { name: 'Dr.Web', icon: <Wrench className="w-6 h-6" />, angle: 240, color: 'text-green-400' },
{ name: 'UX Софт', icon: '🎨', angle: 300, color: 'text-blue-400' } { name: 'UX Софт', icon: <Palette className="w-6 h-6" />, angle: 300, color: 'text-blue-400' }
].map((service, index) => ( ].map((service, index) => (
<div <div
key={index} key={index}
@ -479,7 +611,7 @@ export default function About() {
}} }}
title={service.name} title={service.name}
> >
<span className={`text-xl ${service.color}`}>{service.icon}</span> <div className={`${service.color}`}>{service.icon}</div>
</div> </div>
))} ))}
</div> </div>
@ -500,7 +632,7 @@ export default function About() {
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="flex items-center gap-4 mb-4"> <div className="flex items-center gap-4 mb-4">
<div className="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center"> <div className="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center">
<span className="text-white font-bold">🎯</span> <Target className="w-6 h-6 text-white" />
</div> </div>
<h3 className="text-xl font-bold">Наша миссия</h3> <h3 className="text-xl font-bold">Наша миссия</h3>
</div> </div>
@ -512,7 +644,7 @@ export default function About() {
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="flex items-center gap-4 mb-4"> <div className="flex items-center gap-4 mb-4">
<div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center"> <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center">
<span className="text-white font-bold">🚀</span> <Rocket className="w-6 h-6 text-white" />
</div> </div>
<h3 className="text-xl font-bold">Наше видение</h3> <h3 className="text-xl font-bold">Наше видение</h3>
</div> </div>
@ -524,7 +656,7 @@ export default function About() {
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="flex items-center gap-4 mb-4"> <div className="flex items-center gap-4 mb-4">
<div className="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center"> <div className="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center">
<span className="text-white font-bold">💡</span> <Lightbulb className="w-6 h-6 text-white" />
</div> </div>
<h3 className="text-xl font-bold">Наш подход</h3> <h3 className="text-xl font-bold">Наш подход</h3>
</div> </div>
@ -548,48 +680,48 @@ export default function About() {
skills: ['React', 'Node.js', 'Python', 'Mobile Apps'], skills: ['React', 'Node.js', 'Python', 'Mobile Apps'],
level: 95, level: 95,
color: 'bg-purple-500', color: 'bg-purple-500',
icon: '🔧' icon: <Wrench className="w-5 h-5" />
}, },
{ {
category: 'Инфраструктура', category: 'Инфраструктура',
skills: ['AWS', 'Docker', 'Kubernetes', 'DevOps'], skills: ['AWS', 'Docker', 'Kubernetes', 'DevOps'],
level: 88, level: 88,
color: 'bg-blue-500', color: 'bg-blue-500',
icon: '🏗️' icon: <Building2 className="w-5 h-5" />
}, },
{ {
category: 'Безопасность', category: 'Безопасность',
skills: ['Secure-T', 'Dr.Web', 'Защита данных'], skills: ['Secure-T', 'Dr.Web', 'Защита данных'],
level: 92, level: 92,
color: 'bg-red-500', color: 'bg-red-500',
icon: '🛡️' icon: <Shield className="w-5 h-5" />
}, },
{ {
category: 'Поставки', category: 'Поставки',
skills: ['Электроника', 'Серверы', 'Госзакупки'], skills: ['Электроника', 'Серверы', 'Госзакупки'],
level: 90, level: 90,
color: 'bg-cyan-500', color: 'bg-cyan-500',
icon: '📦' icon: <Package className="w-5 h-5" />
}, },
{ {
category: 'Консалтинг', category: 'Консалтинг',
skills: ['Архитектура', 'Планирование', 'Оптимизация'], skills: ['Архитектура', 'Планирование', 'Оптимизация'],
level: 85, level: 85,
color: 'bg-green-500', color: 'bg-green-500',
icon: '💼' icon: <Briefcase className="w-5 h-5" />
}, },
{ {
category: 'Поддержка', category: 'Поддержка',
skills: ['24/7', 'Мониторинг', 'Обслуживание'], skills: ['24/7', 'Мониторинг', 'Обслуживание'],
level: 97, level: 97,
color: 'bg-amber-500', color: 'bg-amber-500',
icon: '🔧' icon: <Settings className="w-5 h-5" />
} }
].map((area, index) => ( ].map((area, index) => (
<div key={index} className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 transform hover:scale-105"> <div key={index} className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 transform hover:scale-105">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<div className={`w-10 h-10 ${area.color} rounded-full flex items-center justify-center`}> <div className={`w-10 h-10 ${area.color} rounded-full flex items-center justify-center`}>
<span className="text-white">{area.icon}</span> <div className="text-white">{area.icon}</div>
</div> </div>
<h4 className="text-lg font-bold">{area.category}</h4> <h4 className="text-lg font-bold">{area.category}</h4>
</div> </div>
@ -869,7 +1001,7 @@ export default function About() {
<div className="grid md:grid-cols-3 gap-8 mb-16"> <div className="grid md:grid-cols-3 gap-8 mb-16">
<div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300">
<div className="text-green-400 text-4xl mb-4">🎯</div> <div className="text-green-400 text-4xl mb-4 flex justify-center"><Target className="w-12 h-12" /></div>
<h3 className="text-xl font-bold mb-4">Результативность</h3> <h3 className="text-xl font-bold mb-4">Результативность</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Мы ориентированы на достижение конкретных результатов и решение реальных задач бизнеса Мы ориентированы на достижение конкретных результатов и решение реальных задач бизнеса
@ -877,7 +1009,7 @@ export default function About() {
</div> </div>
<div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300">
<div className="text-blue-400 text-4xl mb-4">🔧</div> <div className="text-blue-400 text-4xl mb-4 flex justify-center"><Wrench className="w-12 h-12" /></div>
<h3 className="text-xl font-bold mb-4">Профессионализм</h3> <h3 className="text-xl font-bold mb-4">Профессионализм</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Высокая экспертиза и постоянное развитие компетенций в области IT-технологий Высокая экспертиза и постоянное развитие компетенций в области IT-технологий
@ -885,7 +1017,7 @@ export default function About() {
</div> </div>
<div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300">
<div className="text-purple-400 text-4xl mb-4">🤝</div> <div className="text-purple-400 text-4xl mb-4 flex justify-center"><Handshake className="w-12 h-12" /></div>
<h3 className="text-xl font-bold mb-4">Партнерство</h3> <h3 className="text-xl font-bold mb-4">Партнерство</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Долгосрочные отношения с клиентами, основанные на взаимном доверии и понимании Долгосрочные отношения с клиентами, основанные на взаимном доверии и понимании
@ -893,7 +1025,7 @@ export default function About() {
</div> </div>
<div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300">
<div className="text-yellow-400 text-4xl mb-4">⚡</div> <div className="text-yellow-400 text-4xl mb-4 flex justify-center"><Zap className="w-12 h-12" /></div>
<h3 className="text-xl font-bold mb-4">Инновации</h3> <h3 className="text-xl font-bold mb-4">Инновации</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Использование передовых технологий и современных подходов к решению задач Использование передовых технологий и современных подходов к решению задач
@ -901,7 +1033,7 @@ export default function About() {
</div> </div>
<div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300">
<div className="text-red-400 text-4xl mb-4">🛡️</div> <div className="text-red-400 text-4xl mb-4 flex justify-center"><Shield className="w-12 h-12" /></div>
<h3 className="text-xl font-bold mb-4">Надежность</h3> <h3 className="text-xl font-bold mb-4">Надежность</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Гарантированное качество услуг и соблюдение всех договорных обязательств Гарантированное качество услуг и соблюдение всех договорных обязательств
@ -909,7 +1041,7 @@ export default function About() {
</div> </div>
<div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300">
<div className="text-cyan-400 text-4xl mb-4">📈</div> <div className="text-cyan-400 text-4xl mb-4 flex justify-center"><TrendingUp className="w-12 h-12" /></div>
<h3 className="text-xl font-bold mb-4">Развитие</h3> <h3 className="text-xl font-bold mb-4">Развитие</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Постоянное совершенствование процессов и расширение спектра предоставляемых услуг Постоянное совершенствование процессов и расширение спектра предоставляемых услуг
@ -943,7 +1075,7 @@ export default function About() {
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-purple-400 text-3xl mb-4">💻</div> <div className="text-purple-400 text-3xl mb-4 flex justify-center"><Monitor className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">Разработка ПО</h4> <h4 className="text-lg font-bold mb-3">Разработка ПО</h4>
<p className="text-gray-300 text-sm mb-4"> <p className="text-gray-300 text-sm mb-4">
Веб-приложения, мобильные приложения, десктопные программы Веб-приложения, мобильные приложения, десктопные программы
@ -954,7 +1086,7 @@ export default function About() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-cyan-400 text-3xl mb-4">⚡</div> <div className="text-cyan-400 text-3xl mb-4 flex justify-center"><Zap className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">Поставка электроники</h4> <h4 className="text-lg font-bold mb-3">Поставка электроники</h4>
<p className="text-gray-300 text-sm mb-4"> <p className="text-gray-300 text-sm mb-4">
От аксессуаров до серверного оборудования, работа с госзакупками От аксессуаров до серверного оборудования, работа с госзакупками
@ -964,19 +1096,10 @@ export default function About() {
</a> </a>
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-blue-400 text-3xl mb-4">🔒</div>
<h4 className="text-lg font-bold mb-3">UX Софт</h4>
<p className="text-gray-300 text-sm mb-4">
Программное обеспечение для улучшения пользовательского опыта
</p>
<a href="/ux-software" className="text-blue-400 hover:text-blue-300 text-sm font-medium">
Подробнее →
</a>
</div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-amber-400 text-3xl mb-4">🐦</div> <div className="text-amber-400 text-3xl mb-4 flex justify-center"><Star className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">Соловей</h4> <h4 className="text-lg font-bold mb-3">Соловей</h4>
<p className="text-gray-300 text-sm mb-4"> <p className="text-gray-300 text-sm mb-4">
Платформа видеосвязи на поддомене заказчика Платформа видеосвязи на поддомене заказчика
@ -987,7 +1110,7 @@ export default function About() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-red-400 text-3xl mb-4">🛡️</div> <div className="text-red-400 text-3xl mb-4 flex justify-center"><Shield className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">Secure-T</h4> <h4 className="text-lg font-bold mb-3">Secure-T</h4>
<p className="text-gray-300 text-sm mb-4"> <p className="text-gray-300 text-sm mb-4">
Решения информационной безопасности и защиты данных Решения информационной безопасности и защиты данных
@ -998,7 +1121,7 @@ export default function About() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-green-400 text-3xl mb-4">🔧</div> <div className="text-green-400 text-3xl mb-4 flex justify-center"><Wrench className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">Dr.Web</h4> <h4 className="text-lg font-bold mb-3">Dr.Web</h4>
<p className="text-gray-300 text-sm mb-4"> <p className="text-gray-300 text-sm mb-4">
Официальный партнер Dr.Web, антивирусные решения Официальный партнер Dr.Web, антивирусные решения
@ -1009,7 +1132,7 @@ export default function About() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-yellow-400 text-3xl mb-4">🏢</div> <div className="text-yellow-400 text-3xl mb-4 flex justify-center"><Building2 className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">B2B решения</h4> <h4 className="text-lg font-bold mb-3">B2B решения</h4>
<p className="text-gray-300 text-sm mb-4"> <p className="text-gray-300 text-sm mb-4">
Корпоративные поставки и индивидуальные условия Корпоративные поставки и индивидуальные условия
@ -1018,7 +1141,7 @@ export default function About() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-pink-400 text-3xl mb-4">🏛️</div> <div className="text-pink-400 text-3xl mb-4 flex justify-center"><Award className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">B2G решения</h4> <h4 className="text-lg font-bold mb-3">B2G решения</h4>
<p className="text-gray-300 text-sm mb-4"> <p className="text-gray-300 text-sm mb-4">
Работа с государственными организациями по 44-ФЗ и 223-ФЗ Работа с государственными организациями по 44-ФЗ и 223-ФЗ

8
src/app/components/ContactModal.tsx
View File

@ -1,14 +1,13 @@
'use client'; 'use client';
import { useState, useEffect } from 'react'; import { useState } from 'react';
import { import {
MessageCircle, MessageCircle,
Briefcase, Briefcase,
Settings, Settings,
Lightbulb, Lightbulb,
Phone, Phone,
Mail, Mail
X
} from 'lucide-react'; } from 'lucide-react';
export interface ContactModalProps { export interface ContactModalProps {
@ -27,8 +26,7 @@ export default function ContactModal({ isOpen, onClose, defaultType = 'general',
type: defaultType, type: defaultType,
message: '' message: ''
}); });
const [isSubmitting, setIsSubmitting] = useState(false);
const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
const contactTypes = [ const contactTypes = [
{ id: 'general', label: 'Общие вопросы', icon: <MessageCircle className="w-5 h-5" /> }, { id: 'general', label: 'Общие вопросы', icon: <MessageCircle className="w-5 h-5" /> },

6
src/app/components/Footer.tsx
View File

@ -56,11 +56,7 @@ export default function Footer() {
Поставка электроники Поставка электроники
</a> </a>
</li> </li>
<li>
<a href="/ux-software" className="text-gray-300 hover:text-white transition-colors">
UX-софт
</a>
</li>
<li> <li>
<a href="/secure-t" className="text-gray-300 hover:text-white transition-colors"> <a href="/secure-t" className="text-gray-300 hover:text-white transition-colors">
Информационная безопасность Информационная безопасность

16
src/app/components/InteractiveBlocks.tsx
View File

@ -81,16 +81,9 @@ export default function InteractiveBlocks() {
color: "from-cyan-500 to-teal-500", color: "from-cyan-500 to-teal-500",
link: "/electronics", link: "/electronics",
}, },
{ {
id: 3, id: 3,
title: "UX Софт",
description: "Улучшение пользовательского опыта",
icon: <Shield className="w-10 h-10" />,
color: "from-blue-500 to-purple-500",
link: "/ux-software",
},
{
id: 4,
title: "Соловей", title: "Соловей",
description: "Платформа видеосвязи", description: "Платформа видеосвязи",
icon: <Bird className="w-10 h-10" />, icon: <Bird className="w-10 h-10" />,
@ -98,7 +91,7 @@ export default function InteractiveBlocks() {
link: "/solovey", link: "/solovey",
}, },
{ {
id: 5, id: 4,
title: "Secure-T", title: "Secure-T",
description: "Информационная безопасность", description: "Информационная безопасность",
icon: <Shield className="w-10 h-10" />, icon: <Shield className="w-10 h-10" />,
@ -106,7 +99,7 @@ export default function InteractiveBlocks() {
link: "/secure-t", link: "/secure-t",
}, },
{ {
id: 6, id: 5,
title: "Dr.Web", title: "Dr.Web",
description: "Антивирусные решения", description: "Антивирусные решения",
icon: <Settings className="w-10 h-10" />, icon: <Settings className="w-10 h-10" />,
@ -127,8 +120,7 @@ export default function InteractiveBlocks() {
{ x: 350, y: -650 }, { x: 350, y: -650 },
{ x: 650, y: -450 }, { x: 650, y: -450 },
{ x: 150, y: -800 }, { x: 150, y: -800 },
{ x: 450, y: -350 }, { x: 450, y: -350 }
{ x: 250, y: -550 }
]; ];
const basePos = positions[index % positions.length]; const basePos = positions[index % positions.length];

1
src/app/components/Navigation.tsx
View File

@ -25,7 +25,6 @@ export default function Navigation() {
{ {
category: 'Безопасность', category: 'Безопасность',
items: [ items: [
{ href: '/ux-software', label: 'UX-софт', description: 'Улучшение пользовательского опыта', icon: <Shield className="w-5 h-5" /> },
{ href: '/secure-t', label: 'Secure-T', description: 'Комплексная защита', icon: <Shield className="w-5 h-5" /> }, { href: '/secure-t', label: 'Secure-T', description: 'Комплексная защита', icon: <Shield className="w-5 h-5" /> },
{ href: '/drweb', label: 'Dr.Web', description: 'Антивирусная защита', icon: <Settings className="w-5 h-5" /> }, { href: '/drweb', label: 'Dr.Web', description: 'Антивирусная защита', icon: <Settings className="w-5 h-5" /> },
] ]

114
src/app/contacts/page.tsx
View File

@ -2,6 +2,44 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import Navigation from '../components/Navigation'; import Navigation from '../components/Navigation';
import {
MessageSquare,
Briefcase,
Wrench,
Handshake,
Phone,
Mail,
MapPin,
Globe,
Smartphone,
Monitor,
ClipboardList,
CheckCircle,
XCircle,
AlertTriangle,
Info,
Search,
Send,
Download,
RefreshCw,
Clock,
Calendar,
Target,
Lightbulb,
Rocket,
Star,
Gem,
Palette,
Sparkles,
Zap,
Droplets,
Waves,
Rainbow,
Sun,
Moon,
User,
BarChart3
} from 'lucide-react';
export default function Contacts() { export default function Contacts() {
const [isFormOpen, setIsFormOpen] = useState(false); const [isFormOpen, setIsFormOpen] = useState(false);
@ -69,10 +107,10 @@ export default function Contacts() {
}; };
const contactTypes = [ const contactTypes = [
{ id: 'general', label: 'Общие вопросы', icon: '💬' }, { id: 'general', label: 'Общие вопросы', icon: <MessageSquare className="w-5 h-5" /> },
{ id: 'sales', label: 'Отдел продаж', icon: '💼' }, { id: 'sales', label: 'Отдел продаж', icon: <Briefcase className="w-5 h-5" /> },
{ id: 'support', label: 'Техподдержка', icon: '🔧' }, { id: 'support', label: 'Техподдержка', icon: <Wrench className="w-5 h-5" /> },
{ id: 'partnership', label: 'Партнёрство', icon: '🤝' } { id: 'partnership', label: 'Партнёрство', icon: <Handshake className="w-5 h-5" /> }
]; ];
return ( return (
@ -105,7 +143,7 @@ export default function Contacts() {
onMouseEnter={() => setHoveredCard('phone')} onMouseEnter={() => setHoveredCard('phone')}
onMouseLeave={() => setHoveredCard(null)} onMouseLeave={() => setHoveredCard(null)}
> >
<div className="text-4xl mb-4">📞</div> <div className="text-4xl mb-4 flex justify-center"><Phone className="w-12 h-12" /></div>
<h3 className="text-xl font-bold mb-2">Телефон</h3> <h3 className="text-xl font-bold mb-2">Телефон</h3>
<p className="text-gray-300">+7 (495) 123-45-67</p> <p className="text-gray-300">+7 (495) 123-45-67</p>
{copySuccess === 'phone' && ( {copySuccess === 'phone' && (
@ -122,7 +160,7 @@ export default function Contacts() {
onMouseEnter={() => setHoveredCard('email')} onMouseEnter={() => setHoveredCard('email')}
onMouseLeave={() => setHoveredCard(null)} onMouseLeave={() => setHoveredCard(null)}
> >
<div className="text-4xl mb-4">📧</div> <div className="text-4xl mb-4 flex justify-center"><Mail className="w-12 h-12" /></div>
<h3 className="text-xl font-bold mb-2">Email</h3> <h3 className="text-xl font-bold mb-2">Email</h3>
<p className="text-gray-300">info@gundyrev.ru</p> <p className="text-gray-300">info@gundyrev.ru</p>
{copySuccess === 'email' && ( {copySuccess === 'email' && (
@ -134,7 +172,7 @@ export default function Contacts() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 animate-slide-in-up"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 animate-slide-in-up">
<div className="text-4xl mb-4">🕒</div> <div className="text-4xl mb-4 flex justify-center"><Clock className="w-12 h-12" /></div>
<h3 className="text-xl font-bold mb-2">Режим работы</h3> <h3 className="text-xl font-bold mb-2">Режим работы</h3>
<p className="text-gray-300">Пн-Пт: 9:00-18:00</p> <p className="text-gray-300">Пн-Пт: 9:00-18:00</p>
<p className="text-gray-400 text-sm mt-1">МСК</p> <p className="text-gray-400 text-sm mt-1">МСК</p>
@ -169,74 +207,74 @@ export default function Contacts() {
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="flex items-center mb-4"> <div className="flex items-center mb-4">
<span className="text-2xl mr-3">💼</span> <Briefcase className="w-6 h-6 mr-3" />
<h4 className="text-xl font-bold">Отдел продаж</h4> <h4 className="text-xl font-bold">Отдел продаж</h4>
</div> </div>
<div className="space-y-2 text-gray-300"> <div className="space-y-2 text-gray-300">
<p>📞 +7 (495) 123-45-67 доб. 101</p> <p className="flex items-center"><Phone className="w-4 h-4 mr-2" /> +7 (495) 123-45-67 доб. 101</p>
<p <p
className="cursor-pointer hover:text-white transition-colors" className="cursor-pointer hover:text-white transition-colors flex items-center"
onClick={() => copyToClipboard('sales@gundyrev.ru', 'sales-email')} onClick={() => copyToClipboard('sales@gundyrev.ru', 'sales-email')}
> >
📧 sales@gundyrev.ru <Mail className="w-4 h-4 mr-2" /> sales@gundyrev.ru
{copySuccess === 'sales-email' && <span className="text-green-400 ml-2">✓</span>} {copySuccess === 'sales-email' && <CheckCircle className="w-4 h-4 ml-2 text-green-400" />}
</p> </p>
<p>👤 Менеджер: Иван Петров</p> <p className="flex items-center"><User className="w-4 h-4 mr-2" /> Менеджер: Иван Петров</p>
</div> </div>
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="flex items-center mb-4"> <div className="flex items-center mb-4">
<span className="text-2xl mr-3">🔧</span> <Wrench className="w-6 h-6 mr-3" />
<h4 className="text-xl font-bold">Техническая поддержка</h4> <h4 className="text-xl font-bold">Техническая поддержка</h4>
</div> </div>
<div className="space-y-2 text-gray-300"> <div className="space-y-2 text-gray-300">
<p>📞 +7 (495) 123-45-67 доб. 102</p> <p className="flex items-center"><Phone className="w-4 h-4 mr-2" /> +7 (495) 123-45-67 доб. 102</p>
<p <p
className="cursor-pointer hover:text-white transition-colors" className="cursor-pointer hover:text-white transition-colors flex items-center"
onClick={() => copyToClipboard('support@gundyrev.ru', 'support-email')} onClick={() => copyToClipboard('support@gundyrev.ru', 'support-email')}
> >
📧 support@gundyrev.ru <Mail className="w-4 h-4 mr-2" /> support@gundyrev.ru
{copySuccess === 'support-email' && <span className="text-green-400 ml-2">✓</span>} {copySuccess === 'support-email' && <CheckCircle className="w-4 h-4 ml-2 text-green-400" />}
</p> </p>
<p>⏰ 24/7 для критических задач</p> <p className="flex items-center"><Clock className="w-4 h-4 mr-2" /> 24/7 для критических задач</p>
</div> </div>
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="flex items-center mb-4"> <div className="flex items-center mb-4">
<span className="text-2xl mr-3">📊</span> <BarChart3 className="w-6 h-6 mr-3" />
<h4 className="text-xl font-bold">Бухгалтерия</h4> <h4 className="text-xl font-bold">Бухгалтерия</h4>
</div> </div>
<div className="space-y-2 text-gray-300"> <div className="space-y-2 text-gray-300">
<p>📞 +7 (495) 123-45-67 доб. 103</p> <p className="flex items-center"><Phone className="w-4 h-4 mr-2" /> +7 (495) 123-45-67 доб. 103</p>
<p <p
className="cursor-pointer hover:text-white transition-colors" className="cursor-pointer hover:text-white transition-colors flex items-center"
onClick={() => copyToClipboard('accounting@gundyrev.ru', 'accounting-email')} onClick={() => copyToClipboard('accounting@gundyrev.ru', 'accounting-email')}
> >
📧 accounting@gundyrev.ru <Mail className="w-4 h-4 mr-2" /> accounting@gundyrev.ru
{copySuccess === 'accounting-email' && <span className="text-green-400 ml-2">✓</span>} {copySuccess === 'accounting-email' && <CheckCircle className="w-4 h-4 ml-2 text-green-400" />}
</p> </p>
<p>👤 Главный бухгалтер: Елена Сидорова</p> <p className="flex items-center"><User className="w-4 h-4 mr-2" /> Главный бухгалтер: Елена Сидорова</p>
<p>⏰ Пн-Пт: 9:00-17:00</p> <p className="flex items-center"><Clock className="w-4 h-4 mr-2" /> Пн-Пт: 9:00-17:00</p>
</div> </div>
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="flex items-center mb-4"> <div className="flex items-center mb-4">
<span className="text-2xl mr-3">🤝</span> <Handshake className="w-6 h-6 mr-3" />
<h4 className="text-xl font-bold">Партнёрство</h4> <h4 className="text-xl font-bold">Партнёрство</h4>
</div> </div>
<div className="space-y-2 text-gray-300"> <div className="space-y-2 text-gray-300">
<p>📞 +7 (495) 123-45-67 доб. 104</p> <p className="flex items-center"><Phone className="w-4 h-4 mr-2" /> +7 (495) 123-45-67 доб. 104</p>
<p <p
className="cursor-pointer hover:text-white transition-colors" className="cursor-pointer hover:text-white transition-colors flex items-center"
onClick={() => copyToClipboard('partners@gundyrev.ru', 'partners-email')} onClick={() => copyToClipboard('partners@gundyrev.ru', 'partners-email')}
> >
📧 partners@gundyrev.ru <Mail className="w-4 h-4 mr-2" /> partners@gundyrev.ru
{copySuccess === 'partners-email' && <span className="text-green-400 ml-2">✓</span>} {copySuccess === 'partners-email' && <CheckCircle className="w-4 h-4 ml-2 text-green-400" />}
</p> </p>
<p>👤 Директор по развитию: Анна Козлова</p> <p className="flex items-center"><User className="w-4 h-4 mr-2" /> Директор по развитию: Анна Козлова</p>
</div> </div>
</div> </div>
</div> </div>
@ -268,7 +306,7 @@ export default function Contacts() {
onClick={() => copyToClipboard('7701234567', 'inn')} onClick={() => copyToClipboard('7701234567', 'inn')}
> >
7701234567 7701234567
{copySuccess === 'inn' && <span className="text-green-400 ml-2">✓</span>} {copySuccess === 'inn' && <CheckCircle className="w-4 h-4 ml-2 text-green-400" />}
</p> </p>
</div> </div>
<div> <div>
@ -278,7 +316,7 @@ export default function Contacts() {
onClick={() => copyToClipboard('770101001', 'kpp')} onClick={() => copyToClipboard('770101001', 'kpp')}
> >
770101001 770101001
{copySuccess === 'kpp' && <span className="text-green-400 ml-2">✓</span>} {copySuccess === 'kpp' && <CheckCircle className="w-4 h-4 ml-2 text-green-400" />}
</p> </p>
</div> </div>
</div> </div>
@ -290,7 +328,7 @@ export default function Contacts() {
onClick={() => copyToClipboard('1234567890123', 'ogrn')} onClick={() => copyToClipboard('1234567890123', 'ogrn')}
> >
1234567890123 1234567890123
{copySuccess === 'ogrn' && <span className="text-green-400 ml-2">✓</span>} {copySuccess === 'ogrn' && <CheckCircle className="w-4 h-4 ml-2 text-green-400" />}
</p> </p>
</div> </div>
@ -304,7 +342,7 @@ export default function Contacts() {
onClick={() => copyToClipboard('40702810123456789012', 'rs')} onClick={() => copyToClipboard('40702810123456789012', 'rs')}
> >
40702810123456789012 40702810123456789012
{copySuccess === 'rs' && <span className="text-green-400 ml-2">✓</span>} {copySuccess === 'rs' && <CheckCircle className="w-4 h-4 ml-2 text-green-400" />}
</span> </span>
</div> </div>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
@ -314,7 +352,7 @@ export default function Contacts() {
onClick={() => copyToClipboard('30101810123456789012', 'ks')} onClick={() => copyToClipboard('30101810123456789012', 'ks')}
> >
30101810123456789012 30101810123456789012
{copySuccess === 'ks' && <span className="text-green-400 ml-2">✓</span>} {copySuccess === 'ks' && <CheckCircle className="w-4 h-4 ml-2 text-green-400" />}
</span> </span>
</div> </div>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
@ -324,7 +362,7 @@ export default function Contacts() {
onClick={() => copyToClipboard('123456789', 'bik')} onClick={() => copyToClipboard('123456789', 'bik')}
> >
123456789 123456789
{copySuccess === 'bik' && <span className="text-green-400 ml-2">✓</span>} {copySuccess === 'bik' && <CheckCircle className="w-4 h-4 ml-2 text-green-400" />}
</span> </span>
</div> </div>
<p className="text-sm text-gray-400 mt-2"> <p className="text-sm text-gray-400 mt-2">

29
src/app/development/page.tsx
View File

@ -1,4 +1,15 @@
import Navigation from '../components/Navigation'; import Navigation from '../components/Navigation';
import {
Globe,
Smartphone,
Monitor,
Settings,
Bot,
Wrench,
Briefcase,
BarChart3,
Store
} from 'lucide-react';
export default function Development() { export default function Development() {
return ( return (
@ -45,7 +56,7 @@ export default function Development() {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-purple-400 text-4xl mb-4">🌐</div> <div className="text-purple-400 text-4xl mb-4 flex justify-center"><Globe className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">Веб-разработка</h3> <h3 className="text-xl font-bold mb-4">Веб-разработка</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Создание современных веб-приложений и сайтов Создание современных веб-приложений и сайтов
@ -59,7 +70,7 @@ export default function Development() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-indigo-400 text-4xl mb-4">📱</div> <div className="text-indigo-400 text-4xl mb-4 flex justify-center"><Smartphone className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">Мобильная разработка</h3> <h3 className="text-xl font-bold mb-4">Мобильная разработка</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Нативные и кроссплатформенные мобильные приложения Нативные и кроссплатформенные мобильные приложения
@ -73,7 +84,7 @@ export default function Development() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-blue-400 text-4xl mb-4">🖥️</div> <div className="text-blue-400 text-4xl mb-4 flex justify-center"><Monitor className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">Десктопные приложения</h3> <h3 className="text-xl font-bold mb-4">Десктопные приложения</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Программы для Windows, macOS и Linux Программы для Windows, macOS и Linux
@ -87,7 +98,7 @@ export default function Development() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-green-400 text-4xl mb-4">⚙️</div> <div className="text-green-400 text-4xl mb-4 flex justify-center"><Settings className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">Backend и API</h3> <h3 className="text-xl font-bold mb-4">Backend и API</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Серверная логика и интеграционные решения Серверная логика и интеграционные решения
@ -101,7 +112,7 @@ export default function Development() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-yellow-400 text-4xl mb-4">🤖</div> <div className="text-yellow-400 text-4xl mb-4 flex justify-center"><Bot className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">Автоматизация</h3> <h3 className="text-xl font-bold mb-4">Автоматизация</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Системы автоматизации бизнес-процессов Системы автоматизации бизнес-процессов
@ -115,7 +126,7 @@ export default function Development() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-red-400 text-4xl mb-4">🔧</div> <div className="text-red-400 text-4xl mb-4 flex justify-center"><Wrench className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">Техническая поддержка</h3> <h3 className="text-xl font-bold mb-4">Техническая поддержка</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Сопровождение и развитие готовых решений Сопровождение и развитие готовых решений
@ -259,7 +270,7 @@ export default function Development() {
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-purple-400 text-3xl mb-4">💼</div> <div className="text-purple-400 text-3xl mb-4 flex justify-center"><Briefcase className="w-6 h-6" /></div>
<h4 className="text-lg font-bold mb-3">CRM-система</h4> <h4 className="text-lg font-bold mb-3">CRM-система</h4>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Система управления клиентами для торговой компании Система управления клиентами для торговой компании
@ -272,7 +283,7 @@ export default function Development() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-indigo-400 text-3xl mb-4">📊</div> <div className="text-indigo-400 text-3xl mb-4 flex justify-center"><BarChart3 className="w-6 h-6" /></div>
<h4 className="text-lg font-bold mb-3">Система аналитики</h4> <h4 className="text-lg font-bold mb-3">Система аналитики</h4>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Платформа для анализа данных и создания отчетов Платформа для анализа данных и создания отчетов
@ -285,7 +296,7 @@ export default function Development() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-blue-400 text-3xl mb-4">🏪</div> <div className="text-blue-400 text-3xl mb-4 flex justify-center"><Store className="w-6 h-6" /></div>
<h4 className="text-lg font-bold mb-3">E-commerce платформа</h4> <h4 className="text-lg font-bold mb-3">E-commerce платформа</h4>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Интернет-магазин с интеграцией платежных систем Интернет-магазин с интеграцией платежных систем

58
src/app/drweb/page.tsx
View File

@ -3,6 +3,22 @@
import Navigation from '../components/Navigation'; import Navigation from '../components/Navigation';
import LicenseCalculator from '../components/LicenseCalculator'; import LicenseCalculator from '../components/LicenseCalculator';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import {
Shield,
RefreshCw,
Search,
CheckCircle,
AlertTriangle,
Info,
XCircle,
Smartphone,
Trophy,
Monitor,
Building2,
Globe,
Cloud,
Wrench
} from 'lucide-react';
export default function DrWeb() { export default function DrWeb() {
// Добавляем стили для анимации // Добавляем стили для анимации
@ -337,8 +353,8 @@ export default function DrWeb() {
notification.type === 'update' ? 'text-blue-400' : notification.type === 'update' ? 'text-blue-400' :
'text-green-400' 'text-green-400'
}`}> }`}>
{notification.type === 'threat' ? '🛡️' : {notification.type === 'threat' ? <Shield className="w-5 h-5" /> :
notification.type === 'update' ? '🔄' : '🔍'} notification.type === 'update' ? <RefreshCw className="w-5 h-5" /> : <Search className="w-5 h-5" />}
</div> </div>
<div> <div>
<p className="text-sm text-gray-300">{notification.message}</p> <p className="text-sm text-gray-300">{notification.message}</p>
@ -367,9 +383,9 @@ export default function DrWeb() {
alert.type === 'warning' ? 'text-yellow-400' : alert.type === 'warning' ? 'text-yellow-400' :
alert.type === 'info' ? 'text-blue-400' : 'text-red-400' alert.type === 'info' ? 'text-blue-400' : 'text-red-400'
}`}> }`}>
{alert.type === 'success' ? '✅' : {alert.type === 'success' ? <CheckCircle className="w-5 h-5" /> :
alert.type === 'warning' ? '⚠️' : alert.type === 'warning' ? <AlertTriangle className="w-5 h-5" /> :
alert.type === 'info' ? 'ℹ️' : '❌'} alert.type === 'info' ? <Info className="w-5 h-5" /> : <XCircle className="w-5 h-5" />}
</div> </div>
<p className="text-sm text-gray-300">{alert.message}</p> <p className="text-sm text-gray-300">{alert.message}</p>
</div> </div>
@ -395,9 +411,9 @@ export default function DrWeb() {
alert.type === 'warning' ? 'text-yellow-400' : alert.type === 'warning' ? 'text-yellow-400' :
alert.type === 'info' ? 'text-blue-400' : 'text-red-400' alert.type === 'info' ? 'text-blue-400' : 'text-red-400'
}`}> }`}>
{alert.type === 'success' ? '✅' : {alert.type === 'success' ? <CheckCircle className="w-5 h-5" /> :
alert.type === 'warning' ? '⚠️' : alert.type === 'warning' ? <AlertTriangle className="w-5 h-5" /> :
alert.type === 'info' ? 'ℹ️' : '❌'} alert.type === 'info' ? <Info className="w-5 h-5" /> : <XCircle className="w-5 h-5" />}
</div> </div>
<p className="text-sm text-gray-300">{alert.message}</p> <p className="text-sm text-gray-300">{alert.message}</p>
</div> </div>
@ -423,9 +439,9 @@ export default function DrWeb() {
alert.type === 'warning' ? 'text-yellow-400' : alert.type === 'warning' ? 'text-yellow-400' :
alert.type === 'info' ? 'text-blue-400' : 'text-red-400' alert.type === 'info' ? 'text-blue-400' : 'text-red-400'
}`}> }`}>
{alert.type === 'success' ? '✅' : {alert.type === 'success' ? <CheckCircle className="w-5 h-5" /> :
alert.type === 'warning' ? '⚠️' : alert.type === 'warning' ? <AlertTriangle className="w-5 h-5" /> :
alert.type === 'info' ? 'ℹ️' : '❌'} alert.type === 'info' ? <Info className="w-5 h-5" /> : <XCircle className="w-5 h-5" />}
</div> </div>
<p className="text-sm text-gray-300">{alert.message}</p> <p className="text-sm text-gray-300">{alert.message}</p>
</div> </div>
@ -446,7 +462,7 @@ export default function DrWeb() {
{/* Анимированная статистика */} {/* Анимированная статистика */}
<div className="grid md:grid-cols-4 gap-8 mb-16"> <div className="grid md:grid-cols-4 gap-8 mb-16">
<div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300 border border-green-500/30"> <div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300 border border-green-500/30">
<div className="text-green-400 text-4xl mb-4">🛡️</div> <div className="text-green-400 text-4xl mb-4 flex justify-center"><Shield className="w-8 h-8" /></div>
<div className="text-3xl font-bold text-green-400 mb-2"> <div className="text-3xl font-bold text-green-400 mb-2">
{stats.threatsBlocked.toLocaleString()}+ {stats.threatsBlocked.toLocaleString()}+
</div> </div>
@ -457,7 +473,7 @@ export default function DrWeb() {
</div> </div>
<div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300 border border-green-500/30"> <div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300 border border-green-500/30">
<div className="text-green-400 text-4xl mb-4">📱</div> <div className="text-green-400 text-4xl mb-4 flex justify-center"><Smartphone className="w-8 h-8" /></div>
<div className="text-3xl font-bold text-green-400 mb-2"> <div className="text-3xl font-bold text-green-400 mb-2">
{stats.devicesProtected.toLocaleString()}+ {stats.devicesProtected.toLocaleString()}+
</div> </div>
@ -468,7 +484,7 @@ export default function DrWeb() {
</div> </div>
<div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300 border border-green-500/30"> <div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300 border border-green-500/30">
<div className="text-green-400 text-4xl mb-4">🔄</div> <div className="text-green-400 text-4xl mb-4 flex justify-center"><RefreshCw className="w-8 h-8" /></div>
<div className="text-3xl font-bold text-green-400 mb-2"> <div className="text-3xl font-bold text-green-400 mb-2">
{stats.updatesDaily.toLocaleString()}+ {stats.updatesDaily.toLocaleString()}+
</div> </div>
@ -479,7 +495,7 @@ export default function DrWeb() {
</div> </div>
<div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300 border border-green-500/30"> <div className="glass-effect p-8 rounded-lg text-center hover-glow transition-all duration-300 border border-green-500/30">
<div className="text-green-400 text-4xl mb-4">🏆</div> <div className="text-green-400 text-4xl mb-4 flex justify-center"><Trophy className="w-8 h-8" /></div>
<div className="text-3xl font-bold text-green-400 mb-2"> <div className="text-3xl font-bold text-green-400 mb-2">
{stats.yearsExperience}+ {stats.yearsExperience}+
</div> </div>
@ -508,7 +524,7 @@ export default function DrWeb() {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 border-l-4 border-green-500 group hover:scale-105 hover:border-green-400"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 border-l-4 border-green-500 group hover:scale-105 hover:border-green-400">
<div className="text-green-400 text-4xl mb-4 group-hover:animate-bounce">🖥️</div> <div className="text-green-400 text-4xl mb-4 group-hover:animate-bounce"><Monitor className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4 group-hover:text-green-300 transition-colors">Dr.Web Security Space</h3> <h3 className="text-xl font-bold mb-4 group-hover:text-green-300 transition-colors">Dr.Web Security Space</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Комплексная защита для домашних компьютеров и ноутбуков Комплексная защита для домашних компьютеров и ноутбуков
@ -533,7 +549,7 @@ export default function DrWeb() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 border-l-4 border-green-500 group hover:scale-105 hover:border-green-400"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 border-l-4 border-green-500 group hover:scale-105 hover:border-green-400">
<div className="text-green-400 text-4xl mb-4 group-hover:animate-bounce">🏢</div> <div className="text-green-400 text-4xl mb-4 group-hover:animate-bounce"><Building2 className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4 group-hover:text-green-300 transition-colors">Dr.Web Enterprise Suite</h3> <h3 className="text-xl font-bold mb-4 group-hover:text-green-300 transition-colors">Dr.Web Enterprise Suite</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Корпоративное решение для защиты бизнеса Корпоративное решение для защиты бизнеса
@ -558,7 +574,7 @@ export default function DrWeb() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 border-l-4 border-green-500 group hover:scale-105 hover:border-green-400"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 border-l-4 border-green-500 group hover:scale-105 hover:border-green-400">
<div className="text-green-400 text-4xl mb-4 group-hover:animate-bounce">📱</div> <div className="text-green-400 text-4xl mb-4 group-hover:animate-bounce"><Smartphone className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4 group-hover:text-green-300 transition-colors">Dr.Web Mobile Security</h3> <h3 className="text-xl font-bold mb-4 group-hover:text-green-300 transition-colors">Dr.Web Mobile Security</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Защита мобильных устройств Android и iOS Защита мобильных устройств Android и iOS
@ -583,7 +599,7 @@ export default function DrWeb() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 border-l-4 border-green-500 group hover:scale-105 hover:border-green-400"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 border-l-4 border-green-500 group hover:scale-105 hover:border-green-400">
<div className="text-green-400 text-4xl mb-4 group-hover:animate-bounce">🌐</div> <div className="text-green-400 text-4xl mb-4 group-hover:animate-bounce"><Globe className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4 group-hover:text-green-300 transition-colors">Dr.Web Gateway Security</h3> <h3 className="text-xl font-bold mb-4 group-hover:text-green-300 transition-colors">Dr.Web Gateway Security</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Защита интернет-шлюзов и почтовых серверов Защита интернет-шлюзов и почтовых серверов
@ -608,7 +624,7 @@ export default function DrWeb() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 border-l-4 border-green-500 group hover:scale-105 hover:border-green-400"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 border-l-4 border-green-500 group hover:scale-105 hover:border-green-400">
<div className="text-green-400 text-4xl mb-4 group-hover:animate-bounce">☁️</div> <div className="text-green-400 text-4xl mb-4 group-hover:animate-bounce"><Cloud className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4 group-hover:text-green-300 transition-colors">Dr.Web Cloud</h3> <h3 className="text-xl font-bold mb-4 group-hover:text-green-300 transition-colors">Dr.Web Cloud</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Облачные решения безопасности Облачные решения безопасности
@ -633,7 +649,7 @@ export default function DrWeb() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 border-l-4 border-green-500 group hover:scale-105 hover:border-green-400"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 border-l-4 border-green-500 group hover:scale-105 hover:border-green-400">
<div className="text-green-400 text-4xl mb-4 group-hover:animate-bounce">🔧</div> <div className="text-green-400 text-4xl mb-4 group-hover:animate-bounce"><Wrench className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4 group-hover:text-green-300 transition-colors">Dr.Web CureIt!</h3> <h3 className="text-xl font-bold mb-4 group-hover:text-green-300 transition-colors">Dr.Web CureIt!</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Бесплатная утилита для лечения зараженных компьютеров Бесплатная утилита для лечения зараженных компьютеров

105
src/app/electronics/page.tsx
View File

@ -2,6 +2,31 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import Navigation from '../components/Navigation'; import Navigation from '../components/Navigation';
import {
ShoppingCart,
Monitor,
Smartphone,
Plug,
Server,
Globe,
ClipboardList,
CheckCircle,
Package,
Truck,
Home,
Zap,
Battery,
HardDrive,
Wifi,
Building2,
Package2,
Wrench,
MapPin,
FileText,
DollarSign,
Star,
X
} from 'lucide-react';
export default function Electronics() { export default function Electronics() {
const [selectedCategory, setSelectedCategory] = useState('all'); const [selectedCategory, setSelectedCategory] = useState('all');
@ -24,12 +49,12 @@ export default function Electronics() {
}>>([]); }>>([]);
const categories = [ const categories = [
{ id: 'all', name: 'Все товары', icon: '🛒', color: 'cyan' }, { id: 'all', name: 'Все товары', icon: <ShoppingCart className="w-5 h-5" />, color: 'cyan' },
{ id: 'computers', name: 'Компьютеры', icon: '💻', color: 'blue' }, { id: 'computers', name: 'Компьютеры', icon: <Monitor className="w-5 h-5" />, color: 'blue' },
{ id: 'phones', name: 'Телефоны', icon: '📱', color: 'green' }, { id: 'phones', name: 'Телефоны', icon: <Smartphone className="w-5 h-5" />, color: 'green' },
{ id: 'accessories', name: 'Аксессуары', icon: '🔌', color: 'purple' }, { id: 'accessories', name: 'Аксессуары', icon: <Plug className="w-5 h-5" />, color: 'purple' },
{ id: 'servers', name: 'Серверы', icon: '🖲️', color: 'orange' }, { id: 'servers', name: 'Серверы', icon: <Server className="w-5 h-5" />, color: 'orange' },
{ id: 'network', name: 'Сеть', icon: '🌐', color: 'teal' } { id: 'network', name: 'Сеть', icon: <Globe className="w-5 h-5" />, color: 'teal' }
]; ];
const products = [ const products = [
@ -44,11 +69,11 @@ export default function Electronics() {
]; ];
const deliverySteps = [ const deliverySteps = [
{ name: 'Заказ получен', icon: '📋', completed: true }, { name: 'Заказ получен', icon: <ClipboardList className="w-6 h-6" />, completed: true },
{ name: 'Подтверждение', icon: '✅', completed: true }, { name: 'Подтверждение', icon: <CheckCircle className="w-6 h-6" />, completed: true },
{ name: 'Сборка', icon: '📦', completed: true }, { name: 'Сборка', icon: <Package className="w-6 h-6" />, completed: true },
{ name: 'Отправка', icon: '🚚', completed: false }, { name: 'Отправка', icon: <Truck className="w-6 h-6" />, completed: false },
{ name: 'Доставка', icon: '🏠', completed: false } { name: 'Доставка', icon: <Home className="w-6 h-6" />, completed: false }
]; ];
// Генерация электронных частиц // Генерация электронных частиц
@ -212,7 +237,7 @@ export default function Electronics() {
: 'glass-effect text-gray-300 hover:bg-white/10' : 'glass-effect text-gray-300 hover:bg-white/10'
}`} }`}
> >
<span className="mr-2">{category.icon}</span> <span className="mr-2 flex items-center">{category.icon}</span>
{category.name} {category.name}
</button> </button>
))} ))}
@ -223,21 +248,21 @@ export default function Electronics() {
{filteredProducts.map((product) => ( {filteredProducts.map((product) => (
<div <div
key={product.id} key={product.id}
className="glass-effect p-6 rounded-lg hover-glow transition-all duration-500 transform hover:scale-105 hover:rotate-1 cursor-pointer" className="bg-gray-800/50 p-6 rounded-lg transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/20 cursor-pointer"
onMouseEnter={() => setHoveredProduct(product.id)} onMouseEnter={() => setHoveredProduct(product.id)}
onMouseLeave={() => setHoveredProduct(null)} onMouseLeave={() => setHoveredProduct(null)}
> >
<div className="relative"> <div className="relative">
<div className="text-4xl mb-4 text-center"> <div className="text-4xl mb-4 text-center">
{product.category === 'computers' && '💻'} {product.category === 'computers' && <Monitor className="w-8 h-8 mx-auto" />}
{product.category === 'phones' && '📱'} {product.category === 'phones' && <Smartphone className="w-8 h-8 mx-auto" />}
{product.category === 'accessories' && '🔌'} {product.category === 'accessories' && <Plug className="w-8 h-8 mx-auto" />}
{product.category === 'servers' && '🖲️'} {product.category === 'servers' && <Server className="w-8 h-8 mx-auto" />}
{product.category === 'network' && '🌐'} {product.category === 'network' && <Globe className="w-8 h-8 mx-auto" />}
</div> </div>
{hoveredProduct === product.id && ( {hoveredProduct === product.id && (
<div className="absolute inset-0 bg-gradient-to-r from-cyan-500/20 to-teal-500/20 rounded-lg animate-pulse"></div> <div className="absolute inset-0 bg-gradient-to-r from-cyan-500/10 to-teal-500/10 rounded-lg"></div>
)} )}
</div> </div>
@ -318,7 +343,7 @@ export default function Electronics() {
<div className={`w-12 h-12 rounded-full flex items-center justify-center mb-2 transition-all duration-300 ${ <div className={`w-12 h-12 rounded-full flex items-center justify-center mb-2 transition-all duration-300 ${
step.completed ? 'bg-green-500 text-white' : 'bg-gray-700 text-gray-400' step.completed ? 'bg-green-500 text-white' : 'bg-gray-700 text-gray-400'
}`}> }`}>
<span className="text-xl">{step.icon}</span> <div className="text-xl">{step.icon}</div>
</div> </div>
<span className={`text-sm ${step.completed ? 'text-green-400' : 'text-gray-400'}`}> <span className={`text-sm ${step.completed ? 'text-green-400' : 'text-gray-400'}`}>
{step.name} {step.name}
@ -407,25 +432,25 @@ export default function Electronics() {
<h3 className="text-2xl font-bold mb-6 text-center">Наши преимущества в госзакупках</h3> <h3 className="text-2xl font-bold mb-6 text-center">Наши преимущества в госзакупках</h3>
<div className="grid md:grid-cols-4 gap-6"> <div className="grid md:grid-cols-4 gap-6">
<div className="text-center"> <div className="text-center">
<div className="text-cyan-400 text-3xl mb-3">📋</div> <div className="text-cyan-400 text-3xl mb-3 flex justify-center"><ClipboardList className="w-8 h-8" /></div>
<h4 className="font-bold mb-2">Опыт участия</h4> <h4 className="font-bold mb-2">Опыт участия</h4>
<p className="text-gray-300 text-sm">Более 500 выигранных тендеров</p> <p className="text-gray-300 text-sm">Более 500 выигранных тендеров</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="text-teal-400 text-3xl mb-3">🏆</div> <div className="text-teal-400 text-3xl mb-3 flex justify-center"><Star className="w-8 h-8" /></div>
<h4 className="font-bold mb-2">Высокий рейтинг</h4> <h4 className="font-bold mb-2">Высокий рейтинг</h4>
<p className="text-gray-300 text-sm">Надежный поставщик без нарушений</p> <p className="text-gray-300 text-sm">Надежный поставщик без нарушений</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="text-green-400 text-3xl mb-3">⚡</div> <div className="text-green-400 text-3xl mb-3 flex justify-center"><Zap className="w-8 h-8" /></div>
<h4 className="font-bold mb-2">Быстрая поставка</h4> <h4 className="font-bold mb-2">Быстрая поставка</h4>
<p className="text-gray-300 text-sm">Соблюдение всех сроков контракта</p> <p className="text-gray-300 text-sm">Соблюдение всех сроков контракта</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="text-blue-400 text-3xl mb-3">📄</div> <div className="text-blue-400 text-3xl mb-3 flex justify-center"><FileText className="w-8 h-8" /></div>
<h4 className="font-bold mb-2">Все документы</h4> <h4 className="font-bold mb-2">Все документы</h4>
<p className="text-gray-300 text-sm">Полный пакет сертификатов и лицензий</p> <p className="text-gray-300 text-sm">Полный пакет сертификатов и лицензий</p>
</div> </div>
@ -445,7 +470,7 @@ export default function Electronics() {
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-green-400 text-4xl mb-4">🏢</div> <div className="text-green-400 text-4xl mb-4 flex justify-center"><Building2 className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">Корпоративные поставки</h3> <h3 className="text-xl font-bold mb-4">Корпоративные поставки</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Комплексное оснащение офисов и производственных помещений Комплексное оснащение офисов и производственных помещений
@ -459,7 +484,7 @@ export default function Electronics() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-blue-400 text-4xl mb-4">📦</div> <div className="text-blue-400 text-4xl mb-4 flex justify-center"><Package2 className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">Складская программа</h3> <h3 className="text-xl font-bold mb-4">Складская программа</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Поддержание складских остатков популярных позиций Поддержание складских остатков популярных позиций
@ -473,7 +498,7 @@ export default function Electronics() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-purple-400 text-4xl mb-4">🔧</div> <div className="text-purple-400 text-4xl mb-4 flex justify-center"><Wrench className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">Сервисное обслуживание</h3> <h3 className="text-xl font-bold mb-4">Сервисное обслуживание</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Полный цикл технической поддержки оборудования Полный цикл технической поддержки оборудования
@ -523,15 +548,15 @@ export default function Electronics() {
<h3 className="text-2xl font-bold gradient-text">Калькулятор стоимости</h3> <h3 className="text-2xl font-bold gradient-text">Калькулятор стоимости</h3>
<button <button
onClick={() => setIsCalculatorOpen(false)} onClick={() => setIsCalculatorOpen(false)}
className="text-gray-400 hover:text-white transition-colors text-2xl" className="text-gray-400 hover:text-white transition-colors"
> >
× <X className="w-6 h-6" />
</button> </button>
</div> </div>
{cartItems.length === 0 ? ( {cartItems.length === 0 ? (
<div className="text-center py-8"> <div className="text-center py-8">
<div className="text-4xl mb-4">🛒</div> <div className="text-4xl mb-4 flex justify-center"><ShoppingCart className="w-12 h-12" /></div>
<p className="text-gray-400">Корзина пуста. Добавьте товары из каталога.</p> <p className="text-gray-400">Корзина пуста. Добавьте товары из каталога.</p>
</div> </div>
) : ( ) : (
@ -591,7 +616,7 @@ export default function Electronics() {
className="glass-effect p-4 rounded-full hover-glow transition-all duration-300 transform hover:scale-110" className="glass-effect p-4 rounded-full hover-glow transition-all duration-300 transform hover:scale-110"
> >
<div className="relative"> <div className="relative">
<span className="text-2xl">🛒</span> <ShoppingCart className="w-8 h-8" />
<div className="absolute -top-2 -right-2 bg-cyan-500 text-black rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold"> <div className="absolute -top-2 -right-2 bg-cyan-500 text-black rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold">
{cartItems.reduce((sum, item) => sum + item.quantity, 0)} {cartItems.reduce((sum, item) => sum + item.quantity, 0)}
</div> </div>
@ -626,7 +651,7 @@ export default function Electronics() {
className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 transform hover:scale-105 cursor-pointer" className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 transform hover:scale-105 cursor-pointer"
> >
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<div className="text-2xl">📍</div> <MapPin className="w-6 h-6 text-cyan-400" />
<div> <div>
<h3 className="text-xl font-bold">{warehouse.city}</h3> <h3 className="text-xl font-bold">{warehouse.city}</h3>
<p className="text-sm text-gray-400">{warehouse.address}</p> <p className="text-sm text-gray-400">{warehouse.address}</p>
@ -672,15 +697,15 @@ export default function Electronics() {
<div className="relative"> <div className="relative">
<div className="flex flex-col md:flex-row justify-between items-center gap-8"> <div className="flex flex-col md:flex-row justify-between items-center gap-8">
{[ {[
{ icon: '📋', title: 'Заявка', desc: 'Получаем вашу спецификацию' }, { icon: <ClipboardList className="w-8 h-8" />, title: 'Заявка', desc: 'Получаем вашу спецификацию' },
{ icon: '💰', title: 'Расчет', desc: 'Формируем коммерческое предложение' }, { icon: <DollarSign className="w-8 h-8" />, title: 'Расчет', desc: 'Формируем коммерческое предложение' },
{ icon: '📦', title: 'Сборка', desc: 'Комплектуем заказ на складе' }, { icon: <Package className="w-8 h-8" />, title: 'Сборка', desc: 'Комплектуем заказ на складе' },
{ icon: '🚚', title: 'Доставка', desc: 'Доставляем в указанное место' }, { icon: <Truck className="w-8 h-8" />, title: 'Доставка', desc: 'Доставляем в указанное место' },
{ icon: '✅', title: 'Приемка', desc: 'Подписываем документы' } { icon: <CheckCircle className="w-8 h-8" />, title: 'Приемка', desc: 'Подписываем документы' }
].map((step, index) => ( ].map((step, index) => (
<div key={index} className="text-center relative"> <div key={index} className="text-center relative">
<div className="glass-effect w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 hover-glow transition-all duration-300 transform hover:scale-110"> <div className="glass-effect w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 hover-glow transition-all duration-300 transform hover:scale-110">
<span className="text-3xl">{step.icon}</span> <div className="text-3xl">{step.icon}</div>
</div> </div>
<h3 className="text-lg font-bold mb-2">{step.title}</h3> <h3 className="text-lg font-bold mb-2">{step.title}</h3>
<p className="text-sm text-gray-400 max-w-32">{step.desc}</p> <p className="text-sm text-gray-400 max-w-32">{step.desc}</p>

14
src/app/globals.css
View File

@ -2304,3 +2304,17 @@ body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
} }
/* Стили для иконок в модальном окне документации */
.modal-documentation-icon {
transform: none !important;
transition: none !important;
animation: none !important;
will-change: auto !important;
}
.modal-documentation-icon * {
transform: none !important;
transition: none !important;
animation: none !important;
}

70
src/app/page.tsx
View File

@ -38,7 +38,7 @@ export default function Home() {
uptime: 0 uptime: 0
}); });
const [currentCodeExample, setCurrentCodeExample] = useState(0); const [currentCodeExample, setCurrentCodeExample] = useState(0);
const [techSphereRotation, setTechSphereRotation] = useState(0);
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
const [isContactModalOpen, setIsContactModalOpen] = useState(false); const [isContactModalOpen, setIsContactModalOpen] = useState(false);
@ -76,40 +76,6 @@ export default function Home() {
return () => clearInterval(interval); return () => clearInterval(interval);
}, [mounted]); }, [mounted]);
// Переключение примеров кода
useEffect(() => {
if (!mounted) return;
const interval = setInterval(() => {
setCurrentCodeExample(prev => (prev + 1) % codeExamples.length);
}, 4000);
return () => clearInterval(interval);
}, [mounted]);
// Вращение 3D-сферы
useEffect(() => {
if (!mounted) return;
const interval = setInterval(() => {
setTechSphereRotation(prev => (prev + 1) % 360);
}, 50);
return () => clearInterval(interval);
}, [mounted]);
// Отслеживание мыши
useEffect(() => {
if (!mounted) return;
const handleMouseMove = (e: MouseEvent) => {
setMousePosition({ x: e.clientX, y: e.clientY });
};
window.addEventListener('mousemove', handleMouseMove);
return () => window.removeEventListener('mousemove', handleMouseMove);
}, [mounted]);
const codeExamples = [ const codeExamples = [
{ {
title: "React + TypeScript", title: "React + TypeScript",
@ -148,6 +114,31 @@ model.compile(optimizer='adam', loss='sparse_categorical_crossentropy')`
} }
]; ];
// Переключение примеров кода
useEffect(() => {
if (!mounted) return;
const interval = setInterval(() => {
setCurrentCodeExample(prev => (prev + 1) % codeExamples.length);
}, 4000);
return () => clearInterval(interval);
}, [mounted, codeExamples.length]);
// Отслеживание мыши
useEffect(() => {
if (!mounted) return;
const handleMouseMove = (e: MouseEvent) => {
setMousePosition({ x: e.clientX, y: e.clientY });
};
window.addEventListener('mousemove', handleMouseMove);
return () => window.removeEventListener('mousemove', handleMouseMove);
}, [mounted]);
const technologies = [ const technologies = [
'React', 'Node.js', 'Python', 'TypeScript', 'Docker', 'AWS', 'PostgreSQL', 'React', 'Node.js', 'Python', 'TypeScript', 'Docker', 'AWS', 'PostgreSQL',
'MongoDB', 'Redis', 'Kubernetes', 'GraphQL', 'Next.js', 'Vue.js', 'Django', 'MongoDB', 'Redis', 'Kubernetes', 'GraphQL', 'Next.js', 'Vue.js', 'Django',
@ -170,7 +161,7 @@ model.compile(optimizer='adam', loss='sparse_categorical_crossentropy')`
return ( return (
<div className="min-h-screen bg-gradient-to-br from-black via-gray-900 to-black"> <div className="min-h-screen bg-gradient-to-br from-black via-gray-900 to-black">
<Navigation /> <Navigation onContactClick={() => setIsContactModalOpen(true)} />
{/* Hero Section с заголовком и интерактивными элементами */} {/* Hero Section с заголовком и интерактивными элементами */}
<section className="relative section-padding pt-32 overflow-hidden"> <section className="relative section-padding pt-32 overflow-hidden">
@ -178,8 +169,7 @@ model.compile(optimizer='adam', loss='sparse_categorical_crossentropy')`
{/* Заголовок и описание */} {/* Заголовок и описание */}
<div className="relative inline-block mb-8"> <div className="relative inline-block mb-8">
<h1 className="text-5xl md:text-7xl font-bold mb-8 relative"> <h1 className="text-5xl md:text-7xl font-bold mb-8 relative">
<span className="gradient-text holographic-text">GUNDYREV</span> <span className="gradient-text">GUNDYREV</span>
<div className="absolute inset-0 gradient-text holographic-text animate-pulse opacity-30"></div>
</h1> </h1>
{/* Голографические линии */} {/* Голографические линии */}
<div className="absolute -inset-4 opacity-20"> <div className="absolute -inset-4 opacity-20">
@ -745,7 +735,7 @@ model.compile(optimizer='adam', loss='sparse_categorical_crossentropy')`
<p className="text-gray-400 text-sm mb-4">{clientType.description}</p> <p className="text-gray-400 text-sm mb-4">{clientType.description}</p>
<div className="space-y-2 mb-4"> <div className="space-y-2 mb-4">
{clientType.examples.map((example, exampleIndex) => ( {clientType.examples.map((example) => (
<div <div
key={example} key={example}
className="text-sm text-gray-300 flex items-center" className="text-sm text-gray-300 flex items-center"
@ -953,7 +943,7 @@ model.compile(optimizer='adam', loss='sparse_categorical_crossentropy')`
<p className="text-gray-400 text-sm mb-4">{service.description}</p> <p className="text-gray-400 text-sm mb-4">{service.description}</p>
<div className="space-y-2"> <div className="space-y-2">
{service.features.map((feature, featureIndex) => ( {service.features.map((feature) => (
<div <div
key={feature} key={feature}
className="text-sm text-gray-300 flex items-center" className="text-sm text-gray-300 flex items-center"

175
src/app/secure-t/page.tsx
View File

@ -2,6 +2,47 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import Navigation from '../components/Navigation'; import Navigation from '../components/Navigation';
import {
Shield,
Zap,
Settings,
Target,
Lock,
Search,
Eye,
CheckCircle,
AlertTriangle,
Info,
AlertCircle,
Flame,
HardDrive,
Monitor,
Globe,
Folder,
BookOpen,
Rocket,
Wrench,
GraduationCap,
Phone,
Trophy,
Globe2,
FileText,
CheckSquare,
Key,
Award,
FileCheck,
Download,
Users,
Video,
Book,
Headphones,
Building,
FileSpreadsheet,
ClipboardList,
DollarSign,
FileDown,
ChevronDown
} from 'lucide-react';
export default function SecureT() { export default function SecureT() {
// Живые уведомления безопасности // Живые уведомления безопасности
@ -483,9 +524,9 @@ export default function SecureT() {
alert.type === 'scan' ? 'text-blue-400' : alert.type === 'scan' ? 'text-blue-400' :
'text-green-400' 'text-green-400'
}`}> }`}>
{alert.type === 'threat' ? '⚠️' : {alert.type === 'threat' ? <AlertTriangle className="w-6 h-6" /> :
alert.type === 'block' ? '🛡️' : alert.type === 'block' ? <Shield className="w-6 h-6" /> :
alert.type === 'scan' ? '🔍' : '✅'} alert.type === 'scan' ? <Search className="w-6 h-6" /> : <CheckCircle className="w-6 h-6" />}
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="text-sm text-gray-300 font-medium">{alert.message}</p> <p className="text-sm text-gray-300 font-medium">{alert.message}</p>
@ -536,8 +577,8 @@ export default function SecureT() {
alert.type === 'warning' ? 'text-yellow-400' : alert.type === 'warning' ? 'text-yellow-400' :
'text-blue-400' 'text-blue-400'
}`}> }`}>
{alert.type === 'critical' ? '🚨' : {alert.type === 'critical' ? <AlertCircle className="w-5 h-5" /> :
alert.type === 'warning' ? '⚠️' : 'ℹ️'} alert.type === 'warning' ? <AlertTriangle className="w-5 h-5" /> : <Info className="w-5 h-5" />}
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="text-sm text-gray-300 font-medium">{alert.message}</p> <p className="text-sm text-gray-300 font-medium">{alert.message}</p>
@ -567,8 +608,8 @@ export default function SecureT() {
alert.type === 'firewall' ? 'text-orange-400' : alert.type === 'firewall' ? 'text-orange-400' :
'text-green-400' 'text-green-400'
}`}> }`}>
{alert.type === 'encryption' ? '🔐' : {alert.type === 'encryption' ? <Lock className="w-5 h-5" /> :
alert.type === 'firewall' ? '🔥' : '💾'} alert.type === 'firewall' ? <Flame className="w-5 h-5" /> : <HardDrive className="w-5 h-5" />}
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="text-sm text-gray-300 font-medium">{alert.message}</p> <p className="text-sm text-gray-300 font-medium">{alert.message}</p>
@ -598,8 +639,8 @@ export default function SecureT() {
alert.type === 'network' ? 'text-cyan-400' : alert.type === 'network' ? 'text-cyan-400' :
'text-pink-400' 'text-pink-400'
}`}> }`}>
{alert.type === 'system' ? '🖥️' : {alert.type === 'system' ? <Monitor className="w-5 h-5" /> :
alert.type === 'network' ? '🌐' : '📁'} alert.type === 'network' ? <Globe className="w-5 h-5" /> : <Folder className="w-5 h-5" />}
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="text-xs text-gray-300 font-medium">{alert.message}</p> <p className="text-xs text-gray-300 font-medium">{alert.message}</p>
@ -625,8 +666,8 @@ export default function SecureT() {
alert.type === 'network' ? 'text-cyan-400' : alert.type === 'network' ? 'text-cyan-400' :
'text-pink-400' 'text-pink-400'
}`}> }`}>
{alert.type === 'system' ? '🖥️' : {alert.type === 'system' ? <Monitor className="w-5 h-5" /> :
alert.type === 'network' ? '🌐' : '📁'} alert.type === 'network' ? <Globe className="w-5 h-5" /> : <Folder className="w-5 h-5" />}
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="text-xs text-gray-300 font-medium">{alert.message}</p> <p className="text-xs text-gray-300 font-medium">{alert.message}</p>
@ -654,7 +695,7 @@ export default function SecureT() {
<div className="space-y-6"> <div className="space-y-6">
<div className="glass-effect p-6 rounded-lg border border-red-500/30"> <div className="glass-effect p-6 rounded-lg border border-red-500/30">
<div className="flex items-center space-x-4 mb-4"> <div className="flex items-center space-x-4 mb-4">
<div className="text-red-400 text-3xl animate-pulse-secure">🛡️</div> <div className="text-red-400 text-3xl animate-pulse-secure"><Shield className="w-8 h-8" /></div>
<h3 className="text-xl font-bold">Многоуровневая защита</h3> <h3 className="text-xl font-bold">Многоуровневая защита</h3>
</div> </div>
<p className="text-gray-300"> <p className="text-gray-300">
@ -665,7 +706,7 @@ export default function SecureT() {
<div className="glass-effect p-6 rounded-lg border border-orange-500/30"> <div className="glass-effect p-6 rounded-lg border border-orange-500/30">
<div className="flex items-center space-x-4 mb-4"> <div className="flex items-center space-x-4 mb-4">
<div className="text-orange-400 text-3xl animate-pulse-secure">⚡</div> <div className="text-orange-400 text-3xl animate-pulse-secure"><Zap className="w-8 h-8" /></div>
<h3 className="text-xl font-bold">Быстрое реагирование</h3> <h3 className="text-xl font-bold">Быстрое реагирование</h3>
</div> </div>
<p className="text-gray-300"> <p className="text-gray-300">
@ -676,7 +717,7 @@ export default function SecureT() {
<div className="glass-effect p-6 rounded-lg border border-yellow-500/30"> <div className="glass-effect p-6 rounded-lg border border-yellow-500/30">
<div className="flex items-center space-x-4 mb-4"> <div className="flex items-center space-x-4 mb-4">
<div className="text-yellow-400 text-3xl animate-pulse-secure">🔧</div> <div className="text-yellow-400 text-3xl animate-pulse-secure"><Settings className="w-8 h-8" /></div>
<h3 className="text-xl font-bold">Простота внедрения</h3> <h3 className="text-xl font-bold">Простота внедрения</h3>
</div> </div>
<p className="text-gray-300"> <p className="text-gray-300">
@ -688,7 +729,7 @@ export default function SecureT() {
<div className="space-y-6"> <div className="space-y-6">
<div className="glass-effect p-8 rounded-lg border border-purple-500/30 text-center"> <div className="glass-effect p-8 rounded-lg border border-purple-500/30 text-center">
<div className="text-purple-400 text-5xl mb-4 animate-pulse-secure">🎯</div> <div className="text-purple-400 text-5xl mb-4 animate-pulse-secure"><Target className="w-12 h-12" /></div>
<h3 className="text-2xl font-bold mb-4">Основная цель</h3> <h3 className="text-2xl font-bold mb-4">Основная цель</h3>
<p className="text-gray-300 text-lg"> <p className="text-gray-300 text-lg">
Обеспечить максимальную защиту корпоративных данных при сохранении Обеспечить максимальную защиту корпоративных данных при сохранении
@ -720,7 +761,7 @@ export default function SecureT() {
<details className="group"> <details className="group">
<summary className="flex items-center justify-between cursor-pointer"> <summary className="flex items-center justify-between cursor-pointer">
<h4 className="text-lg font-semibold text-red-400">Что включает в себя система SECURE-T?</h4> <h4 className="text-lg font-semibold text-red-400">Что включает в себя система SECURE-T?</h4>
<div className="text-red-400 text-xl group-open:rotate-180 transition-transform">▼</div> <div className="text-red-400 text-xl group-open:rotate-180 transition-transform"><ChevronDown className="w-5 h-5" /></div>
</summary> </summary>
<div className="mt-4 text-gray-300 space-y-3"> <div className="mt-4 text-gray-300 space-y-3">
<p>SECURE-T включает в себя:</p> <p>SECURE-T включает в себя:</p>
@ -739,7 +780,7 @@ export default function SecureT() {
<details className="group"> <details className="group">
<summary className="flex items-center justify-between cursor-pointer"> <summary className="flex items-center justify-between cursor-pointer">
<h4 className="text-lg font-semibold text-orange-400">Как быстро можно внедрить SECURE-T?</h4> <h4 className="text-lg font-semibold text-orange-400">Как быстро можно внедрить SECURE-T?</h4>
<div className="text-orange-400 text-xl group-open:rotate-180 transition-transform">▼</div> <div className="text-orange-400 text-xl group-open:rotate-180 transition-transform"><ChevronDown className="w-5 h-5" /></div>
</summary> </summary>
<div className="mt-4 text-gray-300"> <div className="mt-4 text-gray-300">
<p> <p>
@ -756,7 +797,7 @@ export default function SecureT() {
<details className="group"> <details className="group">
<summary className="flex items-center justify-between cursor-pointer"> <summary className="flex items-center justify-between cursor-pointer">
<h4 className="text-lg font-semibold text-yellow-400">Какие требования к системе для работы SECURE-T?</h4> <h4 className="text-lg font-semibold text-yellow-400">Какие требования к системе для работы SECURE-T?</h4>
<div className="text-yellow-400 text-xl group-open:rotate-180 transition-transform">▼</div> <div className="text-yellow-400 text-xl group-open:rotate-180 transition-transform"><ChevronDown className="w-5 h-5" /></div>
</summary> </summary>
<div className="mt-4 text-gray-300"> <div className="mt-4 text-gray-300">
<p> <p>
@ -772,7 +813,7 @@ export default function SecureT() {
<details className="group"> <details className="group">
<summary className="flex items-center justify-between cursor-pointer"> <summary className="flex items-center justify-between cursor-pointer">
<h4 className="text-lg font-semibold text-green-400">Предоставляется ли техническая поддержка?</h4> <h4 className="text-lg font-semibold text-green-400">Предоставляется ли техническая поддержка?</h4>
<div className="text-green-400 text-xl group-open:rotate-180 transition-transform">▼</div> <div className="text-green-400 text-xl group-open:rotate-180 transition-transform"><ChevronDown className="w-5 h-5" /></div>
</summary> </summary>
<div className="mt-4 text-gray-300"> <div className="mt-4 text-gray-300">
<p> <p>
@ -788,7 +829,7 @@ export default function SecureT() {
<details className="group"> <details className="group">
<summary className="flex items-center justify-between cursor-pointer"> <summary className="flex items-center justify-between cursor-pointer">
<h4 className="text-lg font-semibold text-purple-400">Можно ли получить демо-версию для тестирования?</h4> <h4 className="text-lg font-semibold text-purple-400">Можно ли получить демо-версию для тестирования?</h4>
<div className="text-purple-400 text-xl group-open:rotate-180 transition-transform">▼</div> <div className="text-purple-400 text-xl group-open:rotate-180 transition-transform"><ChevronDown className="w-5 h-5" /></div>
</summary> </summary>
<div className="mt-4 text-gray-300"> <div className="mt-4 text-gray-300">
<p> <p>
@ -823,7 +864,7 @@ export default function SecureT() {
}} }}
className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer" className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer"
> >
<div className="text-red-400 text-4xl mb-4 group-hover:animate-pulse-secure">🔐</div> <div className="text-red-400 text-4xl mb-4 group-hover:animate-pulse-secure"><Lock className="w-10 h-10" /></div>
<h3 className="text-xl font-bold mb-4">Криптографическая защита</h3> <h3 className="text-xl font-bold mb-4">Криптографическая защита</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Современные алгоритмы шифрования для защиты конфиденциальных данных Современные алгоритмы шифрования для защиты конфиденциальных данных
@ -847,7 +888,7 @@ export default function SecureT() {
}} }}
className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer" className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer"
> >
<div className="text-orange-400 text-4xl mb-4 group-hover:animate-pulse-secure">🛡️</div> <div className="text-orange-400 text-4xl mb-4 group-hover:animate-pulse-secure"><Shield className="w-10 h-10" /></div>
<h3 className="text-xl font-bold mb-4">Сетевая безопасность</h3> <h3 className="text-xl font-bold mb-4">Сетевая безопасность</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Комплексная защита сетевой инфраструктуры от внешних угроз Комплексная защита сетевой инфраструктуры от внешних угроз
@ -871,7 +912,7 @@ export default function SecureT() {
}} }}
className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer" className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer"
> >
<div className="text-yellow-400 text-4xl mb-4 group-hover:animate-pulse-secure">📊</div> <div className="text-yellow-400 text-4xl mb-4 group-hover:animate-pulse-secure"><Eye className="w-10 h-10" /></div>
<h3 className="text-xl font-bold mb-4">Мониторинг безопасности</h3> <h3 className="text-xl font-bold mb-4">Мониторинг безопасности</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Системы мониторинга и анализа инцидентов информационной безопасности Системы мониторинга и анализа инцидентов информационной безопасности
@ -895,7 +936,7 @@ export default function SecureT() {
}} }}
className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer" className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer"
> >
<div className="text-purple-400 text-4xl mb-4 group-hover:animate-pulse-secure">🔍</div> <div className="text-purple-400 text-4xl mb-4 group-hover:animate-pulse-secure"><Search className="w-10 h-10" /></div>
<h3 className="text-xl font-bold mb-4">Аудит безопасности</h3> <h3 className="text-xl font-bold mb-4">Аудит безопасности</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Проведение комплексного аудита систем информационной безопасности Проведение комплексного аудита систем информационной безопасности
@ -919,7 +960,7 @@ export default function SecureT() {
}} }}
className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer" className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer"
> >
<div className="text-blue-400 text-4xl mb-4 group-hover:animate-pulse-secure">⚙️</div> <div className="text-blue-400 text-4xl mb-4 group-hover:animate-pulse-secure"><Settings className="w-10 h-10" /></div>
<h3 className="text-xl font-bold mb-4">Интеграция систем</h3> <h3 className="text-xl font-bold mb-4">Интеграция систем</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Интеграция решений безопасности с существующей IT-инфраструктурой Интеграция решений безопасности с существующей IT-инфраструктурой
@ -943,7 +984,7 @@ export default function SecureT() {
}} }}
className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer" className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer"
> >
<div className="text-green-400 text-4xl mb-4 group-hover:animate-pulse-secure">📚</div> <div className="text-green-400 text-4xl mb-4 group-hover:animate-pulse-secure"><BookOpen className="w-10 h-10" /></div>
<h3 className="text-xl font-bold mb-4">Обучение персонала</h3> <h3 className="text-xl font-bold mb-4">Обучение персонала</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Программы обучения сотрудников основам информационной безопасности Программы обучения сотрудников основам информационной безопасности
@ -1001,7 +1042,7 @@ export default function SecureT() {
<section className="section-padding bg-gradient-to-r from-red-900/20 to-orange-900/20"> <section className="section-padding bg-gradient-to-r from-red-900/20 to-orange-900/20">
<div className="max-w-4xl mx-auto px-4"> <div className="max-w-4xl mx-auto px-4">
<div className="glass-effect p-12 rounded-lg text-center border border-red-500/30 animate-secure-glow"> <div className="glass-effect p-12 rounded-lg text-center border border-red-500/30 animate-secure-glow">
<div className="text-red-400 text-6xl mb-6 animate-pulse-secure">📚</div> <div className="text-red-400 text-6xl mb-6 animate-pulse-secure"><BookOpen className="w-16 h-16" /></div>
<h2 className="text-4xl font-bold mb-6"> <h2 className="text-4xl font-bold mb-6">
Полная <span className="gradient-text">документация</span> Полная <span className="gradient-text">документация</span>
</h2> </h2>
@ -1017,7 +1058,7 @@ export default function SecureT() {
rel="noopener noreferrer" rel="noopener noreferrer"
className="px-8 py-4 bg-red-500 text-white font-semibold rounded-lg hover-glow transition-all duration-300 hover:bg-red-600 active:scale-95 flex items-center justify-center gap-2 animate-pulse-secure" className="px-8 py-4 bg-red-500 text-white font-semibold rounded-lg hover-glow transition-all duration-300 hover:bg-red-600 active:scale-95 flex items-center justify-center gap-2 animate-pulse-secure"
> >
<span>📖</span> <span><FileText className="w-5 h-5" /></span>
Открыть документацию Открыть документацию
</a> </a>
<a <a
@ -1026,14 +1067,14 @@ export default function SecureT() {
rel="noopener noreferrer" rel="noopener noreferrer"
className="px-8 py-4 glass-effect text-white font-semibold rounded-lg hover:bg-white/10 transition-all duration-300 flex items-center justify-center gap-2" className="px-8 py-4 glass-effect text-white font-semibold rounded-lg hover:bg-white/10 transition-all duration-300 flex items-center justify-center gap-2"
> >
<span>🚀</span> <span><Rocket className="w-5 h-5" /></span>
Быстрый старт Быстрый старт
</a> </a>
</div> </div>
<div className="grid md:grid-cols-3 gap-6 text-left"> <div className="grid md:grid-cols-3 gap-6 text-left">
<div className="glass-effect p-6 rounded-lg border border-red-500/20 group hover:scale-105 transition-all duration-300"> <div className="glass-effect p-6 rounded-lg border border-red-500/20 group hover:scale-105 transition-all duration-300">
<div className="text-red-400 text-2xl mb-3 group-hover:animate-pulse-secure">🔧</div> <div className="text-red-400 text-2xl mb-3 group-hover:animate-pulse-secure"><Wrench className="w-6 h-6" /></div>
<h4 className="font-bold mb-2">Установка и настройка</h4> <h4 className="font-bold mb-2">Установка и настройка</h4>
<p className="text-gray-300 text-sm"> <p className="text-gray-300 text-sm">
Пошаговые инструкции по установке и первоначальной настройке системы Пошаговые инструкции по установке и первоначальной настройке системы
@ -1041,7 +1082,7 @@ export default function SecureT() {
</div> </div>
<div className="glass-effect p-6 rounded-lg border border-orange-500/20 group hover:scale-105 transition-all duration-300"> <div className="glass-effect p-6 rounded-lg border border-orange-500/20 group hover:scale-105 transition-all duration-300">
<div className="text-orange-400 text-2xl mb-3 group-hover:animate-pulse-secure">⚙️</div> <div className="text-orange-400 text-2xl mb-3 group-hover:animate-pulse-secure"><Settings className="w-6 h-6" /></div>
<h4 className="font-bold mb-2">Конфигурация</h4> <h4 className="font-bold mb-2">Конфигурация</h4>
<p className="text-gray-300 text-sm"> <p className="text-gray-300 text-sm">
Подробные примеры конфигураций для различных сценариев использования Подробные примеры конфигураций для различных сценариев использования
@ -1049,7 +1090,7 @@ export default function SecureT() {
</div> </div>
<div className="glass-effect p-6 rounded-lg border border-yellow-500/20 group hover:scale-105 transition-all duration-300"> <div className="glass-effect p-6 rounded-lg border border-yellow-500/20 group hover:scale-105 transition-all duration-300">
<div className="text-yellow-400 text-2xl mb-3 group-hover:animate-pulse-secure">🚀</div> <div className="text-yellow-400 text-2xl mb-3 group-hover:animate-pulse-secure"><Rocket className="w-6 h-6" /></div>
<h4 className="font-bold mb-2">API и интеграция</h4> <h4 className="font-bold mb-2">API и интеграция</h4>
<p className="text-gray-300 text-sm"> <p className="text-gray-300 text-sm">
Руководство по использованию API и интеграции с внешними системами Руководство по использованию API и интеграции с внешними системами
@ -1074,7 +1115,7 @@ export default function SecureT() {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group">
<div className="text-blue-400 text-4xl mb-4 group-hover:animate-pulse-secure">🏆</div> <div className="text-blue-400 text-4xl mb-4 group-hover:animate-pulse-secure"><Trophy className="w-10 h-10" /></div>
<h3 className="text-xl font-bold mb-4">Сертификат ФСТЭК</h3> <h3 className="text-xl font-bold mb-4">Сертификат ФСТЭК</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Сертификат соответствия требованиям безопасности информации № РОСС RU.0001.01БИ00 от 15.03.2024 Сертификат соответствия требованиям безопасности информации № РОСС RU.0001.01БИ00 от 15.03.2024
@ -1094,7 +1135,7 @@ export default function SecureT() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group">
<div className="text-green-400 text-4xl mb-4 group-hover:animate-pulse-secure">🛡️</div> <div className="text-green-400 text-4xl mb-4 group-hover:animate-pulse-secure"><Shield className="w-10 h-10" /></div>
<h3 className="text-xl font-bold mb-4">Лицензия ФСБ</h3> <h3 className="text-xl font-bold mb-4">Лицензия ФСБ</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Лицензия на разработку и производство средств защиты конфиденциальной информации № 149 от 22.08.2023 Лицензия на разработку и производство средств защиты конфиденциальной информации № 149 от 22.08.2023
@ -1114,7 +1155,7 @@ export default function SecureT() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group">
<div className="text-purple-400 text-4xl mb-4 group-hover:animate-pulse-secure">🌍</div> <div className="text-purple-400 text-4xl mb-4 group-hover:animate-pulse-secure"><Globe2 className="w-10 h-10" /></div>
<h3 className="text-xl font-bold mb-4">ISO 27001:2013</h3> <h3 className="text-xl font-bold mb-4">ISO 27001:2013</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Международный стандарт системы менеджмента информационной безопасности Международный стандарт системы менеджмента информационной безопасности
@ -1134,7 +1175,7 @@ export default function SecureT() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group">
<div className="text-red-400 text-4xl mb-4 group-hover:animate-pulse-secure">📋</div> <div className="text-red-400 text-4xl mb-4 group-hover:animate-pulse-secure"><FileText className="w-10 h-10" /></div>
<h3 className="text-xl font-bold mb-4">Реестр Минпромторга</h3> <h3 className="text-xl font-bold mb-4">Реестр Минпромторга</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Включение в единый реестр российских программ для ЭВМ и баз данных Включение в единый реестр российских программ для ЭВМ и баз данных
@ -1154,7 +1195,7 @@ export default function SecureT() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group">
<div className="text-yellow-400 text-4xl mb-4 group-hover:animate-pulse-secure">✅</div> <div className="text-yellow-400 text-4xl mb-4 group-hover:animate-pulse-secure"><CheckSquare className="w-10 h-10" /></div>
<h3 className="text-xl font-bold mb-4">Соответствие ГОСТ</h3> <h3 className="text-xl font-bold mb-4">Соответствие ГОСТ</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Соответствие требованиям ГОСТ Р 50922-2006, ГОСТ Р 51241-2017 и другим стандартам Соответствие требованиям ГОСТ Р 50922-2006, ГОСТ Р 51241-2017 и другим стандартам
@ -1174,7 +1215,7 @@ export default function SecureT() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group">
<div className="text-cyan-400 text-4xl mb-4 group-hover:animate-pulse-secure">🔐</div> <div className="text-cyan-400 text-4xl mb-4 group-hover:animate-pulse-secure"><Key className="w-10 h-10" /></div>
<h3 className="text-xl font-bold mb-4">Криптографические алгоритмы</h3> <h3 className="text-xl font-bold mb-4">Криптографические алгоритмы</h3>
<p className="text-gray-300 mb-4"> <p className="text-gray-300 mb-4">
Использование сертифицированных отечественных криптографических алгоритмов Использование сертифицированных отечественных криптографических алгоритмов
@ -1230,7 +1271,7 @@ export default function SecureT() {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 group"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 group">
<div className="text-blue-400 text-3xl mb-4 group-hover:animate-pulse-secure">📚</div> <div className="text-blue-400 text-3xl mb-4 group-hover:animate-pulse-secure"><BookOpen className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">Руководство пользователя</h4> <h4 className="text-lg font-bold mb-3">Руководство пользователя</h4>
<p className="text-gray-300 mb-4">Подробное руководство по работе с интерфейсом и основными функциями</p> <p className="text-gray-300 mb-4">Подробное руководство по работе с интерфейсом и основными функциями</p>
<ul className="text-sm text-gray-400 mb-4 space-y-1"> <ul className="text-sm text-gray-400 mb-4 space-y-1">
@ -1251,7 +1292,7 @@ export default function SecureT() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 group"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 group">
<div className="text-green-400 text-3xl mb-4 group-hover:animate-pulse-secure">⚙️</div> <div className="text-green-400 text-3xl mb-4 group-hover:animate-pulse-secure"><Settings className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">Руководство администратора</h4> <h4 className="text-lg font-bold mb-3">Руководство администратора</h4>
<p className="text-gray-300 mb-4">Техническое руководство для системных администраторов</p> <p className="text-gray-300 mb-4">Техническое руководство для системных администраторов</p>
<ul className="text-sm text-gray-400 mb-4 space-y-1"> <ul className="text-sm text-gray-400 mb-4 space-y-1">
@ -1272,7 +1313,7 @@ export default function SecureT() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 group"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 group">
<div className="text-purple-400 text-3xl mb-4 group-hover:animate-pulse-secure">🎥</div> <div className="text-purple-400 text-3xl mb-4 group-hover:animate-pulse-secure"><Video className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">Видеоуроки</h4> <h4 className="text-lg font-bold mb-3">Видеоуроки</h4>
<p className="text-gray-300 mb-4">Серия обучающих видеороликов для быстрого освоения</p> <p className="text-gray-300 mb-4">Серия обучающих видеороликов для быстрого освоения</p>
<ul className="text-sm text-gray-400 mb-4 space-y-1"> <ul className="text-sm text-gray-400 mb-4 space-y-1">
@ -1293,7 +1334,7 @@ export default function SecureT() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 group"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 group">
<div className="text-red-400 text-3xl mb-4 group-hover:animate-pulse-secure">🎓</div> <div className="text-red-400 text-3xl mb-4 group-hover:animate-pulse-secure"><GraduationCap className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">Онлайн-курсы</h4> <h4 className="text-lg font-bold mb-3">Онлайн-курсы</h4>
<p className="text-gray-300 mb-4">Интерактивные курсы с практическими заданиями</p> <p className="text-gray-300 mb-4">Интерактивные курсы с практическими заданиями</p>
<ul className="text-sm text-gray-400 mb-4 space-y-1"> <ul className="text-sm text-gray-400 mb-4 space-y-1">
@ -1314,7 +1355,7 @@ export default function SecureT() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 group"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 group">
<div className="text-yellow-400 text-3xl mb-4 group-hover:animate-pulse-secure">🔧</div> <div className="text-yellow-400 text-3xl mb-4 group-hover:animate-pulse-secure"><Wrench className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">Практические сценарии</h4> <h4 className="text-lg font-bold mb-3">Практические сценарии</h4>
<p className="text-gray-300 mb-4">Готовые сценарии для типовых задач безопасности</p> <p className="text-gray-300 mb-4">Готовые сценарии для типовых задач безопасности</p>
<ul className="text-sm text-gray-400 mb-4 space-y-1"> <ul className="text-sm text-gray-400 mb-4 space-y-1">
@ -1335,7 +1376,7 @@ export default function SecureT() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 group"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 group">
<div className="text-cyan-400 text-3xl mb-4 group-hover:animate-pulse-secure">📞</div> <div className="text-cyan-400 text-3xl mb-4 group-hover:animate-pulse-secure"><Headphones className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">Персональное обучение</h4> <h4 className="text-lg font-bold mb-3">Персональное обучение</h4>
<p className="text-gray-300 mb-4">Индивидуальные занятия с экспертом по безопасности</p> <p className="text-gray-300 mb-4">Индивидуальные занятия с экспертом по безопасности</p>
<ul className="text-sm text-gray-400 mb-4 space-y-1"> <ul className="text-sm text-gray-400 mb-4 space-y-1">
@ -1376,28 +1417,28 @@ export default function SecureT() {
<h3 className="text-2xl font-bold mb-6 text-green-400">Соответствие требованиям 44-ФЗ и 223-ФЗ</h3> <h3 className="text-2xl font-bold mb-6 text-green-400">Соответствие требованиям 44-ФЗ и 223-ФЗ</h3>
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-start space-x-3"> <div className="flex items-start space-x-3">
<div className="text-green-400 text-xl">✅</div> <div className="text-green-400 text-xl"><CheckCircle className="w-5 h-5" /></div>
<div> <div>
<h4 className="font-semibold mb-2">Реестр отечественного ПО</h4> <h4 className="font-semibold mb-2">Реестр отечественного ПО</h4>
<p className="text-gray-300 text-sm">Включен в единый реестр российских программ (№14158)</p> <p className="text-gray-300 text-sm">Включен в единый реестр российских программ (№14158)</p>
</div> </div>
</div> </div>
<div className="flex items-start space-x-3"> <div className="flex items-start space-x-3">
<div className="text-green-400 text-xl">✅</div> <div className="text-green-400 text-xl"><CheckCircle className="w-5 h-5" /></div>
<div> <div>
<h4 className="font-semibold mb-2">Импортозамещение</h4> <h4 className="font-semibold mb-2">Импортозамещение</h4>
<p className="text-gray-300 text-sm">100% российская разработка без зарубежных компонентов</p> <p className="text-gray-300 text-sm">100% российская разработка без зарубежных компонентов</p>
</div> </div>
</div> </div>
<div className="flex items-start space-x-3"> <div className="flex items-start space-x-3">
<div className="text-green-400 text-xl">✅</div> <div className="text-green-400 text-xl"><CheckCircle className="w-5 h-5" /></div>
<div> <div>
<h4 className="font-semibold mb-2">Техническая поддержка</h4> <h4 className="font-semibold mb-2">Техническая поддержка</h4>
<p className="text-gray-300 text-sm">Гарантированная поддержка на территории РФ</p> <p className="text-gray-300 text-sm">Гарантированная поддержка на территории РФ</p>
</div> </div>
</div> </div>
<div className="flex items-start space-x-3"> <div className="flex items-start space-x-3">
<div className="text-green-400 text-xl">✅</div> <div className="text-green-400 text-xl"><CheckCircle className="w-5 h-5" /></div>
<div> <div>
<h4 className="font-semibold mb-2">Сертификация</h4> <h4 className="font-semibold mb-2">Сертификация</h4>
<p className="text-gray-300 text-sm">Все необходимые сертификаты ФСТЭК и лицензии ФСБ</p> <p className="text-gray-300 text-sm">Все необходимые сертификаты ФСТЭК и лицензии ФСБ</p>
@ -1431,7 +1472,7 @@ export default function SecureT() {
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg"> <div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<span className="text-2xl">📋</span> <span className="text-2xl"><ClipboardList className="w-6 h-6" /></span>
<div> <div>
<p className="font-medium">Коммерческое предложение</p> <p className="font-medium">Коммерческое предложение</p>
<p className="text-sm text-gray-400">Готовое КП для госзакупок</p> <p className="text-sm text-gray-400">Готовое КП для госзакупок</p>
@ -1450,7 +1491,7 @@ export default function SecureT() {
<div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg"> <div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<span className="text-2xl">📊</span> <span className="text-2xl"><FileSpreadsheet className="w-6 h-6" /></span>
<div> <div>
<p className="font-medium">Техническое задание</p> <p className="font-medium">Техническое задание</p>
<p className="text-sm text-gray-400">Образец ТЗ для тендера</p> <p className="text-sm text-gray-400">Образец ТЗ для тендера</p>
@ -1469,7 +1510,7 @@ export default function SecureT() {
<div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg"> <div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<span className="text-2xl">📑</span> <span className="text-2xl"><FileCheck className="w-6 h-6" /></span>
<div> <div>
<p className="font-medium">Пакет документов</p> <p className="font-medium">Пакет документов</p>
<p className="text-gray-400 text-sm">Все сертификаты и лицензии</p> <p className="text-gray-400 text-sm">Все сертификаты и лицензии</p>
@ -1488,7 +1529,7 @@ export default function SecureT() {
<div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg"> <div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<span className="text-2xl">💰</span> <span className="text-2xl"><DollarSign className="w-6 h-6" /></span>
<div> <div>
<p className="font-medium">Прайс-лист</p> <p className="font-medium">Прайс-лист</p>
<p className="text-sm text-gray-400">Актуальные цены и условия</p> <p className="text-sm text-gray-400">Актуальные цены и условия</p>
@ -1575,7 +1616,7 @@ export default function SecureT() {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-blue-400 text-3xl mb-4">📄</div> <div className="text-blue-400 text-3xl mb-4"><FileText className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">Техническая документация</h4> <h4 className="text-lg font-bold mb-3">Техническая документация</h4>
<p className="text-gray-300 mb-4">Подробные руководства по внедрению и настройке</p> <p className="text-gray-300 mb-4">Подробные руководства по внедрению и настройке</p>
<button <button
@ -1590,7 +1631,7 @@ export default function SecureT() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-green-400 text-3xl mb-4">🎯</div> <div className="text-green-400 text-3xl mb-4"><Target className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">Методические материалы</h4> <h4 className="text-lg font-bold mb-3">Методические материалы</h4>
<p className="text-gray-300 mb-4">Лучшие практики информационной безопасности</p> <p className="text-gray-300 mb-4">Лучшие практики информационной безопасности</p>
<button <button
@ -1605,7 +1646,7 @@ export default function SecureT() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-purple-400 text-3xl mb-4">🔧</div> <div className="text-purple-400 text-3xl mb-4"><Wrench className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">Инструменты настройки</h4> <h4 className="text-lg font-bold mb-3">Инструменты настройки</h4>
<p className="text-gray-300 mb-4">Утилиты для конфигурирования системы</p> <p className="text-gray-300 mb-4">Утилиты для конфигурирования системы</p>
<button <button
@ -1620,7 +1661,7 @@ export default function SecureT() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-red-400 text-3xl mb-4">📊</div> <div className="text-red-400 text-3xl mb-4"><Eye className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">Отчеты и аналитика</h4> <h4 className="text-lg font-bold mb-3">Отчеты и аналитика</h4>
<p className="text-gray-300 mb-4">Шаблоны отчетов и аналитические данные</p> <p className="text-gray-300 mb-4">Шаблоны отчетов и аналитические данные</p>
<button <button
@ -1635,7 +1676,7 @@ export default function SecureT() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-yellow-400 text-3xl mb-4">🎓</div> <div className="text-yellow-400 text-3xl mb-4"><GraduationCap className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">Обучающие материалы</h4> <h4 className="text-lg font-bold mb-3">Обучающие материалы</h4>
<p className="text-gray-300 mb-4">Курсы и тренинги по безопасности</p> <p className="text-gray-300 mb-4">Курсы и тренинги по безопасности</p>
<button <button
@ -1650,7 +1691,7 @@ export default function SecureT() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-cyan-400 text-3xl mb-4">📋</div> <div className="text-cyan-400 text-3xl mb-4"><Award className="w-8 h-8" /></div>
<h4 className="text-lg font-bold mb-3">Сертификаты и лицензии</h4> <h4 className="text-lg font-bold mb-3">Сертификаты и лицензии</h4>
<p className="text-gray-300 mb-4">Документы о соответствии стандартам</p> <p className="text-gray-300 mb-4">Документы о соответствии стандартам</p>
<button <button
@ -1847,23 +1888,23 @@ export default function SecureT() {
<div className="mb-6"> <div className="mb-6">
<h3 className="text-lg font-semibold text-orange-400 mb-4">Доступная документация:</h3> <h3 className="text-lg font-semibold text-orange-400 mb-4">Доступная документация:</h3>
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-center space-x-3 p-3 bg-gray-800 rounded-lg"> <div className="flex items-start p-3 bg-gray-800 rounded-lg">
<span className="text-2xl">📚</span> <BookOpen className="w-6 h-6 text-orange-400 modal-documentation-icon flex-shrink-0 mt-0.5" />
<div> <div className="ml-3">
<p className="text-white font-medium">Полная документация</p> <p className="text-white font-medium">Полная документация</p>
<p className="text-gray-400 text-sm">Техническое руководство</p> <p className="text-gray-400 text-sm">Техническое руководство</p>
</div> </div>
</div> </div>
<div className="flex items-center space-x-3 p-3 bg-gray-800 rounded-lg"> <div className="flex items-start p-3 bg-gray-800 rounded-lg">
<span className="text-2xl">🚀</span> <Rocket className="w-6 h-6 text-orange-400 modal-documentation-icon flex-shrink-0 mt-0.5" />
<div> <div className="ml-3">
<p className="text-white font-medium">Быстрый старт</p> <p className="text-white font-medium">Быстрый старт</p>
<p className="text-gray-400 text-sm">Руководство по установке</p> <p className="text-gray-400 text-sm">Руководство по установке</p>
</div> </div>
</div> </div>
<div className="flex items-center space-x-3 p-3 bg-gray-800 rounded-lg"> <div className="flex items-start p-3 bg-gray-800 rounded-lg">
<span className="text-2xl">⚙️</span> <Settings className="w-6 h-6 text-orange-400 modal-documentation-icon flex-shrink-0 mt-0.5" />
<div> <div className="ml-3">
<p className="text-white font-medium">Примеры конфигураций</p> <p className="text-white font-medium">Примеры конфигураций</p>
<p className="text-gray-400 text-sm">Готовые настройки</p> <p className="text-gray-400 text-sm">Готовые настройки</p>
</div> </div>

87
src/app/solovey/page.tsx
View File

@ -2,6 +2,32 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import Navigation from '../components/Navigation'; import Navigation from '../components/Navigation';
import {
Bird,
Lightbulb,
Users,
Monitor,
MessageSquare,
Smartphone,
Shield,
BarChart3,
Palette,
Plug,
Building2,
GraduationCap,
Handshake,
Stethoscope,
Scale,
Landmark,
Wrench,
Tv,
Check,
Video,
Phone,
VolumeX,
Mic,
Volume2
} from 'lucide-react';
export default function Solovey() { export default function Solovey() {
const [isCallActive, setIsCallActive] = useState(false); const [isCallActive, setIsCallActive] = useState(false);
@ -150,7 +176,7 @@ export default function Solovey() {
<div className="mb-8"> <div className="mb-8">
<div className="inline-flex items-center space-x-4 mb-6"> <div className="inline-flex items-center space-x-4 mb-6">
<div className="w-16 h-16 bg-amber-500 rounded-full flex items-center justify-center relative"> <div className="w-16 h-16 bg-amber-500 rounded-full flex items-center justify-center relative">
<span className="text-black font-bold text-2xl">🐦</span> <Bird className="w-8 h-8 text-black" />
{/* Анимированные звуковые линии */} {/* Анимированные звуковые линии */}
<div className="absolute -right-8 top-1/2 transform -translate-y-1/2"> <div className="absolute -right-8 top-1/2 transform -translate-y-1/2">
{[...Array(4)].map((_, i) => ( {[...Array(4)].map((_, i) => (
@ -207,8 +233,9 @@ export default function Solovey() {
</div> </div>
<div className="glass-effect p-4 rounded-lg inline-block"> <div className="glass-effect p-4 rounded-lg inline-block">
<p className="text-sm text-gray-400"> <p className="text-sm text-gray-400 flex items-center gap-2">
💡 Устанавливается на поддомене заказчика с нашей технической поддержкой <Lightbulb className="w-4 h-4 text-amber-400" />
Устанавливается на поддомене заказчика с нашей технической поддержкой
</p> </p>
</div> </div>
</div> </div>
@ -284,7 +311,7 @@ export default function Solovey() {
)} )}
{participant.status === 'muted' && ( {participant.status === 'muted' && (
<div className="w-6 h-6 bg-red-500 rounded-full flex items-center justify-center"> <div className="w-6 h-6 bg-red-500 rounded-full flex items-center justify-center">
<span className="text-xs">🔇</span> <VolumeX className="w-3 h-3 text-white" />
</div> </div>
)} )}
</div> </div>
@ -295,16 +322,16 @@ export default function Solovey() {
{/* Панель управления */} {/* Панель управления */}
<div className="flex justify-center gap-4"> <div className="flex justify-center gap-4">
<button className="w-12 h-12 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600 transition-colors"> <button className="w-12 h-12 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600 transition-colors">
🎤 <Mic className="w-5 h-5 text-white" />
</button> </button>
<button className="w-12 h-12 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600 transition-colors"> <button className="w-12 h-12 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600 transition-colors">
📹 <Video className="w-5 h-5 text-white" />
</button> </button>
<button className="w-12 h-12 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600 transition-colors"> <button className="w-12 h-12 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600 transition-colors">
🖥️ <Monitor className="w-5 h-5 text-white" />
</button> </button>
<button className="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center hover:bg-red-600 transition-colors"> <button className="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center hover:bg-red-600 transition-colors">
📞 <Phone className="w-5 h-5 text-white" />
</button> </button>
</div> </div>
</div> </div>
@ -358,7 +385,7 @@ export default function Solovey() {
{/* Центральный сервер */} {/* Центральный сервер */}
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<div className="w-8 h-8 bg-amber-500 rounded-full flex items-center justify-center animate-pulse"> <div className="w-8 h-8 bg-amber-500 rounded-full flex items-center justify-center animate-pulse">
<span className="text-black font-bold">🖥️</span> <Monitor className="w-4 h-4 text-black" />
</div> </div>
<div className="text-center mt-2 text-sm text-amber-400 font-semibold"> <div className="text-center mt-2 text-sm text-amber-400 font-semibold">
Соловей Сервер Соловей Сервер
@ -478,7 +505,7 @@ export default function Solovey() {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-amber-400 text-4xl mb-4">📹</div> <div className="text-amber-400 text-4xl mb-4 flex justify-center"><Video className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">HD видеосвязь</h3> <h3 className="text-xl font-bold mb-4">HD видеосвязь</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Качественная видеосвязь в разрешении до 4K с адаптивной настройкой под канал связи Качественная видеосвязь в разрешении до 4K с адаптивной настройкой под канал связи
@ -486,7 +513,7 @@ export default function Solovey() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-yellow-400 text-4xl mb-4">👥</div> <div className="text-yellow-400 text-4xl mb-4 flex justify-center"><Users className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">Групповые конференции</h3> <h3 className="text-xl font-bold mb-4">Групповые конференции</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Поддержка до 100 участников одновременно с возможностью модерации Поддержка до 100 участников одновременно с возможностью модерации
@ -494,7 +521,7 @@ export default function Solovey() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-orange-400 text-4xl mb-4">🖥️</div> <div className="text-orange-400 text-4xl mb-4 flex justify-center"><Monitor className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">Демонстрация экрана</h3> <h3 className="text-xl font-bold mb-4">Демонстрация экрана</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Совместное использование экрана, презентаций и приложений Совместное использование экрана, презентаций и приложений
@ -502,7 +529,7 @@ export default function Solovey() {
</div> </div>
<div className="text-green-400 p-8 rounded-lg hover-glow transition-all duration-300"> <div className="text-green-400 p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-green-400 text-4xl mb-4">💬</div> <div className="text-green-400 text-4xl mb-4 flex justify-center"><MessageSquare className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">Чат и файлообмен</h3> <h3 className="text-xl font-bold mb-4">Чат и файлообмен</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Встроенный чат с возможностью отправки файлов и ссылок Встроенный чат с возможностью отправки файлов и ссылок
@ -510,7 +537,7 @@ export default function Solovey() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-blue-400 text-4xl mb-4">📱</div> <div className="text-blue-400 text-4xl mb-4 flex justify-center"><Smartphone className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">Мультиплатформенность</h3> <h3 className="text-xl font-bold mb-4">Мультиплатформенность</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Работает в браузере, на мобильных устройствах и десктопе Работает в браузере, на мобильных устройствах и десктопе
@ -518,7 +545,7 @@ export default function Solovey() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-purple-400 text-4xl mb-4">🔒</div> <div className="text-purple-400 text-4xl mb-4 flex justify-center"><Shield className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">Безопасность</h3> <h3 className="text-xl font-bold mb-4">Безопасность</h3>
<p className="text-gray-300"> <p className="text-gray-300">
End-to-end шифрование и защита от несанкционированного доступа End-to-end шифрование и защита от несанкционированного доступа
@ -526,7 +553,7 @@ export default function Solovey() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-red-400 text-4xl mb-4">📊</div> <div className="text-red-400 text-4xl mb-4 flex justify-center"><BarChart3 className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">Аналитика</h3> <h3 className="text-xl font-bold mb-4">Аналитика</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Детальная статистика использования и отчеты по конференциям Детальная статистика использования и отчеты по конференциям
@ -534,7 +561,7 @@ export default function Solovey() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-cyan-400 text-4xl mb-4">🎨</div> <div className="text-cyan-400 text-4xl mb-4 flex justify-center"><Palette className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">Брендинг</h3> <h3 className="text-xl font-bold mb-4">Брендинг</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Настройка интерфейса под корпоративный стиль заказчика Настройка интерфейса под корпоративный стиль заказчика
@ -542,7 +569,7 @@ export default function Solovey() {
</div> </div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300">
<div className="text-pink-400 text-4xl mb-4">🔌</div> <div className="text-pink-400 text-4xl mb-4 flex justify-center"><Plug className="w-8 h-8" /></div>
<h3 className="text-xl font-bold mb-4">API интеграция</h3> <h3 className="text-xl font-bold mb-4">API интеграция</h3>
<p className="text-gray-300"> <p className="text-gray-300">
Возможность интеграции с корпоративными системами через API Возможность интеграции с корпоративными системами через API
@ -566,7 +593,7 @@ export default function Solovey() {
<h3 className="text-2xl font-bold mb-6 text-amber-400">На поддомене заказчика</h3> <h3 className="text-2xl font-bold mb-6 text-amber-400">На поддомене заказчика</h3>
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-start space-x-4"> <div className="flex items-start space-x-4">
<div className="text-amber-400 text-xl mt-1">✓</div> <Check className="text-amber-400 w-5 h-5 mt-1 flex-shrink-0" />
<div> <div>
<h4 className="font-semibold mb-2">Ваш домен</h4> <h4 className="font-semibold mb-2">Ваш домен</h4>
<p className="text-gray-300 text-sm">meet.yourcompany.ru или conference.yourcompany.com</p> <p className="text-gray-300 text-sm">meet.yourcompany.ru или conference.yourcompany.com</p>
@ -574,7 +601,7 @@ export default function Solovey() {
</div> </div>
<div className="flex items-start space-x-4"> <div className="flex items-start space-x-4">
<div className="text-amber-400 text-xl mt-1">✓</div> <Check className="text-amber-400 w-5 h-5 mt-1 flex-shrink-0" />
<div> <div>
<h4 className="font-semibold mb-2">Полный контроль</h4> <h4 className="font-semibold mb-2">Полный контроль</h4>
<p className="text-gray-300 text-sm">Управление пользователями и настройками</p> <p className="text-gray-300 text-sm">Управление пользователями и настройками</p>
@ -582,7 +609,7 @@ export default function Solovey() {
</div> </div>
<div className="flex items-start space-x-4"> <div className="flex items-start space-x-4">
<div className="text-amber-400 text-xl mt-1">✓</div> <Check className="text-amber-400 w-5 h-5 mt-1 flex-shrink-0" />
<div> <div>
<h4 className="font-semibold mb-2">Корпоративный стиль</h4> <h4 className="font-semibold mb-2">Корпоративный стиль</h4>
<p className="text-gray-300 text-sm">Логотип, цвета и дизайн под ваш бренд</p> <p className="text-gray-300 text-sm">Логотип, цвета и дизайн под ваш бренд</p>
@ -590,7 +617,7 @@ export default function Solovey() {
</div> </div>
<div className="flex items-start space-x-4"> <div className="flex items-start space-x-4">
<div className="text-amber-400 text-xl mt-1">✓</div> <Check className="text-amber-400 w-5 h-5 mt-1 flex-shrink-0" />
<div> <div>
<h4 className="font-semibold mb-2">Техподдержка</h4> <h4 className="font-semibold mb-2">Техподдержка</h4>
<p className="text-gray-300 text-sm">Наша команда обеспечивает работу сервиса</p> <p className="text-gray-300 text-sm">Наша команда обеспечивает работу сервиса</p>
@ -633,7 +660,7 @@ export default function Solovey() {
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-amber-400 text-3xl mb-4">🏢</div> <div className="text-amber-400 text-3xl mb-4 flex justify-center"><Building2 className="w-6 h-6" /></div>
<h4 className="text-lg font-bold mb-3">Корпоративные встречи</h4> <h4 className="text-lg font-bold mb-3">Корпоративные встречи</h4>
<p className="text-gray-300 text-sm"> <p className="text-gray-300 text-sm">
Планерки, совещания, презентации для сотрудников Планерки, совещания, презентации для сотрудников
@ -641,7 +668,7 @@ export default function Solovey() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-yellow-400 text-3xl mb-4">🎓</div> <div className="text-yellow-400 text-3xl mb-4 flex justify-center"><GraduationCap className="w-6 h-6" /></div>
<h4 className="text-lg font-bold mb-3">Обучение и тренинги</h4> <h4 className="text-lg font-bold mb-3">Обучение и тренинги</h4>
<p className="text-gray-300 text-sm"> <p className="text-gray-300 text-sm">
Дистанционное обучение персонала и клиентов Дистанционное обучение персонала и клиентов
@ -649,7 +676,7 @@ export default function Solovey() {
</div> </div>
<div className="text-green-400 p-6 rounded-lg hover-glow transition-all duration-300"> <div className="text-green-400 p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-green-400 text-3xl mb-4">🤝</div> <div className="text-green-400 text-3xl mb-4 flex justify-center"><Handshake className="w-6 h-6" /></div>
<h4 className="text-lg font-bold mb-3">Переговоры с клиентами</h4> <h4 className="text-lg font-bold mb-3">Переговоры с клиентами</h4>
<p className="text-gray-300 text-sm"> <p className="text-gray-300 text-sm">
Презентации продуктов и услуг потенциальным клиентам Презентации продуктов и услуг потенциальным клиентам
@ -657,7 +684,7 @@ export default function Solovey() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-blue-400 text-3xl mb-4">🏥</div> <div className="text-blue-400 text-3xl mb-4 flex justify-center"><Stethoscope className="w-6 h-6" /></div>
<h4 className="text-lg font-bold mb-3">Телемедицина</h4> <h4 className="text-lg font-bold mb-3">Телемедицина</h4>
<p className="text-gray-300 text-sm"> <p className="text-gray-300 text-sm">
Консультации врачей и медицинские консилиумы Консультации врачей и медицинские консилиумы
@ -665,7 +692,7 @@ export default function Solovey() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-purple-400 text-3xl mb-4">⚖️</div> <div className="text-purple-400 text-3xl mb-4 flex justify-center"><Scale className="w-6 h-6" /></div>
<h4 className="text-lg font-bold mb-3">Юридические консультации</h4> <h4 className="text-lg font-bold mb-3">Юридические консультации</h4>
<p className="text-gray-300 text-sm"> <p className="text-gray-300 text-sm">
Удаленные консультации и судебные заседания Удаленные консультации и судебные заседания
@ -673,7 +700,7 @@ export default function Solovey() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-red-400 text-3xl mb-4">🏛️</div> <div className="text-red-400 text-3xl mb-4 flex justify-center"><Landmark className="w-6 h-6" /></div>
<h4 className="text-lg font-bold mb-3">Государственные услуги</h4> <h4 className="text-lg font-bold mb-3">Государственные услуги</h4>
<p className="text-gray-300 text-sm"> <p className="text-gray-300 text-sm">
Прием граждан и межведомственное взаимодействие Прием граждан и межведомственное взаимодействие
@ -681,7 +708,7 @@ export default function Solovey() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-cyan-400 text-3xl mb-4">🔧</div> <div className="text-cyan-400 text-3xl mb-4 flex justify-center"><Wrench className="w-6 h-6" /></div>
<h4 className="text-lg font-bold mb-3">Техническая поддержка</h4> <h4 className="text-lg font-bold mb-3">Техническая поддержка</h4>
<p className="text-gray-300 text-sm"> <p className="text-gray-300 text-sm">
Удаленная диагностика и решение проблем Удаленная диагностика и решение проблем
@ -689,7 +716,7 @@ export default function Solovey() {
</div> </div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300"> <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="text-pink-400 text-3xl mb-4">📺</div> <div className="text-pink-400 text-3xl mb-4 flex justify-center"><Tv className="w-6 h-6" /></div>
<h4 className="text-lg font-bold mb-3">Вебинары и события</h4> <h4 className="text-lg font-bold mb-3">Вебинары и события</h4>
<p className="text-gray-300 text-sm"> <p className="text-gray-300 text-sm">
Массовые онлайн-мероприятия и конференции Массовые онлайн-мероприятия и конференции

15
src/app/ux-software/layout.tsx
View File

@ -1,15 +0,0 @@
import { Metadata } from 'next';
export const metadata: Metadata = {
title: "UX-софт - Улучшение пользовательского опыта в интернете | GUNDYREV",
description: "Профессиональное программное решение для улучшения пользовательского опыта в сети интернет. Безопасность, приватность и оптимизация соединения.",
keywords: "UX софт, улучшение пользовательского опыта, интернет оптимизация, безопасность в сети, приватность онлайн",
};
export default function UXSoftwareLayout({
children,
}: {
children: React.ReactNode;
}) {
return <>{children}</>;
}

916
src/app/ux-software/page.tsx
View File

@ -1,916 +0,0 @@
'use client';
import Navigation from '../components/Navigation';
import { useState, useEffect } from 'react';
export default function UXSoftware() {
const [isModalOpen, setIsModalOpen] = useState(false);
const [formData, setFormData] = useState({
name: '',
email: '',
message: ''
});
// Живые метрики UX
const [uxMetrics, setUxMetrics] = useState({
loadingSpeed: 0,
userSatisfaction: 0,
pageViews: 0,
bounceRate: 0
});
// Интерактивная карта серверов
const [serverMap, setServerMap] = useState<Array<{
id: number,
x: number,
y: number,
status: 'active' | 'busy' | 'maintenance',
location: string,
ping: number
}>>([]);
// Живая демонстрация UX улучшений
const [uxDemo, setUxDemo] = useState({
beforeSpeed: 450,
afterSpeed: 12,
improvement: 0,
isAnimating: false
});
// Уведомления об улучшениях
const [uxNotifications, setUxNotifications] = useState<Array<{
id: number,
message: string,
type: 'speed' | 'ux' | 'performance',
timestamp: Date
}>>([]);
const [notificationId, setNotificationId] = useState(0);
// Анимация метрик UX
useEffect(() => {
const targetMetrics = {
loadingSpeed: 1.2,
userSatisfaction: 98.2,
pageViews: 2847960,
bounceRate: 2.1
};
const duration = 2500;
const steps = 60;
const stepDuration = duration / steps;
let currentStep = 0;
const interval = setInterval(() => {
currentStep++;
const progress = currentStep / steps;
const easeOut = 1 - Math.pow(1 - progress, 3);
setUxMetrics({
loadingSpeed: Math.floor(targetMetrics.loadingSpeed * easeOut * 10) / 10,
userSatisfaction: Math.floor(targetMetrics.userSatisfaction * easeOut * 10) / 10,
pageViews: Math.floor(targetMetrics.pageViews * easeOut),
bounceRate: Math.floor(targetMetrics.bounceRate * easeOut * 10) / 10
});
if (currentStep >= steps) {
clearInterval(interval);
}
}, stepDuration);
return () => clearInterval(interval);
}, []);
// Инициализация карты серверов
useEffect(() => {
const servers = [
{ location: 'Москва', x: 65, y: 35, ping: 12 },
{ location: 'Санкт-Петербург', x: 63, y: 25, ping: 18 },
{ location: 'Нью-Йорк', x: 25, y: 40, ping: 85 },
{ location: 'Лондон', x: 52, y: 30, ping: 45 },
{ location: 'Токио', x: 85, y: 45, ping: 120 },
{ location: 'Сингапур', x: 80, y: 65, ping: 95 },
{ location: 'Франкфурт', x: 55, y: 32, ping: 38 },
{ location: 'Сидней', x: 88, y: 80, ping: 180 }
];
const initialServers = servers.map((server, index) => ({
id: index,
x: server.x,
y: server.y,
status: Math.random() > 0.8 ? 'maintenance' as const : Math.random() > 0.3 ? 'active' as const : 'busy' as const,
location: server.location,
ping: server.ping
}));
setServerMap(initialServers);
// Обновление статусов серверов
const interval = setInterval(() => {
setServerMap(prev => prev.map(server => ({
...server,
status: Math.random() > 0.9 ? 'maintenance' as const : Math.random() > 0.2 ? 'active' as const : 'busy' as const,
ping: server.ping + Math.floor(Math.random() * 20 - 10)
})));
}, 3000);
return () => clearInterval(interval);
}, []);
// Демонстрация UX улучшений
useEffect(() => {
const runDemo = () => {
setUxDemo(prev => ({ ...prev, isAnimating: true, improvement: 0 }));
setTimeout(() => {
setUxDemo(prev => {
if (!prev) return prev;
const improvement = Math.floor(((prev.beforeSpeed - prev.afterSpeed) / prev.beforeSpeed) * 100);
return { ...prev, improvement, isAnimating: false };
});
}, 2000);
};
const interval = setInterval(runDemo, 8000);
runDemo(); // Запускаем сразу
return () => clearInterval(interval);
}, []);
// Уведомления об улучшениях UX
useEffect(() => {
const uxMessages = [
{ message: 'Подключение к серверу в Германии установлено', type: 'speed' as const },
{ message: 'Пинг снижен до 12ms через оптимизацию маршрута', type: 'performance' as const },
{ message: 'Kill Switch активирован для защиты от утечек', type: 'ux' as const },
{ message: 'DNS-запросы перенаправлены на защищенные серверы', type: 'performance' as const },
{ message: 'Трафик зашифрован протоколом WireGuard', type: 'ux' as const },
{ message: 'Автоматическое переключение на резервный сервер', type: 'speed' as const },
{ message: 'Блокировка рекламы и трекеров активирована', type: 'ux' as const },
{ message: 'Скорость загрузки увеличена на 45% через сжатие', type: 'speed' as const }
];
const addNotification = () => {
const newNotification = {
id: notificationId,
...uxMessages[Math.floor(Math.random() * uxMessages.length)],
timestamp: new Date()
};
setUxNotifications(prev => [newNotification, ...prev.slice(0, 3)]);
setNotificationId(prev => prev + 1);
setTimeout(() => {
setUxNotifications(prev => prev.filter(notif => notif.id !== newNotification.id));
}, 6000);
};
const interval = setInterval(addNotification, 4000);
return () => clearInterval(interval);
}, [notificationId]);
// Создание CSS анимаций
useEffect(() => {
const style = document.createElement('style');
style.textContent = `
@keyframes ux-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.1); }
}
@keyframes slide-in-ux {
from { transform: translateX(20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes server-ping {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.3); opacity: 1; }
}
@keyframes ux-glow {
0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.6); }
}
@keyframes metric-count {
from { transform: translateY(10px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.animate-ux-pulse { animation: ux-pulse 2s ease-in-out infinite; }
.animate-slide-in-ux { animation: slide-in-ux 0.5s ease-out; }
.animate-server-ping { animation: server-ping 2s ease-in-out infinite; }
.animate-ux-glow { animation: ux-glow 3s ease-in-out infinite; }
.animate-metric-count { animation: metric-count 0.6s ease-out; }
`;
document.head.appendChild(style);
return () => {
document.head.removeChild(style);
};
}, []);
const handleConsultationClick = () => {
setIsModalOpen(true);
document.body.style.overflow = 'hidden';
};
const handleCloseModal = () => {
setIsModalOpen(false);
document.body.style.overflow = 'unset';
};
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
alert(`Спасибо за заявку, ${formData.name}! Мы свяжемся с вами в ближайшее время.`);
setFormData({ name: '', email: '', message: '' });
setIsModalOpen(false);
document.body.style.overflow = 'unset';
};
return (
<>
<Navigation />
{/* Уведомления об улучшениях UX */}
<div className="fixed top-20 right-4 z-50 space-y-2 max-w-sm">
{uxNotifications.map((notification) => (
<div
key={notification.id}
className={`p-4 rounded-lg border-l-4 glass-effect animate-slide-in-ux ${
notification.type === 'speed' ? 'border-blue-500 bg-blue-900/20' :
notification.type === 'performance' ? 'border-green-500 bg-green-900/20' :
'border-purple-500 bg-purple-900/20'
}`}
>
<div className="flex items-start space-x-3">
<div className={`text-xl animate-ux-pulse ${
notification.type === 'speed' ? 'text-blue-400' :
notification.type === 'performance' ? 'text-green-400' :
'text-purple-400'
}`}>
{notification.type === 'speed' ? '⚡' :
notification.type === 'performance' ? '🚀' : '✨'}
</div>
<div className="flex-1">
<p className="text-sm text-gray-300 font-medium">{notification.message}</p>
<p className="text-xs text-gray-500 mt-1">
{notification.timestamp.toLocaleTimeString()}
</p>
</div>
</div>
</div>
))}
</div>
{/* Hero Section */}
<section className="min-h-screen flex items-center justify-center relative overflow-hidden pt-16">
<div className="absolute inset-0 bg-gradient-to-br from-blue-900 via-black to-purple-900"></div>
{/* Интерактивная карта серверов */}
<div className="absolute inset-0 opacity-30">
{serverMap.map((server) => (
<div
key={server.id}
className={`absolute w-4 h-4 rounded-full animate-server-ping cursor-pointer ${
server.status === 'active' ? 'bg-green-500' :
server.status === 'busy' ? 'bg-yellow-500' :
'bg-red-500'
}`}
style={{
left: `${server.x}%`,
top: `${server.y}%`
}}
title={`${server.location} - ${server.ping}ms`}
></div>
))}
</div>
<div className="absolute inset-0 opacity-20">
<div className="absolute top-1/3 left-1/3 w-96 h-96 bg-blue-500 rounded-full blur-3xl opacity-30"></div>
<div className="absolute bottom-1/3 right-1/3 w-96 h-96 bg-purple-500 rounded-full blur-3xl opacity-30"></div>
</div>
<div className="relative z-10 text-center max-w-6xl mx-auto px-4">
<h1 className="text-5xl md:text-7xl font-bold mb-6">
Профессиональный <span className="gradient-text animate-ux-pulse">UX-софт</span>
</h1>
<p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-4xl mx-auto">
Программное решение для улучшения пользовательского опыта в сети интернет с серверами в 65+ странах
</p>
{/* Живые метрики UX-софта */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8 max-w-4xl mx-auto">
<div className="glass-effect p-4 rounded-lg animate-ux-glow">
<div className="text-2xl font-bold text-blue-400 animate-metric-count">{uxMetrics.loadingSpeed}s</div>
<div className="text-sm text-gray-300">Время подключения</div>
</div>
<div className="glass-effect p-4 rounded-lg animate-ux-glow">
<div className="text-2xl font-bold text-green-400 animate-metric-count">{uxMetrics.userSatisfaction}%</div>
<div className="text-sm text-gray-300">Стабильность соединения</div>
</div>
<div className="glass-effect p-4 rounded-lg animate-ux-glow">
<div className="text-2xl font-bold text-purple-400 animate-metric-count">{uxMetrics.pageViews.toLocaleString()}</div>
<div className="text-sm text-gray-300">Активных пользователей</div>
</div>
<div className="glass-effect p-4 rounded-lg animate-ux-glow">
<div className="text-2xl font-bold text-yellow-400 animate-metric-count">{uxMetrics.bounceRate}%</div>
<div className="text-sm text-gray-300">Потеря пакетов</div>
</div>
</div>
{/* Живая демонстрация улучшений */}
<div className="glass-effect p-6 rounded-lg mb-8 max-w-2xl mx-auto">
<h3 className="text-lg font-bold text-blue-400 mb-4">Сравнение пинга до и после оптимизации</h3>
<div className="grid grid-cols-2 gap-6">
<div className="text-center">
<div className="text-red-400 font-bold mb-2">Без оптимизации (обычный провайдер)</div>
<div className={`text-3xl font-bold ${uxDemo.isAnimating ? 'animate-ux-pulse' : ''}`}>
{uxDemo.beforeSpeed}ms
</div>
</div>
<div className="text-center">
<div className="text-green-400 font-bold mb-2">С UX-софтом (оптимизированный маршрут)</div>
<div className={`text-3xl font-bold ${uxDemo.isAnimating ? 'animate-ux-pulse' : ''}`}>
{uxDemo.afterSpeed}ms
</div>
</div>
</div>
{uxDemo.improvement > 0 && (
<div className="mt-4 text-center">
<div className="text-blue-400 font-bold text-xl animate-metric-count">
Улучшение пинга на {uxDemo.improvement}%!
</div>
</div>
)}
</div>
<div className="glass-effect p-4 rounded-lg inline-block mb-8">
<p className="text-sm text-gray-400">
* Данная страница носит информационный характер. Публичная оферта отсутствует.
</p>
</div>
</div>
</section>
{/* UX-софт Features Section */}
<section className="section-padding bg-gray-900/50">
<div className="max-w-7xl mx-auto px-4">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-6">
Возможности <span className="gradient-text">UX-софта</span>
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto">
Профессиональное решение для улучшения пользовательского опыта с передовыми технологиями защиты и оптимизации
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105">
<div className="text-blue-400 text-4xl mb-4 group-hover:animate-ux-pulse">🚀</div>
<h3 className="text-xl font-bold mb-4">Высокая скорость</h3>
<p className="text-gray-300">
WireGuard протокол обеспечивает скорость до 1 Гбит/с с минимальной задержкой
</p>
<div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="text-blue-400 text-sm font-medium">Пинг от 5ms | Без ограничений трафика</div>
</div>
</div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105">
<div className="text-purple-400 text-4xl mb-4 group-hover:animate-ux-pulse">🔒</div>
<h3 className="text-xl font-bold mb-4">Военное шифрование</h3>
<p className="text-gray-300">
AES-256 шифрование с Perfect Forward Secrecy и защитой от утечек DNS
</p>
<div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="text-purple-400 text-sm font-medium">ChaCha20-Poly1305 | Secure Protocol 2.6</div>
</div>
</div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105">
<div className="text-green-400 text-4xl mb-4 group-hover:animate-ux-pulse">🌐</div>
<h3 className="text-xl font-bold mb-4">Глобальная сеть</h3>
<p className="text-gray-300">
8500+ серверов в 65 странах с автоматическим выбором оптимального маршрута
</p>
<div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="text-green-400 text-sm font-medium">Tier-1 провайдеры | 10 Гбит/с порты</div>
</div>
</div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105">
<div className="text-yellow-400 text-4xl mb-4 group-hover:animate-ux-pulse">⚡</div>
<h3 className="text-xl font-bold mb-4">Стабильность 99.9%</h3>
<p className="text-gray-300">
Резервирование серверов, автоматическое переключение и мониторинг 24/7
</p>
<div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="text-yellow-400 text-sm font-medium">SLA 99.9% | Резерв серверов</div>
</div>
</div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105">
<div className="text-red-400 text-4xl mb-4 group-hover:animate-ux-pulse">🛡️</div>
<h3 className="text-xl font-bold mb-4">Строгая No-Log политика</h3>
<p className="text-gray-300">
Независимый аудит подтверждает: мы не храним логи активности пользователей
</p>
<div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="text-red-400 text-sm font-medium">Аудит от Cure53 | Юрисдикция Панама</div>
</div>
</div>
<div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105">
<div className="text-cyan-400 text-4xl mb-4 group-hover:animate-ux-pulse">📱</div>
<h3 className="text-xl font-bold mb-4">Все платформы</h3>
<p className="text-gray-300">
Приложения для Windows, macOS, iOS, Android, Linux и роутеров
</p>
<div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="text-cyan-400 text-sm font-medium">До 10 устройств одновременно</div>
</div>
</div>
</div>
</div>
</section>
{/* Технические характеристики */}
<section className="section-padding bg-gradient-to-r from-blue-900/20 to-purple-900/20">
<div className="max-w-7xl mx-auto px-4">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-6">
Технические <span className="gradient-text">характеристики</span>
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto">
Подробная информация о протоколах, серверах и производительности решения
</p>
</div>
<div className="grid md:grid-cols-2 gap-12">
<div className="space-y-8">
<div className="glass-effect p-8 rounded-lg border border-blue-500/30">
<h3 className="text-2xl font-bold mb-6 text-blue-400">Протоколы и шифрование</h3>
<div className="space-y-4">
<div className="flex justify-between items-center">
<span className="text-gray-300">Основной протокол:</span>
<span className="text-white font-semibold">WireGuard</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-300">Резервный протокол:</span>
<span className="text-white font-semibold">Secure Protocol UDP/TCP</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-300">Шифрование:</span>
<span className="text-white font-semibold">AES-256-GCM</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-300">Аутентификация:</span>
<span className="text-white font-semibold">SHA-384</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-300">Обмен ключами:</span>
<span className="text-white font-semibold">X25519</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-300">Perfect Forward Secrecy:</span>
<span className="text-green-400 font-semibold">✓ Включено</span>
</div>
</div>
</div>
<div className="glass-effect p-8 rounded-lg border border-green-500/30">
<h3 className="text-2xl font-bold mb-6 text-green-400">Защита от утечек</h3>
<div className="space-y-4">
<div className="flex justify-between items-center">
<span className="text-gray-300">DNS Leak Protection:</span>
<span className="text-green-400 font-semibold">✓ Активна</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-300">IPv6 Leak Protection:</span>
<span className="text-green-400 font-semibold">✓ Активна</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-300">Kill Switch:</span>
<span className="text-green-400 font-semibold">✓ Встроен</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-300">WebRTC Block:</span>
<span className="text-green-400 font-semibold">✓ Активен</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-300">Secure DNS:</span>
<span className="text-green-400 font-semibold">✓ Собственные серверы</span>
</div>
</div>
</div>
</div>
<div className="space-y-8">
<div className="glass-effect p-8 rounded-lg border border-purple-500/30">
<h3 className="text-2xl font-bold mb-6 text-purple-400">Производительность</h3>
<div className="space-y-6">
<div className="group">
<div className="flex justify-between items-center mb-2">
<span className="text-gray-300">Максимальная скорость</span>
<span className="text-purple-400 font-bold">1 Гбит/с</span>
</div>
<div className="w-full bg-gray-700 rounded-full h-2">
<div className="bg-purple-400 h-2 rounded-full animate-pulse" style={{width: '100%'}}></div>
</div>
</div>
<div className="group">
<div className="flex justify-between items-center mb-2">
<span className="text-gray-300">Минимальная задержка</span>
<span className="text-blue-400 font-bold">5ms</span>
</div>
<div className="w-full bg-gray-700 rounded-full h-2">
<div className="bg-blue-400 h-2 rounded-full animate-pulse" style={{width: '95%'}}></div>
</div>
</div>
<div className="group">
<div className="flex justify-between items-center mb-2">
<span className="text-gray-300">Время подключения</span>
<span className="text-green-400 font-bold">1.2s</span>
</div>
<div className="w-full bg-gray-700 rounded-full h-2">
<div className="bg-green-400 h-2 rounded-full animate-pulse" style={{width: '98%'}}></div>
</div>
</div>
<div className="group">
<div className="flex justify-between items-center mb-2">
<span className="text-gray-300">Стабильность</span>
<span className="text-yellow-400 font-bold">99.9%</span>
</div>
<div className="w-full bg-gray-700 rounded-full h-2">
<div className="bg-yellow-400 h-2 rounded-full animate-pulse" style={{width: '99%'}}></div>
</div>
</div>
</div>
</div>
<div className="glass-effect p-8 rounded-lg border border-yellow-500/30">
<h3 className="text-2xl font-bold mb-6 text-yellow-400">Серверная инфраструктура</h3>
<div className="grid grid-cols-2 gap-4">
<div className="text-center p-4 bg-gray-800/50 rounded-lg">
<div className="text-2xl font-bold text-yellow-400 mb-2">8,500+</div>
<div className="text-sm text-gray-300">Серверов</div>
</div>
<div className="text-center p-4 bg-gray-800/50 rounded-lg">
<div className="text-2xl font-bold text-blue-400 mb-2">65</div>
<div className="text-sm text-gray-300">Стран</div>
</div>
<div className="text-center p-4 bg-gray-800/50 rounded-lg">
<div className="text-2xl font-bold text-green-400 mb-2">10 Гбит/с</div>
<div className="text-sm text-gray-300">Порты</div>
</div>
<div className="text-center p-4 bg-gray-800/50 rounded-lg">
<div className="text-2xl font-bold text-purple-400 mb-2">100%</div>
<div className="text-sm text-gray-300">RAM-диски</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* How it works */}
<section className="section-padding">
<div className="max-w-7xl mx-auto px-4">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-6">
Как работает <span className="gradient-text">UX-софт</span>
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto">
Простое подключение к защищенной сети в 3 шага
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
<div className="text-center group">
<div className="glass-effect w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:animate-ux-pulse transition-all duration-300 group-hover:scale-110">
<span className="text-2xl font-bold gradient-text">1</span>
</div>
<h3 className="text-xl font-bold mb-4 group-hover:text-blue-400 transition-colors">Скачивание</h3>
<p className="text-gray-300 group-hover:text-gray-200 transition-colors">
Загрузите приложение для вашей операционной системы
</p>
<div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="text-blue-400 text-sm">📱 Windows, macOS, iOS, Android, Linux</div>
</div>
</div>
<div className="text-center group">
<div className="glass-effect w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:animate-ux-pulse transition-all duration-300 group-hover:scale-110">
<span className="text-2xl font-bold gradient-text">2</span>
</div>
<h3 className="text-xl font-bold mb-4 group-hover:text-green-400 transition-colors">Авторизация</h3>
<p className="text-gray-300 group-hover:text-gray-200 transition-colors">
Войдите в аккаунт и выберите оптимальный сервер
</p>
<div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="text-green-400 text-sm">🔑 Автоматический выбор сервера</div>
</div>
</div>
<div className="text-center group">
<div className="glass-effect w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:animate-ux-pulse transition-all duration-300 group-hover:scale-110">
<span className="text-2xl font-bold gradient-text">3</span>
</div>
<h3 className="text-xl font-bold mb-4 group-hover:text-purple-400 transition-colors">Подключение</h3>
<p className="text-gray-300 group-hover:text-gray-200 transition-colors">
Нажмите кнопку подключения и пользуйтесь безопасным интернетом
</p>
<div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="text-purple-400 text-sm">🔒 Защищенное соединение за 1.2 секунды</div>
</div>
</div>
</div>
{/* Интерактивная схема процесса */}
<div className="mt-16 max-w-4xl mx-auto">
<div className="glass-effect p-8 rounded-lg">
<h3 className="text-xl font-bold text-center mb-8 text-blue-400">Процесс установки защищенного соединения</h3>
<div className="flex items-center justify-between">
<div className="flex-1 text-center">
<div className="w-12 h-12 bg-red-500 rounded-full mx-auto mb-2 animate-ux-pulse flex items-center justify-center">
<span className="text-white text-sm">🌐</span>
</div>
<div className="text-sm text-gray-300">Обычное соединение</div>
</div>
<div className="flex-1 text-center">
<div className="text-2xl animate-ux-pulse">→</div>
<div className="text-sm text-gray-300">Шифрование</div>
</div>
<div className="flex-1 text-center">
<div className="w-12 h-12 bg-yellow-500 rounded-full mx-auto mb-2 animate-ux-pulse flex items-center justify-center">
<span className="text-white text-sm">🔒</span>
</div>
<div className="text-sm text-gray-300">Защищенный туннель</div>
</div>
<div className="flex-1 text-center">
<div className="text-2xl animate-ux-pulse">→</div>
<div className="text-sm text-gray-300">Маршрутизация</div>
</div>
<div className="flex-1 text-center">
<div className="w-12 h-12 bg-green-500 rounded-full mx-auto mb-2 animate-ux-pulse flex items-center justify-center">
<span className="text-white text-sm">🛡️</span>
</div>
<div className="text-sm text-gray-300">Защищенный доступ</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Benefits */}
<section className="section-padding bg-gray-900/50">
<div className="max-w-7xl mx-auto px-4">
<div className="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 className="text-4xl font-bold mb-6">
Преимущества использования нашего <span className="gradient-text">ПО</span>
</h2>
<div className="space-y-6">
<div className="flex items-start space-x-4 group hover:bg-gray-800/30 p-4 rounded-lg transition-all duration-300">
<div className="text-green-400 text-xl group-hover:animate-ux-pulse">✓</div>
<div>
<h4 className="font-semibold mb-2 group-hover:text-green-400 transition-colors">Повышение производительности</h4>
<p className="text-gray-300 group-hover:text-gray-200 transition-colors">Оптимизация сетевых соединений для более быстрой работы</p>
<div className="mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
<span className="text-green-400 text-sm font-medium">🚀 До 73% быстрее</span>
</div>
</div>
</div>
<div className="flex items-start space-x-4 group hover:bg-gray-800/30 p-4 rounded-lg transition-all duration-300">
<div className="text-green-400 text-xl group-hover:animate-ux-pulse">✓</div>
<div>
<h4 className="font-semibold mb-2 group-hover:text-purple-400 transition-colors">Защита конфиденциальности</h4>
<p className="text-gray-300 group-hover:text-gray-200 transition-colors">Надежное шифрование и защита персональных данных</p>
<div className="mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
<span className="text-purple-400 text-sm font-medium">🔒 AES-256 шифрование</span>
</div>
</div>
</div>
<div className="flex items-start space-x-4 group hover:bg-gray-800/30 p-4 rounded-lg transition-all duration-300">
<div className="text-green-400 text-xl group-hover:animate-ux-pulse">✓</div>
<div>
<h4 className="font-semibold mb-2 group-hover:text-blue-400 transition-colors">Простота использования</h4>
<p className="text-gray-300 group-hover:text-gray-200 transition-colors">Интуитивно понятный интерфейс и автоматические настройки</p>
<div className="mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
<span className="text-blue-400 text-sm font-medium">⚡ Настройка за 1 минуту</span>
</div>
</div>
</div>
<div className="flex items-start space-x-4 group hover:bg-gray-800/30 p-4 rounded-lg transition-all duration-300">
<div className="text-green-400 text-xl group-hover:animate-ux-pulse">✓</div>
<div>
<h4 className="font-semibold mb-2 group-hover:text-yellow-400 transition-colors">Техническая поддержка</h4>
<p className="text-gray-300 group-hover:text-gray-200 transition-colors">Круглосуточная поддержка пользователей</p>
<div className="mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
<span className="text-yellow-400 text-sm font-medium">🕒 24/7 поддержка</span>
</div>
</div>
</div>
</div>
</div>
<div className="glass-effect p-8 rounded-lg animate-ux-glow">
<h3 className="text-2xl font-bold mb-6 text-center gradient-text">Результаты использования</h3>
{/* Живая статистика производительности */}
<div className="space-y-6 mb-8">
<div className="group">
<div className="flex justify-between items-center mb-2">
<span className="text-gray-300 group-hover:text-gray-200 transition-colors">Скорость загрузки</span>
<span className="text-green-400 font-bold group-hover:animate-ux-pulse">+73%</span>
</div>
<div className="w-full bg-gray-700 rounded-full h-3 overflow-hidden">
<div className="bg-gradient-to-r from-green-500 to-green-400 h-3 rounded-full transition-all duration-1000 group-hover:animate-ux-pulse" style={{width: '73%'}}></div>
</div>
</div>
<div className="group">
<div className="flex justify-between items-center mb-2">
<span className="text-gray-300 group-hover:text-gray-200 transition-colors">Стабильность соединения</span>
<span className="text-blue-400 font-bold group-hover:animate-ux-pulse">+89%</span>
</div>
<div className="w-full bg-gray-700 rounded-full h-3 overflow-hidden">
<div className="bg-gradient-to-r from-blue-500 to-blue-400 h-3 rounded-full transition-all duration-1000 group-hover:animate-ux-pulse" style={{width: '89%'}}></div>
</div>
</div>
<div className="group">
<div className="flex justify-between items-center mb-2">
<span className="text-gray-300 group-hover:text-gray-200 transition-colors">Уровень защиты</span>
<span className="text-purple-400 font-bold group-hover:animate-ux-pulse">+95%</span>
</div>
<div className="w-full bg-gray-700 rounded-full h-3 overflow-hidden">
<div className="bg-gradient-to-r from-purple-500 to-purple-400 h-3 rounded-full transition-all duration-1000 group-hover:animate-ux-pulse" style={{width: '95%'}}></div>
</div>
</div>
<div className="group">
<div className="flex justify-between items-center mb-2">
<span className="text-gray-300 group-hover:text-gray-200 transition-colors">Удовлетворенность пользователей</span>
<span className="text-yellow-400 font-bold group-hover:animate-ux-pulse">+92%</span>
</div>
<div className="w-full bg-gray-700 rounded-full h-3 overflow-hidden">
<div className="bg-gradient-to-r from-yellow-500 to-yellow-400 h-3 rounded-full transition-all duration-1000 group-hover:animate-ux-pulse" style={{width: '92%'}}></div>
</div>
</div>
</div>
{/* Живая статистика пользователей */}
<div className="grid grid-cols-2 gap-4 mb-8">
<div className="text-center p-4 bg-gray-800/50 rounded-lg group hover:bg-gray-800/70 transition-all duration-300">
<div className="text-2xl font-bold text-green-400 animate-metric-count group-hover:animate-ux-pulse">2.8M+</div>
<div className="text-sm text-gray-300 group-hover:text-gray-200 transition-colors">Активных пользователей</div>
</div>
<div className="text-center p-4 bg-gray-800/50 rounded-lg group hover:bg-gray-800/70 transition-all duration-300">
<div className="text-2xl font-bold text-blue-400 animate-metric-count group-hover:animate-ux-pulse">99.98%</div>
<div className="text-sm text-gray-300 group-hover:text-gray-200 transition-colors">Время работы</div>
</div>
</div>
{/* Кнопка консультации */}
<div className="text-center">
<p className="text-gray-300 text-center mb-6">
Получите консультацию по выбору оптимального тарифа UX-софта
</p>
<button
onClick={handleConsultationClick}
className="px-8 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover-glow transition-all duration-300 hover:from-blue-700 hover:to-purple-700 active:scale-95 cursor-pointer hover:shadow-lg hover:shadow-blue-500/25 animate-ux-glow"
>
<span className="flex items-center justify-center space-x-2">
<span>Получить консультацию</span>
<span className="text-lg">💬</span>
</span>
</button>
</div>
</div>
</div>
</div>
</section>
{/* Disclaimer */}
<section className="py-12 bg-gray-800/50">
<div className="max-w-7xl mx-auto px-4">
<div className="glass-effect p-6 rounded-lg">
<h3 className="text-lg font-semibold mb-4 text-yellow-400">Важная информация</h3>
<p className="text-gray-300 text-sm leading-relaxed">
Данная страница носит исключительно информационный характер и не является публичной офертой.
Программное решение предназначено для улучшения пользовательского опыта и обеспечения приватности в интернете
в рамках действующего законодательства. Мы соблюдаем строгую политику no-logs
и используем только проверенные протоколы шифрования.
</p>
</div>
</div>
</section>
{/* Footer */}
<footer className="bg-black py-12">
<div className="max-w-7xl mx-auto px-4 text-center">
<div className="mb-8">
<span className="text-3xl font-bold gradient-text">GUNDYREV</span>
</div>
<p className="text-gray-400 mb-4">
© 2024 GUNDYREV. Все права защищены.
</p>
<p className="text-gray-500 text-sm">
Профессиональное решение для улучшения пользовательского опыта в сети
</p>
</div>
</footer>
{/* Modal */}
{isModalOpen && (
<div className="fixed inset-0 bg-black bg-opacity-5 flex items-center justify-center z-50 p-4">
<div className="bg-gray-900 rounded-lg p-8 max-w-md w-full relative">
<button
onClick={handleCloseModal}
className="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl"
>
×
</button>
<h3 className="text-2xl font-bold mb-6 gradient-text">Получить консультацию</h3>
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-1">
Имя *
</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleInputChange}
required
className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-1">
Email *
</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleInputChange}
required
className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
/>
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-gray-300 mb-1">
Сообщение
</label>
<textarea
id="message"
name="message"
value={formData.message}
onChange={handleInputChange}
rows={4}
className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
placeholder="Расскажите о ваших потребностях..."
/>
</div>
<div className="flex space-x-4 pt-4">
<button
type="button"
onClick={handleCloseModal}
className="flex-1 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
>
Отмена
</button>
<button
type="submit"
className="flex-1 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
>
Отправить
</button>
</div>
</form>
</div>
</div>
)}
</>
);
}