Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Optica Opton - Магазин очков и контактных линз</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=Playfair+Display:wght@400;700&family=Raleway:wght@300;400;600&display=swap'); | |
| :root { | |
| --primary: #2a4365; | |
| --secondary: #e2e8f0; | |
| --accent: #4299e1; | |
| } | |
| body { | |
| font-family: 'Raleway', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .logo-text { | |
| font-family: 'Playfair Display', serif; | |
| font-weight: 700; | |
| letter-spacing: 1px; | |
| } | |
| .hero { | |
| background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1499781350541-7783f6c6a0c8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1415&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| min-height: 500px; | |
| } | |
| .glasses-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .glasses-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: var(--accent); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .gallery-item { | |
| overflow: hidden; | |
| border-radius: 8px; | |
| } | |
| .gallery-item img { | |
| transition: transform 0.5s ease; | |
| } | |
| .gallery-item:hover img { | |
| transform: scale(1.05); | |
| } | |
| .article-card { | |
| transition: all 0.3s ease; | |
| } | |
| .article-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <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 rounded-full bg-blue-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-glasses text-xl"></i> | |
| </div> | |
| <span class="logo-text text-2xl text-blue-800">Optica Opton</span> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link text-gray-700 hover:text-blue-600">Главная</a> | |
| <a href="#products" class="nav-link text-gray-700 hover:text-blue-600">Очки</a> | |
| <a href="#lenses" class="nav-link text-gray-700 hover:text-blue-600">Линзы</a> | |
| <a href="#services" class="nav-link text-gray-700 hover:text-blue-600">Услуги</a> | |
| <a href="#articles" class="nav-link text-gray-700 hover:text-blue-600">Статьи</a> | |
| <a href="#gallery" class="nav-link text-gray-700 hover:text-blue-600">Галерея</a> | |
| <a href="#contacts" class="nav-link text-gray-700 hover:text-blue-600">Контакты</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-2 px-4 shadow-md"> | |
| <a href="#home" class="block py-2 text-gray-700 hover:text-blue-600">Главная</a> | |
| <a href="#products" class="block py-2 text-gray-700 hover:text-blue-600">Очки</a> | |
| <a href="#lenses" class="block py-2 text-gray-700 hover:text-blue-600">Линзы</a> | |
| <a href="#services" class="block py-2 text-gray-700 hover:text-blue-600">Услуги</a> | |
| <a href="#articles" class="block py-2 text-gray-700 hover:text-blue-600">Статьи</a> | |
| <a href="#gallery" class="block py-2 text-gray-700 hover:text-blue-600">Галерея</a> | |
| <a href="#contacts" class="block py-2 text-gray-700 hover:text-blue-600">Контакты</a> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero flex items-center justify-center text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Яркий взгляд на мир</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Качественные очки и контактные линзы для вашего комфорта и стиля</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#products" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">Выбрать очки</a> | |
| <a href="#lenses" class="bg-white hover:bg-gray-100 text-blue-600 px-6 py-3 rounded-lg font-medium transition duration-300">Подобрать линзы</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="text-center p-6 rounded-lg bg-gray-50"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-eye text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Бесплатная проверка зрения</h3> | |
| <p class="text-gray-600">Профессиональная диагностика на современном оборудовании</p> | |
| </div> | |
| <div class="text-center p-6 rounded-lg bg-gray-50"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-star text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Качественные материалы</h3> | |
| <p class="text-gray-600">Используем только проверенные материалы от ведущих производителей</p> | |
| </div> | |
| <div class="text-center p-6 rounded-lg bg-gray-50"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-truck text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Быстрая доставка</h3> | |
| <p class="text-gray-600">Доставим ваш заказ в кратчайшие сроки</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products Section --> | |
| <section id="products" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Наши очки</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-4 gap-6"> | |
| <!-- Product 1 --> | |
| <div class="glasses-card bg-white rounded-lg overflow-hidden"> | |
| <div class="relative h-64 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1511499767150-a48a79f39864?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Очки" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 right-2 bg-blue-600 text-white px-2 py-1 rounded text-xs">Новинка</div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Ray-Ban Clubmaster</h3> | |
| <p class="text-gray-600 text-sm mb-2">Классическая форма, золотистая оправа</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-blue-600">12 990 ₽</span> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">В корзину</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="glasses-card bg-white rounded-lg overflow-hidden"> | |
| <div class="relative h-64 overflow-hidden"> | |
| <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-full object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Oakley Holbrook</h3> | |
| <p class="text-gray-600 text-sm mb-2">Спортивный стиль, черная оправа</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-blue-600">14 490 ₽</span> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">В корзину</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="glasses-card bg-white rounded-lg overflow-hidden"> | |
| <div class="relative h-64 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1591073113125-e46713c829ec?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Очки" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 right-2 bg-red-500 text-white px-2 py-1 rounded text-xs">Акция</div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Prada PR 16WV</h3> | |
| <p class="text-gray-600 text-sm mb-2">Стильные очки с прозрачной оправой</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-blue-600">18 990 ₽</span> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">В корзину</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="glasses-card bg-white rounded-lg overflow-hidden"> | |
| <div class="relative h-64 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1559599101-f09722fb4948?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Очки" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Gucci GG0397O</h3> | |
| <p class="text-gray-600 text-sm mb-2">Элегантные женские очки</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-blue-600">21 490 ₽</span> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">В корзину</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="#" class="inline-block border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-6 py-2 rounded-lg font-medium transition duration-300">Смотреть все очки</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Lenses Section --> | |
| <section id="lenses" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Контактные линзы</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Комфорт и четкость зрения на весь день</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-4">Почему выбирают наши линзы?</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-600 mt-1 mr-2"></i> | |
| <span>Высокий уровень кислородопроницаемости</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-600 mt-1 mr-2"></i> | |
| <span>Увлажняющие компоненты для комфорта</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-600 mt-1 mr-2"></i> | |
| <span>Широкий диапазон диоптрий</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-600 mt-1 mr-2"></i> | |
| <span>Доступные цены и акции</span> | |
| </li> | |
| </ul> | |
| <div class="mt-8"> | |
| <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">Подобрать линзы</a> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg text-center"> | |
| <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="Линзы" class="h-32 object-contain mx-auto mb-3"> | |
| <h4 class="font-bold">Ежедневные</h4> | |
| <p class="text-sm text-gray-600">от 1 200 ₽</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg text-center"> | |
| <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="Линзы" class="h-32 object-contain mx-auto mb-3"> | |
| <h4 class="font-bold">Двухнедельные</h4> | |
| <p class="text-sm text-gray-600">от 900 ₽</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg text-center"> | |
| <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="Линзы" class="h-32 object-contain mx-auto mb-3"> | |
| <h4 class="font-bold">Месячные</h4> | |
| <p class="text-sm text-gray-600">от 1 500 ₽</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg text-center"> | |
| <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="Линзы" class="h-32 object-contain mx-auto mb-3"> | |
| <h4 class="font-bold">Цветные</h4> | |
| <p class="text-sm text-gray-600">от 1 800 ₽</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-16 bg-blue-600 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Наши услуги</h2> | |
| <p class="max-w-2xl mx-auto">Полный спектр услуг для вашего зрения</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg"> | |
| <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-eye text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Проверка зрения</h3> | |
| <p>Профессиональная диагностика на современном оборудовании с точными результатами</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg"> | |
| <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-glasses text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Подбор очков</h3> | |
| <p>Поможем выбрать идеальные очки с учетом вашего зрения, формы лица и стиля</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg"> | |
| <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-user-md text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Консультация офтальмолога</h3> | |
| <p>Профессиональные консультации по вопросам здоровья глаз и профилактике заболеваний</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg"> | |
| <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-cogs text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Ремонт очков</h3> | |
| <p>Качественный ремонт и регулировка оправ любой сложности</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg"> | |
| <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-sun text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Солнцезащитные очки</h3> | |
| <p>Широкий выбор солнцезащитных очков с UV-защитой от ведущих брендов</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg"> | |
| <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-child text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Детская оптика</h3> | |
| <p>Специальные детские оправы и линзы для комфортного ношения</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Articles Section --> | |
| <section id="articles" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Полезные статьи</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Актуальная информация о здоровье глаз и уходе за очками</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Article 1 --> | |
| <div class="article-card bg-white rounded-lg overflow-hidden shadow-sm"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1505576399279-565b52d4ac71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Статья" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-sm text-blue-600">Здоровье глаз</span> | |
| <h3 class="text-xl font-bold my-2">Как сохранить зрение при работе за компьютером</h3> | |
| <p class="text-gray-600 mb-4">Простые и эффективные способы снизить нагрузку на глаза при длительной работе за монитором...</p> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> | |
| Читать далее | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Article 2 --> | |
| <div class="article-card bg-white rounded-lg overflow-hidden shadow-sm"> | |
| <div class="h-48 overflow-hidden"> | |
| <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-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-sm text-blue-600">Уход за очками</span> | |
| <h3 class="text-xl font-bold my-2">Как правильно ухаживать за очками</h3> | |
| <p class="text-gray-600 mb-4">Рекомендации по очистке и хранению очков, которые помогут продлить их срок службы...</p> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> | |
| Читать далее | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Article 3 --> | |
| <div class="article-card bg-white rounded-lg overflow-hidden shadow-sm"> | |
| <div class="h-48 overflow-hidden"> | |
| <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="Статья" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-sm text-blue-600">Контактные линзы</span> | |
| <h3 class="text-xl font-bold my-2">Как правильно надевать и снимать контактные линзы</h3> | |
| <p class="text-gray-600 mb-4">Пошаговая инструкция для новичков и полезные советы по использованию линз...</p> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> | |
| Читать далее | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="#" class="inline-block border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-6 py-2 rounded-lg font-medium transition duration-300">Все статьи</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Section --> | |
| <section id="gallery" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Наша галерея</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Фотографии нашего салона и довольных клиентов</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="gallery-item"> | |
| <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Галерея" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="gallery-item"> | |
| <img src="https://images.unsplash.com/photo-1589156280159-27698a70f0de?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Галерея" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="gallery-item"> | |
| <img src="https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Галерея" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="gallery-item"> | |
| <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Галерея" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="gallery-item"> | |
| <img src="https://images.unsplash.com/photo-1589156280159-27698a70f0de?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Галерея" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="gallery-item"> | |
| <img src="https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Галерея" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="gallery-item"> | |
| <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Галерея" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="gallery-item"> | |
| <img src="https://images.unsplash.com/photo-1589156280159-27698a70f0de?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Галерея" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-blue-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Отзывы наших клиентов</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Что говорят о нас наши клиенты</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Клиент" class="w-full h-full object-cover"> | |
| </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">"Очень профессиональный подход! Подобрали идеальные очки, которые мне очень идут. Проверка зрения была точной и комфортной. Рекомендую!"</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Клиент" class="w-full h-full object-cover"> | |
| </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">"Пользуюсь контактными линзами от Optica Opton уже несколько лет. Всегда отличное качество и быстрая доставка. Персонал очень вежливый и компетентный."</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Клиент" class="w-full h-full object-cover"> | |
| </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-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Привела ребенка на проверку зрения. Врач нашел подход даже к моему непоседливому сыну. Очки подобрали быстро, а через месяц зрение улучшилось. Спасибо!"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contacts Section --> | |
| <section id="contacts" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Контакты</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Мы всегда рады видеть вас в нашем салоне</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold mb-3">Наш адрес</h3> | |
| <p class="text-gray-600"><i class="fas fa-map-marker-alt text-blue-600 mr-2"></i> г. Москва, ул. Оптическая, д. 15</p> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold mb-3">Часы работы</h3> | |
| <p class="text-gray-600"><i class="fas fa-clock text-blue-600 mr-2"></i> Пн-Пт: 10:00 - 20:00</p> | |
| <p class="text-gray-600"><i class="fas fa-clock text-blue-600 mr-2"></i> Сб-Вс: 11:00 - 18:00</p> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold mb-3">Контакты</h3> | |
| <p class="text-gray-600"><i class="fas fa-phone text-blue-600 mr-2"></i> +7 (495) 123-45-67</p> | |
| <p class="text-gray-600"><i class="fas fa-envelope text-blue-600 mr-2"></i> info@optica-opton.ru</p> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-3">Мы в соцсетях</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fab fa-vk"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fab fa-telegram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-gray-50 p-6 rounded-lg h-full"> | |
| <h3 class="text-xl font-bold mb-4">Записаться на прием</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-700 mb-2">Ваше имя</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="phone" class="block text-gray-700 mb-2">Телефон</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="date" class="block text-gray-700 mb-2">Дата приема</label> | |
| <input type="date" id="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="service" class="block text-gray-700 mb-2">Услуга</label> | |
| <select id="service" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"> | |
| <option>Проверка зрения</option> | |
| <option>Подбор очков</option> | |
| <option>Консультация офтальмолога</option> | |
| <option>Подбор контактных линз</option> | |
| <option>Ремонт очков</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">Записаться</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 rounded-lg overflow-hidden"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2245.373789919745!2d37.615310715930474!3d55.75202398055314!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54a5a738fa419%3A0x7c347d506f52311f!2z0JrRgNCw0YHQvdCw0Y8g0YPQuy4sIDE1LCDQnNC-0YHQutCy0LAsINCc0L7RgdC60LLQsCwgMTI1MDQ3!5e0!3m2!1sru!2sru!4v1623750000000!5m2!1sru!2sru" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center"> | |
| <i class="fas fa-glasses text-sm"></i> | |
| </div> | |
| <span class="logo-text text-xl">Optica Opton</span> | |
| </div> | |
| <p class="text-gray-400">Мы заботимся о вашем зрении с 2010 года. Качественные очки и линзы по доступным ценам.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Меню</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-white">Главная</a></li> | |
| <li><a href="#products" class="text-gray-400 hover:text-white">Очки</a></li> | |
| <li><a href="#lenses" class="text-gray-400 hover:text-white">Линзы</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-white">Услуги</a></li> | |
| <li><a href="#articles" class="text-gray-400 hover:text-white">Статьи</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Информация</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">О компании</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Доставка и оплата</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Гарантии</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Отзывы</a></li> | |
| <li><a href="#contacts" class="text-gray-400 hover:text-white">Контакты</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Подписаться на новости</h3> | |
| <p class="text-gray-400 mb-4">Будьте в курсе акций и новинок</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Ваш email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full"> | |
| <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm">© 2023 Optica Opton. Все права защищены.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-cc-visa text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-cc-mastercard text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-cc-paypal text-xl"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').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'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Form submission | |
| const contactForm = document.querySelector('form'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| alert('Спасибо! Ваша заявка принята. Мы свяжемся с вами в ближайшее время.'); | |
| this.reset(); | |
| }); | |
| } | |
| </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=User48320479/optonos" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |