|
|
<!DOCTYPE html> |
|
|
<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=Montserrat:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #6b82ff 0%, #3a56e8 100%); |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
color: #3a56e8; |
|
|
} |
|
|
|
|
|
.product-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.input-focus:focus { |
|
|
border-color: #3a56e8; |
|
|
box-shadow: 0 0 0 3px rgba(58, 86, 232, 0.2); |
|
|
} |
|
|
|
|
|
.transition-all { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<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"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-glasses text-3xl text-blue-600"></i> |
|
|
<span class="text-xl font-bold text-gray-800">Optica Opton</span> |
|
|
</div> |
|
|
|
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="nav-link text-gray-600 hover:text-blue-600 font-medium transition-all">Главная</a> |
|
|
<a href="#services" class="nav-link text-gray-600 hover:text-blue-600 font-medium transition-all">Услуги</a> |
|
|
<a href="#products" class="nav-link text-gray-600 hover:text-blue-600 font-medium transition-all">Товары</a> |
|
|
<a href="#about" class="nav-link text-gray-600 hover:text-blue-600 font-medium transition-all">О нас</a> |
|
|
<a href="#contacts" class="nav-link text-gray-600 hover:text-blue-600 font-medium transition-all">Контакты</a> |
|
|
</nav> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<a href="tel:+74951234567" class="hidden md:flex items-center text-gray-700 hover:text-blue-600"> |
|
|
<i class="fas fa-phone-alt mr-2"></i> |
|
|
<span>+7 (495) 123-45-67</span> |
|
|
</a> |
|
|
<button class="md:hidden text-gray-600" id="mobile-menu-button"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden hidden bg-white py-4 px-4 shadow-md" id="mobile-menu"> |
|
|
<div class="flex flex-col space-y-3"> |
|
|
<a href="#home" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Главная</a> |
|
|
<a href="#services" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Услуги</a> |
|
|
<a href="#products" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Товары</a> |
|
|
<a href="#about" class="nav-link text-gray-600 hover:text-blue-600 font-medium">О нас</a> |
|
|
<a href="#contacts" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Контакты</a> |
|
|
<a href="tel:+74951234567" class="flex items-center text-gray-700 hover:text-blue-600 pt-2 border-t"> |
|
|
<i class="fas fa-phone-alt mr-2"></i> |
|
|
<span>+7 (495) 123-45-67</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<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"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6">Современная оптика в Москве</h1> |
|
|
<p class="text-xl mb-8">Качественные очки, линзы и аксессуары с профессиональным подходом к каждому клиенту.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> |
|
|
<a href="#products" class="bg-white text-blue-600 font-bold py-3 px-6 rounded-lg text-center hover:bg-gray-100 transition-all"> |
|
|
Каталог товаров |
|
|
</a> |
|
|
<a href="#contacts" class="border-2 border-white text-white font-bold py-3 px-6 rounded-lg text-center hover:bg-white hover:text-blue-600 transition-all"> |
|
|
Записаться на прием |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<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 max-w-full h-auto"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Наши услуги</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all"> |
|
|
<div class="text-blue-600 mb-4"> |
|
|
<i class="fas fa-eye text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-800">Проверка зрения</h3> |
|
|
<p class="text-gray-600">Профессиональная диагностика зрения на современном оборудовании с точной подборкой линз.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all"> |
|
|
<div class="text-blue-600 mb-4"> |
|
|
<i class="fas fa-glasses text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-800">Подбор очков</h3> |
|
|
<p class="text-gray-600">Индивидуальный подбор оправ и линз с учетом ваших потребностей и стиля жизни.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all"> |
|
|
<div class="text-blue-600 mb-4"> |
|
|
<i class="fas fa-sun text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-800">Солнцезащитные очки</h3> |
|
|
<p class="text-gray-600">Широкий выбор солнцезащитных очков от ведущих мировых брендов с защитой от UV-излучения.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all"> |
|
|
<div class="text-blue-600 mb-4"> |
|
|
<i class="fas fa-clock text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-800">Срочное изготовление</h3> |
|
|
<p class="text-gray-600">Изготовление очков в течение 1-2 дней с использованием современных технологий.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all"> |
|
|
<div class="text-blue-600 mb-4"> |
|
|
<i class="fas fa-user-md text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-800">Консультация офтальмолога</h3> |
|
|
<p class="text-gray-600">Профессиональные консультации по вопросам здоровья глаз и профилактике заболеваний.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all"> |
|
|
<div class="text-blue-600 mb-4"> |
|
|
<i class="fas fa-tools text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3 text-gray-800">Ремонт очков</h3> |
|
|
<p class="text-gray-600">Качественный ремонт и регулировка оправ любой сложности с гарантией на работу.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="products" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Наши товары</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-md product-card transition-all"> |
|
|
<div class="relative overflow-hidden h-64"> |
|
|
<img src="https://images.unsplash.com/photo-1591073113125-e46713c829ed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Очки Ray-Ban" class="w-full h-full object-cover"> |
|
|
<div class="absolute top-2 right-2 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
NEW |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold text-lg mb-1 text-gray-800">Ray-Ban Aviator</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Классические авиаторы с поляризационными линзами</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="font-bold text-gray-800">12,990 ₽</span> |
|
|
<button class="bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 transition-all"> |
|
|
<i class="fas fa-shopping-cart"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-md product-card transition-all"> |
|
|
<div class="relative overflow-hidden h-64"> |
|
|
<img src="https://images.unsplash.com/photo-1511499767150-a48a237f0083?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" |
|
|
alt="Очки Oakley" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold text-lg mb-1 text-gray-800">Oakley Holbrook</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Спортивные очки с защитой от ультрафиолета</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="font-bold text-gray-800">14,500 ₽</span> |
|
|
<button class="bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 transition-all"> |
|
|
<i class="fas fa-shopping-cart"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-md product-card transition-all"> |
|
|
<div class="relative overflow-hidden h-64"> |
|
|
<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="Очки Prada" class="w-full h-full object-cover"> |
|
|
<div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
SALE |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold text-lg mb-1 text-gray-800">Prada PR 16ZS</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Стильные очки с градиентными линзами</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<span class="text-red-500 font-bold">18,990 ₽</span> |
|
|
<span class="text-gray-400 text-sm line-through ml-2">22,500 ₽</span> |
|
|
</div> |
|
|
<button class="bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 transition-all"> |
|
|
<i class="fas fa-shopping-cart"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-md product-card transition-all"> |
|
|
<div class="relative overflow-hidden h-64"> |
|
|
<img src="https://images.unsplash.com/photo-1572635196234-14e3d0bff39d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Очки Gucci" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold text-lg mb-1 text-gray-800">Gucci GG0397S</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Элегантные очки с логотипом Gucci</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="font-bold text-gray-800">23,700 ₽</span> |
|
|
<button class="bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 transition-all"> |
|
|
<i class="fas fa-shopping-cart"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-10"> |
|
|
<a href="#" class="inline-block border-2 border-blue-600 text-blue-600 font-bold py-3 px-8 rounded-lg hover:bg-blue-600 hover:text-white transition-all"> |
|
|
Смотреть все товары |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-16 bg-white"> |
|
|
<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-10"> |
|
|
<h2 class="text-3xl font-bold mb-6 text-gray-800">О нашей оптике</h2> |
|
|
<p class="text-gray-600 mb-4">Optica Opton - это современный оптический салон, работающий на рынке с 2010 года. Мы предлагаем широкий ассортимент очков, линз и аксессуаров от ведущих мировых производителей.</p> |
|
|
<p class="text-gray-600 mb-6">Наши специалисты имеют многолетний опыт работы и регулярно проходят обучение, чтобы предложить вам самые современные решения для коррекции зрения.</p> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-check text-blue-600"></i> |
|
|
</div> |
|
|
<span class="text-gray-700">Гарантия качества</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-check text-blue-600"></i> |
|
|
</div> |
|
|
<span class="text-gray-700">Опытные специалисты</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-check text-blue-600"></i> |
|
|
</div> |
|
|
<span class="text-gray-700">Современное оборудование</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-check text-blue-600"></i> |
|
|
</div> |
|
|
<span class="text-gray-700">Индивидуальный подход</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<a href="#contacts" class="inline-block bg-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-700 transition-all"> |
|
|
Записаться на прием |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1571622840901-92ae1385a6b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Наш салон" class="rounded-lg shadow-lg w-full"> |
|
|
<div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-lg shadow-lg hidden md:block"> |
|
|
<div class="text-center"> |
|
|
<div class="text-3xl font-bold text-blue-600">10+</div> |
|
|
<div class="text-gray-600">лет на рынке</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Отзывы наших клиентов</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 mr-2"> |
|
|
<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> |
|
|
<p class="text-gray-600 mb-4">"Отличный сервис и профессиональный подход! Подобрали идеальные очки, которые мне очень идут. Спасибо!"</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Анна" class="w-10 h-10 rounded-full mr-3"> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Анна К.</h4> |
|
|
<p class="text-sm text-gray-500">Клиент с 2018 года</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 mr-2"> |
|
|
<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> |
|
|
<p class="text-gray-600 mb-4">"Очень доволен качеством линз и обслуживанием. Очки сделали быстро, все идеально подошло. Рекомендую!"</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Дмитрий" class="w-10 h-10 rounded-full mr-3"> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Дмитрий С.</h4> |
|
|
<p class="text-sm text-gray-500">Клиент с 2020 года</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 mr-2"> |
|
|
<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> |
|
|
<p class="text-gray-600 mb-4">"Приятная атмосфера и внимательные специалисты. Подобрали солнцезащитные очки с диоптриями, теперь могу комфортно водить машину."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Елена" class="w-10 h-10 rounded-full mr-3"> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Елена В.</h4> |
|
|
<p class="text-sm text-gray-500">Клиент с 2021 года</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contacts" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Контакты</h2> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row"> |
|
|
<div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> |
|
|
<h3 class="text-xl font-semibold mb-4 text-gray-800">Наши контакты</h3> |
|
|
|
|
|
<div class="space-y-4 mb-8"> |
|
|
<div class="flex items-start"> |
|
|
<div class="text-blue-600 mr-3 mt-1"> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Адрес</h4> |
|
|
<p class="text-gray-600">г. Москва, ул. Оптическая, д. 15</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="text-blue-600 mr-3 mt-1"> |
|
|
<i class="fas fa-phone-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Телефон</h4> |
|
|
<p class="text-gray-600">+7 (495) 123-45-67</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="text-blue-600 mr-3 mt-1"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Email</h4> |
|
|
<p class="text-gray-600">info@optica-opton.ru</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="text-blue-600 mr-3 mt-1"> |
|
|
<i class="fas fa-clock"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Часы работы</h4> |
|
|
<p class="text-gray-600">Пн-Пт: 10:00 - 20:00<br>Сб-Вс: 11:00 - 18:00</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-xl font-semibold mb-4 text-gray-800">Мы в социальных сетях</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition-all"> |
|
|
<i class="fab fa-vk"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-blue-400 text-white p-3 rounded-full hover:bg-blue-500 transition-all"> |
|
|
<i class="fab fa-telegram"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-pink-600 text-white p-3 rounded-full hover:bg-pink-700 transition-all"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-green-600 text-white p-3 rounded-full hover:bg-green-700 transition-all"> |
|
|
<i class="fab fa-whatsapp"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2"> |
|
|
<h3 class="text-xl font-semibold mb-4 text-gray-800">Записаться на прием</h3> |
|
|
<form class="space-y-4"> |
|
|
<div> |
|
|
<label for="name" class="block text-gray-700 mb-1">Ваше имя</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-2 border rounded-lg input-focus transition-all" placeholder="Иван Иванов"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="phone" class="block text-gray-700 mb-1">Телефон</label> |
|
|
<input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg input-focus transition-all" placeholder="+7 (999) 123-45-67"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="service" class="block text-gray-700 mb-1">Услуга</label> |
|
|
<select id="service" class="w-full px-4 py-2 border rounded-lg input-focus transition-all"> |
|
|
<option value="">Выберите услугу</option> |
|
|
<option value="checkup">Проверка зрения</option> |
|
|
<option value="glasses">Подбор очков</option> |
|
|
<option value="sunglasses">Солнцезащитные очки</option> |
|
|
<option value="consult">Консультация офтальмолога</option> |
|
|
<option value="repair">Ремонт очков</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="date" class="block text-gray-700 mb-1">Дата приема</label> |
|
|
<input type="date" id="date" class="w-full px-4 py-2 border rounded-lg input-focus transition-all"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="message" class="block text-gray-700 mb-1">Комментарий</label> |
|
|
<textarea id="message" rows="3" class="w-full px-4 py-2 border rounded-lg input-focus transition-all" placeholder="Ваши пожелания..."></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-700 transition-all"> |
|
|
Отправить заявку |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="h-96 w-full"> |
|
|
<iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a&source=constructor" |
|
|
width="100%" height="100%" frameborder="0" class="block"></iframe> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-10"> |
|
|
<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"> |
|
|
<i class="fas fa-glasses text-2xl text-blue-400"></i> |
|
|
<span class="text-xl font-bold">Optica Opton</span> |
|
|
</div> |
|
|
<p class="text-gray-400">Современная оптика в Москве с 2010 года. Качество, стиль и забота о вашем зрении.</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-semibold text-lg mb-4">Меню</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#home" class="text-gray-400 hover:text-white transition-all">Главная</a></li> |
|
|
<li><a href="#services" class="text-gray-400 hover:text-white transition-all">Услуги</a></li> |
|
|
<li><a href="#products" class="text-gray-400 hover:text-white transition-all">Товары</a></li> |
|
|
<li><a href="#about" class="text-gray-400 hover:text-white transition-all">О нас</a></li> |
|
|
<li><a href="#contacts" class="text-gray-400 hover:text-white transition-all">Контакты</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-semibold text-lg mb-4">Контакты</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-map-marker-alt text-gray-400 mr-2 mt-1"></i> |
|
|
<span class="text-gray-400">г. Москва, ул. Оптическая, д. 15</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 (495) 123-45-67</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-envelope text-gray-400 mr-2"></i> |
|
|
<span class="text-gray-400">info@optica-opton.ru</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-semibold text-lg mb-4">Подписаться</h4> |
|
|
<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-800 w-full"> |
|
|
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition-all"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</form> |
|
|
<div class="flex space-x-4 mt-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-all"> |
|
|
<i class="fab fa-vk"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-all"> |
|
|
<i class="fab fa-telegram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-all"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-700 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Optica Opton. Все права защищены.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm transition-all">Политика конфиденциальности</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm transition-all">Пользовательское соглашение</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
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' |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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=Greats/optical" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
