|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>OptiVision - Премиальная оптика для вашего зрения</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> |
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-10px); } |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, rgba(56, 182, 255, 0.9) 0%, rgba(124, 81, 255, 0.9) 100%); |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -5px; |
|
|
left: 0; |
|
|
background-color: #4f46e5; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover:after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.gallery-item { |
|
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
|
|
|
.gallery-item:hover { |
|
|
transform: scale(1.05) rotateY(5deg); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.article-card { |
|
|
transition: all 0.4s ease; |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
.article-card:hover { |
|
|
transform: translateY(-10px) rotateX(5deg); |
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); |
|
|
} |
|
|
|
|
|
.glasses-logo { |
|
|
position: relative; |
|
|
width: 50px; |
|
|
height: 30px; |
|
|
} |
|
|
|
|
|
.glasses-logo:before, .glasses-logo:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border: 3px solid #4f46e5; |
|
|
border-radius: 50%; |
|
|
top: 0; |
|
|
} |
|
|
|
|
|
.glasses-logo:before { |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
.glasses-logo:after { |
|
|
right: 0; |
|
|
} |
|
|
|
|
|
.glasses-logo span { |
|
|
position: absolute; |
|
|
width: 10px; |
|
|
height: 3px; |
|
|
background: #4f46e5; |
|
|
top: 8px; |
|
|
left: 20px; |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.shine-effect { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.shine-effect:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -60%; |
|
|
width: 40px; |
|
|
height: 200%; |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
transform: rotate(30deg); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.shine-effect:hover:after { |
|
|
left: 120%; |
|
|
} |
|
|
|
|
|
.transition-all { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.parallax-bg { |
|
|
background-attachment: fixed; |
|
|
background-position: center; |
|
|
background-repeat: no-repeat; |
|
|
background-size: cover; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans bg-gray-50"> |
|
|
|
|
|
<header class="bg-white shadow-sm sticky top-0 z-50 backdrop-blur-md bg-opacity-90"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="glasses-logo mr-3"></div> |
|
|
<h1 class="text-2xl font-bold text-gray-800">Opti<span class="text-indigo-600">Vision</span></h1> |
|
|
</div> |
|
|
|
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="nav-link transition-all text-gray-700 font-medium hover:text-indigo-600">Главная</a> |
|
|
<a href="#gallery" class="nav-link transition-all text-gray-700 font-medium hover:text-indigo-600">Галерея</a> |
|
|
<a href="#articles" class="nav-link transition-all text-gray-700 font-medium hover:text-indigo-600">Статьи</a> |
|
|
<a href="#contact" class="nav-link transition-all text-gray-700 font-medium hover:text-indigo-600">Контакты</a> |
|
|
</nav> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="md:hidden text-gray-700"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
<button class="hidden md:block bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-6 py-2 rounded-full hover:from-indigo-700 hover:to-purple-700 transition-all shadow-lg shine-effect"> |
|
|
Записаться |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section id="home" class="hero-gradient text-white py-20 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-black opacity-20"></div> |
|
|
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center relative z-10"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Современная оптика <br>для вашего комфорта</h2> |
|
|
<p class="text-xl mb-8 opacity-90">Индивидуальный подбор очков и линз с использованием новейших технологий и материалов.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="bg-white text-indigo-600 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-all shadow-lg shine-effect"> |
|
|
Подобрать очки |
|
|
</button> |
|
|
<button class="border-2 border-white text-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-indigo-600 transition-all shadow-lg"> |
|
|
Узнать больше |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center floating"> |
|
|
<img src="https://images.unsplash.com/photo-1505576399279-565b52d4ac71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" |
|
|
alt="Стильные очки" |
|
|
class="rounded-xl shadow-2xl max-w-md w-full transform rotate-3"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-center mb-4 text-gray-800 relative inline-block"> |
|
|
<span class="relative z-10">Наши услуги</span> |
|
|
<span class="absolute bottom-0 left-0 w-full h-2 bg-indigo-100 z-0 opacity-70" style="bottom: 5px;"></span> |
|
|
</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-gray-50 p-8 rounded-xl hover:shadow-lg transition-all transform hover:-translate-y-2 border border-gray-100"> |
|
|
<div class="w-16 h-16 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto"> |
|
|
<i class="fas fa-glasses text-indigo-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-gray-800 text-center">Подбор очков</h3> |
|
|
<p class="text-gray-600 text-center">Профессиональный подбор очков с учётом вашего стиля, формы лица и медицинских показаний.</p> |
|
|
<div class="text-center mt-4"> |
|
|
<a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition-all"> |
|
|
Подробнее <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all transform hover:-translate-y-2 border border-gray-100"> |
|
|
<div class="w-16 h-16 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto"> |
|
|
<i class="fas fa-eye text-indigo-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-gray-800 text-center">Диагностика зрения</h3> |
|
|
<p class="text-gray-600 text-center">Точная диагностика зрения с использованием современного оборудования.</p> |
|
|
<div class="text-center mt-4"> |
|
|
<a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition-all"> |
|
|
Подробнее <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-all transform hover:-translate-y-2 border border-gray-100"> |
|
|
<div class="w-16 h-16 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto"> |
|
|
<i class="fas fa-sun text-indigo-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-gray-800 text-center">Солнцезащитные очки</h3> |
|
|
<p class="text-gray-600 text-center">Широкий выбор солнцезащитных очков от ведущих мировых брендов.</p> |
|
|
<div class="text-center mt-4"> |
|
|
<a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition-all"> |
|
|
Подробнее <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="gallery" class="py-16 bg-gray-50 parallax-bg" style="background-image: url('https://images.unsplash.com/photo-1559599101-f09722fb4948?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1350&q=80');"> |
|
|
<div class="absolute inset-0 bg-indigo-900 opacity-80"></div> |
|
|
<div class="container mx-auto px-4 relative z-10"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-white">Наша галерея</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
<div class="gallery-item overflow-hidden rounded-xl bg-white shadow-md"> |
|
|
<div class="relative overflow-hidden h-64"> |
|
|
<img src="https://images.unsplash.com/photo-1556306535-0f09a537f0a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" |
|
|
alt="Очки 1" |
|
|
class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-2">Классическая коллекция</h3> |
|
|
<p class="text-gray-600">Традиционные формы с современными материалами</p> |
|
|
<div class="mt-3 flex justify-between items-center"> |
|
|
<span class="text-indigo-600 font-medium">от 5 990 ₽</span> |
|
|
<button class="text-sm bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full hover:bg-indigo-200 transition-all"> |
|
|
Подробнее |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="gallery-item overflow-hidden rounded-xl bg-white shadow-md"> |
|
|
<div class="relative overflow-hidden h-64"> |
|
|
<img src="https://images.unsplash.com/photo-1559599101-f09722fb4948?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" |
|
|
alt="Очки 2" |
|
|
class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-2">Спортивные модели</h3> |
|
|
<p class="text-gray-600">Лёгкие и прочные очки для активного образа жизни</p> |
|
|
<div class="mt-3 flex justify-between items-center"> |
|
|
<span class="text-indigo-600 font-medium">от 7 490 ₽</span> |
|
|
<button class="text-sm bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full hover:bg-indigo-200 transition-all"> |
|
|
Подробнее |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="gallery-item overflow-hidden rounded-xl bg-white shadow-md"> |
|
|
<div class="relative overflow-hidden h-64"> |
|
|
<img src="https://images.unsplash.com/photo-1591073113125-e46713c829bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" |
|
|
alt="Очки 3" |
|
|
class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-2">Премиум сегмент</h3> |
|
|
<p class="text-gray-600">Эксклюзивные модели ручной работы</p> |
|
|
<div class="mt-3 flex justify-between items-center"> |
|
|
<span class="text-indigo-600 font-medium">от 15 990 ₽</span> |
|
|
<button class="text-sm bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full hover:bg-indigo-200 transition-all"> |
|
|
Подробнее |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-10"> |
|
|
<button class="bg-white text-indigo-600 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-all shadow-lg shine-effect"> |
|
|
Посмотреть всю коллекцию |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="articles" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-center mb-4 text-gray-800 relative inline-block"> |
|
|
<span class="relative z-10">Полезные статьи</span> |
|
|
<span class="absolute bottom-0 left-0 w-full h-2 bg-indigo-100 z-0 opacity-70" style="bottom: 5px;"></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"> |
|
|
<div class="article-card bg-gray-50 rounded-xl overflow-hidden shadow-md border border-gray-100"> |
|
|
<div class="relative overflow-hidden h-48"> |
|
|
<img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" |
|
|
alt="Статья 1" |
|
|
class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-3"> |
|
|
<span><i class="far fa-calendar mr-1"></i> 15 июня 2023</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span><i class="far fa-clock mr-1"></i> 5 мин</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-gray-800">Как правильно выбрать очки по форме лица</h3> |
|
|
<p class="text-gray-600 mb-4">Полное руководство по подбору оправы, которая подчеркнёт ваши лучшие черты и скроет недостатки.</p> |
|
|
<a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition-all"> |
|
|
Читать далее <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="article-card bg-gray-50 rounded-xl overflow-hidden shadow-md border border-gray-100"> |
|
|
<div class="relative overflow-hidden h-48"> |
|
|
<img src="https://images.unsplash.com/photo-1508514177221-188e1eaf0883?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" |
|
|
alt="Статья 2" |
|
|
class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-3"> |
|
|
<span><i class="far fa-calendar mr-1"></i> 2 июня 2023</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span><i class="far fa-clock mr-1"></i> 7 мин</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-gray-800">Линзы нового поколения: что предлагает рынок</h3> |
|
|
<p class="text-gray-600 mb-4">Обзор современных технологий в производстве линз - от фотохромных до мультифокальных.</p> |
|
|
<a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition-all"> |
|
|
Читать далее <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="article-card bg-gray-50 rounded-xl overflow-hidden shadow-md border border-gray-100"> |
|
|
<div class="relative overflow-hidden h-48"> |
|
|
<img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" |
|
|
alt="Статья 3" |
|
|
class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-3"> |
|
|
<span><i class="far fa-calendar mr-1"></i> 20 мая 2023</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span><i class="far fa-clock mr-1"></i> 4 мин</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-gray-800">Уход за очками: как продлить срок службы</h3> |
|
|
<p class="text-gray-600 mb-4">Простые правила ухода, которые сохранят ваши очки в идеальном состоянии на долгие годы.</p> |
|
|
<a href="#" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800 transition-all"> |
|
|
Читать далее <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-10"> |
|
|
<button class="border-2 border-indigo-600 text-indigo-600 px-6 py-3 rounded-full font-medium hover:bg-indigo-600 hover:text-white transition-all shadow-lg"> |
|
|
Все статьи |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-indigo-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-center mb-4 text-gray-800 relative inline-block"> |
|
|
<span class="relative z-10">Отзывы клиентов</span> |
|
|
<span class="absolute bottom-0 left-0 w-full h-2 bg-indigo-100 z-0 opacity-70" style="bottom: 5px;"></span> |
|
|
</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-8 rounded-xl shadow-sm transform hover:scale-105 transition-all"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full flex items-center justify-center text-indigo-600 font-bold text-xl mr-3"> |
|
|
АН |
|
|
</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-8 rounded-xl shadow-sm transform hover:scale-105 transition-all"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full flex items-center justify-center text-indigo-600 font-bold text-xl mr-3"> |
|
|
ИК |
|
|
</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">"Отличный сервис и профессиональный подход. Впервые за 10 лет ношения очков почувствовал настоящий комфорт."</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-sm transform hover:scale-105 transition-all"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full flex items-center justify-center text-indigo-600 font-bold text-xl mr-3"> |
|
|
ОС |
|
|
</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> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 bg-gray-800 text-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h2 class="text-3xl font-bold mb-6">Свяжитесь с нами</h2> |
|
|
<p class="text-gray-300 mb-8">Мы всегда рады ответить на ваши вопросы и помочь с выбором.</p> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-map-marker-alt text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Адрес</h4> |
|
|
<p class="text-gray-300">г. Москва, ул. Оптическая, 15</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-phone-alt text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Телефон</h4> |
|
|
<p class="text-gray-300">+7 (495) 123-45-67</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-envelope text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Email</h4> |
|
|
<p class="text-gray-300">info@optivision.ru</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-clock text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Часы работы</h4> |
|
|
<p class="text-gray-300">Пн-Пт: 10:00 - 20:00<br>Сб-Вс: 11:00 - 18:00</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 flex space-x-4"> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-indigo-600 transition-all transform hover:-translate-y-1"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-indigo-600 transition-all transform hover:-translate-y-1"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-indigo-600 transition-all transform hover:-translate-y-1"> |
|
|
<i class="fab fa-vk"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-indigo-600 transition-all transform hover:-translate-y-1"> |
|
|
<i class="fab fa-telegram-plane"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2 md:pl-10"> |
|
|
<form class="bg-gray-900 p-8 rounded-xl shadow-xl"> |
|
|
<h3 class="text-xl font-bold mb-6">Напишите нам</h3> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="name" class="block text-gray-300 mb-2">Ваше имя</label> |
|
|
<input type="text" id="name" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="email" class="block text-gray-300 mb-2">Email</label> |
|
|
<input type="email" id="email" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="phone" class="block text-gray-300 mb-2">Телефон</label> |
|
|
<input type="tel" id="phone" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="message" class="block text-gray-300 mb-2">Сообщение</label> |
|
|
<textarea id="message" rows="4" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-700 hover:to-purple-700 transition-all shadow-lg shine-effect"> |
|
|
Отправить сообщение |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-gray-400 py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center mb-4 md:mb-0"> |
|
|
<div class="glasses-logo mr-3"></div> |
|
|
<h2 class="text-xl font-bold text-white">Opti<span class="text-indigo-400">Vision</span></h2> |
|
|
</div> |
|
|
|
|
|
<div class="text-sm text-center md:text-left mb-4 md:mb-0"> |
|
|
<p>© 2023 OptiVision. Все права защищены.</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="hover:text-white transition-all">Политика конфиденциальности</a> |
|
|
<a href="#" class="hover:text-white transition-all">Условия использования</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('.md\\:hidden').addEventListener('click', function() { |
|
|
alert('Мобильное меню будет реализовано в полной версии сайта'); |
|
|
}); |
|
|
|
|
|
|
|
|
const observerOptions = { |
|
|
threshold: 0.1 |
|
|
}; |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('animate-fadeIn'); |
|
|
} |
|
|
}); |
|
|
}, observerOptions); |
|
|
|
|
|
document.querySelectorAll('.gallery-item, .article-card, [class*="transform"]').forEach(el => { |
|
|
observer.observe(el); |
|
|
}); |
|
|
</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=ANTIMOLL/opvision" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
