Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Xoptic - Оптика премиум класса</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #6b21a8 0%, #2563eb 100%); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.2); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border-radius: 10px; | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 glass-effect shadow-sm"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <!-- Logo --> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center text-white"> | |
| <i class="fas fa-glasses text-xl"></i> | |
| </div> | |
| <span class="text-xl font-bold text-gray-800">XOPTIC</span> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#services" class="text-gray-700 hover:text-purple-600 font-medium transition">Услуги</a> | |
| <a href="#about" class="text-gray-700 hover:text-purple-600 font-medium transition">О нас</a> | |
| <a href="#contacts" class="text-gray-700 hover:text-purple-600 font-medium transition">Контакты</a> | |
| <a href="#reviews" class="text-gray-700 hover:text-purple-600 font-medium transition">Отзывы</a> | |
| </nav> | |
| <!-- Mobile menu button --> | |
| <button id="mobile-menu-button" class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#services" class="text-gray-700 hover:text-purple-600 font-medium transition">Услуги</a> | |
| <a href="#about" class="text-gray-700 hover:text-purple-600 font-medium transition">О нас</a> | |
| <a href="#contacts" class="text-gray-700 hover:text-purple-600 font-medium transition">Контакты</a> | |
| <a href="#reviews" class="text-gray-700 hover:text-purple-600 font-medium transition">Отзывы</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white py-20"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Ваше зрение - наша забота</h1> | |
| <p class="text-xl mb-8 opacity-90">Профессиональный ремонт очков, тонировка линз и подбор оправ премиум-класса</p> | |
| <div class="flex space-x-4"> | |
| <a href="#contacts" class="bg-white text-purple-600 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition duration-300 pulse-animation"> | |
| Записаться онлайн | |
| </a> | |
| <a href="tel:+79991234567" class="border-2 border-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-purple-600 transition duration-300"> | |
| <i class="fas fa-phone mr-2"></i> +7 (999) 123-45-67 | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1556306535-0f09a537f0a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Очки премиум класса" | |
| class="rounded-lg shadow-2xl w-full max-w-md"> | |
| <div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-lg shadow-lg"> | |
| <div class="text-purple-600 text-3xl font-bold">15%</div> | |
| <div class="text-gray-800 font-medium">Скидка на первый визит</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Наши услуги</h2> | |
| <div class="w-20 h-1 bg-purple-600 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-tools text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Ремонт очков</h3> | |
| <p class="text-gray-600 mb-4">Профессиональный ремонт любых видов очков: замена носоупоров, дужек, шарниров и других элементов.</p> | |
| <ul class="text-gray-600 space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-600 mr-2"></i> Быстро - от 30 минут | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-600 mr-2"></i> Гарантия на работу | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-600 mr-2"></i> Оригинальные запчасти | |
| </li> | |
| </ul> | |
| <a href="#contacts" class="text-purple-600 font-medium hover:underline">Узнать стоимость →</a> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-sun text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Тонировка линз</h3> | |
| <p class="text-gray-600 mb-4">Качественная тонировка линз в любом цвете и с различной степенью затемнения по вашему вкусу.</p> | |
| <ul class="text-gray-600 space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-600 mr-2"></i> 20+ вариантов оттенков | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-600 mr-2"></i> Защита от UV-излучения | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-600 mr-2"></i> Сохранение четкости зрения | |
| </li> | |
| </ul> | |
| <a href="#contacts" class="text-purple-600 font-medium hover:underline">Выбрать цвет →</a> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-glasses text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Подбор очков</h3> | |
| <p class="text-gray-600 mb-4">Индивидуальный подбор очков с учетом формы лица, стиля жизни и медицинских показаний.</p> | |
| <ul class="text-gray-600 space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-600 mr-2"></i> 100+ брендовых оправ | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-600 mr-2"></i> Бесплатная диагностика | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-600 mr-2"></i> 3D примерка | |
| </li> | |
| </ul> | |
| <a href="#contacts" class="text-purple-600 font-medium hover:underline">Записаться →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Мастерская Xoptic" | |
| class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">Почему выбирают Xoptic?</h2> | |
| <p class="text-gray-600 mb-6">Мы - команда профессиональных оптиков с 15-летним опытом работы. Наша мастерская оснащена современным оборудованием, что позволяет выполнять работы любой сложности с ювелирной точностью.</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-award text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-2">Гарантия качества</h4> | |
| <p class="text-gray-600">На все работы предоставляется гарантия до 1 года. Мы используем только проверенные материалы от ведущих производителей.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-clock text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-2">Быстрое выполнение</h4> | |
| <p class="text-gray-600">Большинство работ выполняем в течение дня, а срочный ремонт - за 1-2 часа. Ваши очки не задержатся у нас дольше необходимого.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-user-tie text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-2">Индивидуальный подход</h4> | |
| <p class="text-gray-600">Для каждого клиента мы подбираем оптимальное решение, учитывая все пожелания и особенности зрения.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Reviews Section --> | |
| <section id="reviews" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Отзывы наших клиентов</h2> | |
| <div class="w-20 h-1 bg-purple-600 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Review 1 --> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 font-bold mr-4">АК</div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Анна К.</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Принесла сломанные очки, которые уже собиралась выбросить. В Xoptic их не только починили, но и сделали тонировку линз. Теперь выглядят как новые, даже лучше!"</p> | |
| </div> | |
| <!-- Review 2 --> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 font-bold mr-4">МС</div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Михаил С.</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Отличный сервис! Сделали тонировку линз за час, пока я пил кофе в соседнем кафе. Цвет подобрали идеально, теперь мои очки не только корректируют зрение, но и стильно выглядят."</p> | |
| </div> | |
| <!-- Review 3 --> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 font-bold mr-4">ЕП</div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Елена П.</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Ребенок сломал дужку у моих любимых очков. В Xoptic нашли оригинальную запчасть и починили за полчаса. Очень вежливый персонал и приятная атмосфера в мастерской."</p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="https://a.ru" class="inline-block bg-purple-600 text-white px-6 py-3 rounded-full font-medium hover:bg-purple-700 transition duration-300"> | |
| <i class="fab fa-vk mr-2"></i> Читать больше отзывов | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contacts Section --> | |
| <section id="contacts" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Как нас найти</h2> | |
| <div class="w-20 h-1 bg-purple-600 mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <div class="lg:w-1/2"> | |
| <!-- Yandex Map Placeholder --> | |
| <div class="bg-gray-200 rounded-xl overflow-hidden" style="height: 400px;"> | |
| <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b&source=constructor" | |
| width="100%" | |
| height="400" | |
| frameborder="0" | |
| class="rounded-xl"></iframe> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Контакты</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-1">Адрес</h4> | |
| <p class="text-gray-600">г. Москва, ул. Оптическая, д. 15</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-clock text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-1">Часы работы</h4> | |
| <p class="text-gray-600">Пн-Пт: 10:00 - 20:00</p> | |
| <p class="text-gray-600">Сб-Вс: 11:00 - 18:00</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font | |
| </html> |