Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Digital Navigator - Системный подход к цифровой трансформации</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#0A2540', | |
| secondary: '#00A88E', | |
| accent: '#00C9B1', | |
| dark: '#061A2D', | |
| light: '#F5F9FC' | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #F5F9FC; | |
| color: #061A2D; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #0A2540 0%, #00A88E 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #00C9B1; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(90deg, #00A88E 0%, #00C9B1 100%); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 201, 177, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="bg-primary text-white sticky top-0 z-50 shadow-lg"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-2xl font-bold flex items-center"> | |
| <span class="text-accent">D</span>igital<span class="text-accent">N</span>avigator | |
| </a> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#programs" class="nav-link">Программы</a> | |
| <a href="#methodology" class="nav-link">Методология</a> | |
| <a href="#formats" class="nav-link">Форматы</a> | |
| <a href="#experts" class="nav-link">Эксперты</a> | |
| <a href="#contacts" class="nav-link">Контакты</a> | |
| </nav> | |
| <div class="md:hidden"> | |
| <button id="menu-toggle" class="text-white focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4"> | |
| <a href="#programs" class="block py-2">Программы</a> | |
| <a href="#methodology" class="block py-2">Методология</a> | |
| <a href="#formats" class="block py-2">Форматы</a> | |
| <a href="#experts" class="block py-2">Эксперты</a> | |
| <a href="#contacts" class="block py-2">Контакты</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white"> | |
| <div class="container mx-auto px-6 py-20 md:py-32"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-2/3 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6"> | |
| Системный подход к цифровой трансформации бизнеса | |
| </h1> | |
| <p class="text-xl mb-8 opacity-90"> | |
| Для руководителей и предпринимателей: от стратегии до внедрения | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#programs" class="btn-primary text-white font-semibold py-3 px-8 rounded-full text-center"> | |
| Выбрать программу | |
| </a> | |
| <a href="#contacts" class="bg-white text-primary font-semibold py-3 px-8 rounded-full text-center hover:bg-opacity-90 transition"> | |
| Консультация | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/3 flex justify-center"> | |
| <div class="relative w-full"> | |
| <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-white border-opacity-20"> | |
| <div class="text-center"> | |
| <div class="inline-flex items-center justify-center w-20 h-20 bg-white bg-opacity-20 rounded-full mb-6"> | |
| <i class="fas fa-compass text-3xl text-accent"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Digital Navigator</h3> | |
| <p class="text-white text-opacity-80"> | |
| Ваш компас в мире цифровой трансформации | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Programs Section --> | |
| <section id="programs" class="py-20 bg-light"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Наши программы</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Для руководителей высшего звена и владельцев бизнеса | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Program 1 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> | |
| <div class="h-3 bg-gradient-to-r from-primary to-secondary"></div> | |
| <div class="p-8"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-14 h-14 rounded-full bg-primary bg-opacity-10 flex items-center justify-center text-primary mr-4"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark">Цифровая трансформация и GenAI</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| Практическое применение генеративного ИИ в бизнес-процессах | |
| </p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> | |
| <span>Стратегии внедрения ИИ</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> | |
| <span>Этические аспекты GenAI</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> | |
| <span>Кейсы из российской практики</span> | |
| </li> | |
| </ul> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-dark">000 000 ₽</span> | |
| <a href="#" class="text-accent font-semibold hover:underline">Подробнее →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Program 2 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> | |
| <div class="h-3 bg-gradient-to-r from-secondary to-accent"></div> | |
| <div class="p-8"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-14 h-14 rounded-full bg-secondary bg-opacity-10 flex items-center justify-center text-secondary mr-4"> | |
| <i class="fas fa-database text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark">Data-driven управление</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| Принятие решений на основе данных и аналитики | |
| </p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> | |
| <span>Системы бизнес-аналитики</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> | |
| <span>Метрики и KPI</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> | |
| <span>Управление на основе данных</span> | |
| </li> | |
| </ul> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-dark">000 000 ₽</span> | |
| <a href="#" class="text-accent font-semibold hover:underline">Подробнее →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Program 3 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> | |
| <div class="h-3 bg-gradient-to-r from-accent to-primary"></div> | |
| <div class="p-8"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-14 h-14 rounded-full bg-accent bg-opacity-10 flex items-center justify-center text-accent mr-4"> | |
| <i class="fas fa-chart-line text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark">Продуктовая стратегия</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| Разработка и управление цифровыми продуктами | |
| </p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> | |
| <span>Жизненный цикл продукта</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> | |
| <span>Методы валидации идей</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-2"></i> | |
| <span>Монетизация цифровых решений</span> | |
| </li> | |
| </ul> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-dark">000 000 ₽</span> | |
| <a href="#" class="text-accent font-semibold hover:underline">Подробнее →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Methodology Section --> | |
| <section id="methodology" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Системный подход</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Методология Digital Navigator для цифровой трансформации | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="mb-8"> | |
| <div class="flex items-start mb-8"> | |
| <div class="bg-primary bg-opacity-10 p-4 rounded-lg mr-6"> | |
| <i class="fas fa-sitemap text-primary text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-dark mb-3">Целостное видение</h3> | |
| <p class="text-gray-600"> | |
| Рассматриваем бизнес как систему взаимосвязанных элементов. Анализируем не только отдельные процессы, но и их влияние друг на друга. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-8"> | |
| <div class="bg-secondary bg-opacity-10 p-4 rounded-lg mr-6"> | |
| <i class="fas fa-brain text-secondary text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-dark mb-3">Практическая направленность</h3> | |
| <p class="text-gray-600"> | |
| Все методики и инструменты адаптированы под российский бизнес-контекст и проверены на реальных кейсах. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-accent bg-opacity-10 p-4 rounded-lg mr-6"> | |
| <i class="fas fa-brain text-accent text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-dark mb-3">Сквозная трансформация</h3> | |
| <p class="text-gray-600"> | |
| От стратегии до внедрения: помогаем не только разработать план цифровизации, но и реализовать его поэтапно. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-primary to-secondary rounded-2xl p-1"> | |
| <div class="bg-white rounded-xl p-8"> | |
| <div class="mb-8"> | |
| <h3 class="text-2xl font-bold text-dark mb-4">Этапы цифровой трансформации</h3> | |
| <p class="text-gray-600 mb-6"> | |
| Системный подход Digital Navigator к преобразованию бизнеса | |
| </p> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-primary bg-opacity-10 text-primary font-bold rounded-full w-10 h-10 flex items-center justify-center mr-6 flex-shrink-0">1</div> | |
| <div> | |
| <h4 class="font-semibold text-dark text-lg mb-2">Диагностика</h4> | |
| <p class="text-gray-600">Анализ текущего состояния бизнеса и цифрового потенциала</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary bg-opacity-10 text-primary font-bold rounded-full w-10 h-10 flex items-center justify-center mr-6 flex-shrink-0">2</div> | |
| <div> | |
| <h4 class="font-semibold text-dark text-lg mb-2">Стратегия</h4> | |
| <p class="text-gray-600">Определение цифровой стратегии и roadmap трансформации</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary bg-opacity-10 text-primary font-bold rounded-full w-10 h-10 flex items-center justify-center mr-6 flex-shrink-0">3</div> | |
| <div> | |
| <h4 class="font-semibold text-dark text-lg mb-2">Пилотирование</h4> | |
| <p class="text-gray-600">Тестирование решений на ограниченном периметре</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary bg-opacity-10 text-primary font-bold rounded-full w-10 h-10 flex items-center justify-center mr-6 flex-shrink-0">4</div> | |
| <div> | |
| <h4 class="font-semibold text-dark text-lg mb-2">Масштабирование</h4> | |
| <p class="text-gray-600">Поэтапное внедрение успешных решений в масштабах компании</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Formats Section --> | |
| <section id="formats" class="py-20 bg-light"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Форматы обучения</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Гибкие варианты для руководителей с плотным графиком | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Format 1 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> | |
| <div class="h-3 bg-gradient-to-r from-primary to-secondary"></div> | |
| <div class="p-8 text-center"> | |
| <div class="inline-flex items-center justify-center w-20 h-20 bg-primary bg-opacity-10 rounded-full mb-6"> | |
| <i class="fas fa-users text-3xl text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark mb-4">Очное обучение</h3> | |
| <p class="text-gray-600 mb-6"> | |
| Интенсивные сессии с глубоким погружением и нетворкингом | |
| </p> | |
| <ul class="space-y-3 mb-6 text-left"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-3"></i> | |
| <span>Живое общение с экспертами</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-3"></i> | |
| <span>Практические воркшопы</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-3"></i> | |
| <span>Кейс-стади в группах</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Format 2 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> | |
| <div class="h-3 bg-gradient-to-r from-secondary to-accent"></div> | |
| <div class="p-8 text-center"> | |
| <div class="inline-flex items-center justify-center w-20 h-20 bg-secondary bg-opacity-10 rounded-full mb-6"> | |
| <i class="fas fa-laptop text-3xl text-secondary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark mb-4">Онлайн-формат</h3> | |
| <p class="text-gray-600 mb-6"> | |
| Удобное обучение без привязки к месту с сохранением интерактива | |
| </p> | |
| <ul class="space-y-3 mb-6 text-left"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-3"></i> | |
| <span>Интерактивные лекции</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-3"></i> | |
| <span>Онлайн-воркшопы</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-3"></i> | |
| <span>Доступ к материалам 24/7</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Format 3 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover"> | |
| <div class="h-3 bg-gradient-to-r from-accent to-primary"></div> | |
| <div class="p-8 text-center"> | |
| <div class="inline-flex items-center justify-center w-20 h-20 bg-accent bg-opacity-10 rounded-full mb-6"> | |
| <i class="fas fa-blender-phone text-3xl text-accent"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark mb-4">Гибридный формат</h3> | |
| <p class="text-gray-600 mb-6"> | |
| Оптимальное сочетание очных и онлайн-сессий | |
| </p> | |
| <ul class="space-y-3 mb-6 text-left"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-3"></i> | |
| <span>Ключевые модули очно</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-3"></i> | |
| <span>Теория в удобном онлайн-формате</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-accent mt-1 mr-3"></i> | |
| <span>Индивидуальный график</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experts Section --> | |
| <section id="experts" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Наши эксперты</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Практики с опытом цифровой трансформации в российских компаниях | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Expert 1 --> | |
| <div class="bg-light rounded-xl overflow-hidden card-hover text-center"> | |
| <div class="h-64 bg-primary bg-opacity-10 flex items-center justify-center"> | |
| <div class="w-32 h-32 rounded-full bg-white shadow-lg flex items-center justify-center"> | |
| <i class="fas fa-user-tie text-5xl text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-dark mb-1">Ерофеев Артем</h3> | |
| <p class="text-secondary mb-3">ООО "Страта солюшенс"</p> | |
| <p class="text-gray-600 text-sm"> | |
| Директор департамента комплексных проектов | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Expert 2 --> | |
| <div class="bg-light rounded-xl overflow-hidden card-hover text-center"> | |
| <div class="h-64 bg-secondary bg-opacity-10 flex items-center justify-center"> | |
| <div class="w-32 h-32 rounded-full bg-white shadow-lg flex items-center justify-center"> | |
| <i class="fas fa-user-tie text-5xl text-secondary"></i> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-dark mb-1">Васекин Борис</h3> | |
| <p class="text-secondary mb-3">ООО "Страта солюшенс"</p> | |
| <p class="text-gray-600 text-sm"> | |
| Директор департамента разработки технологий | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Expert 3 --> | |
| <div class="bg-light rounded-xl overflow-hidden card-hover text-center"> | |
| <div class="h-64 bg-accent bg-opacity-10 flex items-center justify-center"> | |
| <div class="w-32 h-32 rounded-full bg-white shadow-lg flex items-center justify-center"> | |
| <i class="fas fa-user-tie text-5xl text-accent"></i> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-dark mb-1">Данил Филиппов</h3> | |
| <p class="text-secondary mb-3">ООО "Cтрата солюшенс"</p> | |
| <p class="text-gray-600 text-sm"> | |
| Директор по заказной разработке цифровых решений | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Expert 4 --> | |
| <div class="bg-light rounded-xl overflow-hidden card-hover text-center"> | |
| <div class="h-64 bg-primary bg-opacity-10 flex items-center justify-center"> | |
| <div class="w-32 h-32 rounded-full bg-white shadow-lg flex items-center justify-center"> | |
| <i class="fas fa-user-tie text-5xl text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-dark mb-1">Штифанова Лилия</h3> | |
| <p class="text-secondary mb-3">ООО "Страта солюшенс"</p> | |
| <p class="text-gray-600 text-sm"> | |
| Руководитель управления по работе с персоналро | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-r from-primary to-secondary text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Готовы к цифровой трансформации?</h2> | |
| <p class="text-xl opacity-90 mb-8 max-w-2xl mx-auto"> | |
| Оставьте заявку и получите консультацию по выбору программы | |
| </p> | |
| <a href="#contacts" class="bg-white text-primary font-semibold py-3 px-8 rounded-full inline-block hover:bg-opacity-90 transition"> | |
| Оставить заявку | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Contacts Section --> | |
| <section id="contacts" class="py-20 bg-light"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Контакты</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Свяжитесь с нами для получения дополнительной информации | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-lg p-8 mb-8"> | |
| <h3 class="text-xl font-bold text-dark mb-6">Напишите нам</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Имя</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Телефон</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Сообщение</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit" class="btn-primary text-white font-semibold py-3 px-8 rounded-full w-full"> | |
| Отправить | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-lg p-8 mb-8"> | |
| <h3 class="text-xl font-bold text-dark mb-6">Контактная информация</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-primary bg-opacity-10 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-map-marker-alt text-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-dark mb-1">Адрес</h4> | |
| <p class="text-gray-600">Москва </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-secondary bg-opacity-10 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-phone-alt text-secondary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-dark mb-1">Телефон</h4> | |
| <p class="text-gray-600">+7 (999) 999-99-99</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-accent bg-opacity-10 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-envelope text-accent"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-dark mb-1">Email</h4> | |
| <p class="text-gray-600">info@digitalnavigator.ru</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-r from-primary to-secondary rounded-xl p-1 h-64"> | |
| <div class="bg-white rounded-xl h-full w-full flex items-center justify-center"> | |
| <i class="fas fa-map-marker-alt text-4xl text-gray-300"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <a href="#" class="text-2xl font-bold flex items-center mb-4"> | |
| <span class="text-accent">D</span>igital<span class="text-accent">N</span>avigator | |
| </a> | |
| <p class="text-gray-400"> | |
| Системный подход к цифровой трансформации для руководителей | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Программы</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition">Цифровая трансформация и GenAI</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition">Data-driven управление</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition">Продуктовая стратегия</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Компания</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition">О нас</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition">Эксперты</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition">Методология</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Контакты</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i> | |
| <span class="text-gray-400">Москва,</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt text-gray-400 mr-2"></i> | |
| <span class="text-gray-400">+7 (999) 999-99-99</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope text-gray-400 mr-2"></i> | |
| <span class="text-gray-400">info@digitalnavigator.ru</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0"> | |
| © 2023 Digital Navigator. Все права защищены. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-accent transition"> | |
| <i class="fab fa-telegram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-accent transition"> | |
| <i class="fab fa-vk"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-accent transition"> | |
| <i class="fab fa-yandex"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Add shadow to header on scroll | |
| window.addEventListener('scroll', function() { | |
| const header = document.querySelector('header'); | |
| if (window.scrollY > 10) { | |
| header.classList.add('shadow-lg'); | |
| } else { | |
| header.classList.remove('shadow-lg'); | |
| } | |
| }); | |
| </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=image7590/test-create" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |