Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NAVI SYSTEMS | Премиальная автоэлектроника</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://unpkg.com/aos@next/dist/aos.css" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #ff3b3b; | |
| --primary-dark: #e03535; | |
| --dark: #0f0f0f; | |
| --darker: #0a0a0a; | |
| --light: #ffffff; | |
| --gray: #888888; | |
| --card-bg: rgba(24, 24, 24, 0.7); | |
| --glow: 0 0 12px #ff3b3b, 0 0 24px rgba(255, 59, 59, 0.4); | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--dark); | |
| color: var(--light); | |
| overflow-x: hidden; | |
| scroll-behavior: smooth; | |
| } | |
| .text-glow { | |
| text-shadow: var(--glow); | |
| } | |
| .bg-card { | |
| background: var(--card-bg); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .btn-primary { | |
| background: var(--primary); | |
| color: #000; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-2px); | |
| box-shadow: var(--glow); | |
| } | |
| #preloader { | |
| position: fixed; | |
| inset: 0; | |
| background: var(--dark); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| transition: opacity 0.5s, visibility 0.5s; | |
| } | |
| .logo-pre { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| border: 3px solid transparent; | |
| border-top: 3px solid var(--primary); | |
| animation: spin 1.4s linear infinite, glow 2s ease-in-out infinite alternate; | |
| position: relative; | |
| } | |
| .logo-pre::after { | |
| content: "NS"; | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 1.5rem; | |
| color: var(--light); | |
| font-weight: 800; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes glow { | |
| to { filter: drop-shadow(var(--glow)); } | |
| } | |
| .hero-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(circle at 50% 50%, rgba(255, 59, 59, 0.15) 0%, rgba(15, 15, 15, 0.95) 80%); | |
| z-index: -1; | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -4px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--primary); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .feature-icon { | |
| font-size: 2rem; | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| } | |
| /* Premium cars background */ | |
| .cars-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -2; | |
| overflow: hidden; | |
| } | |
| .car { | |
| position: absolute; | |
| filter: drop-shadow(0 0 10px rgba(255, 59, 59, 0.3)); | |
| opacity: 0.25; | |
| transition: all 1s ease; | |
| z-index: 1; | |
| object-fit: cover; | |
| object-position: center; | |
| border-radius: 8px; | |
| box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); | |
| transform: scale(1); | |
| will-change: transform; | |
| } | |
| .car:hover { | |
| opacity: 0.4; | |
| transform: scale(1.02); | |
| } | |
| .car-1 { | |
| top: 10%; | |
| left: 5%; | |
| width: 380px; | |
| height: 220px; | |
| animation: float 15s ease-in-out infinite; | |
| } | |
| .car-2 { | |
| top: 25%; | |
| right: 5%; | |
| width: 420px; | |
| height: 240px; | |
| animation: float 18s ease-in-out infinite 2s; | |
| } | |
| .car-3 { | |
| bottom: 15%; | |
| left: 10%; | |
| width: 470px; | |
| height: 270px; | |
| animation: float 20s ease-in-out infinite 4s; | |
| } | |
| .car-4 { | |
| bottom: 20%; | |
| right: 8%; | |
| width: 340px; | |
| height: 200px; | |
| animation: float 16s ease-in-out infinite 3s; | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0) rotate(0deg) scale(1); | |
| } | |
| 50% { | |
| transform: translateY(-20px) rotate(2deg) scale(1.02); | |
| } | |
| } | |
| /* Premium styles */ | |
| .premium-border { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .premium-border::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: inherit; | |
| padding: 1px; | |
| background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,59,59,0.5), rgba(255,255,255,0.2)); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| .section-title { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: linear-gradient(90deg, var(--primary), transparent); | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 1024px) { | |
| .car-1, .car-2, .car-3, .car-4 { | |
| opacity: 0.2; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .car-1, .car-2, .car-3, .car-4 { | |
| width: 280px; | |
| height: 160px; | |
| opacity: 0.15; | |
| } | |
| .car-1 { | |
| top: 15%; | |
| left: -10%; | |
| } | |
| .car-2 { | |
| top: 30%; | |
| right: -10%; | |
| } | |
| .car-3 { | |
| bottom: 20%; | |
| left: -5%; | |
| } | |
| .car-4 { | |
| bottom: 25%; | |
| right: -5%; | |
| } | |
| } | |
| /* Floating particles */ | |
| .particles { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| overflow: hidden; | |
| } | |
| .particle { | |
| position: absolute; | |
| background: rgba(255, 255, 255, 0.8); | |
| border-radius: 50%; | |
| animation: float-particle linear infinite; | |
| will-change: transform; | |
| } | |
| @keyframes float-particle { | |
| 0% { | |
| transform: translateY(0) translateX(0); | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 1; | |
| } | |
| 90% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(-100vh) translateX(100px); | |
| opacity: 0; | |
| } | |
| } | |
| /* Hover effects */ | |
| .hover-scale { | |
| transition: transform 0.3s ease; | |
| will-change: transform; | |
| } | |
| .hover-scale:hover { | |
| transform: scale(1.03); | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--dark); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--primary); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--primary-dark); | |
| } | |
| /* Input focus styles */ | |
| input:focus, textarea:focus, select:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 2px rgba(255, 59, 59, 0.3); | |
| } | |
| /* Mobile menu animation */ | |
| #mobile-menu { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| #mobile-menu.active { | |
| max-height: 500px; | |
| transition: max-height 0.5s ease-in; | |
| } | |
| /* Smooth transitions */ | |
| .transition-smooth { | |
| transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1); | |
| } | |
| /* Gradient text */ | |
| .gradient-text { | |
| background: linear-gradient(90deg, #ff3b3b, #ff8a3b); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| /* Pulse animation */ | |
| @keyframes pulse { | |
| 0%, 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Preloader --> | |
| <div id="preloader"> | |
| <div class="logo-pre"></div> | |
| </div> | |
| <!-- Particles Background --> | |
| <div class="particles" id="particles"></div> | |
| <!-- Premium Cars Background --> | |
| <div class="cars-bg"> | |
| <img src="https://www.mercedes-benz.com/content/dam/brandhub/mbsocialcar/mbsocialcar-mercedes-amg-gt-r/Mercedes-Benz-AMG-GT-R-Widescreen.jpg" alt="Mercedes AMG GT" class="car car-1 hover-scale" loading="lazy"> | |
| <img src="https://www.bmw.com/content/dam/bmw/marketBMWCOM/bmw_com/categories/automotive-life/bmw-m-automobiles/bmw-m8-gran-coupe/bmw-m8-gran-coupe-sp-desktop.jpg" alt="BMW M8" class="car car-2 hover-scale" loading="lazy"> | |
| <img src="https://www.audi.com/content/dam/gbp2/experience-audi/models-and-technology/concept-cars/audi-pb18-e-tron/1920x1080/1920x1080-teaser-01.jpg" alt="Audi PB18 e-tron" class="car car-3 hover-scale" loading="lazy"> | |
| <img src="https://www.porsche.com/international/_india_/modelstart/all/911-gt3-rs/911-gt3-rs-modelimage-sideshot/thumbnails/911-gt3-rs-modelimage-sideshot.jpg" alt="Porsche 911 GT3 RS" class="car car-4 hover-scale" loading="lazy"> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-black bg-opacity-90 backdrop-blur-md border-b border-gray-800 transition-smooth"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-20"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-2xl font-bold"> | |
| <span class="text-red-500">NAVI</span> | |
| <span class="text-white">SYSTEMS</span> | |
| </span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-8"> | |
| <a href="#services" class="nav-link text-white hover:text-red-400 px-3 py-2 text-sm font-medium">Услуги</a> | |
| <a href="#advantages" class="nav-link text-white hover:text-red-400 px-3 py-2 text-sm font-medium">Преимущества</a> | |
| <a href="#steps" class="nav-link text-white hover:text-red-400 px-3 py-2 text-sm font-medium">Этапы</a> | |
| <a href="#contact" class="nav-link text-white hover:text-red-400 px-3 py-2 text-sm font-medium">Контакты</a> | |
| <a href="tel:+79181364222" class="ml-4 flex items-center text-red-400 hover:text-red-300 bg-black bg-opacity-50 px-4 py-2 rounded-lg border border-gray-700 hover:border-red-500 transition-all"> | |
| <i class="fas fa-phone-alt mr-2"></i> | |
| +7 918 136-42-22 | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-95 backdrop-blur-lg border-t border-gray-800"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#services" class="block px-3 py-3 text-base font-medium text-white hover:text-red-400 hover:bg-gray-900 rounded-md transition-colors">Услуги</a> | |
| <a href="#advantages" class="block px-3 py-3 text-base font-medium text-white hover:text-red-400 hover:bg-gray-900 rounded-md transition-colors">Преимущества</a> | |
| <a href="#steps" class="block px-3 py-3 text-base font-medium text-white hover:text-red-400 hover:bg-gray-900 rounded-md transition-colors">Этапы</a> | |
| <a href="#contact" class="block px-3 py-3 text-base font-medium text-white hover:text-red-400 hover:bg-gray-900 rounded-md transition-colors">Контакты</a> | |
| <a href="tel:+79181364222" class="block px-3 py-3 text-base font-medium text-red-400 hover:text-red-300 bg-gray-900 rounded-md transition-colors"> | |
| <i class="fas fa-phone-alt mr-2"></i> | |
| +7 918 136-42-22 | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-16"> | |
| <div class="hero-overlay"></div> | |
| <div class="absolute inset-0 z-0"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-black to-transparent opacity-90"></div> | |
| </div> | |
| <div class="relative z-10 px-4 sm:px-6 lg:px-8 py-20 text-center max-w-4xl mx-auto" data-aos="fade-up"> | |
| <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold mb-6"> | |
| <span class="gradient-text">NAVI</span> | |
| <span class="text-white">SYSTEMS</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-2xl mx-auto leading-relaxed"> | |
| Эксклюзивные решения для автомобилей премиум-класса. Технологии будущего уже сегодня. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#services" class="btn-primary px-8 py-4 rounded-lg font-bold text-lg hover-scale animate-pulse"> | |
| <i class="fas fa-tools mr-2"></i> Наши услуги | |
| </a> | |
| <a href="#contact" class="px-8 py-4 rounded-lg font-bold text-lg border-2 border-red-500 text-red-500 hover:bg-red-500 hover:text-black transition-all hover-scale"> | |
| <i class="fas fa-phone-alt mr-2"></i> Консультация | |
| </a> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-0 right-0 flex justify-center z-10"> | |
| <a href="#services" class="text-white animate-bounce"> | |
| <i class="fas fa-chevron-down text-2xl"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gradient-to-b from-black to-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-white section-title"> | |
| <span class="gradient-text">Наши</span> услуги | |
| </h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Эксклюзивные решения для автомобилей премиум-класса | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20 premium-border hover-scale" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-language"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Русификация мультимедиа</h3> | |
| <p class="text-gray-400"> | |
| Полный перевод интерфейса для премиальных моделей, адаптация радиочастот, обновление карт для Европы и СНГ. | |
| </p> | |
| <div class="mt-4"> | |
| <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full bg-red-500 text-black uppercase">Mercedes, BMW, Audi</span> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20 premium-border hover-scale" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-map-marked-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Навигация & карты</h3> | |
| <p class="text-gray-400"> | |
| Установка NAV-блоков премиум класса, актуальные обновления карт, интеграция онлайн-сервисов трафика. | |
| </p> | |
| <div class="mt-4"> | |
| <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full bg-red-500 text-black uppercase">Porsche, Lexus, Land Rover</span> | |
| </div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20 premium-border hover-scale" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-camera"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Камеры 360° / парктроники</h3> | |
| <p class="text-gray-400"> | |
| Системы кругового обзора 5D для премиальных авто, интеллектуальные парктроники с цветовой индикацией. | |
| </p> | |
| <div class="mt-4"> | |
| <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full bg-red-500 text-black uppercase">Все модели</span> | |
| </div> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20 premium-border hover-scale" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-volume-up"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Аудио-апгрейд</h3> | |
| <p class="text-gray-400"> | |
| Профессиональные DSP-процессоры, Hi-Fi акустические системы премиум класса, компактные сабвуферы. | |
| </p> | |
| <div class="mt-4"> | |
| <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full bg-red-500 text-black uppercase">Burmester, B&O, Mark Levinson</span> | |
| </div> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20 premium-border hover-scale" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Диагностика & кодирование</h3> | |
| <p class="text-gray-400"> | |
| Профессиональное оборудование для диагностики и программирования премиальных автомобилей. | |
| </p> | |
| <div class="mt-4"> | |
| <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full bg-red-500 text-black uppercase">Все бренды</span> | |
| </div> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="bg-card rounded-xl p-8 transition-all hover:shadow-lg hover:shadow-red-500/20 premium-border hover-scale" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-microchip"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">ГУ NAVI SYSTEMS</h3> | |
| <p class="text-gray-400"> | |
| Эксклюзивные мультимедийные системы на Android с поддержкой CarPlay, полная интеграция с CAN-шиной. | |
| </p> | |
| <div class="mt-4"> | |
| <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full bg-red-500 text-black uppercase">Эксклюзив</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Advantages Section --> | |
| <section id="advantages" class="py-20 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-white section-title"> | |
| Почему <span class="gradient-text">выбирают нас</span> | |
| </h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Профессионализм, качество и индивидуальный подход к каждому клиенту | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Advantage 1 --> | |
| <div class="bg-card rounded-xl p-8 text-center premium-border hover-scale" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-20 h-20 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-award text-2xl text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">10+ лет опыта</h3> | |
| <p class="text-gray-400"> | |
| С 2013 года мы реализовали более 5,000 успешных проектов по модернизации премиальных автомобилей | |
| </p> | |
| </div> | |
| <!-- Advantage 2 --> | |
| <div class="bg-card rounded-xl p-8 text-center premium-border hover-scale" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-20 h-20 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-shield-alt text-2xl text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Гарантия 24 месяца</h3> | |
| <p class="text-gray-400"> | |
| На все оборудование и работы предоставляется расширенная гарантия сроком на 2 года | |
| </p> | |
| </div> | |
| <!-- Advantage 3 --> | |
| <div class="bg-card rounded-xl p-8 text-center premium-border hover-scale" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="w-20 h-20 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-check-circle text-2xl text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Эксклюзивные решения</h3> | |
| <p class="text-gray-400"> | |
| Мы используем только проверенное оборудование премиум класса, адаптированное для люксовых автомобилей | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-card rounded-xl p-8 premium-border" data-aos="fade-right"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Наши клиенты</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> | |
| <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Mercedes-Logo.svg/2560px-Mercedes-Logo.svg.png" alt="Mercedes" class="h-10 opacity-80 hover:opacity-100 transition-opacity" loading="lazy"> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/BMW.svg/2048px-BMW.svg.png" alt="BMW" class="h-10 opacity-80 hover:opacity-100 transition-opacity" loading="lazy"> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Audi-Logo_2016.svg/1200px-Audi-Logo_2016.svg.png" alt="Audi" class="h-10 opacity-80 hover:opacity-100 transition-opacity" loading="lazy"> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Porsche_logo.svg/1200px-Porsche_logo.svg.png" alt="Porsche" class="h-10 opacity-80 hover:opacity-100 transition-opacity" loading="lazy"> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Lexus_Logo_2020.svg/1200px-Lexus_Logo_2020.svg.png" alt="Lexus" class="h-10 opacity-80 hover:opacity-100 transition-opacity" loading="lazy"> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Land_Rover_logo.svg/1200px-Land_Rover_logo.svg.png" alt="Land Rover" class="h-10 opacity-80 hover:opacity-100 transition-opacity" loading="lazy"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-card rounded-xl p-8 premium-border" data-aos="fade-left"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Наши партнеры</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> | |
| <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Alpine_Logo.svg/1200px-Alpine_Logo.svg.png" alt="Alpine" class="h-10 opacity-80 hover:opacity-100 transition-opacity" loading="lazy"> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Pioneer_logo.svg/1200px-Pioneer_logo.svg.png" alt="Pioneer" class="h-10 opacity-80 hover:opacity-100 transition-opacity" loading="lazy"> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Kenwood_logo.svg/1200px-Kenwood_logo.svg.png" alt="Kenwood" class="h-10 opacity-80 hover:opacity-100 transition-opacity" loading="lazy"> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Bose_logo.svg/1200px-Bose_logo.svg.png" alt="Bose" class="h-10 opacity-80 hover:opacity-100 transition-opacity" loading="lazy"> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Harman_logo.svg/1200px-Harman_logo.svg.png" alt="Harman" class="h-10 opacity-80 hover:opacity-100 transition-opacity" loading="lazy"> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Focal_logo.svg/1200px-Focal_logo.svg.png" alt="Focal" class="h-10 opacity-80 hover:opacity-100 transition-opacity" loading="lazy"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Steps Section --> | |
| <section id="steps" class="py-20 bg-black"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-white section-title"> | |
| <span class="gradient-text">4 шага</span> к идеальному результату | |
| </h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Наш процесс работы обеспечивает максимальное качество и удовлетворенность клиента | |
| </p> | |
| </div> | |
| <div class="relative"> | |
| <!-- Timeline line --> | |
| <div class="hidden md:block absolute left-1/2 top-0 h-full w-1 bg-gradient-to-b from-red-500 to-transparent transform -translate-x-1/2"></div> | |
| <div class="space-y-8 md:space-y-16"> | |
| <!-- Step 1 --> | |
| <div class="relative flex flex-col md:flex-row items-center" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 md:text-right"> | |
| <h3 class="text-2xl font-bold text-white mb-3">Консультация</h3> | |
| <p class="text-gray-400"> | |
| Детальный анализ вашего автомобиля и потребностей. Подбор оптимального решения с учетом особенностей модели. | |
| </p> | |
| </div> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-red-500 to-red-700 flex items-center justify-center text-white font-bold text-xl z-10 mx-auto md:mx-0"> | |
| 1 | |
| </div> | |
| <div class="md:w-1/2 md:pl-16 mt-8 md:mt-0"> | |
| <div class="bg-card rounded-xl p-6 premium-border hover-scale"> | |
| <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Consultation" class="w-full h-48 object-cover rounded-lg mb-4" loading="lazy"> | |
| <p class="text-sm text-gray-400 italic">Персональный подход к каждому клиенту</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="relative flex flex-col md:flex-row items-center" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 order-1 md:order-none md:text-right"> | |
| <div class="bg-card rounded-xl p-6 premium-border hover-scale"> | |
| <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Installation" class="w-full h-48 object-cover rounded-lg mb-4" loading="lazy"> | |
| <p class="text-sm text-gray-400 italic">Профессиональный монтаж с сохранением гарантии</p> | |
| </div> | |
| </div> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-red-500 to-red-700 flex items-center justify-center text-white font-bold text-xl z-10 mx-auto md:mx-0"> | |
| 2 | |
| </div> | |
| <div class="md:w-1/2 md:pl-16 mt-8 md:mt-0 order-first md:order-none"> | |
| <h3 class="text-2xl font-bold text-white mb-3">Установка</h3> | |
| <p class="text-gray-400"> | |
| Монтаж оборудования сертифицированными специалистами с использованием профессионального инструмента. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="relative flex flex-col md:flex-row items-center" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 md:text-right"> | |
| <h3 class="text-2xl font-bold text-white mb-3">Тестирование</h3> | |
| <p class="text-gray-400"> | |
| Полная проверка всех систем в различных режимах работы. Подробный инструктаж по использованию. | |
| </p> | |
| </div> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-red-500 to-red-700 flex items-center justify-center text-white font-bold text-xl z-10 mx-auto md:mx-0"> | |
| 3 | |
| </div> | |
| <div class="md:w-1/2 md:pl-16 mt-8 md:mt-0"> | |
| <div class="bg-card rounded-xl p-6 premium-border hover-scale"> | |
| <img src="https://images.unsplash.com/photo-1559028012-481c04fa702d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Testing" class="w-full h-48 object-cover rounded-lg mb-4" loading="lazy"> | |
| <p class="text-sm text-gray-400 italic">Тщательное тестирование всех функций</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="relative flex flex-col md:flex-row items-center" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 order-1 md:order-none md:text-right"> | |
| <div class="bg-card rounded-xl p-6 premium-border hover-scale"> | |
| <img src="https://images.unsplash.com/photo-1590658268037-6bf12165ee8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Support" class="w-full h-48 object-cover rounded-lg mb-4" loading="lazy"> | |
| <p class="text-sm text-gray-400 italic">Круглосуточная поддержка клиентов</p> | |
| </div> | |
| </div> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-red-500 to-red-700 flex items-center justify-center text-white font-bold text-xl z-10 mx-auto md:mx-0"> | |
| 4 | |
| </div> | |
| <div class="md:w-1/2 md:pl-16 mt-8 md:mt-0 order-first md:order-none"> | |
| <h3 class="text-2xl font-bold text-white mb-3">Поддержка</h3> | |
| <p class="text-gray-400"> | |
| Бесплатные консультации и обновления ПО. Помощь в решении любых вопросов. Персональный менеджер. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gradient-to-b from-gray-900 to-black"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-white section-title"> | |
| <span class="gradient-text">Свяжитесь</span> с нами | |
| </h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Оставьте заявку и мы подберем для вас оптимальное решение | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <div class="bg-card rounded-xl p-8 premium-border" data-aos="fade-right"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Контактная информация</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-map-marker-alt text-white"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-semibold text-white">Адрес</h4> | |
| <p class="text-gray-400">ул. 1 Мая 493/22, Краснодар</p> | |
| <a href="#" class="text-red-400 hover:text-red-300 text-sm mt-1 inline-block"> | |
| <i class="fas fa-map-marked-alt mr-1"></i> Посмотреть на карте | |
| </a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-phone-alt text-white"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-semibold text-white">Телефон</h4> | |
| <p class="text-gray-400"> | |
| <a href="tel:+79181364222" class="hover:text-red-400 transition-colors">+7 918 136-42-22</a> | |
| </p> | |
| <p class="text-gray-400 mt-1"> | |
| <a href="tel:+78612222222" class="hover:text-red-400 transition-colors">+7 861 222-22-22</a> | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-envelope text-white"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-semibold text-white">Email</h4> | |
| <p class="text-gray-400"> | |
| <a href="mailto:info@navisystems.ru" class="hover:text-red-400 transition-colors">info@navisystems.ru</a> | |
| </p> | |
| <p class="text-gray-400 mt-1"> | |
| <a href="mailto:support@navisystems.ru" class="hover:text-red-400 transition-colors">support@navisystems.ru</a> | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-700 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-clock text-white"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-semibold text-white">Режим работы</h4> | |
| <p class="text-gray-400">Пн-Пт: 9:00 - 19:00<br>Сб: 10:00 - 17:00<br>Вс: выходной</p> | |
| </div> | |
| </div> | |
| <div class="pt-4"> | |
| <h4 class="text-lg font-semibold text-white mb-3">Мы в соцсетях</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:text-red-400 hover:bg-gray-700 transition-all"> | |
| <i class="fab fa-vk"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:text-red-400 hover:bg-gray-700 transition-all"> | |
| <i class="fab fa-telegram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:text-red-400 hover:bg-gray-700 transition-all"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:text-red-400 hover:bg-gray-700 transition-all"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-card rounded-xl p-8 premium-border" data-aos="fade-left"> | |
| <h3 class="text-2xl font-bold text-white mb-6">Форма обратной связи</h3> | |
| <form id="contact-form" class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Ваше имя*</label> | |
| <input type="text" id="name" name="name" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-gray-300 mb-1">Телефон*</label> | |
| <input type="tel" id="phone" name="phone" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all" placeholder="+7 (___) ___-__-__"> | |
| </div> | |
| <div> | |
| <label for="car-model" class="block text-sm font-medium text-gray-300 mb-1">Модель автомобиля</label> | |
| <select id="car-model" name="car-model" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all"> | |
| <option value="">Выберите модель</option> | |
| <option value="mercedes">Mercedes-Benz</option> | |
| <option value="bmw">BMW</option> | |
| <option value="audi">Audi</option> | |
| <option value="porsche">Porsche</option> | |
| <option value="lexus">Lexus</option> | |
| <option value="landrover">Land Rover</option> | |
| <option value="other">Другая марка</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="service" class="block text-sm font-medium text-gray-300 mb-1">Интересующая услуга</label> | |
| <select id="service" name="service" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all"> | |
| <option value="">Выберите услугу</option> | |
| <option value="rus">Русификация мультимедиа</option> | |
| <option value="navi">Навигация и карты</option> | |
| <option value="camera">Камеры 360° / парктроники</option> | |
| <option value="audio">Аудио-апгрейд</option> | |
| <option value="coding">Диагностика и кодирование</option> | |
| <option value="other">Другая услуга</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Сообщение</label> | |
| <textarea id="message" name="message" rows="4" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all" placeholder="Опишите ваши пожелания..."></textarea> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="agree" name="agree" type="checkbox" class="w-4 h-4 text-red-600 bg-gray-700 border-gray-600 rounded focus:ring-red-500"> | |
| <label for="agree" class="ml-2 text-sm text-gray-400"> | |
| Я согласен с <a href="#" class="text-red-400 hover:underline">политикой конфиденциальности</a> | |
| </label> | |
| </div> | |
| <button type="submit" class="w-full btn-primary py-4 rounded-lg font-bold text-lg hover-scale"> | |
| <i class="fas fa-paper-plane mr-2"></i> Отправить заявку | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black py-12 border-t border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <span class="text-2xl font-bold"> | |
| <span class="text-red-500">NAVI</span> | |
| <span class="text-white">SYSTEMS</span> | |
| </span> | |
| <p class="text-gray-500 mt-4">Автоэлектроника премиум класса</p> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-gray-400 hover:text-red-500 transition-colors"> | |
| <i class="fab fa-vk text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-red-500 transition-colors"> | |
| <i class="fab fa-telegram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-red-500 transition-colors"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-4">Услуги</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-red-500 transition-colors">Русификация</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-red-500 transition-colors">Навигация</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-red-500 transition-colors">Камеры 360°</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-red-500 transition-colors">Аудио-апгрейд</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-4">Компания</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-red-500 transition-colors">О нас</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-red-500 transition-colors">Отзывы</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-red-500 transition-colors">Блог</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-red-500 transition-colors">Вакансии</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-4">Контакты</h3> | |
| <ul class="space-y-2"> | |
| <li class="text-gray-400">ул. 1 Мая 493/22, Краснодар</li> | |
| <li><a href="tel:+79181364222" class="text-gray-400 hover:text-red-500 transition-colors">+7 918 136-42-22</a></li> | |
| <li><a href="mailto:info@navisystems.ru" class="text-gray-400 hover:text-red-500 transition-colors">info@navisystems.ru</a></li> | |
| <li class="text-gray-400">Пн-Пт: 9:00 - 19:00</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0"> | |
| © 2023 NAVI SYSTEMS. Все права защищены. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-red-500 text-sm transition-colors">Политика конфиденциальности</a> | |
| <a href="#" class="text-gray-500 hover:text-red-500 text-sm transition-colors">Условия использования</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Scripts --> | |
| <script src="https://unpkg.com/aos@next/dist/aos.js"></script> | |
| <script> | |
| // Initialize AOS | |
| AOS.init({ | |
| once: true, | |
| duration: 800, | |
| offset: 100 | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| mobileMenu.classList.toggle('hidden'); | |
| mobileMenu.classList.toggle('active'); | |
| }); | |
| // Close mobile menu when clicking on a link | |
| const mobileMenuLinks = document.querySelectorAll('#mobile-menu a'); | |
| mobileMenuLinks.forEach(link => { | |
| link.addEventListener('click', () => { | |
| mobileMenu.classList.remove('active'); | |
| mobileMenu.classList.add('hidden'); | |
| }); | |
| }); | |
| // Preloader | |
| window.addEventListener('load', function() { | |
| const preloader = document.getElementById('preloader'); | |
| setTimeout(function() { | |
| preloader.style.opacity = '0'; | |
| preloader.style.visibility = 'hidden'; | |
| }, 500); | |
| }); | |
| // Create particles | |
| function createParticles() { | |
| const particlesContainer = document.getElementById('particles'); | |
| const particleCount = 30; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle'; | |
| // Random properties | |
| const size = Math.random() * 2 + 1; | |
| const posX = Math.random() * 100; | |
| const delay = Math.random() * 5; | |
| const duration = Math.random() * 10 + 10; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| particle.style.left = `${posX}%`; | |
| particle.style.animationDelay = `${delay}s`; | |
| particle.style.animationDuration = `${duration}s`; | |
| particlesContainer.appendChild(particle); | |
| } | |
| } | |
| // Form submission | |
| document.getElementById('contact-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Show success message | |
| const form = this; | |
| const originalButton = form.querySelector('button[type="submit"]'); | |
| const originalHtml = originalButton.innerHTML; | |
| originalButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Отправка...'; | |
| originalButton.disabled = true; | |
| setTimeout(function() { | |
| originalButton.innerHTML = '<i class="fas fa-check mr-2"></i> Отправлено!'; | |
| setTimeout(function() { | |
| originalButton.innerHTML = originalHtml; | |
| originalButton.disabled = false; | |
| form.reset(); | |
| }, 2000); | |
| }, 1500); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Initialize particles | |
| createParticles(); | |
| // Phone mask | |
| const phoneInput = document.getElementById('phone'); | |
| if (phoneInput) { | |
| phoneInput.addEventListener('input', function(e) { | |
| let x = e.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/); | |
| e.target.value = !x[2] ? '+7' : '+7 (' + x[2] + (x[3] ? ') ' + x[3] : '') + (x[4] ? '-' + x[4] : '') + (x[5] ? '-' + x[5] : '')); | |
| }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Denzel1989/me-cod" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |