2029 lines
103 KiB
TypeScript
2029 lines
103 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
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() {
|
||
// Живые уведомления безопасности
|
||
const [securityAlerts, setSecurityAlerts] = useState<Array<{
|
||
id: number,
|
||
message: string,
|
||
type: 'threat' | 'scan' | 'update' | 'block',
|
||
timestamp: Date
|
||
}>>([]);
|
||
const [alertId, setAlertId] = useState(0);
|
||
|
||
// Дополнительные уведомления для разных углов
|
||
const [leftBottomAlerts, setLeftBottomAlerts] = useState<Array<{
|
||
id: number,
|
||
message: string,
|
||
type: 'critical' | 'warning' | 'info',
|
||
timestamp: Date
|
||
}>>([]);
|
||
const [rightBottomAlerts, setRightBottomAlerts] = useState<Array<{
|
||
id: number,
|
||
message: string,
|
||
type: 'encryption' | 'firewall' | 'backup',
|
||
timestamp: Date
|
||
}>>([]);
|
||
const [centerAlerts, setCenterAlerts] = useState<Array<{
|
||
id: number,
|
||
message: string,
|
||
type: 'system' | 'network' | 'data',
|
||
position: 'left' | 'right',
|
||
timestamp: Date
|
||
}>>([]);
|
||
|
||
// Анимированная статистика
|
||
const [stats, setStats] = useState({
|
||
threatsBlocked: 0,
|
||
systemsProtected: 0,
|
||
dataEncrypted: 0,
|
||
uptime: 0
|
||
});
|
||
|
||
// Интерактивная карта угроз
|
||
const [threatMap, setThreatMap] = useState<Array<{
|
||
id: number,
|
||
x: number,
|
||
y: number,
|
||
type: 'malware' | 'phishing' | 'ddos' | 'intrusion',
|
||
intensity: number
|
||
}>>([]);
|
||
|
||
// Состояние системы
|
||
const [systemStatus, setSystemStatus] = useState({
|
||
firewall: 'active',
|
||
encryption: 'active',
|
||
monitoring: 'active',
|
||
backup: 'active'
|
||
});
|
||
|
||
// Модальные окна
|
||
const [isSolutionsModalOpen, setIsSolutionsModalOpen] = useState(false);
|
||
const [isDocumentationModalOpen, setIsDocumentationModalOpen] = useState(false);
|
||
|
||
// Форма для решений
|
||
const [solutionsForm, setSolutionsForm] = useState({
|
||
name: '',
|
||
email: '',
|
||
company: '',
|
||
solution: '',
|
||
message: ''
|
||
});
|
||
|
||
// Форма для документации
|
||
const [documentationForm, setDocumentationForm] = useState({
|
||
name: '',
|
||
email: '',
|
||
company: '',
|
||
documentType: '',
|
||
message: ''
|
||
});
|
||
|
||
// Анимация статистики
|
||
useEffect(() => {
|
||
const targetStats = {
|
||
threatsBlocked: 2847,
|
||
systemsProtected: 156,
|
||
dataEncrypted: 99.8,
|
||
uptime: 99.97
|
||
};
|
||
|
||
const duration = 2000;
|
||
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);
|
||
|
||
setStats({
|
||
threatsBlocked: Math.floor(targetStats.threatsBlocked * easeOut),
|
||
systemsProtected: Math.floor(targetStats.systemsProtected * easeOut),
|
||
dataEncrypted: Math.floor(targetStats.dataEncrypted * easeOut * 10) / 10,
|
||
uptime: Math.floor(targetStats.uptime * easeOut * 100) / 100
|
||
});
|
||
|
||
if (currentStep >= steps) {
|
||
clearInterval(interval);
|
||
}
|
||
}, stepDuration);
|
||
|
||
return () => clearInterval(interval);
|
||
}, []);
|
||
|
||
// Живые уведомления безопасности
|
||
useEffect(() => {
|
||
const securityMessages = [
|
||
{ message: 'Заблокирована попытка SQL-инъекции', type: 'block' as const },
|
||
{ message: 'Обнаружена подозрительная сетевая активность', type: 'threat' as const },
|
||
{ message: 'Завершено сканирование на вирусы', type: 'scan' as const },
|
||
{ message: 'Обновлены правила файрвола', type: 'update' as const },
|
||
{ message: 'Заблокирован доступ к вредоносному домену', type: 'block' as const },
|
||
{ message: 'Обнаружена попытка брутфорса', type: 'threat' as const },
|
||
{ message: 'Выполнено резервное копирование данных', type: 'update' as const },
|
||
{ message: 'Заблокирован подозрительный трафик', type: 'block' as const }
|
||
];
|
||
|
||
const addAlert = () => {
|
||
const newAlert = {
|
||
id: alertId,
|
||
...securityMessages[Math.floor(Math.random() * securityMessages.length)],
|
||
timestamp: new Date()
|
||
};
|
||
|
||
setSecurityAlerts(prev => [newAlert, ...prev.slice(0, 4)]);
|
||
setAlertId(prev => prev + 1);
|
||
|
||
// Удаляем через 8 секунд
|
||
setTimeout(() => {
|
||
setSecurityAlerts(prev => prev.filter(alert => alert.id !== newAlert.id));
|
||
}, 8000);
|
||
};
|
||
|
||
const interval = setInterval(addAlert, 3000);
|
||
return () => clearInterval(interval);
|
||
}, [alertId]);
|
||
|
||
// Уведомления левый нижний угол
|
||
useEffect(() => {
|
||
const leftBottomMessages = [
|
||
{ message: 'Критическая уязвимость обнаружена', type: 'critical' as const },
|
||
{ message: 'Предупреждение: высокая нагрузка на сервер', type: 'warning' as const },
|
||
{ message: 'Информация: обновление политик безопасности', type: 'info' as const },
|
||
{ message: 'Критично: попытка несанкционированного доступа', type: 'critical' as const },
|
||
{ message: 'Предупреждение: превышен лимит подключений', type: 'warning' as const },
|
||
{ message: 'Информация: резервное копирование завершено', type: 'info' as const }
|
||
];
|
||
|
||
const addLeftBottomAlert = () => {
|
||
const newAlert = {
|
||
id: Math.random(),
|
||
...leftBottomMessages[Math.floor(Math.random() * leftBottomMessages.length)],
|
||
timestamp: new Date()
|
||
};
|
||
|
||
setLeftBottomAlerts(prev => [newAlert, ...prev.slice(0, 3)]);
|
||
|
||
setTimeout(() => {
|
||
setLeftBottomAlerts(prev => prev.filter(alert => alert.id !== newAlert.id));
|
||
}, 7000);
|
||
};
|
||
|
||
const interval = setInterval(addLeftBottomAlert, 4000);
|
||
return () => clearInterval(interval);
|
||
}, []);
|
||
|
||
// Уведомления правый нижний угол
|
||
useEffect(() => {
|
||
const rightBottomMessages = [
|
||
{ message: 'Шифрование данных: 256-bit AES активно', type: 'encryption' as const },
|
||
{ message: 'Файрвол: заблокировано 47 подключений', type: 'firewall' as const },
|
||
{ message: 'Резервное копирование: 98% завершено', type: 'backup' as const },
|
||
{ message: 'Шифрование: ключи успешно обновлены', type: 'encryption' as const },
|
||
{ message: 'Файрвол: новые правила применены', type: 'firewall' as const },
|
||
{ message: 'Резервирование: проверка целостности данных', type: 'backup' as const }
|
||
];
|
||
|
||
const addRightBottomAlert = () => {
|
||
const newAlert = {
|
||
id: Math.random(),
|
||
...rightBottomMessages[Math.floor(Math.random() * rightBottomMessages.length)],
|
||
timestamp: new Date()
|
||
};
|
||
|
||
setRightBottomAlerts(prev => [newAlert, ...prev.slice(0, 3)]);
|
||
|
||
setTimeout(() => {
|
||
setRightBottomAlerts(prev => prev.filter(alert => alert.id !== newAlert.id));
|
||
}, 6000);
|
||
};
|
||
|
||
const interval = setInterval(addRightBottomAlert, 3500);
|
||
return () => clearInterval(interval);
|
||
}, []);
|
||
|
||
// Центральные боковые уведомления
|
||
useEffect(() => {
|
||
const centerMessages = [
|
||
{ message: 'Системный мониторинг: все компоненты в норме', type: 'system' as const },
|
||
{ message: 'Сетевая активность: трафик в пределах нормы', type: 'network' as const },
|
||
{ message: 'Защита данных: все файлы зашифрованы', type: 'data' as const },
|
||
{ message: 'Системная диагностика: ошибок не обнаружено', type: 'system' as const },
|
||
{ message: 'Сетевая безопасность: периметр защищен', type: 'network' as const },
|
||
{ message: 'Целостность данных: проверка пройдена', type: 'data' as const }
|
||
];
|
||
|
||
const addCenterAlert = () => {
|
||
const positions = ['left', 'right'] as const;
|
||
const newAlert = {
|
||
id: Math.random(),
|
||
...centerMessages[Math.floor(Math.random() * centerMessages.length)],
|
||
position: positions[Math.floor(Math.random() * positions.length)],
|
||
timestamp: new Date()
|
||
};
|
||
|
||
setCenterAlerts(prev => [newAlert, ...prev.slice(0, 4)]);
|
||
|
||
setTimeout(() => {
|
||
setCenterAlerts(prev => prev.filter(alert => alert.id !== newAlert.id));
|
||
}, 5000);
|
||
};
|
||
|
||
const interval = setInterval(addCenterAlert, 2500);
|
||
return () => clearInterval(interval);
|
||
}, []);
|
||
|
||
// Обработчики для модальных окон
|
||
const handleSolutionsClick = () => {
|
||
setIsSolutionsModalOpen(true);
|
||
document.body.style.overflow = 'hidden';
|
||
};
|
||
|
||
const handleDocumentationClick = () => {
|
||
setIsDocumentationModalOpen(true);
|
||
document.body.style.overflow = 'hidden';
|
||
};
|
||
|
||
const handleCloseModal = () => {
|
||
setIsSolutionsModalOpen(false);
|
||
setIsDocumentationModalOpen(false);
|
||
document.body.style.overflow = 'unset';
|
||
};
|
||
|
||
const handleSolutionsInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||
const { name, value } = e.target;
|
||
setSolutionsForm(prev => ({
|
||
...prev,
|
||
[name]: value
|
||
}));
|
||
};
|
||
|
||
const handleDocumentationInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||
const { name, value } = e.target;
|
||
setDocumentationForm(prev => ({
|
||
...prev,
|
||
[name]: value
|
||
}));
|
||
};
|
||
|
||
const handleSolutionsSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
alert(`Спасибо за заявку, ${solutionsForm.name}! Наш специалист свяжется с вами для обсуждения решения "${solutionsForm.solution}".`);
|
||
setSolutionsForm({ name: '', email: '', company: '', solution: '', message: '' });
|
||
handleCloseModal();
|
||
};
|
||
|
||
const handleDocumentationSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
alert(`Спасибо за запрос, ${documentationForm.name}! Документация "${documentationForm.documentType}" будет отправлена на ${documentationForm.email}.`);
|
||
setDocumentationForm({ name: '', email: '', company: '', documentType: '', message: '' });
|
||
handleCloseModal();
|
||
};
|
||
|
||
// Интерактивная карта угроз
|
||
useEffect(() => {
|
||
const generateThreatPoint = () => {
|
||
const threatTypes = ['malware', 'phishing', 'ddos', 'intrusion'] as const;
|
||
return {
|
||
id: Math.random(),
|
||
x: Math.random() * 100,
|
||
y: Math.random() * 100,
|
||
type: threatTypes[Math.floor(Math.random() * threatTypes.length)],
|
||
intensity: Math.random() * 0.8 + 0.2
|
||
};
|
||
};
|
||
|
||
const updateThreatMap = () => {
|
||
setThreatMap(prev => {
|
||
const newPoints = Array.from({ length: 3 }, generateThreatPoint);
|
||
return [...newPoints, ...prev.slice(0, 12)];
|
||
});
|
||
};
|
||
|
||
const interval = setInterval(updateThreatMap, 2000);
|
||
return () => clearInterval(interval);
|
||
}, []);
|
||
|
||
// Создание CSS анимаций динамически
|
||
useEffect(() => {
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
@keyframes pulse-secure {
|
||
0%, 100% { opacity: 1; transform: scale(1); }
|
||
50% { opacity: 0.7; transform: scale(1.05); }
|
||
}
|
||
@keyframes slide-up {
|
||
from { transform: translateY(20px); opacity: 0; }
|
||
to { transform: translateY(0); opacity: 1; }
|
||
}
|
||
@keyframes slide-left {
|
||
from { transform: translateX(20px); opacity: 0; }
|
||
to { transform: translateX(0); opacity: 1; }
|
||
}
|
||
@keyframes slide-right {
|
||
from { transform: translateX(-20px); opacity: 0; }
|
||
to { transform: translateX(0); opacity: 1; }
|
||
}
|
||
@keyframes bounce-in {
|
||
0% { transform: scale(0.8) translateY(-10px); opacity: 0; }
|
||
50% { transform: scale(1.05) translateY(0); opacity: 0.8; }
|
||
100% { transform: scale(1) translateY(0); opacity: 1; }
|
||
}
|
||
@keyframes threat-pulse {
|
||
0%, 100% { transform: scale(1); opacity: 0.8; }
|
||
50% { transform: scale(1.2); opacity: 1; }
|
||
}
|
||
@keyframes secure-glow {
|
||
0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); }
|
||
50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.6); }
|
||
}
|
||
@keyframes critical-flash {
|
||
0%, 100% { border-color: rgba(239, 68, 68, 0.5); }
|
||
50% { border-color: rgba(239, 68, 68, 1); }
|
||
}
|
||
.animate-pulse-secure { animation: pulse-secure 2s ease-in-out infinite; }
|
||
.animate-slide-up { animation: slide-up 0.5s ease-out; }
|
||
.animate-slide-left { animation: slide-left 0.5s ease-out; }
|
||
.animate-slide-right { animation: slide-right 0.5s ease-out; }
|
||
.animate-bounce-in { animation: bounce-in 0.6s ease-out; }
|
||
.animate-threat-pulse { animation: threat-pulse 1.5s ease-in-out infinite; }
|
||
.animate-secure-glow { animation: secure-glow 3s ease-in-out infinite; }
|
||
.animate-critical-flash { animation: critical-flash 2s ease-in-out infinite; }
|
||
`;
|
||
document.head.appendChild(style);
|
||
return () => {
|
||
document.head.removeChild(style);
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<>
|
||
<Navigation />
|
||
|
||
{/* 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-red-900 via-black to-orange-900"></div>
|
||
|
||
{/* Интерактивная карта угроз */}
|
||
<div className="absolute inset-0 opacity-30">
|
||
{threatMap.map((threat) => (
|
||
<div
|
||
key={threat.id}
|
||
className={`absolute w-3 h-3 rounded-full animate-threat-pulse ${
|
||
threat.type === 'malware' ? 'bg-red-500' :
|
||
threat.type === 'phishing' ? 'bg-yellow-500' :
|
||
threat.type === 'ddos' ? 'bg-purple-500' :
|
||
'bg-orange-500'
|
||
}`}
|
||
style={{
|
||
left: `${threat.x}%`,
|
||
top: `${threat.y}%`,
|
||
opacity: threat.intensity
|
||
}}
|
||
></div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="absolute inset-0 opacity-20">
|
||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-red-500 rounded-full blur-3xl opacity-30"></div>
|
||
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-orange-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-pulse-secure">SECURE-T</span>
|
||
</h1>
|
||
<p className="text-xl md:text-2xl text-gray-300 mb-6 max-w-4xl mx-auto">
|
||
Комплексные решения для информационной безопасности и защиты данных
|
||
</p>
|
||
|
||
{/* Краткое описание продукта */}
|
||
<div className="glass-effect p-6 rounded-lg max-w-3xl mx-auto mb-8 border border-red-500/30">
|
||
<h2 className="text-2xl font-bold mb-4 text-red-400">Что такое SECURE-T?</h2>
|
||
<p className="text-gray-300 text-lg mb-4">
|
||
SECURE-T — это российская система защиты информации, сертифицированная ФСТЭК России.
|
||
Обеспечивает комплексную защиту корпоративных данных от внешних и внутренних угроз.
|
||
</p>
|
||
<div className="grid md:grid-cols-2 gap-4 text-sm">
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-green-400">✓</span>
|
||
<span>Сертификат ФСТЭК РФ</span>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-green-400">✓</span>
|
||
<span>Соответствие 44-ФЗ и 223-ФЗ</span>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-green-400">✓</span>
|
||
<span>Реестр отечественного ПО</span>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-green-400">✓</span>
|
||
<span>Техподдержка 24/7</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Живая статистика */}
|
||
<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-secure-glow">
|
||
<div className="text-2xl font-bold text-red-400">{stats.threatsBlocked.toLocaleString()}</div>
|
||
<div className="text-sm text-gray-300">Угроз заблокировано</div>
|
||
</div>
|
||
<div className="glass-effect p-4 rounded-lg animate-secure-glow">
|
||
<div className="text-2xl font-bold text-orange-400">{stats.systemsProtected}</div>
|
||
<div className="text-sm text-gray-300">Систем защищено</div>
|
||
</div>
|
||
<div className="glass-effect p-4 rounded-lg animate-secure-glow">
|
||
<div className="text-2xl font-bold text-yellow-400">{stats.dataEncrypted}%</div>
|
||
<div className="text-sm text-gray-300">Данных зашифровано</div>
|
||
</div>
|
||
<div className="glass-effect p-4 rounded-lg animate-secure-glow">
|
||
<div className="text-2xl font-bold text-green-400">{stats.uptime}%</div>
|
||
<div className="text-sm text-gray-300">Время работы</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<button
|
||
onClick={handleSolutionsClick}
|
||
className="px-8 py-3 bg-red-500 text-white font-semibold rounded-lg hover-glow transition-all duration-300 animate-pulse-secure hover:bg-red-600 active:scale-95 cursor-pointer"
|
||
>
|
||
Наши решения
|
||
</button>
|
||
<button
|
||
onClick={handleDocumentationClick}
|
||
className="px-8 py-3 glass-effect text-white font-semibold rounded-lg hover:bg-white/10 transition-all duration-300 active:scale-95 cursor-pointer"
|
||
>
|
||
Документация
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Живые уведомления безопасности - только в hero блоке */}
|
||
<div className="absolute top-20 right-4 z-50 space-y-2 max-w-sm">
|
||
{securityAlerts.map((alert) => (
|
||
<div
|
||
key={alert.id}
|
||
className={`p-4 rounded-lg border-l-4 glass-effect animate-slide-up ${
|
||
alert.type === 'threat' ? 'border-red-500 bg-red-900/20' :
|
||
alert.type === 'block' ? 'border-orange-500 bg-orange-900/20' :
|
||
alert.type === 'scan' ? 'border-blue-500 bg-blue-900/20' :
|
||
'border-green-500 bg-green-900/20'
|
||
}`}
|
||
>
|
||
<div className="flex items-start space-x-3">
|
||
<div className={`text-xl animate-pulse-secure ${
|
||
alert.type === 'threat' ? 'text-red-400' :
|
||
alert.type === 'block' ? 'text-orange-400' :
|
||
alert.type === 'scan' ? 'text-blue-400' :
|
||
'text-green-400'
|
||
}`}>
|
||
{alert.type === 'threat' ? <AlertTriangle className="w-6 h-6" /> :
|
||
alert.type === 'block' ? <Shield className="w-6 h-6" /> :
|
||
alert.type === 'scan' ? <Search className="w-6 h-6" /> : <CheckCircle className="w-6 h-6" />}
|
||
</div>
|
||
<div className="flex-1">
|
||
<p className="text-sm text-gray-300 font-medium">{alert.message}</p>
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
{alert.timestamp.toLocaleTimeString()}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Статус системы - только в hero блоке */}
|
||
<div className="absolute top-20 left-4 z-50 space-y-2 max-w-xs">
|
||
<div className="glass-effect p-4 rounded-lg border border-red-500/30">
|
||
<h4 className="text-sm font-bold text-red-400 mb-3">Статус системы</h4>
|
||
<div className="space-y-2">
|
||
{Object.entries(systemStatus).map(([key, status]) => (
|
||
<div key={key} className="flex items-center justify-between">
|
||
<span className="text-xs text-gray-300 capitalize">
|
||
{key === 'firewall' ? 'Файрвол' :
|
||
key === 'encryption' ? 'Шифрование' :
|
||
key === 'monitoring' ? 'Мониторинг' : 'Резервирование'}
|
||
</span>
|
||
<div className={`w-2 h-2 rounded-full animate-pulse-secure ${
|
||
status === 'active' ? 'bg-green-400' : 'bg-red-400'
|
||
}`}></div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Уведомления левый нижний угол - только в hero блоке */}
|
||
<div className="absolute bottom-4 left-4 z-50 space-y-2 max-w-sm">
|
||
{leftBottomAlerts.map((alert) => (
|
||
<div
|
||
key={alert.id}
|
||
className={`p-3 rounded-lg border-l-4 glass-effect animate-bounce-in ${
|
||
alert.type === 'critical' ? 'border-red-500 bg-red-900/20 animate-critical-flash' :
|
||
alert.type === 'warning' ? 'border-yellow-500 bg-yellow-900/20' :
|
||
'border-blue-500 bg-blue-900/20'
|
||
}`}
|
||
>
|
||
<div className="flex items-start space-x-3">
|
||
<div className={`text-lg animate-pulse-secure ${
|
||
alert.type === 'critical' ? 'text-red-400' :
|
||
alert.type === 'warning' ? 'text-yellow-400' :
|
||
'text-blue-400'
|
||
}`}>
|
||
{alert.type === 'critical' ? <AlertCircle className="w-5 h-5" /> :
|
||
alert.type === 'warning' ? <AlertTriangle className="w-5 h-5" /> : <Info className="w-5 h-5" />}
|
||
</div>
|
||
<div className="flex-1">
|
||
<p className="text-sm text-gray-300 font-medium">{alert.message}</p>
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
{alert.timestamp.toLocaleTimeString()}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Уведомления правый нижний угол - только в hero блоке */}
|
||
<div className="absolute bottom-4 right-4 z-50 space-y-2 max-w-sm">
|
||
{rightBottomAlerts.map((alert) => (
|
||
<div
|
||
key={alert.id}
|
||
className={`p-3 rounded-lg border-l-4 glass-effect animate-slide-left ${
|
||
alert.type === 'encryption' ? 'border-purple-500 bg-purple-900/20' :
|
||
alert.type === 'firewall' ? 'border-orange-500 bg-orange-900/20' :
|
||
'border-green-500 bg-green-900/20'
|
||
}`}
|
||
>
|
||
<div className="flex items-start space-x-3">
|
||
<div className={`text-lg animate-pulse-secure ${
|
||
alert.type === 'encryption' ? 'text-purple-400' :
|
||
alert.type === 'firewall' ? 'text-orange-400' :
|
||
'text-green-400'
|
||
}`}>
|
||
{alert.type === 'encryption' ? <Lock className="w-5 h-5" /> :
|
||
alert.type === 'firewall' ? <Flame className="w-5 h-5" /> : <HardDrive className="w-5 h-5" />}
|
||
</div>
|
||
<div className="flex-1">
|
||
<p className="text-sm text-gray-300 font-medium">{alert.message}</p>
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
{alert.timestamp.toLocaleTimeString()}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Центральные боковые уведомления - только в hero блоке */}
|
||
<div className="absolute top-1/2 left-4 -translate-y-1/2 z-40 space-y-2 max-w-xs">
|
||
{centerAlerts.filter(alert => alert.position === 'left').map((alert) => (
|
||
<div
|
||
key={alert.id}
|
||
className={`p-3 rounded-lg border glass-effect animate-slide-right ${
|
||
alert.type === 'system' ? 'border-indigo-500 bg-indigo-900/20' :
|
||
alert.type === 'network' ? 'border-cyan-500 bg-cyan-900/20' :
|
||
'border-pink-500 bg-pink-900/20'
|
||
}`}
|
||
>
|
||
<div className="flex items-center space-x-2">
|
||
<div className={`text-lg animate-pulse-secure ${
|
||
alert.type === 'system' ? 'text-indigo-400' :
|
||
alert.type === 'network' ? 'text-cyan-400' :
|
||
'text-pink-400'
|
||
}`}>
|
||
{alert.type === 'system' ? <Monitor className="w-5 h-5" /> :
|
||
alert.type === 'network' ? <Globe className="w-5 h-5" /> : <Folder className="w-5 h-5" />}
|
||
</div>
|
||
<div className="flex-1">
|
||
<p className="text-xs text-gray-300 font-medium">{alert.message}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="absolute top-1/2 right-4 -translate-y-1/2 z-40 space-y-2 max-w-xs">
|
||
{centerAlerts.filter(alert => alert.position === 'right').map((alert) => (
|
||
<div
|
||
key={alert.id}
|
||
className={`p-3 rounded-lg border glass-effect animate-slide-left ${
|
||
alert.type === 'system' ? 'border-indigo-500 bg-indigo-900/20' :
|
||
alert.type === 'network' ? 'border-cyan-500 bg-cyan-900/20' :
|
||
'border-pink-500 bg-pink-900/20'
|
||
}`}
|
||
>
|
||
<div className="flex items-center space-x-2">
|
||
<div className={`text-lg animate-pulse-secure ${
|
||
alert.type === 'system' ? 'text-indigo-400' :
|
||
alert.type === 'network' ? 'text-cyan-400' :
|
||
'text-pink-400'
|
||
}`}>
|
||
{alert.type === 'system' ? <Monitor className="w-5 h-5" /> :
|
||
alert.type === 'network' ? <Globe className="w-5 h-5" /> : <Folder className="w-5 h-5" />}
|
||
</div>
|
||
<div className="flex-1">
|
||
<p className="text-xs text-gray-300 font-medium">{alert.message}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* О продукте SECURE-T */}
|
||
<section className="section-padding bg-gradient-to-r from-gray-900 to-black">
|
||
<div className="max-w-6xl 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">SECURE-T</span>?
|
||
</h2>
|
||
<p className="text-xl text-gray-300 max-w-4xl mx-auto">
|
||
SECURE-T — это комплексная система защиты информации, разработанная для обеспечения
|
||
максимального уровня безопасности корпоративных данных и IT-инфраструктуры
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-12 items-center mb-20">
|
||
<div className="space-y-6">
|
||
<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="text-red-400 text-3xl animate-pulse-secure"><Shield className="w-8 h-8" /></div>
|
||
<h3 className="text-xl font-bold">Многоуровневая защита</h3>
|
||
</div>
|
||
<p className="text-gray-300">
|
||
Система использует многоуровневую архитектуру защиты, включающую криптографические методы,
|
||
сетевую безопасность и мониторинг в реальном времени
|
||
</p>
|
||
</div>
|
||
|
||
<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="text-orange-400 text-3xl animate-pulse-secure"><Zap className="w-8 h-8" /></div>
|
||
<h3 className="text-xl font-bold">Быстрое реагирование</h3>
|
||
</div>
|
||
<p className="text-gray-300">
|
||
Автоматическое обнаружение и блокировка угроз в режиме реального времени
|
||
с минимальным влиянием на производительность системы
|
||
</p>
|
||
</div>
|
||
|
||
<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="text-yellow-400 text-3xl animate-pulse-secure"><Settings className="w-8 h-8" /></div>
|
||
<h3 className="text-xl font-bold">Простота внедрения</h3>
|
||
</div>
|
||
<p className="text-gray-300">
|
||
Гибкая архитектура позволяет легко интегрировать SECURE-T
|
||
с существующей IT-инфраструктурой без кардинальных изменений
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
<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"><Target className="w-12 h-12" /></div>
|
||
<h3 className="text-2xl font-bold mb-4">Основная цель</h3>
|
||
<p className="text-gray-300 text-lg">
|
||
Обеспечить максимальную защиту корпоративных данных при сохранении
|
||
высокой производительности и удобства использования
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="glass-effect p-4 rounded-lg text-center border border-green-500/30">
|
||
<div className="text-green-400 text-2xl mb-2 animate-pulse-secure">99.9%</div>
|
||
<p className="text-sm text-gray-300">Надежность</p>
|
||
</div>
|
||
<div className="glass-effect p-4 rounded-lg text-center border border-blue-500/30">
|
||
<div className="text-blue-400 text-2xl mb-2 animate-pulse-secure">24/7</div>
|
||
<p className="text-sm text-gray-300">Мониторинг</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Вопросы и ответы */}
|
||
<div className="max-w-4xl mx-auto">
|
||
<h3 className="text-3xl font-bold text-center mb-12">
|
||
Часто задаваемые <span className="gradient-text">вопросы</span>
|
||
</h3>
|
||
|
||
<div className="space-y-6">
|
||
<div className="glass-effect p-6 rounded-lg border border-red-500/20 hover:border-red-500/40 transition-all duration-300">
|
||
<details className="group">
|
||
<summary className="flex items-center justify-between cursor-pointer">
|
||
<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"><ChevronDown className="w-5 h-5" /></div>
|
||
</summary>
|
||
<div className="mt-4 text-gray-300 space-y-3">
|
||
<p>SECURE-T включает в себя:</p>
|
||
<ul className="list-disc ml-6 space-y-1">
|
||
<li>Модуль криптографической защиты данных</li>
|
||
<li>Систему мониторинга безопасности в реальном времени</li>
|
||
<li>Средства контроля доступа и аутентификации</li>
|
||
<li>Инструменты аудита и анализа инцидентов</li>
|
||
<li>Интерфейс управления и настройки</li>
|
||
</ul>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
<div className="glass-effect p-6 rounded-lg border border-orange-500/20 hover:border-orange-500/40 transition-all duration-300">
|
||
<details className="group">
|
||
<summary className="flex items-center justify-between cursor-pointer">
|
||
<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"><ChevronDown className="w-5 h-5" /></div>
|
||
</summary>
|
||
<div className="mt-4 text-gray-300">
|
||
<p>
|
||
Время внедрения зависит от масштаба инфраструктуры. Для небольших организаций
|
||
базовое развертывание занимает 1-2 недели. Для крупных предприятий с комплексной
|
||
настройкой — от 1 до 3 месяцев. Наша команда обеспечивает полную поддержку
|
||
на всех этапах внедрения.
|
||
</p>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
<div className="glass-effect p-6 rounded-lg border border-yellow-500/20 hover:border-yellow-500/40 transition-all duration-300">
|
||
<details className="group">
|
||
<summary className="flex items-center justify-between cursor-pointer">
|
||
<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"><ChevronDown className="w-5 h-5" /></div>
|
||
</summary>
|
||
<div className="mt-4 text-gray-300">
|
||
<p>
|
||
Минимальные требования: Windows Server 2016+ или Linux (Ubuntu 18.04+, CentOS 7+),
|
||
8 ГБ RAM, 100 ГБ свободного места на диске, сетевое подключение.
|
||
Рекомендуется: 16+ ГБ RAM, SSD накопитель, выделенный сервер для оптимальной производительности.
|
||
</p>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
<div className="glass-effect p-6 rounded-lg border border-green-500/20 hover:border-green-500/40 transition-all duration-300">
|
||
<details className="group">
|
||
<summary className="flex items-center justify-between cursor-pointer">
|
||
<h4 className="text-lg font-semibold text-green-400">Предоставляется ли техническая поддержка?</h4>
|
||
<div className="text-green-400 text-xl group-open:rotate-180 transition-transform"><ChevronDown className="w-5 h-5" /></div>
|
||
</summary>
|
||
<div className="mt-4 text-gray-300">
|
||
<p>
|
||
Да, мы предоставляем полную техническую поддержку 24/7. Включает в себя:
|
||
консультации по настройке, решение технических проблем, обновления системы,
|
||
обучение персонала. Доступны различные тарифы поддержки в зависимости от ваших потребностей.
|
||
</p>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
<div className="glass-effect p-6 rounded-lg border border-purple-500/20 hover:border-purple-500/40 transition-all duration-300">
|
||
<details className="group">
|
||
<summary className="flex items-center justify-between cursor-pointer">
|
||
<h4 className="text-lg font-semibold text-purple-400">Можно ли получить демо-версию для тестирования?</h4>
|
||
<div className="text-purple-400 text-xl group-open:rotate-180 transition-transform"><ChevronDown className="w-5 h-5" /></div>
|
||
</summary>
|
||
<div className="mt-4 text-gray-300">
|
||
<p>
|
||
Конечно! Мы предоставляем полнофункциональную демо-версию на 30 дней.
|
||
Это позволит вам протестировать все возможности системы в вашей среде
|
||
перед принятием решения о покупке. Для получения демо-версии свяжитесь с нашими специалистами.
|
||
</p>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Solutions 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">SECURE-T</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
|
||
onClick={() => {
|
||
window.location.href = '/secure-t/documentation';
|
||
}}
|
||
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"><Lock className="w-10 h-10" /></div>
|
||
<h3 className="text-xl font-bold mb-4">Криптографическая защита</h3>
|
||
<p className="text-gray-300">
|
||
Современные алгоритмы шифрования для защиты конфиденциальных данных
|
||
</p>
|
||
<div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
|
||
<a
|
||
href="/secure-t/documentation"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
}}
|
||
className="text-red-400 text-sm font-medium hover:text-red-300 cursor-pointer"
|
||
>
|
||
Подробнее →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
onClick={() => {
|
||
window.location.href = '/secure-t/documentation';
|
||
}}
|
||
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"><Shield className="w-10 h-10" /></div>
|
||
<h3 className="text-xl font-bold mb-4">Сетевая безопасность</h3>
|
||
<p className="text-gray-300">
|
||
Комплексная защита сетевой инфраструктуры от внешних угроз
|
||
</p>
|
||
<div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
|
||
<a
|
||
href="/secure-t/documentation"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
}}
|
||
className="text-orange-400 text-sm font-medium hover:text-orange-300 cursor-pointer"
|
||
>
|
||
Подробнее →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
onClick={() => {
|
||
window.location.href = '/secure-t/documentation';
|
||
}}
|
||
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"><Eye className="w-10 h-10" /></div>
|
||
<h3 className="text-xl font-bold mb-4">Мониторинг безопасности</h3>
|
||
<p className="text-gray-300">
|
||
Системы мониторинга и анализа инцидентов информационной безопасности
|
||
</p>
|
||
<div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
|
||
<a
|
||
href="/secure-t/documentation"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
}}
|
||
className="text-yellow-400 text-sm font-medium hover:text-yellow-300 cursor-pointer"
|
||
>
|
||
Подробнее →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
onClick={() => {
|
||
window.location.href = '/secure-t/documentation';
|
||
}}
|
||
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"><Search className="w-10 h-10" /></div>
|
||
<h3 className="text-xl font-bold mb-4">Аудит безопасности</h3>
|
||
<p className="text-gray-300">
|
||
Проведение комплексного аудита систем информационной безопасности
|
||
</p>
|
||
<div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
|
||
<a
|
||
href="/secure-t/documentation"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
}}
|
||
className="text-purple-400 text-sm font-medium hover:text-purple-300 cursor-pointer"
|
||
>
|
||
Подробнее →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
onClick={() => {
|
||
window.location.href = '/secure-t/documentation';
|
||
}}
|
||
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"><Settings className="w-10 h-10" /></div>
|
||
<h3 className="text-xl font-bold mb-4">Интеграция систем</h3>
|
||
<p className="text-gray-300">
|
||
Интеграция решений безопасности с существующей IT-инфраструктурой
|
||
</p>
|
||
<div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
|
||
<a
|
||
href="/secure-t/documentation"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
}}
|
||
className="text-blue-400 text-sm font-medium hover:text-blue-300 cursor-pointer"
|
||
>
|
||
Подробнее →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
onClick={() => {
|
||
window.location.href = '/secure-t/documentation';
|
||
}}
|
||
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"><BookOpen className="w-10 h-10" /></div>
|
||
<h3 className="text-xl font-bold mb-4">Обучение персонала</h3>
|
||
<p className="text-gray-300">
|
||
Программы обучения сотрудников основам информационной безопасности
|
||
</p>
|
||
<div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
|
||
<a
|
||
href="/secure-t/documentation"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
}}
|
||
className="text-green-400 text-sm font-medium hover:text-green-300 cursor-pointer"
|
||
>
|
||
Подробнее →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Technologies */}
|
||
<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">технологии</span>
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-4 gap-6">
|
||
{[
|
||
{ name: 'AES-256', desc: 'Шифрование данных', color: 'red' },
|
||
{ name: 'RSA-4096', desc: 'Асимметричное шифрование', color: 'orange' },
|
||
{ name: 'SHA-3', desc: 'Хеширование', color: 'yellow' },
|
||
{ name: 'PKI', desc: 'Инфраструктура ключей', color: 'green' },
|
||
{ name: 'SIEM', desc: 'Управление событиями', color: 'blue' },
|
||
{ name: 'DLP', desc: 'Защита от утечек', color: 'purple' },
|
||
{ name: 'WAF', desc: 'Веб-защита', color: 'pink' },
|
||
{ name: 'IDS/IPS', desc: 'Обнаружение вторжений', color: 'indigo' }
|
||
].map((tech, index) => (
|
||
<div
|
||
key={tech.name}
|
||
className="glass-effect p-6 rounded-lg text-center hover-glow transition-all duration-300 group hover:scale-105"
|
||
style={{ animationDelay: `${index * 0.1}s` }}
|
||
>
|
||
<h4 className="font-bold mb-2 group-hover:animate-pulse-secure">{tech.name}</h4>
|
||
<p className="text-gray-300 text-sm">{tech.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Full Documentation Block */}
|
||
<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="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"><BookOpen className="w-16 h-16" /></div>
|
||
<h2 className="text-4xl font-bold mb-6">
|
||
Полная <span className="gradient-text">документация</span>
|
||
</h2>
|
||
<p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
|
||
Получите доступ к полной технической документации SECURE-T с подробными руководствами,
|
||
примерами конфигураций и инструкциями по внедрению
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
|
||
<a
|
||
href="/docs/SECURE-T_Documentation.md"
|
||
target="_blank"
|
||
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"
|
||
>
|
||
<span><FileText className="w-5 h-5" /></span>
|
||
Открыть документацию
|
||
</a>
|
||
<a
|
||
href="/docs/SECURE-T_Quick_Start.md"
|
||
target="_blank"
|
||
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"
|
||
>
|
||
<span><Rocket className="w-5 h-5" /></span>
|
||
Быстрый старт
|
||
</a>
|
||
</div>
|
||
|
||
<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="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>
|
||
<p className="text-gray-300 text-sm">
|
||
Пошаговые инструкции по установке и первоначальной настройке системы
|
||
</p>
|
||
</div>
|
||
|
||
<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"><Settings className="w-6 h-6" /></div>
|
||
<h4 className="font-bold mb-2">Конфигурация</h4>
|
||
<p className="text-gray-300 text-sm">
|
||
Подробные примеры конфигураций для различных сценариев использования
|
||
</p>
|
||
</div>
|
||
|
||
<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"><Rocket className="w-6 h-6" /></div>
|
||
<h4 className="font-bold mb-2">API и интеграция</h4>
|
||
<p className="text-gray-300 text-sm">
|
||
Руководство по использованию API и интеграции с внешними системами
|
||
</p>
|
||
</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">
|
||
SECURE-T соответствует всем требованиям российского законодательства и международных стандартов
|
||
</p>
|
||
</div>
|
||
|
||
<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="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>
|
||
<p className="text-gray-300 mb-4">
|
||
Сертификат соответствия требованиям безопасности информации № РОСС RU.0001.01БИ00 от 15.03.2024
|
||
</p>
|
||
<div className="text-sm text-gray-400 mb-4">
|
||
Класс защиты: КС1, КС2, КС3 | Срок действия: до 2027 года
|
||
</div>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Сертификат ФСТЭК' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-blue-400 hover:text-blue-300 font-medium cursor-pointer"
|
||
>
|
||
Скачать сертификат →
|
||
</button>
|
||
</div>
|
||
|
||
<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"><Shield className="w-10 h-10" /></div>
|
||
<h3 className="text-xl font-bold mb-4">Лицензия ФСБ</h3>
|
||
<p className="text-gray-300 mb-4">
|
||
Лицензия на разработку и производство средств защиты конфиденциальной информации № 149 от 22.08.2023
|
||
</p>
|
||
<div className="text-sm text-gray-400 mb-4">
|
||
Включает: криптографические средства, СКЗИ | Срок действия: до 2028 года
|
||
</div>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Лицензия ФСБ' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-green-400 hover:text-green-300 font-medium cursor-pointer"
|
||
>
|
||
Скачать лицензию →
|
||
</button>
|
||
</div>
|
||
|
||
<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"><Globe2 className="w-10 h-10" /></div>
|
||
<h3 className="text-xl font-bold mb-4">ISO 27001:2013</h3>
|
||
<p className="text-gray-300 mb-4">
|
||
Международный стандарт системы менеджмента информационной безопасности
|
||
</p>
|
||
<div className="text-sm text-gray-400 mb-4">
|
||
Сертификат № ISO/IEC 27001-2024-RU-001 | Действителен до 2027 года
|
||
</div>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'ISO 27001' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-purple-400 hover:text-purple-300 font-medium cursor-pointer"
|
||
>
|
||
Скачать сертификат →
|
||
</button>
|
||
</div>
|
||
|
||
<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"><FileText className="w-10 h-10" /></div>
|
||
<h3 className="text-xl font-bold mb-4">Реестр Минпромторга</h3>
|
||
<p className="text-gray-300 mb-4">
|
||
Включение в единый реестр российских программ для ЭВМ и баз данных
|
||
</p>
|
||
<div className="text-sm text-gray-400 mb-4">
|
||
Номер в реестре: 14158 | Класс ПО: 27.22.11.110 | Статус: Действующий
|
||
</div>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Реестр Минпромторга' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-red-400 hover:text-red-300 font-medium cursor-pointer"
|
||
>
|
||
Скачать справку →
|
||
</button>
|
||
</div>
|
||
|
||
<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"><CheckSquare className="w-10 h-10" /></div>
|
||
<h3 className="text-xl font-bold mb-4">Соответствие ГОСТ</h3>
|
||
<p className="text-gray-300 mb-4">
|
||
Соответствие требованиям ГОСТ Р 50922-2006, ГОСТ Р 51241-2017 и другим стандартам
|
||
</p>
|
||
<div className="text-sm text-gray-400 mb-4">
|
||
Включает: ГОСТ 28147-89, ГОСТ Р 34.11-2012, ГОСТ Р 34.10-2012
|
||
</div>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Соответствие ГОСТ' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-yellow-400 hover:text-yellow-300 font-medium cursor-pointer"
|
||
>
|
||
Скачать документы →
|
||
</button>
|
||
</div>
|
||
|
||
<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"><Key className="w-10 h-10" /></div>
|
||
<h3 className="text-xl font-bold mb-4">Криптографические алгоритмы</h3>
|
||
<p className="text-gray-300 mb-4">
|
||
Использование сертифицированных отечественных криптографических алгоритмов
|
||
</p>
|
||
<div className="text-sm text-gray-400 mb-4">
|
||
Алгоритмы: Кузнечик, Магма, Стрибог | Сертификат ФСБ № 149/2023
|
||
</div>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Криптографические алгоритмы' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-cyan-400 hover:text-cyan-300 font-medium cursor-pointer"
|
||
>
|
||
Скачать спецификацию →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="max-w-4xl mx-auto text-center">
|
||
<div className="glass-effect p-8 rounded-lg border border-green-500/30">
|
||
<h3 className="text-2xl font-bold mb-4">
|
||
<span className="gradient-text">Полный комплект документов</span>
|
||
</h3>
|
||
<p className="text-gray-300 mb-6">
|
||
Получите полный пакет сертификатов, лицензий и документов о соответствии для вашей организации
|
||
</p>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Полный комплект документов' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="px-8 py-3 bg-green-500 text-white font-semibold rounded-lg hover-glow transition-all duration-300 hover:bg-green-600 animate-pulse-secure"
|
||
>
|
||
Получить полный комплект
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Обучающие инструкции */}
|
||
<section className="section-padding bg-gradient-to-r from-indigo-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">
|
||
Комплексная система обучения для эффективного использования SECURE-T
|
||
</p>
|
||
</div>
|
||
|
||
<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="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>
|
||
<p className="text-gray-300 mb-4">Подробное руководство по работе с интерфейсом и основными функциями</p>
|
||
<ul className="text-sm text-gray-400 mb-4 space-y-1">
|
||
<li>• Первые шаги в системе</li>
|
||
<li>• Настройка рабочего места</li>
|
||
<li>• Основные операции</li>
|
||
<li>• Решение типовых задач</li>
|
||
</ul>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Руководство пользователя' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-blue-400 hover:text-blue-300 font-medium cursor-pointer"
|
||
>
|
||
Скачать руководство →
|
||
</button>
|
||
</div>
|
||
|
||
<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"><Settings className="w-8 h-8" /></div>
|
||
<h4 className="text-lg font-bold mb-3">Руководство администратора</h4>
|
||
<p className="text-gray-300 mb-4">Техническое руководство для системных администраторов</p>
|
||
<ul className="text-sm text-gray-400 mb-4 space-y-1">
|
||
<li>• Установка и настройка</li>
|
||
<li>• Управление пользователями</li>
|
||
<li>• Мониторинг системы</li>
|
||
<li>• Резервное копирование</li>
|
||
</ul>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Руководство администратора' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-green-400 hover:text-green-300 font-medium cursor-pointer"
|
||
>
|
||
Скачать руководство →
|
||
</button>
|
||
</div>
|
||
|
||
<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"><Video className="w-8 h-8" /></div>
|
||
<h4 className="text-lg font-bold mb-3">Видеоуроки</h4>
|
||
<p className="text-gray-300 mb-4">Серия обучающих видеороликов для быстрого освоения</p>
|
||
<ul className="text-sm text-gray-400 mb-4 space-y-1">
|
||
<li>• Быстрый старт (15 мин)</li>
|
||
<li>• Настройка безопасности (25 мин)</li>
|
||
<li>• Работа с отчетами (20 мин)</li>
|
||
<li>• Устранение неполадок (30 мин)</li>
|
||
</ul>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Видеоуроки' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-purple-400 hover:text-purple-300 font-medium cursor-pointer"
|
||
>
|
||
Получить доступ →
|
||
</button>
|
||
</div>
|
||
|
||
<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"><GraduationCap className="w-8 h-8" /></div>
|
||
<h4 className="text-lg font-bold mb-3">Онлайн-курсы</h4>
|
||
<p className="text-gray-300 mb-4">Интерактивные курсы с практическими заданиями</p>
|
||
<ul className="text-sm text-gray-400 mb-4 space-y-1">
|
||
<li>• Базовый курс (8 часов)</li>
|
||
<li>• Продвинутый курс (16 часов)</li>
|
||
<li>• Курс для администраторов (24 часа)</li>
|
||
<li>• Сертификация специалистов</li>
|
||
</ul>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Онлайн-курсы' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-red-400 hover:text-red-300 font-medium cursor-pointer"
|
||
>
|
||
Записаться на курс →
|
||
</button>
|
||
</div>
|
||
|
||
<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"><Wrench className="w-8 h-8" /></div>
|
||
<h4 className="text-lg font-bold mb-3">Практические сценарии</h4>
|
||
<p className="text-gray-300 mb-4">Готовые сценарии для типовых задач безопасности</p>
|
||
<ul className="text-sm text-gray-400 mb-4 space-y-1">
|
||
<li>• Настройка политик безопасности</li>
|
||
<li>• Реагирование на инциденты</li>
|
||
<li>• Аудит системы</li>
|
||
<li>• Интеграция с внешними системами</li>
|
||
</ul>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Практические сценарии' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-yellow-400 hover:text-yellow-300 font-medium cursor-pointer"
|
||
>
|
||
Скачать сценарии →
|
||
</button>
|
||
</div>
|
||
|
||
<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"><Headphones className="w-8 h-8" /></div>
|
||
<h4 className="text-lg font-bold mb-3">Персональное обучение</h4>
|
||
<p className="text-gray-300 mb-4">Индивидуальные занятия с экспертом по безопасности</p>
|
||
<ul className="text-sm text-gray-400 mb-4 space-y-1">
|
||
<li>• Консультации специалиста</li>
|
||
<li>• Разбор конкретных задач</li>
|
||
<li>• Настройка под ваши потребности</li>
|
||
<li>• Сопровождение внедрения</li>
|
||
</ul>
|
||
<button
|
||
onClick={() => {
|
||
setSolutionsForm(prev => ({ ...prev, solution: 'Персональное обучение' }));
|
||
handleSolutionsClick();
|
||
}}
|
||
className="text-cyan-400 hover:text-cyan-300 font-medium cursor-pointer"
|
||
>
|
||
Заказать консультацию →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Работа с госзакупками */}
|
||
<section className="section-padding bg-gradient-to-r from-green-900/20 to-emerald-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-4xl mx-auto">
|
||
SECURE-T полностью соответствует требованиям государственных закупок и включен в реестр отечественного ПО
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-12 mb-16">
|
||
<div className="space-y-8">
|
||
<div className="glass-effect p-8 rounded-lg border border-green-500/30">
|
||
<h3 className="text-2xl font-bold mb-6 text-green-400">Соответствие требованиям 44-ФЗ и 223-ФЗ</h3>
|
||
<div className="space-y-4">
|
||
<div className="flex items-start space-x-3">
|
||
<div className="text-green-400 text-xl"><CheckCircle className="w-5 h-5" /></div>
|
||
<div>
|
||
<h4 className="font-semibold mb-2">Реестр отечественного ПО</h4>
|
||
<p className="text-gray-300 text-sm">Включен в единый реестр российских программ (№14158)</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start space-x-3">
|
||
<div className="text-green-400 text-xl"><CheckCircle className="w-5 h-5" /></div>
|
||
<div>
|
||
<h4 className="font-semibold mb-2">Импортозамещение</h4>
|
||
<p className="text-gray-300 text-sm">100% российская разработка без зарубежных компонентов</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start space-x-3">
|
||
<div className="text-green-400 text-xl"><CheckCircle className="w-5 h-5" /></div>
|
||
<div>
|
||
<h4 className="font-semibold mb-2">Техническая поддержка</h4>
|
||
<p className="text-gray-300 text-sm">Гарантированная поддержка на территории РФ</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start space-x-3">
|
||
<div className="text-green-400 text-xl"><CheckCircle className="w-5 h-5" /></div>
|
||
<div>
|
||
<h4 className="font-semibold mb-2">Сертификация</h4>
|
||
<p className="text-gray-300 text-sm">Все необходимые сертификаты ФСТЭК и лицензии ФСБ</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="glass-effect p-6 rounded-lg border border-blue-500/30">
|
||
<h4 className="text-lg font-bold mb-4 text-blue-400">Классификация по ОКПД2</h4>
|
||
<div className="space-y-2 text-sm">
|
||
<div className="flex justify-between">
|
||
<span className="text-gray-300">Код:</span>
|
||
<span className="text-white">58.29.22.110</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-gray-300">Категория:</span>
|
||
<span className="text-white">Программное обеспечение безопасности</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-gray-300">Класс:</span>
|
||
<span className="text-white">Средства защиты информации</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-8">
|
||
<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="space-y-4">
|
||
<div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
|
||
<div className="flex items-center space-x-3">
|
||
<span className="text-2xl"><ClipboardList className="w-6 h-6" /></span>
|
||
<div>
|
||
<p className="font-medium">Коммерческое предложение</p>
|
||
<p className="text-sm text-gray-400">Готовое КП для госзакупок</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Коммерческое предложение для госзакупок' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-yellow-400 hover:text-yellow-300 text-sm font-medium"
|
||
>
|
||
Скачать
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
|
||
<div className="flex items-center space-x-3">
|
||
<span className="text-2xl"><FileSpreadsheet className="w-6 h-6" /></span>
|
||
<div>
|
||
<p className="font-medium">Техническое задание</p>
|
||
<p className="text-sm text-gray-400">Образец ТЗ для тендера</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Техническое задание' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-yellow-400 hover:text-yellow-300 text-sm font-medium"
|
||
>
|
||
Скачать
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
|
||
<div className="flex items-center space-x-3">
|
||
<span className="text-2xl"><FileCheck className="w-6 h-6" /></span>
|
||
<div>
|
||
<p className="font-medium">Пакет документов</p>
|
||
<p className="text-gray-400 text-sm">Все сертификаты и лицензии</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Пакет документов для госзакупок' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-yellow-400 hover:text-yellow-300 text-sm font-medium"
|
||
>
|
||
Скачать
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
|
||
<div className="flex items-center space-x-3">
|
||
<span className="text-2xl"><DollarSign className="w-6 h-6" /></span>
|
||
<div>
|
||
<p className="font-medium">Прайс-лист</p>
|
||
<p className="text-sm text-gray-400">Актуальные цены и условия</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Прайс-лист' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-yellow-400 hover:text-yellow-300 text-sm font-medium"
|
||
>
|
||
Скачать
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="glass-effect p-6 rounded-lg border border-purple-500/30">
|
||
<h4 className="text-lg font-bold mb-4 text-purple-400">Поддержка при участии в тендерах</h4>
|
||
<ul className="space-y-2 text-gray-300">
|
||
<li className="flex items-center space-x-2">
|
||
<span className="text-purple-400">•</span>
|
||
<span>Консультации по техническим требованиям</span>
|
||
</li>
|
||
<li className="flex items-center space-x-2">
|
||
<span className="text-purple-400">•</span>
|
||
<span>Помощь в подготовке документации</span>
|
||
</li>
|
||
<li className="flex items-center space-x-2">
|
||
<span className="text-purple-400">•</span>
|
||
<span>Демонстрация возможностей системы</span>
|
||
</li>
|
||
<li className="flex items-center space-x-2">
|
||
<span className="text-purple-400">•</span>
|
||
<span>Расчет стоимости под конкретный проект</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="max-w-4xl mx-auto text-center">
|
||
<div className="glass-effect p-8 rounded-lg border border-emerald-500/30">
|
||
<h3 className="text-2xl font-bold mb-4">
|
||
<span className="gradient-text">Специальное предложение для госзаказчиков</span>
|
||
</h3>
|
||
<p className="text-gray-300 mb-6">
|
||
Получите персональную консультацию по работе с госзакупками и специальные условия для государственных организаций
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<button
|
||
onClick={() => {
|
||
setSolutionsForm(prev => ({ ...prev, solution: 'Консультация по госзакупкам' }));
|
||
handleSolutionsClick();
|
||
}}
|
||
className="px-8 py-3 bg-emerald-500 text-white font-semibold rounded-lg hover-glow transition-all duration-300 hover:bg-emerald-600 animate-pulse-secure"
|
||
>
|
||
Консультация по госзакупкам
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Полный пакет для госзакупок' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="px-8 py-3 glass-effect text-white font-semibold rounded-lg hover:bg-white/10 transition-all duration-300"
|
||
>
|
||
Получить документы
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Materials & Documentation */}
|
||
<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">материалы</span>
|
||
</h2>
|
||
</div>
|
||
|
||
<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="text-blue-400 text-3xl mb-4"><FileText className="w-8 h-8" /></div>
|
||
<h4 className="text-lg font-bold mb-3">Техническая документация</h4>
|
||
<p className="text-gray-300 mb-4">Подробные руководства по внедрению и настройке</p>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Полная документация' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-blue-400 hover:text-blue-300 font-medium cursor-pointer"
|
||
>
|
||
Скачать →
|
||
</button>
|
||
</div>
|
||
|
||
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
|
||
<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>
|
||
<p className="text-gray-300 mb-4">Лучшие практики информационной безопасности</p>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Методические материалы' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-green-400 hover:text-green-300 font-medium cursor-pointer"
|
||
>
|
||
Скачать →
|
||
</button>
|
||
</div>
|
||
|
||
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
|
||
<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>
|
||
<p className="text-gray-300 mb-4">Утилиты для конфигурирования системы</p>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Инструменты настройки' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-purple-400 hover:text-purple-300 font-medium cursor-pointer"
|
||
>
|
||
Скачать →
|
||
</button>
|
||
</div>
|
||
|
||
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
|
||
<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>
|
||
<p className="text-gray-300 mb-4">Шаблоны отчетов и аналитические данные</p>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Отчеты и аналитика' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-red-400 hover:text-red-300 font-medium cursor-pointer"
|
||
>
|
||
Скачать →
|
||
</button>
|
||
</div>
|
||
|
||
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
|
||
<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>
|
||
<p className="text-gray-300 mb-4">Курсы и тренинги по безопасности</p>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Обучающие материалы' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-yellow-400 hover:text-yellow-300 font-medium cursor-pointer"
|
||
>
|
||
Скачать →
|
||
</button>
|
||
</div>
|
||
|
||
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
|
||
<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>
|
||
<p className="text-gray-300 mb-4">Документы о соответствии стандартам</p>
|
||
<button
|
||
onClick={() => {
|
||
setDocumentationForm(prev => ({ ...prev, documentType: 'Сертификаты и лицензии' }));
|
||
handleDocumentationClick();
|
||
}}
|
||
className="text-cyan-400 hover:text-cyan-300 font-medium cursor-pointer"
|
||
>
|
||
Скачать →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Contact Section */}
|
||
<section className="section-padding">
|
||
<div className="max-w-4xl mx-auto px-4 text-center">
|
||
<div className="glass-effect p-12 rounded-lg">
|
||
<h2 className="text-3xl font-bold mb-6">
|
||
Нужна консультация по <span className="gradient-text">SECURE-T</span>?
|
||
</h2>
|
||
<p className="text-gray-300 mb-8 text-lg">
|
||
Наши эксперты помогут подобрать оптимальное решение для вашей организации
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<button
|
||
onClick={() => {
|
||
setSolutionsForm(prev => ({ ...prev, solution: 'Консультация' }));
|
||
handleSolutionsClick();
|
||
}}
|
||
className="px-8 py-3 bg-red-500 text-white font-semibold rounded-lg hover-glow transition-all duration-300 cursor-pointer"
|
||
>
|
||
Получить консультацию
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setSolutionsForm(prev => ({ ...prev, solution: 'Аудит безопасности' }));
|
||
handleSolutionsClick();
|
||
}}
|
||
className="px-8 py-3 glass-effect text-white font-semibold rounded-lg hover:bg-white/10 transition-all duration-300 cursor-pointer"
|
||
>
|
||
Заказать аудит
|
||
</button>
|
||
</div>
|
||
</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">
|
||
Решения информационной безопасности SECURE-T
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
|
||
{/* Модальное окно "Наши решения" */}
|
||
{isSolutionsModalOpen && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4">
|
||
<div className="bg-gray-900 rounded-lg p-8 max-w-md w-full max-h-[90vh] overflow-y-auto border border-red-500/30">
|
||
<div className="flex justify-between items-center mb-6">
|
||
<h2 className="text-2xl font-bold text-red-400">Наши решения SECURE-T</h2>
|
||
<button
|
||
onClick={handleCloseModal}
|
||
className="text-gray-400 hover:text-white text-2xl"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<form onSubmit={handleSolutionsSubmit} className="space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
Имя *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
name="name"
|
||
value={solutionsForm.name}
|
||
onChange={handleSolutionsInputChange}
|
||
required
|
||
className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-red-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
Email *
|
||
</label>
|
||
<input
|
||
type="email"
|
||
name="email"
|
||
value={solutionsForm.email}
|
||
onChange={handleSolutionsInputChange}
|
||
required
|
||
className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-red-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
Компания
|
||
</label>
|
||
<input
|
||
type="text"
|
||
name="company"
|
||
value={solutionsForm.company}
|
||
onChange={handleSolutionsInputChange}
|
||
className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-red-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
Интересующее решение *
|
||
</label>
|
||
<select
|
||
name="solution"
|
||
value={solutionsForm.solution}
|
||
onChange={handleSolutionsInputChange}
|
||
required
|
||
className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-red-500"
|
||
>
|
||
<option value="">Выберите решение</option>
|
||
<option value="Криптографическая защита">Криптографическая защита</option>
|
||
<option value="Сетевая безопасность">Сетевая безопасность</option>
|
||
<option value="Мониторинг безопасности">Мониторинг безопасности</option>
|
||
<option value="Аудит безопасности">Аудит безопасности</option>
|
||
<option value="Интеграция систем">Интеграция систем</option>
|
||
<option value="Обучение персонала">Обучение персонала</option>
|
||
<option value="Комплексное решение">Комплексное решение</option>
|
||
<option value="Консультация по госзакупкам">Консультация по госзакупкам</option>
|
||
<option value="Персональное обучение">Персональное обучение</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
Дополнительная информация
|
||
</label>
|
||
<textarea
|
||
name="message"
|
||
value={solutionsForm.message}
|
||
onChange={handleSolutionsInputChange}
|
||
rows={4}
|
||
className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-red-500"
|
||
placeholder="Расскажите о ваших потребностях в области информационной безопасности..."
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex gap-4 pt-4">
|
||
<button
|
||
type="submit"
|
||
className="flex-1 bg-red-500 text-white py-2 px-4 rounded-md hover:bg-red-600 transition-colors"
|
||
>
|
||
Отправить заявку
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={handleCloseModal}
|
||
className="flex-1 bg-gray-600 text-white py-2 px-4 rounded-md hover:bg-gray-700 transition-colors"
|
||
>
|
||
Отмена
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Модальное окно "Документация" */}
|
||
{isDocumentationModalOpen && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4">
|
||
<div className="bg-gray-900 rounded-lg p-8 max-w-md w-full max-h-[90vh] overflow-y-auto border border-red-500/30">
|
||
<div className="flex justify-between items-center mb-6">
|
||
<h2 className="text-2xl font-bold text-red-400">Документация SECURE-T</h2>
|
||
<button
|
||
onClick={handleCloseModal}
|
||
className="text-gray-400 hover:text-white text-2xl"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<div className="mb-6">
|
||
<h3 className="text-lg font-semibold text-orange-400 mb-4">Доступная документация:</h3>
|
||
<div className="space-y-3">
|
||
<div className="flex items-start p-3 bg-gray-800 rounded-lg">
|
||
<BookOpen className="w-6 h-6 text-orange-400 modal-documentation-icon flex-shrink-0 mt-0.5" />
|
||
<div className="ml-3">
|
||
<p className="text-white font-medium">Полная документация</p>
|
||
<p className="text-gray-400 text-sm">Техническое руководство</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start p-3 bg-gray-800 rounded-lg">
|
||
<Rocket className="w-6 h-6 text-orange-400 modal-documentation-icon flex-shrink-0 mt-0.5" />
|
||
<div className="ml-3">
|
||
<p className="text-white font-medium">Быстрый старт</p>
|
||
<p className="text-gray-400 text-sm">Руководство по установке</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start p-3 bg-gray-800 rounded-lg">
|
||
<Settings className="w-6 h-6 text-orange-400 modal-documentation-icon flex-shrink-0 mt-0.5" />
|
||
<div className="ml-3">
|
||
<p className="text-white font-medium">Примеры конфигураций</p>
|
||
<p className="text-gray-400 text-sm">Готовые настройки</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<form onSubmit={handleDocumentationSubmit} className="space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
Имя *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
name="name"
|
||
value={documentationForm.name}
|
||
onChange={handleDocumentationInputChange}
|
||
required
|
||
className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-red-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
Email *
|
||
</label>
|
||
<input
|
||
type="email"
|
||
name="email"
|
||
value={documentationForm.email}
|
||
onChange={handleDocumentationInputChange}
|
||
required
|
||
className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-red-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
Компания
|
||
</label>
|
||
<input
|
||
type="text"
|
||
name="company"
|
||
value={documentationForm.company}
|
||
onChange={handleDocumentationInputChange}
|
||
className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-red-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
Тип документации *
|
||
</label>
|
||
<select
|
||
name="documentType"
|
||
value={documentationForm.documentType}
|
||
onChange={handleDocumentationInputChange}
|
||
required
|
||
className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-red-500"
|
||
>
|
||
<option value="">Выберите тип документации</option>
|
||
<option value="Полная документация">Полная документация</option>
|
||
<option value="Быстрый старт">Быстрый старт</option>
|
||
<option value="Примеры конфигураций">Примеры конфигураций</option>
|
||
<option value="API документация">API документация</option>
|
||
<option value="Руководство пользователя">Руководство пользователя</option>
|
||
<option value="Руководство администратора">Руководство администратора</option>
|
||
<option value="Видеоуроки">Видеоуроки</option>
|
||
<option value="Онлайн-курсы">Онлайн-курсы</option>
|
||
<option value="Практические сценарии">Практические сценарии</option>
|
||
<option value="Сертификат ФСТЭК">Сертификат ФСТЭК</option>
|
||
<option value="Лицензия ФСБ">Лицензия ФСБ</option>
|
||
<option value="ISO 27001">ISO 27001</option>
|
||
<option value="Реестр Минпромторга">Реестр Минпромторга</option>
|
||
<option value="Соответствие ГОСТ">Соответствие ГОСТ</option>
|
||
<option value="Криптографические алгоритмы">Криптографические алгоритмы</option>
|
||
<option value="Коммерческое предложение для госзакупок">Коммерческое предложение для госзакупок</option>
|
||
<option value="Техническое задание">Техническое задание</option>
|
||
<option value="Пакет документов для госзакупок">Пакет документов для госзакупок</option>
|
||
<option value="Прайс-лист">Прайс-лист</option>
|
||
<option value="Полный комплект документов">Полный комплект документов</option>
|
||
<option value="Полный пакет для госзакупок">Полный пакет для госзакупок</option>
|
||
<option value="Все документы">Все документы</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
Комментарий
|
||
</label>
|
||
<textarea
|
||
name="message"
|
||
value={documentationForm.message}
|
||
onChange={handleDocumentationInputChange}
|
||
rows={3}
|
||
className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-red-500"
|
||
placeholder="Укажите, для каких целей вам нужна документация..."
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex gap-4 pt-4">
|
||
<button
|
||
type="submit"
|
||
className="flex-1 bg-red-500 text-white py-2 px-4 rounded-md hover:bg-red-600 transition-colors"
|
||
>
|
||
Получить документацию
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={handleCloseModal}
|
||
className="flex-1 bg-gray-600 text-white py-2 px-4 rounded-md hover:bg-gray-700 transition-colors"
|
||
>
|
||
Отмена
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|