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

Update dependencies, enhance global styles, and improve layout structure. Added Geist font support and integrated a contact modal in the navigation. Refactored the DraggableCard component for better performance and simplified drag-and-drop functionality. Enhanced UXSoftware and SecureT pages with new features and improved user interactions.

Browse Source
This commit is contained in:
albivkt
2025-07-13 13:54:52 +03:00
parent d37fb0262d
commit fb24ddbfd2
17 changed files with 4257 additions and 482 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/app/components/ContactModal.tsx Normal file
View File

@ -0,0 +1,184 @@
'use client';
import { useState } from 'react';
interface ContactModalProps {
isOpen: boolean;
onClose: () => void;
defaultType?: string;
title?: string;
}
export default function ContactModal({
isOpen,
onClose,
defaultType = 'general',
title = 'Связаться с нами'
}: ContactModalProps) {
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
company: '',
message: '',
type: defaultType
});
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
alert(`Спасибо за обращение, ${formData.name}! Мы свяжемся с вами в ближайшее время.`);
setFormData({ name: '', email: '', phone: '', company: '', message: '', type: defaultType });
onClose();
};
const contactTypes = [
{ id: 'general', label: 'Общие вопросы', icon: '💬' },
{ id: 'sales', label: 'Отдел продаж', icon: '💼' },
{ id: 'support', label: 'Техподдержка', icon: '🔧' },
{ id: 'partnership', label: 'Партнёрство', icon: '🤝' },
{ id: 'consultation', label: 'Консультация', icon: '💡' },
{ id: 'demo', label: 'Демонстрация', icon: '🖥️' }
];
if (!isOpen) return null;
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="glass-effect rounded-lg p-8 max-w-md w-full max-h-[90vh] overflow-y-auto animate-slide-in-up">
<div className="flex justify-between items-center mb-6">
<h3 className="text-2xl font-bold gradient-text">{title}</h3>
<button
onClick={onClose}
className="text-gray-400 hover:text-white text-2xl transition-colors duration-200 hover:rotate-90 transform"
>
×
</button>
</div>
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Тип обращения
</label>
<select
name="type"
value={formData.type}
onChange={handleInputChange}
className="w-full px-4 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-green-400 transition-colors duration-200"
required
>
{contactTypes.map(type => (
<option key={type.id} value={type.id}>
{type.icon} {type.label}
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Имя *
</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleInputChange}
className="w-full px-4 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-green-400 transition-colors duration-200"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Email *
</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleInputChange}
className="w-full px-4 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-green-400 transition-colors duration-200"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Телефон
</label>
<input
type="tel"
name="phone"
value={formData.phone}
onChange={handleInputChange}
className="w-full px-4 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-green-400 transition-colors duration-200"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Компания
</label>
<input
type="text"
name="company"
value={formData.company}
onChange={handleInputChange}
className="w-full px-4 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-green-400 transition-colors duration-200"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Сообщение *
</label>
<textarea
name="message"
value={formData.message}
onChange={handleInputChange}
rows={4}
className="w-full px-4 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-green-400 resize-none transition-colors duration-200"
placeholder="Опишите ваш запрос..."
required
></textarea>
</div>
<div className="flex space-x-3 pt-4">
<button
type="submit"
className="flex-1 px-6 py-3 bg-gradient-to-r from-indigo-500 to-purple-500 text-white font-semibold rounded-lg hover-glow transition-all duration-300 hover:scale-105"
>
Отправить
</button>
<button
type="button"
onClick={onClose}
className="px-6 py-3 glass-effect text-gray-300 font-semibold rounded-lg hover:bg-white/10 transition-all duration-300"
>
Отмена
</button>
</div>
</form>
<div className="mt-6 pt-4 border-t border-gray-600/20">
<p className="text-sm text-gray-400 text-center">
Или свяжитесь с нами напрямую:
<br />
📞 <a href="tel:+74951234567" className="text-green-400 hover:text-green-300">+7 (495) 123-45-67</a>
<br />
📧 <a href="mailto:info@gundyrev.ru" className="text-green-400 hover:text-green-300">info@gundyrev.ru</a>
</p>
</div>
</div>
</div>
);
}

224
src/app/components/DraggableCard.tsx
View File

