Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>XOPTICA - Оптика премиум класса</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;600;700;900&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(139, 92, 246, 0.8) 50%, rgba(236, 72, 153, 0.8) 100%); | |
| } | |
| .lens-gradient { | |
| background: conic-gradient(from 90deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6); | |
| } | |
| .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); | |
| } | |
| .lens-color-option { | |
| transition: all 0.3s ease; | |
| } | |
| .lens-color-option:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 bg-white shadow-md"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 flex items-center justify-center mr-3"> | |
| <span class="text-white font-bold text-xl">X</span> | |
| </div> | |
| <h1 class="text-2xl font-bold gradient-text">XOPTICA</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-gray-700 hover:text-blue-500 font-medium transition">Главная</a> | |
| <a href="#services" class="text-gray-700 hover:text-blue-500 font-medium transition">Услуги</a> | |
| <a href="#gallery" class="text-gray-700 hover:text-blue-500 font-medium transition">Галерея</a> | |
| <a href="#about" class="text-gray-700 hover:text-blue-500 font-medium transition">О нас</a> | |
| <a href="#contacts" class="text-gray-700 hover:text-blue-500 font-medium transition">Контакты</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <a href="tel:+79991234567" class="hidden md:block bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full font-medium transition"> | |
| <i class="fas fa-phone mr-2"></i>+7 (999) 123-45-67 | |
| </a> | |
| <button class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" 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"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6">Премиальные очки <span class="gradient-text">с индивидуальным стилем</span></h2> | |
| <p class="text-xl mb-8">Создаем уникальные очки с градиентными линзами, ремонтируем и обновляем ваши любимые модели.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#services" class="bg-white text-blue-500 hover:bg-gray-100 px-6 py-3 rounded-full font-bold text-center transition">Наши услуги</a> | |
| <a href="#contacts" class="border-2 border-white hover:bg-white hover:text-blue-500 px-6 py-3 rounded-full font-bold text-center transition">Записаться</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative floating"> | |
| <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="w-full max-w-md rounded-xl shadow-2xl"> | |
| <div class="absolute -bottom-5 -right-5 bg-white p-3 rounded-full shadow-lg"> | |
| <div class="w-16 h-16 lens-gradient rounded-full flex items-center justify-center"> | |
| <i class="fas fa-eye text-white text-2xl"></i> | |
| </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 md:text-4xl font-bold mb-4">Наши <span class="gradient-text">услуги</span></h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Мы предлагаем полный спектр услуг по изготовлению, ремонту и модернизации очков</p> | |
| </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-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-glasses text-blue-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Изготовление очков</h3> | |
| <p class="text-gray-600 mb-4">Индивидуальный подбор и изготовление очков по вашим параметрам с использованием качественных материалов.</p> | |
| <a href="#" class="text-blue-500 font-medium flex items-center"> | |
| Подробнее <i class="fas fa-arrow-right ml-2"></i> | |
| </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-tools text-purple-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Ремонт очков</h3> | |
| <p class="text-gray-600 mb-4">Профессиональный ремонт любых видов очков: замена носоупоров, дужек, шарниров и других элементов.</p> | |
| <a href="#" class="text-purple-500 font-medium flex items-center"> | |
| Подробнее <i class="fas fa-arrow-right ml-2"></i> | |
| </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-pink-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-palette text-pink-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Окраска линз</h3> | |
| <p class="text-gray-600 mb-4">Уникальная услуга окрашивания линз в любой цвет или градиент. Создайте свой неповторимый стиль!</p> | |
| <a href="#" class="text-pink-500 font-medium flex items-center"> | |
| Подробнее <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-ruler-combined text-indigo-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Подгонка оправ</h3> | |
| <p class="text-gray-600 mb-4">Точная подгонка оправы по форме вашего лица для максимального комфорта при ношении.</p> | |
| <a href="#" class="text-indigo-500 font-medium flex items-center"> | |
| Подробнее <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-sun text-green-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Солнцезащитные очки</h3> | |
| <p class="text-gray-600 mb-4">Изготовление солнцезащитных очков с различными типами линз и дизайнерскими решениями.</p> | |
| <a href="#" class="text-green-500 font-medium flex items-center"> | |
| Подробнее <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300"> | |
| <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-star text-yellow-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">VIP обслуживание</h3> | |
| <p class="text-gray-600 mb-4">Эксклюзивные услуги для ценителей качества: индивидуальный дизайн, редкие материалы, персональный мастер.</p> | |
| <a href="#" class="text-yellow-500 font-medium flex items-center"> | |
| Подробнее <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Lens Coloring Section --> | |
| <section class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Окрашивание <span class="gradient-text">линз</span></h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Превратите свои очки в уникальный аксессуар с нашей технологией окрашивания линз</p> | |
| </div> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0"> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <!-- Color Option 1 --> | |
| <div class="lens-color-option bg-blue-500 rounded-lg p-4 text-white text-center cursor-pointer"> | |
| <div class="w-16 h-16 bg-blue-300 rounded-full mx-auto mb-2"></div> | |
| <p>Синий</p> | |
| </div> | |
| <!-- Color Option 2 --> | |
| <div class="lens-color-option bg-purple-500 rounded-lg p-4 text-white text-center cursor-pointer"> | |
| <div class="w-16 h-16 bg-purple-300 rounded-full mx-auto mb-2"></div> | |
| <p>Фиолетовый</p> | |
| </div> | |
| <!-- Color Option 3 --> | |
| <div class="lens-color-option bg-pink-500 rounded-lg p-4 text-white text-center cursor-pointer"> | |
| <div class="w-16 h-16 bg-pink-300 rounded-full mx-auto mb-2"></div> | |
| <p>Розовый</p> | |
| </div> | |
| <!-- Color Option 4 --> | |
| <div class="lens-color-option bg-green-500 rounded-lg p-4 text-white text-center cursor-pointer"> | |
| <div class="w-16 h-16 bg-green-300 rounded-full mx-auto mb-2"></div> | |
| <p>Зеленый</p> | |
| </div> | |
| <!-- Color Option 5 --> | |
| <div class="lens-color-option bg-yellow-500 rounded-lg p-4 text-white text-center cursor-pointer"> | |
| <div class="w-16 h-16 bg-yellow-300 rounded-full mx-auto mb-2"></div> | |
| <p>Желтый</p> | |
| </div> | |
| <!-- Color Option 6 --> | |
| <div class="lens-color-option rounded-lg p-4 text-center cursor-pointer border-2 border-gray-300"> | |
| <div class="w-16 h-16 lens-gradient rounded-full mx-auto mb-2"></div> | |
| <p>Градиент</p> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-bold mb-3">Как это работает?</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Используем безопасные красители премиального качества</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Цвет сохраняется на весь срок службы линз</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Не влияет на оптические свойства линз</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Возможность комбинировать несколько цветов</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 lg:pl-12"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-2xl font-bold mb-6">Заказать окрашивание линз</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" for="name">Ваше имя</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" for="phone">Телефон</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Тип линз</label> | |
| <div class="flex space-x-4"> | |
| <label class="flex items-center"> | |
| <input type="radio" name="lens_type" class="mr-2" checked> | |
| <span>Пластиковые</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="lens_type" class="mr-2"> | |
| <span>Стеклянные</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2" for="color">Цвет линз</label> | |
| <select id="color" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Синий</option> | |
| <option>Фиолетовый</option> | |
| <option>Розовый</option> | |
| <option>Зеленый</option> | |
| <option>Желтый</option> | |
| <option>Градиент (несколько цветов)</option> | |
| <option>Другой (уточнить при звонке)</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg font-bold transition"> | |
| Отправить заявку | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Section --> | |
| <section id="gallery" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Наши <span class="gradient-text">работы</span></h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Примеры окрашенных линз, реставрированных очков и новых моделей</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Gallery Item 1 --> | |
| <div class="relative group overflow-hidden rounded-xl"> | |
| <img src="https://images.unsplash.com/photo-1591073113125-e46713c829bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Очки с градиентными линзами" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-1">Градиентные линзы</h3> | |
| <p class="text-gray-200">Сине-фиолетовый переход</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 2 --> | |
| <div class="relative group overflow-hidden rounded-xl"> | |
| <img src="https://images.unsplash.com/photo-1556306535-38febf6782e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Ремонт очков" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-1">Ремонт дужки</h3> | |
| <p class="text-gray-200">Реставрация винтажного экземпляра</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 3 --> | |
| <div class="relative group overflow-hidden rounded-xl"> | |
| <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="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-1">Розовые линзы</h3> | |
| <p class="text-gray-200">Яркий акцент для смелых</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 4 --> | |
| <div class="relative group overflow-hidden rounded-xl"> | |
| <img src="https://images.unsplash.com/photo-1556306535-4fcdff532b49?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Солнцезащитные очки" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-1">Зеркальные линзы</h3> | |
| <p class="text-gray-200">Стиль и защита от солнца</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 5 --> | |
| <div class="relative group overflow-hidden rounded-xl"> | |
| <img src="https://images.unsplash.com/photo-1556306535-93d9f0e5b9c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Очки с зелеными линзами" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-1">Зеленые линзы</h3> | |
| <p class="text-gray-200">Природный оттенок для повседневности</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 6 --> | |
| <div class="relative group overflow-hidden rounded-xl"> | |
| <img src="https://images.unsplash.com/photo-1556306535-93d9f0e5b9c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Классические очки" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-1">Классика</h3> | |
| <p class="text-gray-200">Вечная элегантность</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-full font-bold transition"> | |
| Посмотреть все работы | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">О компании <span class="gradient-text">XOPTICA</span></h2> | |
| <p class="text-gray-600 mb-6">Мы - команда профессиональных оптиков и дизайнеров, объединенных страстью к созданию уникальных очков. Наша миссия - дать каждому клиенту возможность выразить свою индивидуальность через стильные аксессуары.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-award text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">10 лет опыта</h4> | |
| <p class="text-gray-600">Работаем с 2013 года, постоянно совершенствуя технологии</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-users text-purple-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">5000+ клиентов</h4> | |
| <p class="text-gray-600">Довольные клиенты по всей России и за рубежом</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-pink-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-gem text-pink-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Премиальные материалы</h4> | |
| <p class="text-gray-600">Используем только качественные компоненты от проверенных поставщиков</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-2xl font-bold mb-6">Наши преимущества</h3> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="text-blue-500 text-2xl mr-4"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-2">Быстрое изготовление</h4> | |
| <p class="text-gray-600">Стандартные заказы выполняем за 3-5 дней, срочные - за 24 часа</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="text-purple-500 text-2xl mr-4"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-2">Гарантия качества</h4> | |
| <p class="text-gray-600">12 месяцев гарантии на все виды работ и материалов</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="text-pink-500 text-2xl mr-4"> | |
| <i class="fas fa-magic"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-2">Эксклюзивные решения</h4> | |
| <p class="text-gray-600">Единственные в России, кто предлагает градиентное окрашивание линз</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="text-green-500 text-2xl mr-4"> | |
| <i class="fas fa-heart"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-2">Индивидуальный подход</h4> | |
| <p class="text-gray-600">Каждый клиент получает персонального мастера на весь срок сотрудничества</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Отзывы <span class="gradient-text">клиентов</span></h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Что говорят о нас те, кто уже воспользовался нашими услугами</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Анна К.</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">"Заказала градиентные линзы - синий переходит в фиолетовый. Выглядит потрясающе! Качество окраски на высшем уровне, цвет не выгорает уже полгода. Спасибо XOPTICA за крутой аксессуар!"</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-purple-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Михаил П.</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">"Принес в ремонт винтажные очки от деда. Мастера XOPTICA не просто починили дужку, но и полностью отреставрировали оправу. Теперь выглядит как новая, но сохранила дух времени. Очень доволен!"</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-pink-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Елена С.</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">"Делала здесь очки с розовыми линзами - именно такой оттенок, который хотела. Подобрали идеальную оправу под форму лица. Ношу уже 4 месяца - никаких проблем, все отлично. Обязательно вернусь за солнцезащитными!"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contacts Section --> | |
| <section id="contacts" class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Контакты</h2> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Адрес</h4> | |
| <p class="text-gray-600">г. Москва, ул. Оптическая, д. 12</p> | |
| <p class="text-gray-500 text-sm">Метро "Оптиков", 5 минут пешком</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-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold 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-pink-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt text-pink-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Телефоны</h4> | |
| <p class="text-gray-600">+7 (999) 123-45-67</p> | |
| <p class="text-gray-600">+7 (495) 123-45-67</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-green-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Email</h4> | |
| <p class="text-gray-600">info@xoptica.ru</p> | |
| <p class="text-gray-600">orders@xoptica.ru</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold mb-4">Мы в соцсетях</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-blue-500 hover:bg-blue-600 text-white rounded-full flex items-center justify-center"> | |
| <i class="fab fa-vk"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-pink-500 hover:bg-pink-600 text-white rounded-full flex items-center justify-center"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full flex items-center justify-center"> | |
| <i class="fab fa-telegram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-green-500 hover:bg-green-600 text-white rounded-full flex items-center justify-center"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-2xl font-bold mb-6">Записаться на прием</h3> | |
| <form> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2" for="contact-name">Имя</label> | |
| <input type="text" id="contact-name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2" for="contact-phone">Телефон</label> | |
| <input type="tel" id="contact-phone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" for="contact-service">Услуга</label> | |
| <select id="contact-service" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Изготовление очков</option> | |
| <option>Ремонт очков</option> | |
| <option>Окра | |
| </html> |