@ -7,10 +7,8 @@ interface DraggableCardProps {
className?: string;
initialX?: number;
initialY?: number;
containerHeight?: number;
onLanded?: () => void;
onDragStart?: () => void;
onDragEnd?: (wasDragging: boolean) => void;
onDragEnd?: () => void;
}
export default function DraggableCard({
@ -18,150 +16,24 @@ export default function DraggableCard({
className = '',
initialX = 0,
initialY = 0,
containerHeight,
onLanded,
onDragStart,
onDragEnd
}: DraggableCardProps) {
const [position, setPosition] = useState({ x: initialX, y: initialY });
const [isDragging, setIsDragging] = useState(false);
const [isFalling, setIsFalling] = useState(true);
const [isDropFalling, setIsDropFalling] = useState(false);
const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
const [fallDirection, setFallDirection] = useState({ x: 0, rotation: 0 });
const [velocity, setVelocity] = useState({ x: 0, y: 0 });
const cardRef = useRef<HTMLDivElement>(null);
const lastPosition = useRef({ x: initialX, y: initialY });
const dragStartTime = useRef<number>(0);
// Динамическая высота приземления - оставляем место для полного блока
const getGroundY = () => {
const cardHeight = 160; // Примерная высота карточки
const bottomPadding = 40; // Дополнительный отступ
const totalOffset = cardHeight + bottomPadding; // ~200px
if (containerHeight) {
return containerHeight - totalOffset;
}
if (typeof window !== 'undefined') {
const viewportHeight = window.innerHeight * 0.8; // 80vh
return Math.max(viewportHeight, 700) - totalOffset;
}
return 500; // Fallback для SSR
};
const GROUND_Y = getGroundY();
// Инициализация случайного направления падения (только для анимации, не для движения)
useEffect(() => {
const randomRotation = (Math.random() - 0.5) * 20; // Только небольшая ротация
setFallDirection({ x: 0, rotation: randomRotation }); // x = 0 для прямого падения
}, []);
// Анимация первоначального падения
useEffect(() => {
if (!isFalling) return;
const fallDuration = 2000 + Math.random() * 1000; // 2-3 секунды
const startY = initialY;
const startX = initialX;
const endX = initialX; // Падаем строго вниз, без отклонений
const startTime = Date.now();
const animate = () => {
const elapsed = Date.now() - startTime;
const progress = Math.min(elapsed / fallDuration, 1);
// Easing function для более реалистичного падения
const easeOutBounce = (t: number) => {
if (t < 1 / 2.75) {
return 7.5625 * t * t;
} else if (t < 2 / 2.75) {
return 7.5625 * (t -= 1.5 / 2.75) * t + 0.75;
} else if (t < 2.5 / 2.75) {
return 7.5625 * (t -= 2.25 / 2.75) * t + 0.9375;
} else {
return 7.5625 * (t -= 2.625 / 2.75) * t + 0.984375;
}
};
const easedProgress = easeOutBounce(progress);
const currentY = startY + (GROUND_Y - startY) * easedProgress;
const currentX = startX + (endX - startX) * progress; // Теперь это просто startX
setPosition({ x: currentX, y: currentY });
lastPosition.current = { x: currentX, y: currentY };
if (progress < 1) {
requestAnimationFrame(animate);
} else {
setIsFalling(false);
if (onLanded) {
setTimeout(() => onLanded(), 100);
}
}
};
// Начинаем падение сразу без задержки
requestAnimationFrame(animate);
}, [initialY, initialX, fallDirection, onLanded, isFalling]);
// Анимация падения после отпускания
useEffect(() => {
if (!isDropFalling) return;
const fallDuration = 800;
const startX = position.x;
const startY = position.y;
const startTime = Date.now();
const animate = () => {
const elapsed = Date.now() - startTime;
const progress = Math.min(elapsed / fallDuration, 1);
// Easing для падения с отскоком
const easeOutBounce = (t: number) => {
if (t < 1 / 2.75) {
return 7.5625 * t * t;
} else if (t < 2 / 2.75) {
return 7.5625 * (t -= 1.5 / 2.75) * t + 0.75;
} else if (t < 2.5 / 2.75) {
return 7.5625 * (t -= 2.25 / 2.75) * t + 0.9375;
} else {
return 7.5625 * (t -= 2.625 / 2.75) * t + 0.984375;
}
};
const easedProgress = easeOutBounce(progress);
const currentY = startY + (GROUND_Y - startY) * easedProgress;
setPosition({ x: startX, y: currentY });
if (progress < 1) {
requestAnimationFrame(animate);
} else {
setIsDropFalling(false);
}
};
requestAnimationFrame(animate);
}, [isDropFalling, position.x, position.y]);
// Mouse events
const handleMouseDown = (e: React.MouseEvent) => {
if (isFalling || isDropFalling || !cardRef.current) return;
if (!cardRef.current) return;
// Рассчитываем смещение относительно текущей позиции блока
setDragOffset({
x: e.clientX - position.x,
y: e.clientY - position.y
});
setIsDragging(true);
setVelocity({ x: 0, y: 0 });
lastPosition.current = position;
dragStartTime.current = Date.now();
// Уведомляем родительский компонент о начале перетаскивания
if (onDragStart) {
onDragStart();
}
@ -170,60 +42,35 @@ export default function DraggableCard({
};
const handleMouseMove = (e: MouseEvent) => {
if (!isDragging || isFalling || isDropFalling) return;
if (!isDragging) return;
const newX = e.clientX - dragOffset.x;
const newY = e.clientY - dragOffset.y;
// Рассчитываем скорость для инерции
setVelocity({
x: newX - lastPosition.current.x,
y: newY - lastPosition.current.y
});
setPosition({ x: newX, y: newY });
lastPosition.current = { x: newX, y: newY };
};
const handleMouseUp = () => {
if (isDragging) {
const dragDuration = Date.now() - dragStartTime.current;
const dragDistance = Math.sqrt(
Math.pow(position.x - lastPosition.current.x, 2) +
Math.pow(position.y - lastPosition.current.y, 2)
);
const wasDragging = dragDuration > 150 && dragDistance > 10; // Считаем перетаскиванием если больше 150ms И больше 10px движения
setIsDragging(false);
// Уведомляем родительский компонент об окончании перетаскивания
if (onDragEnd) {
onDragEnd(wasDragging); // Передаем информацию о том, было ли это реальное перетаскивание
}
if (wasDragging) {
// Запускаем падение вниз сразу после перетаскивания
setIsDropFalling(true);
onDragEnd();
}
}
};
// Touch events
const handleTouchStart = (e: React.TouchEvent) => {
if (isFalling || isDropFalling || !cardRef.current) return;
if (!cardRef.current) return;
const touch = e.touches[0];
// Рассчитываем смещение относительно текущей позиции блока
setDragOffset({
x: touch.clientX - position.x,
y: touch.clientY - position.y
});
setIsDragging(true);
setVelocity({ x: 0, y: 0 });
lastPosition.current = position;
dragStartTime.current = Date.now();
// Уведомляем родительский компонент о начале перетаскивания
if (onDragStart) {
onDragStart();
}
@ -232,49 +79,29 @@ export default function DraggableCard({
};
const handleTouchMove = (e: TouchEvent) => {
if (!isDragging || isFalling || isDropFalling) return;
if (!isDragging) return;
const touch = e.touches[0];
const newX = touch.clientX - dragOffset.x;
const newY = touch.clientY - dragOffset.y;
// Рассчитываем скорость для инерции
setVelocity({
x: newX - lastPosition.current.x,
y: newY - lastPosition.current.y
});
setPosition({ x: newX, y: newY });
lastPosition.current = { x: newX, y: newY };
e.preventDefault();
};
const handleTouchEnd = () => {
if (isDragging) {
const dragDuration = Date.now() - dragStartTime.current;
const dragDistance = Math.sqrt(
Math.pow(position.x - lastPosition.current.x, 2) +
Math.pow(position.y - lastPosition.current.y, 2)
);
const wasDragging = dragDuration > 150 && dragDistance > 10; // Считаем перетаскиванием если больше 150ms И больше 10px движения
setIsDragging(false);
// Уведомляем родительский компонент об окончании перетаскивания
if (onDragEnd) {
onDragEnd(wasDragging); // Передаем информацию о том, было ли это реальное перетаскивание
}
if (wasDragging) {
// Запускаем падение вниз сразу после перетаскивания
setIsDropFalling(true);
onDragEnd();
}
}
};
// Event listeners
useEffect(() => {
if (isDragging && !isFalling && !isDropFalling) {
if (isDragging) {
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
document.addEventListener('touchmove', handleTouchMove, { passive: false });
@ -282,7 +109,6 @@ export default function DraggableCard({
document.body.style.cursor = 'grabbing';
document.body.style.userSelect = 'none';
document.body.style.touchAction = 'none';
} else {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
@ -291,7 +117,6 @@ export default function DraggableCard({
document.body.style.cursor = '';
document.body.style.userSelect = '';
document.body.style.touchAction = '';
}
return () => {
@ -302,45 +127,20 @@ export default function DraggableCard({
document.body.style.cursor = '';
document.body.style.userSelect = '';
document.body.style.touchAction = '';
};
}, [isDragging, isFalling, isDropFalling, dragOffset, velocity]);
const getTransform = () => {
const velocityRotation = isDragging ? Math.max(-15, Math.min(15, velocity.x * 0.5)) : 0;
const hoverEffect = isDragging ? Math.sin(Date.now() * 0.005) * 2 : 0;
if (isFalling) {
return `rotate(${fallDirection.rotation}deg)`; // Только небольшая начальная ротация, без колебаний
} else if (isDragging) {
return `rotate(${3 + velocityRotation + hoverEffect}deg) scale(1.08) translateZ(0)`;
} else if (isDropFalling) {
return 'rotate(0deg) scale(0.95)'; // Прямое падение без поворота
}
return 'rotate(0deg) scale(1) translateZ(0)';
};
}, [isDragging, dragOffset]);
return (
<div
ref={cardRef}
className={`${className} ${isDragging ? 'z-50' : 'z-10'} ${
isDragging ? 'shadow-2xl' : 'transition-all duration-300'
} ${
isFalling ? 'animate-pulse' :
isDropFalling ? 'opacity-90' :
'hover:scale-105 hover:shadow-lg'
}`}
className={`${className} ${isDragging ? 'z-50 scale-105' : 'z-10'} transition-all duration-200`}
style={{
position: 'absolute',
left: `${position.x}px`,
top: `${position.y}px`,
cursor: isFalling || isDropFalling ? 'default' : (isDragging ? 'grabbing' : 'grab'),
transform: getTransform(),
cursor: isDragging ? 'grabbing' : 'grab',
transform: isDragging ? 'rotate(2deg)' : 'rotate(0deg)',
touchAction: 'none',
pointerEvents: isFalling ? 'none' : 'auto',
willChange: isDragging ? 'transform' : 'auto',
filter: isDragging ? 'brightness(1.15) saturate(1.3) drop-shadow(0 10px 20px rgba(0,0,0,0.3))' : 'none',
transition: isDragging ? 'none' : 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
}}
onMouseDown={handleMouseDown}
onTouchStart={handleTouchStart}

111
src/app/components/FloatingCTA.tsx Normal file
View File

@ -0,0 +1,111 @@
'use client';
import { useState, useEffect } from 'react';
import ContactModal from './ContactModal';
export default function FloatingCTA() {
const [isVisible, setIsVisible] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false);
const [currentText, setCurrentText] = useState(0);
const ctaTexts = [
'Оставить заявку',
'Бесплатная консультация',
'Заказать звонок',
'Получить предложение'
];
useEffect(() => {
const timer = setTimeout(() => {
setIsVisible(true);
}, 2000);
return () => clearTimeout(timer);
}, []);
useEffect(() => {
const interval = setInterval(() => {
setCurrentText(prev => (prev + 1) % ctaTexts.length);
}, 3000);
return () => clearInterval(interval);
}, []);
if (!isVisible) return null;
return (
<>
<div className="fixed bottom-6 right-6 z-40">
<button
onClick={() => setIsModalOpen(true)}
className="group relative px-6 py-3 bg-gradient-to-r from-green-500 to-emerald-500 text-white font-semibold rounded-full shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-300 animate-pulse hover:animate-none"
style={{
animation: 'pulse 2s infinite'
}}
>
<div className="flex items-center space-x-2">
<span className="transition-all duration-300 group-hover:scale-110">
📞
</span>
<span className="transition-all duration-300">
{ctaTexts[currentText]}
</span>
</div>
{/* Анимированное кольцо */}
<div className="absolute inset-0 rounded-full bg-green-400 opacity-30 animate-ping"></div>
{/* Градиентное свечение */}
<div className="absolute inset-0 rounded-full bg-gradient-to-r from-green-500 to-emerald-500 opacity-50 blur-md -z-10 group-hover:opacity-70 transition-opacity duration-300"></div>
</button>
{/* Дополнительные мини-кнопки */}
<div className="mt-3 space-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button
onClick={() => setIsModalOpen(true)}
className="block w-full px-4 py-2 bg-blue-500 text-white text-sm rounded-lg hover:bg-blue-600 transition-colors duration-200"
title="Заказать консультацию"
>
💡 Консультация
</button>
<button
onClick={() => setIsModalOpen(true)}
className="block w-full px-4 py-2 bg-purple-500 text-white text-sm rounded-lg hover:bg-purple-600 transition-colors duration-200"
title="Демонстрация продукта"
>
🖥️ Демо
</button>
</div>
</div>
{/* Мобильная фиксированная панель снизу */}
<div className="md:hidden fixed bottom-0 left-0 right-0 bg-gradient-to-r from-green-500 to-emerald-500 p-3 z-40">
<button
onClick={() => setIsModalOpen(true)}
className="w-full py-3 bg-white text-green-600 font-semibold rounded-lg hover:bg-gray-100 transition-colors duration-200"
>
{ctaTexts[currentText]}
</button>
</div>
{/* Модальное окно */}
<ContactModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
defaultType="sales"
title="Оставить заявку"
/>
<style jsx>{`
@keyframes pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
}
}
`}</style>
</>
);
}

293
src/app/components/Footer.tsx Normal file
View File

@ -0,0 +1,293 @@
'use client';
import { useState } from 'react';
import ContactModal from './ContactModal';
export default function Footer() {
const [isContactModalOpen, setIsContactModalOpen] = useState(false);
const [copySuccess, setCopySuccess] = useState<string | null>(null);
const copyToClipboard = async (text: string, type: string) => {
try {
await navigator.clipboard.writeText(text);
setCopySuccess(type);
setTimeout(() => setCopySuccess(null), 2000);
} catch (err) {
console.error('Ошибка копирования:', err);
}
};
return (
<>
<footer className="bg-gradient-to-t from-gray-900 to-gray-800 border-t border-gray-700">
<div className="max-w-7xl mx-auto px-4 py-12">
{/* Основное содержимое футера */}
<div className="grid lg:grid-cols-4 md:grid-cols-2 gap-8 mb-8">
{/* О компании */}
<div>
<h3 className="text-xl font-bold gradient-text mb-4">GUNDYREV</h3>
<p className="text-gray-300 text-sm mb-4">
Комплексные IT-решения для бизнеса. От разработки программного обеспечения
до поставки электроники.
</p>
<div className="flex space-x-4">
<button
onClick={() => setIsContactModalOpen(true)}
className="px-4 py-2 bg-gradient-to-r from-green-500 to-emerald-500 text-white text-sm font-semibold rounded-lg hover-glow transition-all duration-300 hover:scale-105"
>
Связаться с нами
</button>
</div>
</div>
{/* Услуги */}
<div>
<h4 className="text-lg font-semibold text-white mb-4">Услуги</h4>
<ul className="space-y-2 text-sm">
<li>
<a href="/development" className="text-gray-300 hover:text-white transition-colors">
Разработка ПО
</a>
</li>
<li>
<a href="/electronics" className="text-gray-300 hover:text-white transition-colors">
Поставка электроники
</a>
</li>
<li>
<a href="/ux-software" className="text-gray-300 hover:text-white transition-colors">
UX-софт
</a>
</li>
<li>
<a href="/secure-t" className="text-gray-300 hover:text-white transition-colors">
Информационная безопасность
</a>
</li>
<li>
<a href="/drweb" className="text-gray-300 hover:text-white transition-colors">
Антивирусная защита
</a>
</li>
<li>
<a href="/solovey" className="text-gray-300 hover:text-white transition-colors">
Видеосвязь Соловей
</a>
</li>
</ul>
</div>
{/* Контакты */}
<div>
<h4 className="text-lg font-semibold text-white mb-4">Контакты</h4>
<ul className="space-y-3 text-sm">
<li className="flex items-center space-x-2">
<span>📞</span>
<a
href="tel:+74951234567"
className="text-gray-300 hover:text-white transition-colors"
>
+7 (495) 123-45-67
</a>
</li>
<li className="flex items-center space-x-2">
<span>📧</span>
<a
href="mailto:info@gundyrev.ru"
className="text-gray-300 hover:text-white transition-colors"
>
info@gundyrev.ru
</a>
</li>
<li className="flex items-center space-x-2">
<span>📍</span>
<span className="text-gray-300">
г. Москва, ул. Примерная, д. 1
</span>
</li>
<li className="flex items-center space-x-2">
<span>🕒</span>
<span className="text-gray-300">
Пн-Пт: 9:00-18:00 МСК
</span>
</li>
</ul>
{/* Отделы */}
<div className="mt-6">
<h5 className="text-sm font-semibold text-gray-200 mb-2">Отделы:</h5>
<ul className="space-y-1 text-xs text-gray-400">
<li>Продажи: sales@gundyrev.ru</li>
<li>Поддержка: support@gundyrev.ru</li>
<li>Бухгалтерия: accounting@gundyrev.ru</li>
</ul>
</div>
</div>
{/* Юридическая информация */}
<div>
<h4 className="text-lg font-semibold text-white mb-4">Юридические данные</h4>
<div className="space-y-3 text-sm">
<div>
<h5 className="text-gray-200 font-medium mb-1">Полное наименование:</h5>
<p className="text-gray-300 text-xs">
ООО "ГУНДЫРЕВ"
</p>
</div>
<div className="grid grid-cols-2 gap-2">
<div>
<h5 className="text-gray-200 font-medium mb-1 text-xs">ИНН:</h5>
<p
className="text-gray-300 text-xs cursor-pointer hover:text-white transition-colors"
onClick={() => copyToClipboard('7701234567', 'inn')}
title="Нажмите для копирования"
>
7701234567
{copySuccess === 'inn' && <span className="text-green-400 ml-1">✓</span>}
</p>
</div>
<div>
<h5 className="text-gray-200 font-medium mb-1 text-xs">КПП:</h5>
<p
className="text-gray-300 text-xs cursor-pointer hover:text-white transition-colors"
onClick={() => copyToClipboard('770101001', 'kpp')}
title="Нажмите для копирования"
>
770101001
{copySuccess === 'kpp' && <span className="text-green-400 ml-1">✓</span>}
</p>
</div>
</div>
<div>
<h5 className="text-gray-200 font-medium mb-1 text-xs">ОГРН:</h5>
<p
className="text-gray-300 text-xs cursor-pointer hover:text-white transition-colors"
onClick={() => copyToClipboard('1234567890123', 'ogrn')}
title="Нажмите для копирования"
>
1234567890123
{copySuccess === 'ogrn' && <span className="text-green-400 ml-1">✓</span>}
</p>
</div>
<div>
<h5 className="text-gray-200 font-medium mb-1 text-xs">Юридический адрес:</h5>
<p className="text-gray-300 text-xs">
123456, г. Москва, ул. Примерная, д. 1, стр. 1, оф. 101
</p>
</div>
<div>
<h5 className="text-gray-200 font-medium mb-1 text-xs">Генеральный директор:</h5>
<p className="text-gray-300 text-xs">
Гундырев Александр Владимирович
</p>
</div>
</div>
</div>
</div>
{/* Банковские реквизиты */}
<div className="border-t border-gray-700 pt-6 mb-6">
<h4 className="text-lg font-semibold text-white mb-4">Банковские реквизиты</h4>
<div className="grid md:grid-cols-3 gap-6 text-sm">
<div>
<h5 className="text-gray-200 font-medium mb-2">Расчётный счёт:</h5>
<p
className="text-gray-300 cursor-pointer hover:text-white transition-colors font-mono"
onClick={() => copyToClipboard('40702810123456789012', 'rs')}
title="Нажмите для копирования"
>
40702810123456789012
{copySuccess === 'rs' && <span className="text-green-400 ml-2">✓</span>}
</p>
</div>
<div>
<h5 className="text-gray-200 font-medium mb-2">Корреспондентский счёт:</h5>
<p
className="text-gray-300 cursor-pointer hover:text-white transition-colors font-mono"
onClick={() => copyToClipboard('30101810123456789012', 'ks')}
title="Нажмите для копирования"
>
30101810123456789012
{copySuccess === 'ks' && <span className="text-green-400 ml-2">✓</span>}
</p>
</div>
<div>
<h5 className="text-gray-200 font-medium mb-2">БИК:</h5>
<p
className="text-gray-300 cursor-pointer hover:text-white transition-colors font-mono"
onClick={() => copyToClipboard('123456789', 'bik')}
title="Нажмите для копирования"
>
123456789
{copySuccess === 'bik' && <span className="text-green-400 ml-2">✓</span>}
</p>
</div>
</div>
<p className="text-gray-400 text-xs mt-2">
ПАО "Банк ПРИМЕРНЫЙ", г. Москва
</p>
</div>
{/* Нижняя часть футера */}
<div className="border-t border-gray-700 pt-6">
<div className="flex flex-col md:flex-row justify-between items-center">
<div className="text-gray-400 text-sm mb-4 md:mb-0">
© 2024 ООО "ГУНДЫРЕВ". Все права защищены.
</div>
<div className="flex space-x-6 text-sm">
<a href="/contacts" className="text-gray-300 hover:text-white transition-colors">
Контакты
</a>
<a href="/about" className="text-gray-300 hover:text-white transition-colors">
О компании
</a>
<button
onClick={() => setIsContactModalOpen(true)}
className="text-gray-300 hover:text-white transition-colors"
>
Обратная связь
</button>
</div>
</div>
{/* Дополнительная информация */}
<div className="mt-4 pt-4 border-t border-gray-800">
<div className="grid md:grid-cols-2 gap-4 text-xs text-gray-500">
<div>
<p>
🏛️ Работаем с государственными закупками по 44-ФЗ и 223-ФЗ
</p>
<p className="mt-1">
🛡️ Соответствуем требованиям информационной безопасности
</p>
</div>
<div>
<p>
📜 Лицензии и сертификаты соответствия
</p>
<p className="mt-1">
⚖️ Деятельность ведётся в соответствии с законодательством РФ
</p>
</div>
</div>
</div>
</div>
</div>
</footer>
{/* Contact Modal */}
<ContactModal
isOpen={isContactModalOpen}
onClose={() => setIsContactModalOpen(false)}
defaultType="general"
title="Обратная связь"
/>
</>
);
}

260
src/app/components/LicenseCalculator.tsx Normal file
View File

@ -0,0 +1,260 @@
'use client';
import { useState } from 'react';
interface LicensePrice {
name: string;
price: number;
description: string;
minNodes: number;
maxNodes: number;
}
const licenseData: LicensePrice[] = [
{
name: 'Dr.Web Security Space',
price: 890,
description: 'Комплексная защита для домашних пользователей',
minNodes: 1,
maxNodes: 5
},
{
name: 'Dr.Web Enterprise Suite',
price: 1250,
description: 'Корпоративное решение для предприятий',
minNodes: 5,
maxNodes: 1000
},
{
name: 'Dr.Web Mobile Security',
price: 650,
description: 'Защита мобильных устройств',
minNodes: 1,
maxNodes: 100
},
{
name: 'Dr.Web Gateway Security',
price: 1890,
description: 'Защита интернет-шлюзов и серверов',
minNodes: 1,
maxNodes: 50
},
{
name: 'Dr.Web Cloud',
price: 750,
description: 'Облачные решения безопасности',
minNodes: 1,
maxNodes: 500
}
];
export default function LicenseCalculator() {
const [selectedLicense, setSelectedLicense] = useState<string>('');
const [nodeCount, setNodeCount] = useState<number>(1);
const [duration, setDuration] = useState<number>(12);
const [showResult, setShowResult] = useState(false);
const getCurrentLicense = () => {
return licenseData.find(license => license.name === selectedLicense);
};
const calculatePrice = () => {
const license = getCurrentLicense();
if (!license) return 0;
let basePrice = license.price * nodeCount;
// Скидки за количество
if (nodeCount >= 100) {
basePrice *= 0.85; // 15% скидка
} else if (nodeCount >= 50) {
basePrice *= 0.9; // 10% скидка
} else if (nodeCount >= 20) {
basePrice *= 0.95; // 5% скидка
}
// Скидки за длительность
if (duration >= 36) {
basePrice *= 0.8; // 20% скидка за 3 года
} else if (duration >= 24) {
basePrice *= 0.85; // 15% скидка за 2 года
} else if (duration >= 12) {
basePrice *= 0.9; // 10% скидка за 1 год
}
return Math.round(basePrice);
};
const handleCalculate = () => {
if (selectedLicense && nodeCount > 0) {
setShowResult(true);
}
};
const handleReset = () => {
setSelectedLicense('');
setNodeCount(1);
setDuration(12);
setShowResult(false);
};
return (
<div className="glass-effect p-8 rounded-lg border border-green-500/30">
<h3 className="text-2xl font-bold mb-6 text-green-400 text-center">
Калькулятор стоимости лицензий Dr.Web
</h3>
<div className="space-y-6">
{/* Выбор лицензии */}
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Выберите продукт *
</label>
<select
value={selectedLicense}
onChange={(e) => {
setSelectedLicense(e.target.value);
setShowResult(false);
}}
className="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-green-500 transition-colors"
>
<option value="">Выберите продукт Dr.Web</option>
{licenseData.map((license) => (
<option key={license.name} value={license.name}>
{license.name} - от {license.price}₽/узел
</option>
))}
</select>
{selectedLicense && (
<p className="text-sm text-gray-400 mt-2">
{getCurrentLicense()?.description}
</p>
)}
</div>
{/* Количество узлов */}
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Количество узлов *
</label>
<input
type="number"
value={nodeCount}
onChange={(e) => {
setNodeCount(parseInt(e.target.value) || 1);
setShowResult(false);
}}
min={getCurrentLicense()?.minNodes || 1}
max={getCurrentLicense()?.maxNodes || 1000}
className="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-green-500 transition-colors"
placeholder="Введите количество узлов"
/>
{selectedLicense && (
<p className="text-sm text-gray-400 mt-2">
Доступно: {getCurrentLicense()?.minNodes} - {getCurrentLicense()?.maxNodes} узлов
</p>
)}
</div>
{/* Длительность лицензии */}
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Срок лицензии
</label>
<select
value={duration}
onChange={(e) => {
setDuration(parseInt(e.target.value));
setShowResult(false);
}}
className="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-green-500 transition-colors"
>
<option value={6}>6 месяцев</option>
<option value={12}>1 год (скидка 10%)</option>
<option value={24}>2 года (скидка 15%)</option>
<option value={36}>3 года (скидка 20%)</option>
</select>
</div>
{/* Кнопки */}
<div className="flex space-x-4">
<button
onClick={handleCalculate}
disabled={!selectedLicense || nodeCount <= 0}
className="flex-1 px-6 py-3 bg-green-500 text-black font-semibold rounded-lg hover:bg-green-600 disabled:bg-gray-600 disabled:text-gray-400 transition-colors"
>
Рассчитать стоимость
</button>
<button
onClick={handleReset}
className="px-6 py-3 bg-gray-600 text-white font-semibold rounded-lg hover:bg-gray-700 transition-colors"
>
Очистить
</button>
</div>
{/* Результат */}
{showResult && (
<div className="mt-6 p-6 bg-green-900/20 border border-green-500/30 rounded-lg">
<h4 className="text-xl font-bold text-green-400 mb-4">Расчет стоимости</h4>
<div className="space-y-3">
<div className="flex justify-between">
<span className="text-gray-300">Продукт:</span>
<span className="text-white font-semibold">{selectedLicense}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-300">Количество узлов:</span>
<span className="text-white font-semibold">{nodeCount}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-300">Срок лицензии:</span>
<span className="text-white font-semibold">{duration} мес.</span>
</div>
<div className="border-t border-gray-600 pt-3">
<div className="flex justify-between text-lg">
<span className="text-gray-300">Итоговая стоимость:</span>
<span className="text-green-400 font-bold">{calculatePrice().toLocaleString()}₽</span>
</div>
</div>
</div>
<div className="mt-4 p-4 bg-gray-800/50 rounded-lg">
<p className="text-sm text-gray-400 mb-2">
<strong>Включено в стоимость:</strong>
</p>
<ul className="text-sm text-gray-300 space-y-1">
<li>• Техническая поддержка</li>
<li>• Обновления вирусных баз</li>
<li>• Обновления программного обеспечения</li>
<li>• Консультации по настройке</li>
</ul>
</div>
</div>
)}
{/* Информация о скидках */}
<div className="mt-6 p-4 bg-blue-900/20 border border-blue-500/30 rounded-lg">
<h5 className="text-lg font-semibold text-blue-400 mb-3">Доступные скидки</h5>
<div className="grid md:grid-cols-2 gap-4 text-sm">
<div>
<p className="text-gray-300 font-medium mb-2">По количеству узлов:</p>
<ul className="text-gray-400 space-y-1">
<li>• 20+ узлов: скидка 5%</li>
<li>• 50+ узлов: скидка 10%</li>
<li>• 100+ узлов: скидка 15%</li>
</ul>
</div>
<div>
<p className="text-gray-300 font-medium mb-2">По сроку лицензии:</p>
<ul className="text-gray-400 space-y-1">
<li>• 1 год: скидка 10%</li>
<li>• 2 года: скидка 15%</li>
<li>• 3 года: скидка 20%</li>
</ul>
</div>
</div>
</div>
</div>
</div>
);
}

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

@ -2,19 +2,42 @@
import Link from 'next/link';
import { useState } from 'react';
import { useTheme } from '../contexts/ThemeContext';
import ContactModal from './ContactModal';
export default function Navigation() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isProductsOpen, setIsProductsOpen] = useState(false);
const [isContactModalOpen, setIsContactModalOpen] = useState(false);
const { theme, toggleTheme } = useTheme();
const productItems = [
{
category: 'Безопасность',
items: [
{ href: '/ux-software', label: 'UX-софт', description: 'Улучшение пользовательского опыта', icon: '🔒' },
{ href: '/secure-t', label: 'Secure-T', description: 'Комплексная защита', icon: '🛡️' },
{ href: '/drweb', label: 'Dr.Web', description: 'Антивирусная защита', icon: '🔧' },
]
},
{
category: 'Разработка',
items: [
{ href: '/development', label: 'Веб-разработка', description: 'Сайты и приложения', icon: '💻' },
{ href: '/solovey', label: 'Соловей', description: 'Платформа видеосвязи', icon: '🐦' },
]
},
{
category: 'Поставки',
items: [
{ href: '/electronics', label: 'Электроника', description: 'B2B/B2G поставки', icon: '⚡' },
]
}
];
const menuItems = [
{ href: '/', label: 'Главная' },
{ href: '/ux-software', label: 'UX Софт' },
{ href: '/secure-t', label: 'Secure-T' },
{ href: '/drweb', label: 'Dr.Web' },
{ href: '/development', label: 'Разработка' },
{ href: '/electronics', label: 'Электроника' },
{ href: '/solovey', label: 'Соловей' },
{ href: '/about', label: 'О нас' },
{ href: '/about', label: 'О компании' },
{ href: '/contacts', label: 'Контакты' },
];
return (
@ -28,6 +51,55 @@ export default function Navigation() {
{/* Desktop Menu */}
<div className="hidden md:flex items-center space-x-8">
{/* Продукты с выпадающим меню */}
<div
className="relative group"
onMouseEnter={() => setIsProductsOpen(true)}
onMouseLeave={() => setIsProductsOpen(false)}
>
<button className="text-gray-300 hover:text-white transition-colors duration-200 text-sm font-medium flex items-center space-x-1">
<span>Продукты</span>
<svg className={`w-4 h-4 transition-transform duration-200 ${isProductsOpen ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
{/* Улучшенное выпадающее меню с категориями */}
{isProductsOpen && (
<div className="absolute top-full left-0 mt-2 w-80 glass-effect rounded-lg shadow-lg border border-gray-600/20 overflow-hidden dropdown-menu">
<div className="py-2">
{productItems.map((category, categoryIndex) => (
<div key={category.category} className={categoryIndex > 0 ? 'border-t border-gray-600/20 mt-2 pt-2' : ''}>
<div className="px-4 py-2">
<h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">
{category.category}
</h4>
<div className="space-y-1">
{category.items.map((item) => (
<Link
key={item.href}
href={item.href}
className="flex items-center px-2 py-2 text-sm text-gray-300 hover:text-white hover:bg-gray-700/30 rounded-md transition-all duration-200 group"
>
<span className="text-lg mr-3 group-hover:scale-110 transition-transform duration-200">
{item.icon}
</span>
<div className="flex-1">
<div className="font-medium">{item.label}</div>
<div className="text-xs text-gray-400 mt-1">{item.description}</div>
</div>
</Link>
))}
</div>
</div>
</div>
))}
</div>
</div>
)}
</div>
{/* Остальные пункты меню */}
{menuItems.map((item) => (
<Link
key={item.href}
@ -37,10 +109,74 @@ export default function Navigation() {
{item.label}
</Link>
))}
{/* Кнопка "Оставить заявку" */}
<button
onClick={() => setIsContactModalOpen(true)}
className="bg-gradient-to-r from-green-500 to-emerald-500 text-white px-4 py-2 rounded-lg font-medium text-sm hover:from-green-600 hover:to-emerald-600 transition-all duration-200 hover:scale-105 shadow-lg hover:shadow-xl"
>
📞 Оставить заявку
</button>
{/* Улучшенный переключатель темы */}
<div className="flex items-center space-x-3">
<button
onClick={toggleTheme}
className={`theme-toggle ${theme}`}
aria-label="Переключить тему"
title={theme === 'dark' ? 'Переключить на светлую тему' : 'Переключить на тёмную тему'}
>
<span
className={`theme-toggle-icon transition-all duration-300 ${
theme === 'dark' ? 'scale-110 opacity-100' : 'scale-75 opacity-50'
}`}
>
🌙
</span>
<span
className={`theme-toggle-icon transition-all duration-300 ${
theme === 'light' ? 'scale-110 opacity-100' : 'scale-75 opacity-50'
}`}
>
☀️
</span>
</button>
</div>
</div>
{/* Mobile Menu Button */}
<div className="md:hidden">
<div className="md:hidden flex items-center space-x-3">
{/* Мобильная кнопка "Оставить заявку" */}
<button
onClick={() => setIsContactModalOpen(true)}
className="bg-gradient-to-r from-green-500 to-emerald-500 text-white px-3 py-1.5 rounded-md font-medium text-xs hover:from-green-600 hover:to-emerald-600 transition-all duration-200"
>
📞
</button>
{/* Мобильный переключатель темы */}
<button
onClick={toggleTheme}
className={`theme-toggle ${theme}`}
aria-label="Переключить тему"
title={theme === 'dark' ? 'Переключить на светлую тему' : 'Переключить на тёмную тему'}
>
<span
className={`theme-toggle-icon transition-all duration-300 ${
theme === 'dark' ? 'scale-110 opacity-100' : 'scale-75 opacity-50'
}`}
>
🌙
</span>
<span
className={`theme-toggle-icon transition-all duration-300 ${
theme === 'light' ? 'scale-110 opacity-100' : 'scale-75 opacity-50'
}`}
>
☀️
</span>
</button>
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
className="text-gray-300 hover:text-white focus:outline-none focus:text-white"
@ -56,24 +192,69 @@ export default function Navigation() {
</div>
</div>
{/* Mobile Menu */}
{/* Улучшенное мобильное меню */}
{isMenuOpen && (
<div className="md:hidden">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 glass-effect mt-2 rounded-lg">
{menuItems.map((item) => (
<Link
key={item.href}
href={item.href}
className="block px-3 py-2 text-gray-300 hover:text-white transition-colors duration-200 text-sm font-medium"
onClick={() => setIsMenuOpen(false)}
>
{item.label}
</Link>
{/* Мобильные продукты по категориям */}
{productItems.map((category, categoryIndex) => (
<div key={category.category} className={`${categoryIndex > 0 ? 'border-t border-gray-600/20 pt-2 mt-2' : ''} pb-2`}>
<div className="text-xs font-semibold text-gray-400 uppercase tracking-wider px-3 py-2">
{category.category}
</div>
{category.items.map((item) => (
<Link
key={item.href}
href={item.href}
className="flex items-center px-3 py-2 text-gray-300 hover:text-white transition-colors duration-200 text-sm font-medium rounded-md hover:bg-gray-700/30"
onClick={() => setIsMenuOpen(false)}
>
<span className="text-lg mr-3">{item.icon}</span>
<div className="flex-1">
<div>{item.label}</div>
<div className="text-xs text-gray-400 mt-1">{item.description}</div>
</div>
</Link>
))}
</div>
))}
{/* Основные пункты меню */}
<div className="border-t border-gray-600/20 pt-2 mt-2">
{menuItems.map((item) => (
<Link
key={item.href}
href={item.href}
className="block px-3 py-2 text-gray-300 hover:text-white transition-colors duration-200 text-sm font-medium rounded-md hover:bg-gray-700/30"
onClick={() => setIsMenuOpen(false)}
>
{item.label}
</Link>
))}
{/* Кнопка "Оставить заявку" в мобильном меню */}
<button
onClick={() => {
setIsContactModalOpen(true);
setIsMenuOpen(false);
}}
className="w-full text-left px-3 py-2 bg-gradient-to-r from-green-500 to-emerald-500 text-white font-medium rounded-md hover:from-green-600 hover:to-emerald-600 transition-all duration-200 mt-2"
>
📞 Оставить заявку
</button>
</div>
</div>
</div>
)}
</div>
{/* Модальное окно контактов */}
<ContactModal
isOpen={isContactModalOpen}
onClose={() => setIsContactModalOpen(false)}
defaultType="sales"
title="Оставить заявку"
/>
</nav>
);
}

460
src/app/contacts/page.tsx Normal file
View File

@ -0,0 +1,460 @@
'use client';
import { useState, useEffect } from 'react';
import Navigation from '../components/Navigation';
export default function Contacts() {
const [isFormOpen, setIsFormOpen] = useState(false);
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
company: '',
message: '',
type: 'general'
});
const [hoveredCard, setHoveredCard] = useState<string | null>(null);
const [copySuccess, setCopySuccess] = useState<string | null>(null);
// Анимация появления
useEffect(() => {
const style = document.createElement('style');
style.textContent = `
@keyframes slide-in-up {
from { transform: translateY(30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes contact-glow {
0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 136, 0.2); }
50% { box-shadow: 0 0 30px rgba(0, 255, 136, 0.4); }
}
@keyframes copy-feedback {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.animate-slide-in-up { animation: slide-in-up 0.6s ease-out; }
.animate-contact-glow { animation: contact-glow 3s ease-in-out infinite; }
.animate-copy-feedback { animation: copy-feedback 0.3s ease-out; }
`;
document.head.appendChild(style);
return () => {
document.head.removeChild(style);
};
}, []);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
alert(`Спасибо за обращение, ${formData.name}! Мы свяжемся с вами в ближайшее время.`);
setFormData({ name: '', email: '', phone: '', company: '', message: '', type: 'general' });
setIsFormOpen(false);
};
const copyToClipboard = async (text: string, type: string) => {
try {
await navigator.clipboard.writeText(text);
setCopySuccess(type);
setTimeout(() => setCopySuccess(null), 2000);
} catch (err) {
console.error('Ошибка копирования:', err);
}
};
const contactTypes = [
{ id: 'general', label: 'Общие вопросы', icon: '💬' },
{ id: 'sales', label: 'Отдел продаж', icon: '💼' },
{ id: 'support', label: 'Техподдержка', icon: '🔧' },
{ id: 'partnership', label: 'Партнёрство', icon: '🤝' }
];
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-indigo-900 via-black to-purple-900"></div>
<div className="absolute inset-0 opacity-20">
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-indigo-500 rounded-full blur-3xl opacity-30"></div>
<div className="absolute bottom-1/4 right-1/4 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">
<div className="mb-8 animate-slide-in-up">
<h1 className="text-5xl md:text-7xl font-bold mb-6">
<span className="gradient-text">Контакты</span>
</h1>
<p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-4xl mx-auto">
Свяжитесь с нами любым удобным способом. Мы всегда готовы ответить на ваши вопросы.
</p>
</div>
{/* Быстрые контакты */}
<div className="grid md:grid-cols-3 gap-6 mb-12">
<div
className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 animate-slide-in-up cursor-pointer"
onClick={() => copyToClipboard('+7 (495) 123-45-67', 'phone')}
onMouseEnter={() => setHoveredCard('phone')}
onMouseLeave={() => setHoveredCard(null)}
>
<div className="text-4xl mb-4">📞</div>
<h3 className="text-xl font-bold mb-2">Телефон</h3>
<p className="text-gray-300">+7 (495) 123-45-67</p>
{copySuccess === 'phone' && (
<p className="text-green-400 text-sm mt-2 animate-copy-feedback">Скопировано!</p>
)}
{hoveredCard === 'phone' && (
<p className="text-gray-400 text-xs mt-2">Нажмите для копирования</p>
)}
</div>
<div
className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300 animate-slide-in-up cursor-pointer"
onClick={() => copyToClipboard('info@gundyrev.ru', 'email')}
onMouseEnter={() => setHoveredCard('email')}
onMouseLeave={() => setHoveredCard(null)}
>
<div className="text-4xl mb-4">📧</div>
<h3 className="text-xl font-bold mb-2">Email</h3>
<p className="text-gray-300">info@gundyrev.ru</p>
{copySuccess === 'email' && (
<p className="text-green-400 text-sm mt-2 animate-copy-feedback">Скопировано!</p>
)}
{hoveredCard === 'email' && (
<p className="text-gray-400 text-xs mt-2">Нажмите для копирования</p>
)}
</div>
<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>
<h3 className="text-xl font-bold mb-2">Режим работы</h3>
<p className="text-gray-300">Пн-Пт: 9:00-18:00</p>
<p className="text-gray-400 text-sm mt-1">МСК</p>
</div>
</div>
<button
onClick={() => setIsFormOpen(true)}
className="px-8 py-3 bg-gradient-to-r from-indigo-500 to-purple-500 text-white font-semibold rounded-lg hover-glow transition-all duration-300 hover:scale-105"
>
Написать нам
</button>
</div>
</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">информация</span>
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto">
Вся необходимая информация для связи с нашими отделами
</p>
</div>
<div className="grid lg:grid-cols-2 gap-12">
{/* Контактные отделы */}
<div className="space-y-6">
<h3 className="text-2xl font-bold mb-6 text-center lg:text-left">Отделы компании</h3>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="flex items-center mb-4">
<span className="text-2xl mr-3">💼</span>
<h4 className="text-xl font-bold">Отдел продаж</h4>
</div>
<div className="space-y-2 text-gray-300">
<p>📞 +7 (495) 123-45-67 доб. 101</p>
<p
className="cursor-pointer hover:text-white transition-colors"
onClick={() => copyToClipboard('sales@gundyrev.ru', 'sales-email')}
>
📧 sales@gundyrev.ru
{copySuccess === 'sales-email' && <span className="text-green-400 ml-2">✓</span>}
</p>
<p>👤 Менеджер: Иван Петров</p>
</div>
</div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="flex items-center mb-4">
<span className="text-2xl mr-3">🔧</span>
<h4 className="text-xl font-bold">Техническая поддержка</h4>
</div>
<div className="space-y-2 text-gray-300">
<p>📞 +7 (495) 123-45-67 доб. 102</p>
<p
className="cursor-pointer hover:text-white transition-colors"
onClick={() => copyToClipboard('support@gundyrev.ru', 'support-email')}
>
📧 support@gundyrev.ru
{copySuccess === 'support-email' && <span className="text-green-400 ml-2">✓</span>}
</p>
<p>⏰ 24/7 для критических задач</p>
</div>
</div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="flex items-center mb-4">
<span className="text-2xl mr-3">📊</span>
<h4 className="text-xl font-bold">Бухгалтерия</h4>
</div>
<div className="space-y-2 text-gray-300">
<p>📞 +7 (495) 123-45-67 доб. 103</p>
<p
className="cursor-pointer hover:text-white transition-colors"
onClick={() => copyToClipboard('accounting@gundyrev.ru', 'accounting-email')}
>
📧 accounting@gundyrev.ru
{copySuccess === 'accounting-email' && <span className="text-green-400 ml-2">✓</span>}
</p>
<p>👤 Главный бухгалтер: Елена Сидорова</p>
<p>⏰ Пн-Пт: 9:00-17:00</p>
</div>
</div>
<div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
<div className="flex items-center mb-4">
<span className="text-2xl mr-3">🤝</span>
<h4 className="text-xl font-bold">Партнёрство</h4>
</div>
<div className="space-y-2 text-gray-300">
<p>📞 +7 (495) 123-45-67 доб. 104</p>
<p
className="cursor-pointer hover:text-white transition-colors"
onClick={() => copyToClipboard('partners@gundyrev.ru', 'partners-email')}
>
📧 partners@gundyrev.ru
{copySuccess === 'partners-email' && <span className="text-green-400 ml-2">✓</span>}
</p>
<p>👤 Директор по развитию: Анна Козлова</p>
</div>
</div>
</div>
{/* Юридическая информация */}
<div>
<h3 className="text-2xl font-bold mb-6 text-center lg:text-left">Юридическая информация</h3>
<div className="glass-effect p-6 rounded-lg space-y-4">
<div>
<h4 className="text-lg font-semibold mb-2 text-gray-200">Полное наименование</h4>
<p className="text-gray-300">
Общество с ограниченной ответственностью "ГУНДЫРЕВ"
</p>
</div>
<div>
<h4 className="text-lg font-semibold mb-2 text-gray-200">Юридический адрес</h4>
<p className="text-gray-300">
123456, г. Москва, ул. Примерная, д. 1, стр. 1, оф. 101
</p>
</div>
<div className="grid md:grid-cols-2 gap-4">
<div>
<h4 className="text-lg font-semibold mb-2 text-gray-200">ИНН</h4>
<p
className="text-gray-300 cursor-pointer hover:text-white transition-colors"
onClick={() => copyToClipboard('7701234567', 'inn')}
>
7701234567
{copySuccess === 'inn' && <span className="text-green-400 ml-2">✓</span>}
</p>
</div>
<div>
<h4 className="text-lg font-semibold mb-2 text-gray-200">КПП</h4>
<p
className="text-gray-300 cursor-pointer hover:text-white transition-colors"
onClick={() => copyToClipboard('770101001', 'kpp')}
>
770101001
{copySuccess === 'kpp' && <span className="text-green-400 ml-2">✓</span>}
</p>
</div>
</div>
<div>
<h4 className="text-lg font-semibold mb-2 text-gray-200">ОГРН</h4>
<p
className="text-gray-300 cursor-pointer hover:text-white transition-colors"
onClick={() => copyToClipboard('1234567890123', 'ogrn')}
>
1234567890123
{copySuccess === 'ogrn' && <span className="text-green-400 ml-2">✓</span>}
</p>
</div>
<div>
<h4 className="text-lg font-semibold mb-2 text-gray-200">Банковские реквизиты</h4>
<div className="space-y-2 text-gray-300">
<div className="flex justify-between items-center">
<span>Р/С:</span>
<span
className="cursor-pointer hover:text-white transition-colors"
onClick={() => copyToClipboard('40702810123456789012', 'rs')}
>
40702810123456789012
{copySuccess === 'rs' && <span className="text-green-400 ml-2">✓</span>}
</span>
</div>
<div className="flex justify-between items-center">
<span>К/С:</span>
<span
className="cursor-pointer hover:text-white transition-colors"
onClick={() => copyToClipboard('30101810123456789012', 'ks')}
>
30101810123456789012
{copySuccess === 'ks' && <span className="text-green-400 ml-2">✓</span>}
</span>
</div>
<div className="flex justify-between items-center">
<span>БИК:</span>
<span
className="cursor-pointer hover:text-white transition-colors"
onClick={() => copyToClipboard('123456789', 'bik')}
>
123456789
{copySuccess === 'bik' && <span className="text-green-400 ml-2">✓</span>}
</span>
</div>
<p className="text-sm text-gray-400 mt-2">
ПАО "Банк ПРИМЕРНЫЙ", г. Москва
</p>
</div>
</div>
<div>
<h4 className="text-lg font-semibold mb-2 text-gray-200">Генеральный директор</h4>
<p className="text-gray-300">Гундырев Александр Владимирович</p>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Модальное окно формы */}
{isFormOpen && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="glass-effect rounded-lg p-8 max-w-md w-full max-h-[90vh] overflow-y-auto">
<div className="flex justify-between items-center mb-6">
<h3 className="text-2xl font-bold gradient-text">Связаться с нами</h3>
<button
onClick={() => setIsFormOpen(false)}
className="text-gray-400 hover:text-white text-2xl"
>
×
</button>
</div>
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Тип обращения
</label>
<select
name="type"
value={formData.type}
onChange={handleInputChange}
className="w-full px-4 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-green-400"
required
>
{contactTypes.map(type => (
<option key={type.id} value={type.id}>
{type.icon} {type.label}
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Имя *
</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleInputChange}
className="w-full px-4 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-green-400"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Email *
</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleInputChange}
className="w-full px-4 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-green-400"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Телефон
</label>
<input
type="tel"
name="phone"
value={formData.phone}
onChange={handleInputChange}
className="w-full px-4 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-green-400"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Компания
</label>
<input
type="text"
name="company"
value={formData.company}
onChange={handleInputChange}
className="w-full px-4 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-green-400"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
Сообщение *
</label>
<textarea
name="message"
value={formData.message}
onChange={handleInputChange}
rows={4}
className="w-full px-4 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-green-400 resize-none"
required
></textarea>
</div>
<button
type="submit"
className="w-full px-6 py-3 bg-gradient-to-r from-indigo-500 to-purple-500 text-white font-semibold rounded-lg hover-glow transition-all duration-300 hover:scale-105"
>
Отправить сообщение
</button>
</form>
</div>
</div>
)}
</>
);
}

53
src/app/contexts/ThemeContext.tsx Normal file
View File

@ -0,0 +1,53 @@
'use client';
import React, { createContext, useContext, useState, useEffect } from 'react';
type Theme = 'light' | 'dark';
interface ThemeContextType {
theme: Theme;
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
export const useTheme = () => {
const context = useContext(ThemeContext);
if (context === undefined) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
};
export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [theme, setTheme] = useState<Theme>('dark');
useEffect(() => {
// Проверяем сохраненную тему в localStorage
const savedTheme = localStorage.getItem('theme') as Theme;
if (savedTheme) {
setTheme(savedTheme);
} else {
// Проверяем системную тему
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
setTheme(systemTheme);
}
}, []);
useEffect(() => {
// Применяем тему к документу
document.documentElement.classList.remove('light', 'dark');
document.documentElement.classList.add(theme);
localStorage.setItem('theme', theme);
}, [theme]);
const toggleTheme = () => {
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};

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

@ -1,6 +1,7 @@
'use client';
import Navigation from '../components/Navigation';
import LicenseCalculator from '../components/LicenseCalculator';
import { useState, useEffect } from 'react';
export default function DrWeb() {
@ -489,44 +490,7 @@ export default function DrWeb() {
</div>
</div>
{/* Интерактивная карта угроз */}
<div className="glass-effect p-8 rounded-lg border border-green-500/30">
<h3 className="text-2xl font-bold mb-6 text-center text-green-400">
Глобальная карта угроз
</h3>
<div className="relative h-64 bg-gray-900/50 rounded-lg overflow-hidden">
{/* Имитация карты мира */}
<div className="absolute inset-0 flex items-center justify-center">
<div className="text-6xl text-gray-600">🌍</div>
</div>
{/* Анимированные точки угроз */}
<div className="absolute top-1/4 left-1/4 w-3 h-3 bg-red-500 rounded-full animate-ping"></div>
<div className="absolute top-1/3 right-1/3 w-2 h-2 bg-yellow-500 rounded-full animate-ping" style={{animationDelay: '0.5s'}}></div>
<div className="absolute bottom-1/3 left-1/2 w-4 h-4 bg-red-600 rounded-full animate-ping" style={{animationDelay: '1s'}}></div>
<div className="absolute top-1/2 right-1/4 w-2 h-2 bg-orange-500 rounded-full animate-ping" style={{animationDelay: '1.5s'}}></div>
<div className="absolute bottom-1/4 right-1/2 w-3 h-3 bg-red-400 rounded-full animate-ping" style={{animationDelay: '2s'}}></div>
{/* Защищенные зоны */}
<div className="absolute top-1/2 left-1/3 w-6 h-6 bg-green-500 rounded-full animate-pulse opacity-70"></div>
<div className="absolute bottom-1/2 right-1/3 w-5 h-5 bg-green-400 rounded-full animate-pulse opacity-70" style={{animationDelay: '0.7s'}}></div>
</div>
<div className="mt-6 grid md:grid-cols-3 gap-4 text-center">
<div className="flex items-center justify-center space-x-2">
<div className="w-3 h-3 bg-red-500 rounded-full animate-ping"></div>
<span className="text-sm text-gray-300">Активные угрозы</span>
</div>
<div className="flex items-center justify-center space-x-2">
<div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
<span className="text-sm text-gray-300">Защищенные зоны</span>
</div>
<div className="flex items-center justify-center space-x-2">
<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
<span className="text-sm text-gray-300">Мониторинг</span>
</div>
</div>
</div>
</div>
</section>
@ -693,124 +657,9 @@ export default function DrWeb() {
</div>
</section>
{/* Brand Guidelines */}
<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="text-green-400">Dr.Web</span>
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto">
Соблюдение фирменного стиля и требований бренда Dr.Web
</p>
</div>
<div className="grid md:grid-cols-2 gap-12 items-center mb-16">
<div>
<h3 className="text-2xl font-bold mb-6 text-green-400">Фирменные цвета</h3>
<div className="space-y-4">
<div className="flex items-center space-x-4">
<div className="w-12 h-12 bg-green-500 rounded"></div>
<div>
<p className="font-semibold">Dr.Web Green</p>
<p className="text-sm text-gray-400">#00B04F</p>
</div>
</div>
<div className="flex items-center space-x-4">
<div className="w-12 h-12 bg-gray-800 rounded"></div>
<div>
<p className="font-semibold">Dr.Web Dark</p>
<p className="text-sm text-gray-400">#2C2C2C</p>
</div>
</div>
<div className="flex items-center space-x-4">
<div className="w-12 h-12 bg-white rounded border"></div>
<div>
<p className="font-semibold">Dr.Web White</p>
<p className="text-sm text-gray-400">#FFFFFF</p>
</div>
</div>
</div>
</div>
<div>
<h3 className="text-2xl font-bold mb-6 text-green-400">Логотип</h3>
<div className="glass-effect p-8 rounded-lg">
<div className="flex items-center justify-center space-x-4 mb-6">
<div className="w-16 h-16 bg-green-500 rounded-lg flex items-center justify-center">
<span className="text-black font-bold text-2xl">Dr</span>
</div>
<span className="text-4xl font-bold text-green-400">Dr.Web</span>
</div>
<p className="text-gray-300 text-center text-sm">
Официальный логотип Dr.Web должен использоваться без изменений
</p>
</div>
</div>
</div>
<div className="glass-effect p-8 rounded-lg">
<h3 className="text-2xl font-bold mb-6 text-green-400 text-center">Правила использования бренда</h3>
<div className="grid md:grid-cols-2 gap-8">
<div>
<h4 className="font-semibold mb-4 text-green-400">✓ Разрешено:</h4>
<ul className="space-y-2 text-gray-300">
<li>• Использование официального логотипа</li>
<li>• Соблюдение фирменных цветов</li>
<li>• Указание статуса партнера</li>
<li>• Размещение сертификатов</li>
</ul>
</div>
<div>
<h4 className="font-semibold mb-4 text-red-400">✗ Запрещено:</h4>
<ul className="space-y-2 text-gray-300">
<li>• Изменение логотипа</li>
<li>• Использование неофициальных цветов</li>
<li>• Искажение пропорций</li>
<li>• Нарушение позиционирования</li>
</ul>
</div>
</div>
</div>
</div>
</section>
{/* Partnership */}
<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="text-green-400">Dr.Web</span>
</h2>
</div>
<div className="grid md:grid-cols-3 gap-8">
<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>
<h3 className="text-xl font-bold mb-4">Сертифицированный партнер</h3>
<p className="text-gray-300">
Официальный статус партнера Dr.Web с подтвержденной компетенцией
</p>
</div>
<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>
<h3 className="text-xl font-bold mb-4">Обученные специалисты</h3>
<p className="text-gray-300">
Наши эксперты прошли официальное обучение по продуктам Dr.Web
</p>
</div>
<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>
<h3 className="text-xl font-bold mb-4">Техническая поддержка</h3>
<p className="text-gray-300">
Полная техническая поддержка внедрения и использования решений
</p>
</div>
</div>
</div>
</section>
{/* Contact Section */}
<section className="section-padding">
@ -840,6 +689,13 @@ export default function DrWeb() {
</div>
</section>
{/* License Calculator Section */}
<section className="section-padding bg-gray-900/50">
<div className="max-w-4xl mx-auto px-4">
<LicenseCalculator />
</div>
</section>
{/* Footer */}
<footer className="bg-black py-12">
<div className="max-w-7xl mx-auto px-4 text-center">

1693
src/app/globals.css
View File

@ -6,6 +6,32 @@
--accent: #00ff88;
--gray: #333333;
--light-gray: #666666;
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
--card-bg: rgba(255, 255, 255, 0.03);
--text-primary: #ffffff;
--text-secondary: #d1d5db;
--text-muted: #9ca3af;
}
.light {
--background: #ffffff;
--foreground: #1a1a1a;
--accent: #0066cc;
--accent-secondary: #00a8ff;
--accent-tertiary: #667eea;
--gray: #f8fafc;
--light-gray: #e2e8f0;
--glass-bg: rgba(255, 255, 255, 0.85);
--glass-border: rgba(59, 130, 246, 0.1);
--card-bg: rgba(248, 250, 252, 0.8);
--text-primary: #1a202c;
--text-secondary: #4a5568;
--text-muted: #718096;
--shadow-color: rgba(59, 130, 246, 0.1);
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-secondary: linear-gradient(135deg, #00a8ff 0%, #0078ff 100%);
--gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
@theme inline {
@ -23,7 +49,8 @@ body {
color: var(--foreground);
font-family: var(--font-sans), Arial, Helvetica, sans-serif;
line-height: 1.6;
overflow-x: hidden; /* Предотвращаем горизонтальную прокрутку */
overflow-x: hidden;
transition: background-color 0.3s ease, color 0.3s ease;
}
* {
@ -37,21 +64,169 @@ body {
background-clip: text;
}
.light .gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.3));
}
.glass-effect {
background: rgba(255, 255, 255, 0.05);
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--glass-border);
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.light .glass-effect {
backdrop-filter: blur(10px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Унифицированные эффекты свечения */
.hover-glow {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-glow:hover {
box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
transition: all 0.3s ease;
box-shadow:
0 0 20px rgba(0, 255, 136, 0.3),
0 0 40px rgba(0, 255, 136, 0.1),
0 4px 20px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.light .hover-glow:hover {
box-shadow:
0 0 20px rgba(0, 204, 106, 0.3),
0 0 40px rgba(0, 204, 106, 0.1),
0 4px 20px rgba(0, 0, 0, 0.1);
}
/* Специализированные эффекты свечения для разных элементов */
.glow-green {
box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
}
.glow-blue {
box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}
.glow-purple {
box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}
.glow-red {
box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}
.glow-orange {
box-shadow: 0 0 15px rgba(249, 115, 22, 0.4);
}
/* Анимированное свечение */
.pulse-glow {
animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}
50% {
box-shadow: 0 0 25px rgba(0, 255, 136, 0.6);
}
}
.section-padding {
padding: 80px 0;
}
/* Улучшенная кнопка переключения темы */
.theme-toggle {
position: relative;
width: 60px;
height: 30px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 15px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px;
overflow: hidden;
}
.theme-toggle:hover {
background: var(--glass-bg);
border-color: var(--accent);
box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
transform: scale(1.05);
}
.light .theme-toggle:hover {
box-shadow:
0 0 20px rgba(102, 126, 234, 0.4),
0 0 40px rgba(118, 75, 162, 0.2);
border-color: rgba(102, 126, 234, 0.5);
}
.theme-toggle::before {
content: '';
position: absolute;
width: 22px;
height: 22px;
background: linear-gradient(135deg, var(--accent), #00cc6a);
border-radius: 50%;
top: 3px;
left: 4px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
0 0 10px var(--accent);
z-index: 2;
}
.light .theme-toggle::before {
background: linear-gradient(135deg, #f59e0b, #f97316);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.2),
0 0 15px rgba(249, 115, 22, 0.6),
0 0 30px rgba(245, 158, 11, 0.3);
}
.theme-toggle.light::before {
transform: translateX(26px);
}
.theme-toggle-icon {
font-size: 14px;
color: var(--text-muted);
z-index: 1;
transition: all 0.3s ease;
opacity: 0.7;
}
.light .theme-toggle-icon {
color: #6b7280;
}
/* Анимация иконок будет управляться через JavaScript в компоненте */
.theme-toggle:active {
transform: scale(0.98);
}
/* Плавные переходы для всех элементов при смене темы */
* {
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.3s;
}
/* Анимации для интерактивных элементов */
@keyframes float {
0%, 100% {
@ -96,6 +271,13 @@ body {
0 0 30px rgba(0, 255, 136, 0.2);
}
.light .holographic-text {
text-shadow:
0 0 10px rgba(0, 204, 106, 0.5),
0 0 20px rgba(0, 204, 106, 0.3),
0 0 30px rgba(0, 204, 106, 0.2);
}
.holographic-text::before {
content: attr(data-text);
position: absolute;
@ -108,6 +290,10 @@ body {
z-index: -1;
}
.light .holographic-text::before {
background: linear-gradient(45deg, transparent, rgba(0, 204, 106, 0.1), transparent);
}
@keyframes hologram-scan {
0% {
transform: translateX(-100%);
@ -154,6 +340,19 @@ body {
}
}
.light .counter-active {
animation: counter-glow-light 2s ease-in-out infinite;
}
@keyframes counter-glow-light {
0%, 100% {
box-shadow: 0 0 5px rgba(0, 204, 106, 0.3);
}
50% {
box-shadow: 0 0 20px rgba(0, 204, 106, 0.6);
}
}
.counter-active {
animation: counter-glow 2s ease-in-out infinite;
}
@ -517,4 +716,1486 @@ body {
.hover-lift:hover {
transform: none;
}
}
}
/* Выпадающее меню продуктов */
.dropdown-menu {
animation: dropdown-fade-in 0.2s ease-out;
z-index: 1000;
background: rgba(17, 24, 39, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(75, 85, 99, 0.3);
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.5),
0 0 20px rgba(0, 255, 136, 0.1);
}
.dropdown-menu .hover\:bg-gray-700\/30:hover {
background-color: rgba(55, 65, 81, 0.5) !important;
}
@keyframes dropdown-fade-in {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* === УНИКАЛЬНЫЙ ДИЗАЙН ДЛЯ СВЕТЛОЙ ТЕМЫ === */
/* Основной фон с красивым градиентом */
.light body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-attachment: fixed;
}
.light .min-h-screen {
background: linear-gradient(135deg,
rgba(102, 126, 234, 0.1) 0%,
rgba(118, 75, 162, 0.1) 25%,
rgba(255, 255, 255, 0.9) 50%,
rgba(240, 249, 255, 0.9) 75%,
rgba(248, 250, 252, 1) 100%
) !important;
}
/* Уникальный стеклянный эффект */
.light .glass-effect {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.9) 0%,
rgba(248, 250, 252, 0.8) 100%
);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(59, 130, 246, 0.2);
box-shadow:
0 8px 32px rgba(59, 130, 246, 0.1),
0 4px 16px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* Уникальные hover эффекты */
.light .hover-glow:hover {
box-shadow:
0 0 30px rgba(102, 126, 234, 0.3),
0 0 60px rgba(118, 75, 162, 0.2),
0 8px 32px rgba(59, 130, 246, 0.15);
transform: translateY(-4px);
border-color: rgba(102, 126, 234, 0.4);
}
/* Стили для карточек в светлой теме */
.light .card-bg {
background: rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.08);
}
/* Переходы для текста */
.light h1, .light h2, .light h3, .light h4, .light h5, .light h6 {
color: var(--text-primary);
}
.light p, .light span {
color: var(--text-secondary);
}
.light .text-gray-300 {
color: var(--text-secondary) !important;
}
.light .text-gray-400 {
color: var(--text-muted) !important;
}
.light .text-gray-500 {
color: var(--text-muted) !important;
}
/* Уникальная навигация для светлой темы */
.light nav {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(248, 250, 252, 0.9) 100%
);
backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(102, 126, 234, 0.2);
box-shadow:
0 4px 16px rgba(102, 126, 234, 0.1),
0 2px 8px rgba(0, 0, 0, 0.05);
}
/* Стили для кнопок в светлой теме */
.light .bg-blue-500 {
background-color: #3b82f6;
}
.light .bg-blue-600 {
background-color: #2563eb;
}
.light .bg-purple-500 {
background-color: #8b5cf6;
}
.light .bg-purple-600 {
background-color: #7c3aed;
}
.light .bg-gray-900 {
background-color: #f9fafb;
}
.light .bg-gray-800 {
background-color: #f3f4f6;
}
.light .bg-gray-700 {
background-color: #e5e7eb;
}
/* Стили для секций в светлой теме */
.light .section-bg-dark {
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
}
.light .section-bg-gradient {
background: linear-gradient(135deg, #ffffff 0%, #f9fafb 50%, #f3f4f6 100%);
}
/* === СТИЛИ ТЕКСТА ДЛЯ СВЕТЛОЙ ТЕМЫ === */
/* Цвета текста в навигации */
.light nav .text-gray-300 {
color: var(--text-secondary) !important;
font-weight: 500;
}
.light nav .text-gray-300:hover,
.light nav .hover\:text-white:hover {
color: var(--text-primary) !important;
text-shadow: 0 1px 2px rgba(102, 126, 234, 0.2);
}
/* Уникальное выпадающее меню */
.light .dropdown-menu {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(248, 250, 252, 0.95) 100%
);
border: 1px solid rgba(102, 126, 234, 0.2);
box-shadow:
0 20px 40px rgba(102, 126, 234, 0.15),
0 10px 20px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px) saturate(180%);
}
.light .dropdown-menu .text-gray-400 {
color: var(--text-muted) !important;
font-weight: 500;
}
.light .dropdown-menu .text-gray-300 {
color: var(--text-secondary) !important;
font-weight: 500;
}
.light .dropdown-menu .hover\:text-white:hover {
color: var(--text-primary) !important;
text-shadow: 0 1px 2px rgba(102, 126, 234, 0.2);
}
.light .dropdown-menu .hover\:bg-gray-700\/30:hover {
background: linear-gradient(135deg,
rgba(102, 126, 234, 0.1) 0%,
rgba(118, 75, 162, 0.08) 100%
) !important;
border-radius: 8px;
}
.light .dropdown-menu .border-gray-600\/20 {
border-color: rgba(102, 126, 234, 0.15) !important;
}
/* Исправление мобильного меню */
.light .md\:hidden .glass-effect {
background: rgba(255, 255, 255, 0.95);
}
.light .md\:hidden .text-gray-300 {
color: #4b5563 !important;
}
.light .md\:hidden .text-gray-400 {
color: #6b7280 !important;
}
.light .md\:hidden .hover\:bg-gray-700\/30:hover {
background-color: rgba(0, 0, 0, 0.05) !important;
}
/* Исправление счетчиков и карточек */
.light .text-gray-400 {
color: #6b7280 !important;
}
.light .bg-gray-700 {
background-color: #d1d5db !important;
}
/* Исправление границ */
.light .border-gray-600\/20 {
border-color: rgba(0, 0, 0, 0.1) !important;
}
/* Исправление кнопок и интерактивных элементов */
.light button,
.light .hover\:text-white:hover {
color: inherit;
}
.light button.text-gray-300 {
color: #4b5563 !important;
}
/* === УНИКАЛЬНЫЕ ХОЛОГРАФИЧЕСКИЕ ЭФФЕКТЫ === */
.light .holographic-text {
text-shadow:
0 0 20px rgba(102, 126, 234, 0.4),
0 0 40px rgba(118, 75, 162, 0.3),
0 0 60px rgba(240, 147, 251, 0.2);
filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.2));
}
.light .holographic-text::before {
background: linear-gradient(135deg,
rgba(102, 126, 234, 0.1) 0%,
rgba(118, 75, 162, 0.1) 50%,
rgba(240, 147, 251, 0.1) 100%
);
}
/* Исправление loading эффектов */
.light .bg-gradient-to-br {
background: linear-gradient(135deg, #ffffff 0%, #f9fafb 50%, #f3f4f6 100%) !important;
}
.light .from-black,
.light .via-gray-900,
.light .to-black {
--tw-gradient-from: #ffffff !important;
--tw-gradient-to: #f3f4f6 !important;
--tw-gradient-via: #f9fafb !important;
}
/* === УНИКАЛЬНЫЕ ГРАДИЕНТЫ И ЭФФЕКТЫ === */
.light .from-transparent {
--tw-gradient-from: rgba(255, 255, 255, 0.1) !important;
}
.light .to-gray-900\/30 {
--tw-gradient-to: rgba(102, 126, 234, 0.1) !important;
}
.light .bg-gradient-to-b {
background: linear-gradient(to bottom,
rgba(255, 255, 255, 0.1) 0%,
rgba(102, 126, 234, 0.05) 50%,
rgba(118, 75, 162, 0.1) 100%
) !important;
}
/* Акцентные цвета для светлой темы */
.light .border-green-400 {
border-color: var(--accent) !important;
}
.light .text-green-400 {
color: var(--accent) !important;
}
.light .bg-green-400 {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%) !important;
}
/* === УНИВЕРСАЛЬНЫЕ ЦВЕТА ТЕКСТА === */
.light .text-gray-300 {
color: var(--text-secondary) !important;
}
.light .text-gray-400 {
color: var(--text-muted) !important;
}
.light .text-white {
color: var(--text-primary) !important;
}
/* === УНИКАЛЬНЫЕ ЧАСТИЦЫ И ИНТЕРАКТИВНЫЕ ЭЛЕМЕНТЫ === */
.light .bg-green-400 {
background: radial-gradient(circle, var(--accent) 0%, var(--accent-secondary) 100%) !important;
box-shadow: 0 0 20px rgba(102, 126, 234, 0.4) !important;
}
/* === УНИКАЛЬНЫЕ КНОПКИ ДЛЯ СВЕТЛОЙ ТЕМЫ === */
/* Основные градиентные кнопки */
.light .from-green-500 {
--tw-gradient-from: #667eea !important;
}
.light .to-emerald-500 {
--tw-gradient-to: #764ba2 !important;
}
.light .from-blue-500 {
--tw-gradient-from: #00a8ff !important;
}
.light .to-indigo-500 {
--tw-gradient-to: #0078ff !important;
}
.light .from-purple-500 {
--tw-gradient-from: #f093fb !important;
}
.light .to-pink-500 {
--tw-gradient-to: #f5576c !important;
}
/* Уникальные стили для кнопок */
.light button {
box-shadow:
0 4px 16px rgba(102, 126, 234, 0.2),
0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.light button:hover {
transform: translateY(-2px);
box-shadow:
0 8px 32px rgba(102, 126, 234, 0.3),
0 4px 16px rgba(0, 0, 0, 0.15);
}
/* === УНИКАЛЬНЫЕ ПОЛОСЫ ПРОГРЕССА === */
.light .from-green-400 {
--tw-gradient-from: #667eea !important;
}
.light .to-blue-400 {
--tw-gradient-to: #00a8ff !important;
}
.light .from-purple-400 {
--tw-gradient-from: #f093fb !important;
}
.light .to-pink-400 {
--tw-gradient-to: #f5576c !important;
}
.light .from-cyan-400 {
--tw-gradient-from: #00a8ff !important;
}
.light .to-teal-400 {
--tw-gradient-to: #667eea !important;
}
.light .from-amber-400 {
--tw-gradient-from: #f093fb !important;
}
.light .to-orange-400 {
--tw-gradient-to: #f5576c !important;
}
.light .to-orange-400 {
--tw-gradient-to: #f5576c !important;
}
/* === ФИНАЛЬНЫЕ УНИКАЛЬНЫЕ СТИЛИ ДЛЯ СВЕТЛОЙ ТЕМЫ === */
/* Уникальные карточки */
.light .card-bg {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.9) 0%,
rgba(248, 250, 252, 0.8) 100%
) !important;
border: 1px solid rgba(102, 126, 234, 0.15) !important;
box-shadow:
0 8px 32px rgba(102, 126, 234, 0.1),
0 4px 16px rgba(0, 0, 0, 0.05) !important;
}
/* Уникальные секции */
.light .section-bg-dark {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(248, 250, 252, 0.9) 50%,
rgba(240, 249, 255, 0.85) 100%
) !important;
}
.light .section-bg-gradient {
background: linear-gradient(135deg,
rgba(102, 126, 234, 0.05) 0%,
rgba(255, 255, 255, 0.9) 25%,
rgba(248, 250, 252, 0.9) 75%,
rgba(118, 75, 162, 0.05) 100%
) !important;
}
/* Уникальные границы */
.light .border-gray-600\/20 {
border-color: rgba(102, 126, 234, 0.2) !important;
}
.light .bg-gray-700 {
background: linear-gradient(135deg,
rgba(102, 126, 234, 0.2) 0%,
rgba(118, 75, 162, 0.15) 100%
) !important;
}
/* Мобильное меню */
.light .md\:hidden .glass-effect {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(248, 250, 252, 0.95) 100%
) !important;
border: 1px solid rgba(102, 126, 234, 0.2) !important;
box-shadow:
0 8px 32px rgba(102, 126, 234, 0.15),
0 4px 16px rgba(0, 0, 0, 0.1) !important;
}
.light .md\:hidden .text-gray-300 {
color: var(--text-secondary) !important;
}
.light .md\:hidden .text-gray-400 {
color: var(--text-muted) !important;
}
.light .md\:hidden .hover\:bg-gray-700\/30:hover {
background: linear-gradient(135deg,
rgba(102, 126, 234, 0.1) 0%,
rgba(118, 75, 162, 0.08) 100%
) !important;
}
/* Уникальные анимации для светлой темы */
.light .animate-pulse {
animation: light-pulse 2s ease-in-out infinite;
}
@keyframes light-pulse {
0%, 100% {
opacity: 1;
filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.3));
}
50% {
opacity: 0.8;
filter: drop-shadow(0 0 20px rgba(118, 75, 162, 0.4));
}
}
/* Уникальные эффекты загрузки */
.light .border-4.border-green-400 {
border-color: var(--accent) !important;
filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.4));
}
.light .border-t-transparent {
border-top-color: transparent !important;
}
/* Улучшенные тени для всех элементов */
.light * {
--tw-shadow-color: rgba(102, 126, 234, 0.1);
}
/* Финальные штрихи */
.light .bg-gradient-to-br {
background: linear-gradient(135deg,
rgba(102, 126, 234, 0.1) 0%,
rgba(255, 255, 255, 0.95) 25%,
rgba(248, 250, 252, 0.9) 75%,
rgba(118, 75, 162, 0.1) 100%
) !important;
}
.light .bg-gradient-to-br {
background: linear-gradient(135deg,
rgba(102, 126, 234, 0.1) 0%,
rgba(255, 255, 255, 0.95) 25%,
rgba(248, 250, 252, 0.9) 75%,
rgba(118, 75, 162, 0.1) 100%
) !important;
}
/* === СПЕЦИАЛЬНЫЕ СТИЛИ ДЛЯ VPN-СТРАНИЦЫ === */
/* Фон Hero секции */
.light .from-blue-900 {
--tw-gradient-from: rgba(102, 126, 234, 0.1) !important;
}
.light .via-black {
--tw-gradient-via: rgba(255, 255, 255, 0.9) !important;
}
.light .to-purple-900 {
--tw-gradient-to: rgba(118, 75, 162, 0.1) !important;
}
/* Фон секций */
.light .bg-gray-900\/50 {
background: linear-gradient(135deg,
rgba(248, 250, 252, 0.95) 0%,
rgba(240, 249, 255, 0.9) 100%
) !important;
}
.light .bg-gray-800\/50 {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.9) 0%,
rgba(248, 250, 252, 0.8) 100%
) !important;
border: 1px solid rgba(102, 126, 234, 0.1) !important;
}
.light .bg-gray-800\/30 {
background: linear-gradient(135deg,
rgba(102, 126, 234, 0.05) 0%,
rgba(255, 255, 255, 0.8) 100%
) !important;
}
.light .bg-gray-800\/70 {
background: linear-gradient(135deg,
rgba(102, 126, 234, 0.1) 0%,
rgba(248, 250, 252, 0.9) 100%
) !important;
}
/* Карточки уведомлений */
.light .bg-blue-900\/20 {
background: linear-gradient(135deg,
rgba(59, 130, 246, 0.1) 0%,
rgba(147, 197, 253, 0.05) 100%
) !important;
}
.light .bg-green-900\/20 {
background: linear-gradient(135deg,
rgba(34, 197, 94, 0.1) 0%,
rgba(134, 239, 172, 0.05) 100%
) !important;
}
.light .bg-purple-900\/20 {
background: linear-gradient(135deg,
rgba(147, 51, 234, 0.1) 0%,
rgba(196, 181, 253, 0.05) 100%
) !important;
}
/* Границы карточек */
.light .border-blue-500\/30 {
border-color: rgba(59, 130, 246, 0.3) !important;
}
.light .border-green-500\/30 {
border-color: rgba(34, 197, 94, 0.3) !important;
}
.light .border-purple-500\/30 {
border-color: rgba(147, 51, 234, 0.3) !important;
}
.light .border-yellow-500\/30 {
border-color: rgba(234, 179, 8, 0.3) !important;
}
/* Цвета акцентов */
.light .text-blue-400 {
color: #2563eb !important;
}
.light .text-green-400 {
color: #16a34a !important;
}
.light .text-purple-400 {
color: #9333ea !important;
}
.light .text-yellow-400 {
color: #ca8a04 !important;
}
.light .text-red-400 {
color: #dc2626 !important;
}
.light .text-cyan-400 {
color: #0891b2 !important;
}
/* Цвета для полос прогресса */
.light .bg-purple-400 {
background: linear-gradient(135deg, #9333ea 0%, #a855f7 100%) !important;
}
.light .bg-blue-400 {
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
}
.light .bg-green-400 {
background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
}
.light .bg-yellow-400 {
background: linear-gradient(135deg, #ca8a04 0%, #eab308 100%) !important;
}
.light .bg-red-500 {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
}
.light .bg-yellow-500 {
background: linear-gradient(135deg, #ca8a04 0%, #eab308 100%) !important;
}
.light .bg-green-500 {
background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
}
/* Градиенты для кнопок */
.light .from-blue-600 {
--tw-gradient-from: #2563eb !important;
}
.light .to-purple-600 {
--tw-gradient-to: #9333ea !important;
}
.light .hover\:from-blue-700:hover {
--tw-gradient-from: #1d4ed8 !important;
}
.light .hover\:to-purple-700:hover {
--tw-gradient-to: #7c3aed !important;
}
/* Модальное окно */
.light .bg-gray-900 {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(248, 250, 252, 0.95) 100%
) !important;
border: 1px solid rgba(102, 126, 234, 0.2) !important;
box-shadow:
0 20px 40px rgba(102, 126, 234, 0.2),
0 10px 20px rgba(0, 0, 0, 0.1) !important;
}
.light .bg-gray-800 {
background: rgba(248, 250, 252, 0.9) !important;
border-color: rgba(102, 126, 234, 0.2) !important;
}
.light .border-gray-600 {
border-color: rgba(102, 126, 234, 0.2) !important;
}
.light .focus\:border-blue-500:focus {
border-color: var(--accent) !important;
}
.light .bg-gray-600 {
background: linear-gradient(135deg,
rgba(102, 126, 234, 0.1) 0%,
rgba(156, 163, 175, 0.3) 100%
) !important;
}
.light .hover\:bg-gray-700:hover {
background: linear-gradient(135deg,
rgba(102, 126, 234, 0.2) 0%,
rgba(107, 114, 128, 0.4) 100%
) !important;
}
.light .bg-blue-500 {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%) !important;
}
.light .hover\:bg-blue-600:hover {
background: linear-gradient(135deg, #1d4ed8 0%, #0078ff 100%) !important;
}
/* Footer */
.light .bg-black {
background: linear-gradient(135deg,
rgba(102, 126, 234, 0.1) 0%,
rgba(30, 41, 59, 0.9) 100%
) !important;
}
/* Исправление размытых фонов */
.light .blur-3xl {
filter: blur(60px) !important;
opacity: 0.1 !important;
}
/* Специальные анимации для светлой темы */
.light .animate-ux-pulse {
animation: light-ux-pulse 2s ease-in-out infinite !important;
}
@keyframes light-ux-pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.3));
}
50% {
opacity: 0.9;
transform: scale(1.05);
filter: drop-shadow(0 0 20px rgba(118, 75, 162, 0.4));
}
}
.light .animate-ux-glow {
animation: light-ux-glow 3s ease-in-out infinite !important;
}
@keyframes light-ux-glow {
0%, 100% {
box-shadow: 0 0 20px rgba(102, 126, 234, 0.2);
}
50% {
box-shadow: 0 0 30px rgba(118, 75, 162, 0.3);
}
}
/* === ДОПОЛНИТЕЛЬНЫЕ ИСПРАВЛЕНИЯ ДЛЯ VPN-СТРАНИЦЫ === */
/* Исправление градиентных фонов для секций */
.light .from-blue-900\/20 {
--tw-gradient-from: rgba(59, 130, 246, 0.1) !important;
}
.light .to-purple-900\/20 {
--tw-gradient-to: rgba(147, 51, 234, 0.1) !important;
}
/* Исправление модального окна */
.light .bg-black.bg-opacity-5 {
background-color: rgba(102, 126, 234, 0.1) !important;
}
/* Исправление цветов текста */
.light .text-gray-500 {
color: var(--text-muted) !important;
}
.light .text-gray-200 {
color: var(--text-secondary) !important;
}
/* Исправление hover эффектов */
.light .hover\:text-gray-200:hover {
color: var(--text-primary) !important;
}
/* Исправление серверных точек на карте */
.light .animate-server-ping {
animation: light-server-ping 2s ease-in-out infinite !important;
}
@keyframes light-server-ping {
0%, 100% {
transform: scale(1);
opacity: 0.8;
filter: drop-shadow(0 0 8px rgba(102, 126, 234, 0.4));
}
50% {
transform: scale(1.3);
opacity: 1;
filter: drop-shadow(0 0 15px rgba(118, 75, 162, 0.6));
}
}
/* Исправление уведомлений */
.light .animate-slide-in-ux {
animation: light-slide-in-ux 0.5s ease-out !important;
}
@keyframes light-slide-in-ux {
from {
transform: translateX(20px);
opacity: 0;
filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.2));
}
to {
transform: translateX(0);
opacity: 1;
filter: drop-shadow(0 0 20px rgba(118, 75, 162, 0.3));
}
}
/* Исправление анимации метрик */
.light .animate-metric-count {
animation: light-metric-count 0.6s ease-out !important;
}
@keyframes light-metric-count {
from {
transform: translateY(10px);
opacity: 0;
filter: drop-shadow(0 0 5px rgba(102, 126, 234, 0.2));
}
to {
transform: translateY(0);
opacity: 1;
filter: drop-shadow(0 0 10px rgba(118, 75, 162, 0.3));
}
}
/* Исправление теней для кнопок */
.light .hover\:shadow-lg:hover {
box-shadow:
0 10px 25px rgba(102, 126, 234, 0.2),
0 5px 10px rgba(0, 0, 0, 0.1) !important;
}
.light .hover\:shadow-blue-500\/25:hover {
box-shadow:
0 10px 25px rgba(59, 130, 246, 0.25),
0 5px 10px rgba(102, 126, 234, 0.1) !important;
}
/* Исправление активных состояний */
.light .active\:scale-95:active {
transform: scale(0.95) !important;
filter: drop-shadow(0 0 15px rgba(102, 126, 234, 0.4));
}
/* Исправление полос прогресса в статистике */
.light .from-green-500 {
--tw-gradient-from: #16a34a !important;
}
.light .to-green-400 {
--tw-gradient-to: #22c55e !important;
}
.light .from-blue-500 {
--tw-gradient-from: #2563eb !important;
}
.light .to-blue-400 {
--tw-gradient-to: #3b82f6 !important;
}
.light .from-purple-500 {
--tw-gradient-from: #9333ea !important;
}
.light .to-purple-400 {
--tw-gradient-to: #a855f7 !important;
}
.light .from-yellow-500 {
--tw-gradient-from: #ca8a04 !important;
}
.light .to-yellow-400 {
--tw-gradient-to: #eab308 !important;
}
/* Исправление цветов границ */
.light .border-l-4 {
border-left-width: 4px !important;
}
.light .border-blue-500 {
border-color: #2563eb !important;
}
.light .border-green-500 {
border-color: #16a34a !important;
}
.light .border-purple-500 {
border-color: #9333ea !important;
}
/* Исправление opacity фонов */
.light .opacity-30 {
opacity: 0.15 !important;
}
.light .opacity-20 {
opacity: 0.1 !important;
}
/* Исправление цветов для статистики */
.light .text-2xl.font-bold.text-green-400 {
color: #16a34a !important;
}
.light .text-2xl.font-bold.text-blue-400 {
color: #2563eb !important;
}
.light .text-2xl.font-bold.text-purple-400 {
color: #9333ea !important;
}
.light .text-2xl.font-bold.text-yellow-400 {
color: #ca8a04 !important;
}
/* Исправление размытых элементов */
.light .w-96.h-96.bg-blue-500 {
background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%) !important;
}
.light .w-96.h-96.bg-purple-500 {
background: radial-gradient(circle, rgba(147, 51, 234, 0.1) 0%, rgba(147, 51, 234, 0.05) 100%) !important;
}
/* === ИСПРАВЛЕНИЯ ДЛЯ ТЕХНИЧЕСКИХ ХАРАКТЕРИСТИК === */
/* Улучшение видимости белого текста */
.light .text-white {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
.light .font-semibold {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
/* Исправление для элементов с белым текстом в характеристиках */
.light .flex.justify-between.items-center .text-white {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
.light .flex.justify-between.items-center .font-semibold {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
/* Улучшение контрастности для всех элементов в карточках */
.light .glass-effect .text-white {
color: var(--text-primary) !important;
font-weight: 600 !important;
text-shadow: none !important;
}
.light .glass-effect .font-semibold {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
/* Специальные исправления для технических характеристик */
.light .border-blue-500\/30 .text-white,
.light .border-green-500\/30 .text-white,
.light .border-purple-500\/30 .text-white,
.light .border-yellow-500\/30 .text-white {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
.light .border-blue-500\/30 .font-semibold,
.light .border-green-500\/30 .font-semibold,
.light .border-purple-500\/30 .font-semibold,
.light .border-yellow-500\/30 .font-semibold {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
/* Исправление для всех span элементов с белым текстом */
.light span.text-white {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
.light span.font-semibold {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
/* Улучшение видимости текста в карточках статистики */
.light .text-center.p-4 .text-sm {
color: var(--text-secondary) !important;
font-weight: 500 !important;
}
.light .text-center.p-4 .font-bold {
color: var(--text-primary) !important;
font-weight: 700 !important;
}
/* Исправление для всех заголовков */
.light h3.text-2xl.font-bold {
color: var(--text-primary) !important;
font-weight: 700 !important;
}
.light h3.text-xl.font-bold {
color: var(--text-primary) !important;
font-weight: 700 !important;
}
/* Исправление для элементов с зеленой галочкой */
.light .text-green-400.font-semibold {
color: #16a34a !important;
font-weight: 600 !important;
}
/* Дополнительные исправления для лучшей читаемости */
.light .space-y-4 .text-white,
.light .space-y-6 .text-white {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
.light .space-y-4 .font-semibold,
.light .space-y-6 .font-semibold {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
/* Исправление для всех div с белым текстом */
.light div.text-white {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
.light div.font-semibold {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
/* Улучшение контрастности для важных элементов */
.light .text-white.font-semibold {
color: var(--text-primary) !important;
font-weight: 700 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}
/* === ДОПОЛНИТЕЛЬНЫЕ ИСПРАВЛЕНИЯ ЧИТАЕМОСТИ === */
/* Исправление для всех элементов с классом text-white */
.light *:where(.text-white) {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
/* Исправление для всех элементов с классом font-semibold */
.light *:where(.font-semibold) {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
/* Глобальное исправление для всех белых текстов */
.light [class*="text-white"] {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
.light [class*="font-semibold"] {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
/* Исправление для конкретных селекторов */
.light .justify-between .text-white,
.light .items-center .text-white {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
.light .justify-between .font-semibold,
.light .items-center .font-semibold {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
/* Исправление для элементов внутри карточек */
.light .glass-effect * {
color: inherit !important;
}
.light .glass-effect .text-white {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
.light .glass-effect .font-semibold {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
/* Исправление для элементов с границами */
.light .border-blue-500\/30 *,
.light .border-green-500\/30 *,
.light .border-purple-500\/30 *,
.light .border-yellow-500\/30 * {
color: inherit !important;
}
.light .border-blue-500\/30 .text-white,
.light .border-green-500\/30 .text-white,
.light .border-purple-500\/30 .text-white,
.light .border-yellow-500\/30 .text-white {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
/* Принудительное исправление для всех проблемных элементов */
.light .text-white,
.light .font-semibold,
.light span.text-white,
.light div.text-white,
.light span.font-semibold,
.light div.font-semibold {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
/* Исправление для элементов статистики */
.light .text-2xl.font-bold {
color: var(--text-primary) !important;
font-weight: 700 !important;
}
.light .text-xl.font-bold {
color: var(--text-primary) !important;
font-weight: 700 !important;
}
/* Исправление для всех важных селекторов */
.light .space-y-4 > * .text-white,
.light .space-y-6 > * .text-white {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
.light .space-y-4 > * .font-semibold,
.light .space-y-6 > * .font-semibold {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
/* === ОСВЕТЛЕНИЕ ФОНА КАРТОЧЕК === */
/* Значительно осветляем фон всех карточек */
.light .glass-effect {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(248, 250, 252, 0.95) 100%
) !important;
backdrop-filter: blur(10px) saturate(120%) !important;
border: 1px solid rgba(102, 126, 234, 0.15) !important;
box-shadow:
0 4px 16px rgba(102, 126, 234, 0.08),
0 2px 8px rgba(0, 0, 0, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
/* Специально для карточек технических характеристик */
.light .border-blue-500\/30 {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(240, 249, 255, 0.95) 100%
) !important;
border-color: rgba(59, 130, 246, 0.25) !important;
}
.light .border-green-500\/30 {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(240, 253, 244, 0.95) 100%
) !important;
border-color: rgba(34, 197, 94, 0.25) !important;
}
.light .border-purple-500\/30 {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(250, 245, 255, 0.95) 100%
) !important;
border-color: rgba(147, 51, 234, 0.25) !important;
}
.light .border-yellow-500\/30 {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(254, 252, 232, 0.95) 100%
) !important;
border-color: rgba(234, 179, 8, 0.25) !important;
}
/* Осветляем фон карточек статистики */
.light .bg-gray-800\/50 {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(248, 250, 252, 0.9) 100%
) !important;
border: 1px solid rgba(102, 126, 234, 0.08) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}
/* Осветляем hover состояния */
.light .hover\:bg-gray-800\/70:hover {
background: linear-gradient(135deg,
rgba(248, 250, 252, 0.98) 0%,
rgba(241, 245, 249, 0.95) 100%
) !important;
}
/* Осветляем все карточки с padding */
.light .p-4.bg-gray-800\/50,
.light .p-6.bg-gray-800\/50,
.light .p-8.bg-gray-800\/50 {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(248, 250, 252, 0.95) 100%
) !important;
border: 1px solid rgba(102, 126, 234, 0.08) !important;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
/* Дополнительное осветление для всех карточек */
.light .rounded-lg.glass-effect {
background: rgba(255, 255, 255, 0.98) !important;
border: 1px solid rgba(102, 126, 234, 0.1) !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05),
0 1px 2px rgba(0, 0, 0, 0.1) !important;
}
/* Осветляем конкретные элементы технических характеристик */
.light .space-y-4 > div,
.light .space-y-6 > div {
background: rgba(255, 255, 255, 0.8) !important;
border-radius: 8px !important;
padding: 8px !important;
margin: 4px 0 !important;
}
/* Максимальное осветление для читаемости */
.light .glass-effect.p-8 {
background: rgba(255, 255, 255, 0.99) !important;
border: 1px solid rgba(102, 126, 234, 0.12) !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
/* === ИСПРАВЛЕНИЕ ГРАДИЕНТНОГО ТЕКСТА === */
/* Переопределяем градиентный текст для лучшей видимости */
.light .gradient-text {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) !important;
font-weight: 700 !important;
}
/* Специальное исправление для заголовков h2 с градиентом */
.light h2 .gradient-text {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)) !important;
font-weight: 800 !important;
}
/* Исправление для больших заголовков */
.light h1 .gradient-text {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
font-weight: 900 !important;
}
/* Исправление для span элементов с градиентом */
.light span.gradient-text {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) !important;
font-weight: 700 !important;
}
/* Альтернативный вариант - если градиент все еще плохо виден */
.light .gradient-text-fallback {
color: #3b82f6 !important;
font-weight: 700 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}
/* Исправление для конкретных заголовков */
.light .text-4xl.gradient-text,
.light .text-5xl.gradient-text,
.light .text-6xl.gradient-text {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)) !important;
font-weight: 800 !important;
}
/* Дополнительное исправление для всех элементов с градиентом */
.light [class*="gradient-text"] {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) !important;
font-weight: 700 !important;
}
/* Исправление для заголовков с классом font-bold */
.light .font-bold.gradient-text {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)) !important;
font-weight: 800 !important;
}
/* === УЛУЧШЕНИЕ РАЗДЕЛЕНИЯ КАРТОЧЕК === */
/* Четкие границы для карточек возможностей */
.light .glass-effect.p-8.rounded-lg {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(248, 250, 252, 0.9) 100%
) !important;
border: 2px solid rgba(102, 126, 234, 0.2) !important;
box-shadow:
0 4px 16px rgba(102, 126, 234, 0.12),
0 2px 8px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
margin: 8px !important;
}
/* Hover эффекты для лучшего разделения */
.light .glass-effect.p-8.rounded-lg:hover {
border: 2px solid rgba(102, 126, 234, 0.4) !important;
box-shadow:
0 8px 32px rgba(102, 126, 234, 0.2),
0 4px 16px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
transform: translateY(-2px) !important;
}
/* Специальные стили для карточек в grid */
.light .grid .glass-effect {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(248, 250, 252, 0.95) 100%
) !important;
border: 2px solid rgba(102, 126, 234, 0.15) !important;
box-shadow:
0 2px 8px rgba(102, 126, 234, 0.1),
0 1px 4px rgba(0, 0, 0, 0.05) !important;
margin: 4px !important;
}
/* Улучшенные hover эффекты для grid карточек */
.light .grid .glass-effect:hover {
border: 2px solid rgba(102, 126, 234, 0.3) !important;
box-shadow:
0 6px 24px rgba(102, 126, 234, 0.15),
0 3px 12px rgba(0, 0, 0, 0.08) !important;
transform: translateY(-4px) scale(1.02) !important;
}
/* Дополнительные отступы между карточками */
.light .grid.gap-8 > * {
margin: 8px !important;
}
.light .grid.gap-6 > * {
margin: 6px !important;
}
/* Улучшение для карточек с классом hover-glow */
.light .hover-glow {
border: 2px solid rgba(102, 126, 234, 0.1) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.light .hover-glow:hover {
border: 2px solid rgba(102, 126, 234, 0.4) !important;
box-shadow:
0 8px 32px rgba(102, 126, 234, 0.2),
0 4px 16px rgba(118, 75, 162, 0.15),
0 2px 8px rgba(0, 0, 0, 0.1) !important;
transform: translateY(-4px) !important;
}
/* Специальные стили для карточек с иконками */
.light .glass-effect .text-4xl {
filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.2)) !important;
}
/* Разделение для карточек в разных секциях */
.light .section-padding .glass-effect {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(248, 250, 252, 0.95) 100%
) !important;
border: 2px solid rgba(102, 126, 234, 0.15) !important;
box-shadow:
0 3px 12px rgba(102, 126, 234, 0.1),
0 1px 6px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
/* Улучшение для группы карточек */
.light .group .glass-effect {
border: 2px solid rgba(102, 126, 234, 0.12) !important;
transition: all 0.3s ease !important;
}
.light .group:hover .glass-effect {
border: 2px solid rgba(102, 126, 234, 0.3) !important;
box-shadow:
0 6px 24px rgba(102, 126, 234, 0.15),
0 3px 12px rgba(0, 0, 0, 0.08) !important;
}

20
src/app/layout.tsx
View File

@ -1,16 +1,8 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin", "cyrillic"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin", "cyrillic"],
});
import { ThemeProvider } from "./contexts/ThemeContext";
export const metadata: Metadata = {
title: "GUNDYREV - Инновационные IT-решения и поставка электроники",
@ -25,9 +17,11 @@ export default function RootLayout({
return (
<html lang="ru">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
className={`${GeistSans.variable} ${GeistMono.variable} antialiased`}
>
{children}
<ThemeProvider>
{children}
</ThemeProvider>
</body>
</html>
);

33
src/app/page.tsx
View File

@ -3,6 +3,8 @@
import { useState, useEffect } from 'react';
import Navigation from './components/Navigation';
import InteractiveBlocks from './components/InteractiveBlocks';
import ContactModal from './components/ContactModal';
import Footer from './components/Footer';
export default function Home() {
const [mounted, setMounted] = useState(false);
@ -15,6 +17,7 @@ export default function Home() {
const [currentCodeExample, setCurrentCodeExample] = useState(0);
const [techSphereRotation, setTechSphereRotation] = useState(0);
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
const [isContactModalOpen, setIsContactModalOpen] = useState(false);
// Инициализация
useEffect(() => {
@ -221,6 +224,28 @@ model.compile(optimizer='adam', loss='sparse_categorical_crossentropy')`
</div>
</div>
{/* Призывы к действию */}
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
<button
onClick={() => setIsContactModalOpen(true)}
className="px-8 py-3 bg-gradient-to-r from-green-500 to-emerald-500 text-white font-semibold rounded-lg hover-glow transition-all duration-300 hover:scale-105"
>
🚀 Обсудить проект
</button>
<button
onClick={() => setIsContactModalOpen(true)}
className="px-8 py-3 bg-gradient-to-r from-blue-500 to-indigo-500 text-white font-semibold rounded-lg hover-glow transition-all duration-300 hover:scale-105"
>
💡 Получить консультацию
</button>
<button
onClick={() => setIsContactModalOpen(true)}
className="px-8 py-3 glass-effect text-white font-semibold rounded-lg hover:bg-white/10 transition-all duration-300"
>
📊 Заказать презентацию
</button>
</div>
{/* Интерактивные частицы с реакцией на мышь */}
<div className="absolute inset-0 pointer-events-none">
{[...Array(30)].map((_, i) => {
@ -626,6 +651,14 @@ model.compile(optimizer='adam', loss='sparse_categorical_crossentropy')`
</p>
</div>
</footer>
{/* Contact Modal */}
<ContactModal
isOpen={isContactModalOpen}
onClose={() => setIsContactModalOpen(false)}
defaultType="general"
title="Обсудить проект"
/>
</div>
);
}

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

@ -610,6 +610,173 @@ export default function SecureT() {
</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">🛡️</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">⚡</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">🔧</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">🎯</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">▼</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">▼</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">▼</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">▼</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">▼</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">
@ -866,12 +1033,516 @@ export default function SecureT() {
</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">🏆</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">🛡️</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">🌍</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">📋</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">✅</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">🔐</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">📚</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">⚙️</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">🎥</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">🎓</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">🔧</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">📞</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">✅</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">✅</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">✅</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">✅</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">📋</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">📊</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">📑</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">💰</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>
Дополнительные <span className="gradient-text">материалы</span>
</h2>
</div>
@ -1093,6 +1764,8 @@ export default function SecureT() {
<option value="Интеграция систем">Интеграция систем</option>
<option value="Обучение персонала">Обучение персонала</option>
<option value="Комплексное решение">Комплексное решение</option>
<option value="Консультация по госзакупкам">Консультация по госзакупкам</option>
<option value="Персональное обучение">Персональное обучение</option>
</select>
</div>
@ -1229,7 +1902,23 @@ export default function SecureT() {
<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>

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

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

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

@ -31,8 +31,8 @@ export default function UXSoftware() {
// Живая демонстрация UX улучшений
const [uxDemo, setUxDemo] = useState({
beforeSpeed: 3200,
afterSpeed: 850,
beforeSpeed: 450,
afterSpeed: 12,
improvement: 0,
isAnimating: false
});
@ -49,10 +49,10 @@ export default function UXSoftware() {
// Анимация метрик UX
useEffect(() => {
const targetMetrics = {
loadingSpeed: 2.3,
userSatisfaction: 94.7,
pageViews: 15420,
bounceRate: 18.5
loadingSpeed: 1.2,
userSatisfaction: 98.2,
pageViews: 2847960,
bounceRate: 2.1
};
const duration = 2500;
@ -139,12 +139,14 @@ export default function UXSoftware() {
// Уведомления об улучшениях UX
useEffect(() => {
const uxMessages = [
{ message: 'Скорость загрузки страниц увеличена на 73%', type: 'speed' as const },
{ message: 'Время отклика сервера сокращено до 45ms', type: 'performance' as const },
{ message: 'Пользовательский опыт улучшен на 89%', type: 'ux' as const },
{ message: 'Оптимизированы изображения - экономия 2.1MB', type: 'performance' as const },
{ message: 'Интерактивность страницы повышена на 67%', type: 'ux' as const },
{ message: 'Кэширование ускорило загрузку на 54%', type: 'speed' as const }
{ 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 = () => {
@ -293,44 +295,44 @@ export default function UXSoftware() {
<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>
Профессиональный <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">
Программное обеспечение для повышения качества пользовательского опыта в сети интернет
<p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-4xl mx-auto">
Программное решение для улучшения пользовательского опыта в сети интернет с серверами в 65+ странах
</p>
{/* Живые метрики UX */}
{/* Живые метрики 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 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 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 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 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>
<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-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">После оптимизации</div>
<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>
@ -339,7 +341,7 @@ export default function UXSoftware() {
{uxDemo.improvement > 0 && (
<div className="mt-4 text-center">
<div className="text-blue-400 font-bold text-xl animate-metric-count">
Улучшение на {uxDemo.improvement}%!
Улучшение пинга на {uxDemo.improvement}%!
</div>
</div>
)}
@ -353,82 +355,225 @@ export default function UXSoftware() {
</div>
</section>
{/* Features 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">нашего ПО</span>
Возможности <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>
<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">+73% скорости</div>
<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>
<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">AES-256 шифрование</div>
<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>
<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">50+ стран</div>
<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">Стабильность</h3>
<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">99.9% uptime</div>
<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">Анонимность</h3>
<h3 className="text-xl font-bold mb-4">Строгая No-Log политика</h3>
<p className="text-gray-300">
Сокрытие реального IP-адреса для защиты приватности
Независимый аудит подтверждает: мы не храним логи активности пользователей
</p>
<div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="text-red-400 text-sm font-medium">Zero-log политика</div>
<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>
<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 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>
@ -440,8 +585,11 @@ export default function UXSoftware() {
<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>
Как работает <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">
@ -449,12 +597,12 @@ export default function UXSoftware() {
<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>
<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">⬇️ Скачать за 30 сек</div>
<div className="text-blue-400 text-sm">📱 Windows, macOS, iOS, Android, Linux</div>
</div>
</div>
@ -462,12 +610,12 @@ export default function UXSoftware() {
<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>
<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">⚙️ Настройка за 1 мин</div>
<div className="text-green-400 text-sm">🔑 Автоматический выбор сервера</div>
</div>
</div>
@ -475,12 +623,12 @@ export default function UXSoftware() {
<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>
<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">🚀 Мгновенный эффект</div>
<div className="text-purple-400 text-sm">🔒 Защищенное соединение за 1.2 секунды</div>
</div>
</div>
</div>
@ -488,27 +636,33 @@ export default function UXSoftware() {
{/* Интерактивная схема процесса */}
<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>
<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"></div>
<div className="text-sm text-gray-300">Медленное соединение</div>
<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 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"></div>
<div className="text-sm text-gray-300">Оптимизация</div>
<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 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"></div>
<div className="text-sm text-gray-300">Быстрое соединение</div>
<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>
@ -620,11 +774,11 @@ export default function UXSoftware() {
{/* Живая статистика пользователей */}
<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.1M+</div>
<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.9%</div>
<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>
@ -632,7 +786,7 @@ export default function UXSoftware() {
{/* Кнопка консультации */}
<div className="text-center">
<p className="text-gray-300 text-center mb-6">
Получите консультацию по внедрению решений для улучшения UX
Получите консультацию по выбору оптимального тарифа UX-софта
</p>
<button
onClick={handleConsultationClick}
@ -656,9 +810,9 @@ export default function UXSoftware() {
<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>
@ -674,7 +828,7 @@ export default function UXSoftware() {
© 2024 GUNDYREV. Все права защищены.
</p>
<p className="text-gray-500 text-sm">
Программное обеспечение для улучшения пользовательского опыта
Профессиональное решение для улучшения пользовательского опыта в сети
</p>
</div>
</footer>