|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AuraVision - Очки для видения ауры</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"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
background-color: #0f0e17; |
|
|
color: #fffffe; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.title-font { |
|
|
font-family: 'Playfair Display', serif; |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #0f0e17 0%, #2e2f3e 100%); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.hero-gradient::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: radial-gradient(circle, rgba(110, 142, 251, 0.1) 0%, rgba(0,0,0,0) 70%); |
|
|
animation: rotate 20s linear infinite; |
|
|
z-index: 0; |
|
|
} |
|
|
|
|
|
.glass-card { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
backdrop-filter: blur(12px); |
|
|
border-radius: 16px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.glass-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.3); |
|
|
border-color: rgba(167, 119, 227, 0.3); |
|
|
} |
|
|
|
|
|
.aura-pulse { |
|
|
animation: pulse 6s infinite alternate, float 5s ease-in-out infinite; |
|
|
transform-style: preserve-3d; |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
box-shadow: 0 0 0 0 rgba(110, 142, 251, 0.4), 0 0 50px rgba(167, 119, 227, 0.2); |
|
|
} |
|
|
70% { |
|
|
box-shadow: 0 0 0 20px rgba(110, 142, 251, 0), 0 0 80px rgba(167, 119, 227, 0.4); |
|
|
} |
|
|
100% { |
|
|
box-shadow: 0 0 0 0 rgba(110, 142, 251, 0), 0 0 100px rgba(167, 119, 227, 0.2); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0%, 100% { |
|
|
transform: translateY(0) rotateY(0deg); |
|
|
} |
|
|
50% { |
|
|
transform: translateY(-20px) rotateY(5deg); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes rotate { |
|
|
from { |
|
|
transform: rotate(0deg); |
|
|
} |
|
|
to { |
|
|
transform: rotate(360deg); |
|
|
} |
|
|
} |
|
|
|
|
|
.product-card { |
|
|
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); |
|
|
transform-style: preserve-3d; |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
.product-card:hover { |
|
|
transform: translateY(-10px) rotateX(5deg); |
|
|
box-shadow: 0 15px 30px rgba(0,0,0,0.4); |
|
|
} |
|
|
|
|
|
.aura-color { |
|
|
background: linear-gradient(45deg, #6e8efb, #a777e3, #ff8e7d); |
|
|
background-size: 200% 200%; |
|
|
animation: gradient 8s ease infinite; |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
@keyframes gradient { |
|
|
0% { |
|
|
background-position: 0% 50%; |
|
|
} |
|
|
50% { |
|
|
background-position: 100% 50%; |
|
|
} |
|
|
100% { |
|
|
background-position: 0% 50%; |
|
|
} |
|
|
} |
|
|
|
|
|
.btn-glow { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.btn-glow::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); |
|
|
transition: all 0.5s; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.btn-glow:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.parallax-bg { |
|
|
background-attachment: fixed; |
|
|
background-position: center; |
|
|
background-repeat: no-repeat; |
|
|
background-size: cover; |
|
|
} |
|
|
|
|
|
.hover-underline { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.hover-underline::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background: linear-gradient(90deg, #6e8efb, #a777e3); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.hover-underline:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.scroll-indicator { |
|
|
position: absolute; |
|
|
bottom: 30px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
animation: bounce 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 20%, 50%, 80%, 100% { |
|
|
transform: translateY(0) translateX(-50%); |
|
|
} |
|
|
40% { |
|
|
transform: translateY(-20px) translateX(-50%); |
|
|
} |
|
|
60% { |
|
|
transform: translateY(-10px) translateX(-50%); |
|
|
} |
|
|
} |
|
|
|
|
|
.feature-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.feature-card:hover .feature-icon { |
|
|
transform: scale(1.2) rotate(10deg); |
|
|
color: #a777e3; |
|
|
} |
|
|
|
|
|
.testimonial-card { |
|
|
transition: all 0.3s ease; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.testimonial-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(135deg, rgba(110, 142, 251, 0.1) 0%, rgba(167, 119, 227, 0.1) 100%); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.testimonial-card:hover::before { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.mobile-menu { |
|
|
transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0); |
|
|
transform-origin: top center; |
|
|
} |
|
|
|
|
|
.menu-open { |
|
|
transform: scaleY(1); |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.menu-closed { |
|
|
transform: scaleY(0); |
|
|
opacity: 0; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<header class="hero-gradient text-white py-6 fixed w-full z-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex justify-between items-center relative z-10"> |
|
|
<div class="flex items-center"> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-eye text-3xl mr-3 text-indigo-400"></i> |
|
|
<span class="absolute top-0 right-0 w-2 h-2 bg-pink-500 rounded-full animate-ping"></span> |
|
|
</div> |
|
|
<h1 class="text-2xl font-bold aura-color">AuraVision</h1> |
|
|
</div> |
|
|
<nav class="hidden md:block"> |
|
|
<ul class="flex space-x-8"> |
|
|
<li><a href="#products" class="hover-underline transition">Модели</a></li> |
|
|
<li><a href="#about" class="hover-underline transition">Как это работает</a></li> |
|
|
<li><a href="#testimonials" class="hover-underline transition">Отзывы</a></li> |
|
|
<li><a href="#contacts" class="hover-underline transition">Контакты</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative group"> |
|
|
<i class="fas fa-shopping-cart text-xl cursor-pointer hover:text-indigo-300 transition"></i> |
|
|
<span class="absolute -top-2 -right-2 bg-pink-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center group-hover:animate-bounce">3</span> |
|
|
</div> |
|
|
<i class="fas fa-bars text-xl md:hidden cursor-pointer hover:text-indigo-300 transition" id="mobile-menu-btn"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="mobile-menu menu-closed bg-gray-900 bg-opacity-95 text-white py-4 px-4 fixed w-full top-16 left-0 z-40"> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#products" class="block py-3 px-4 hover:bg-indigo-900 rounded-lg transition">Модели</a></li> |
|
|
<li><a href="#about" class="block py-3 px-4 hover:bg-indigo-900 rounded-lg transition">Как это работает</a></li> |
|
|
<li><a href="#testimonials" class="block py-3 px-4 hover:bg-indigo-900 rounded-lg transition">Отзывы</a></li> |
|
|
<li><a href="#contacts" class="block py-3 px-4 hover:bg-indigo-900 rounded-lg transition">Контакта</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="hero-gradient text-white pt-32 pb-24 min-h-screen flex items-center relative overflow-hidden"> |
|
|
<div class="absolute inset-0 z-0"> |
|
|
<div class="absolute top-0 left-0 w-full h-full opacity-20"> |
|
|
<div class="absolute top-20 left-1/4 w-32 h-32 rounded-full bg-indigo-500 filter blur-3xl opacity-70 animate-pulse"></div> |
|
|
<div class="absolute top-1/2 right-1/3 w-40 h-40 rounded-full bg-pink-500 filter blur-3xl opacity-70 animate-pulse delay-300"></div> |
|
|
<div class="absolute bottom-20 right-1/4 w-28 h-28 rounded-full bg-purple-500 filter blur-3xl opacity-70 animate-pulse delay-700"></div> |
|
|
</div> |
|
|
</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 animate__animated animate__fadeInLeft"> |
|
|
<h2 class="text-4xl md:text-6xl font-bold mb-6 title-font">Откройте <span class="aura-color">мир энергий</span> с очками AuraVision</h2> |
|
|
<p class="text-xl mb-8 opacity-90">Уникальные линзы с цветовыми фильтрами позволяют видеть энергетическое поле человека и окружающих предметов</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<button class="btn-glow bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-bold py-4 px-8 rounded-full hover:from-indigo-600 hover:to-purple-700 transition duration-300 flex items-center shadow-lg"> |
|
|
Выбрать модель <i class="fas fa-arrow-right ml-2 animate__animated animate__fadeInRight animate__infinite"></i> |
|
|
</button> |
|
|
<button class="btn-glow bg-transparent border-2 border-indigo-400 text-white font-bold py-4 px-8 rounded-full hover:bg-indigo-900 hover:border-indigo-500 transition duration-300 flex items-center"> |
|
|
<i class="fas fa-play-circle mr-2"></i> Видеообзор |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center animate__animated animate__fadeInRight"> |
|
|
<div class="relative"> |
|
|
<img src="https://cdn1.ozone.ru/s3/multimedia-a/c600/6315953542.jpg" alt="Очки для видения ауры" class="rounded-2xl shadow-2xl w-full max-w-md aura-pulse"> |
|
|
<div class="absolute -bottom-5 -right-5 bg-yellow-400 text-gray-900 py-2 px-6 rounded-full font-bold text-sm transform rotate-6 shadow-md animate__animated animate__pulse animate__infinite"> |
|
|
Хит продаж! |
|
|
</div> |
|
|
<div class="absolute -top-5 -left-5 bg-pink-500 text-white py-2 px-4 rounded-full font-bold text-xs transform -rotate-6 shadow-md"> |
|
|
Новинка 2023 |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="scroll-indicator animate__animated animate__fadeInUp animate__infinite"> |
|
|
<a href="#products" class="text-white text-2xl"> |
|
|
<i class="fas fa-chevron-down"></i> |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="products" class="py-24 bg-gray-900 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 opacity-10"> |
|
|
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500"></div> |
|
|
</div> |
|
|
|
|
|
<div class="container mx-auto px-4 relative z-10"> |
|
|
<div class="text-center mb-16 animate__animated animate__fadeIn"> |
|
|
<h2 class="text-4xl font-bold mb-4 title-font">Наши <span class="aura-color">модели очков</span></h2> |
|
|
<p class="text-xl text-gray-400 max-w-2xl mx-auto">Выберите идеальную модель для вашего уровня восприятия энергий</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="product-card bg-gray-800 rounded-2xl overflow-hidden shadow-2xl hover:shadow-purple-500/20 transition-all duration-500 animate__animated animate__fadeInUp" data-wow-delay="0.1s"> |
|
|
<div class="relative"> |
|
|
<img src="/s234.jpg" alt="Синие линзы в черной узкой оправе" class="w-full h-64 object-cover"> |
|
|
<div class="absolute top-4 right-4 bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-full animate__animated animate__pulse animate__infinite"> |
|
|
NEW |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2 text-white">AuraVision Neo</h3> |
|
|
<p class="text-gray-400 mb-4">Синие линзы в черной узкой оправе. Идеальны для начинающих.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">4 990 ₽</span> |
|
|
<button class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-2 px-6 rounded-full hover:from-indigo-600 hover:to-purple-700 transition flex items-center btn-glow"> |
|
|
<i class="fas fa-shopping-cart mr-2"></i> Купить |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-gray-800 rounded-2xl overflow-hidden shadow-2xl hover:shadow-purple-500/20 transition-all duration-500 animate__animated animate__fadeInUp" data-wow-delay="0.2s"> |
|
|
<div class="relative"> |
|
|
<img src="/s367.jpg" alt="Синие линзы в круглых очках" class="w-full h-64 object-cover"> |
|
|
<div class="absolute top-4 right-4 bg-pink-500 text-white text-xs font-bold px-3 py-1 rounded-full"> |
|
|
BESTSELLER |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2 text-white">AuraVision Classic</h3> |
|
|
<p class="text-gray-400 mb-4">Синие линзы в круглой оправе. Классика для профессионалов.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">5 490 ₽</span> |
|
|
<button class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-2 px-6 rounded-full hover:from-indigo-600 hover:to-purple-700 transition flex items-center btn-glow"> |
|
|
<i class="fas fa-shopping-cart mr-2"></i> Купить |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-gray-800 rounded-2xl overflow-hidden shadow-2xl hover:shadow-purple-500/20 transition-all duration-500 animate__animated animate__fadeInUp" data-wow-delay="0.3s"> |
|
|
<div class="relative"> |
|
|
<img src="/m23.jpg" alt="Малиновые линзы в круглых очках" class="w-full h-64 object-cover"> |
|
|
<div class="absolute top-4 right-4 bg-purple-500 text-white text-xs font-bold px-3 py-1 rounded-full"> |
|
|
PREMIUM |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2 text-white">AuraVision Premium</h3> |
|
|
<p class="text-gray-400 mb-4">Малиновые линзы в круглой оправе. Расширенный диапазон видения.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">6 990 ₽</span> |
|
|
<button class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-2 px-6 rounded-full hover:from-indigo-600 hover:to-purple-700 transition flex items-center btn-glow"> |
|
|
<i class="fas fa-shopping-cart mr-2"></i> Купить |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-16 animate__animated animate__fadeIn"> |
|
|
<button class="bg-transparent border-2 border-indigo-400 text-white font-bold py-3 px-8 rounded-full hover:bg-indigo-900 hover:border-indigo-500 transition duration-300 flex items-center mx-auto btn-glow"> |
|
|
<i class="fas fa-list mr-2"></i> Все модели |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-24 bg-gray-900 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 opacity-5"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500"></div> |
|
|
</div> |
|
|
|
|
|
<div class="container mx-auto px-4 relative z-10"> |
|
|
<div class="text-center mb-16 animate__animated animate__fadeIn"> |
|
|
<h2 class="text-4xl font-bold mb-4 title-font">Как работают <span class="aura-color">очки AuraVision</span>?</h2> |
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto">Инновационная технология, основанная на последних научных разработках в области восприятия света</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> |
|
|
<div class="glass-card p-8 rounded-2xl text-center hover:shadow-purple-500/10 animate__animated animate__fadeInUp" data-wow-delay="0.1s"> |
|
|
<div class="bg-indigo-900 bg-opacity-50 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 feature-icon"> |
|
|
<i class="fas fa-atom text-indigo-400 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4 text-white">Фильтрация света</h3> |
|
|
<p class="text-gray-400">Специальные цветные линзы фильтруют обычный свет, позволяя видеть тонкие энергетические поля</p> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card p-8 rounded-2xl text-center hover:shadow-purple-500/10 animate__animated animate__fadeInUp" data-wow-delay="0.2s"> |
|
|
<div class="bg-indigo-900 bg-opacity-50 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 feature-icon"> |
|
|
<i class="fas fa-eye text-indigo-400 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4 text-white">Адаптация зрения</h3> |
|
|
<p class="text-gray-400">Ваши глаза постепенно адаптируются, и через 5-10 минут вы начинаете видеть ауры</p> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card p-8 rounded-2xl text-center hover:shadow-purple-500/10 animate__animated animate__fadeInUp" data-wow-delay="0.3s"> |
|
|
<div class="bg-indigo-900 bg-opacity-50 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 feature-icon"> |
|
|
<i class="fas fa-chart-line text-indigo-400 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4 text-white">Развитие способностей</h3> |
|
|
<p class="text-gray-400">Регулярное использование развивает вашу чувствительность к энергетическим полям</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-2xl shadow-2xl overflow-hidden animate__animated animate__fadeIn"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/2 p-8 md:p-12"> |
|
|
<h3 class="text-2xl font-bold mb-6 text-white title-font">Что вы <span class="aura-color">увидите</span>?</h3> |
|
|
<ul class="space-y-4 text-gray-400"> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-indigo-900 bg-opacity-50 w-8 h-8 rounded-full flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-check text-indigo-400"></i> |
|
|
</div> |
|
|
<span>Энергетическое поле вокруг людей, животных и растений</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-indigo-900 bg-opacity-50 w-8 h-8 rounded-full flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-check text-indigo-400"></i> |
|
|
</div> |
|
|
<span>Различные цвета ауры, соответствующие эмоциональному состоянию</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-indigo-900 bg-opacity-50 w-8 h-8 rounded-full flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-check text-indigo-400"></i> |
|
|
</div> |
|
|
<span>Энергетические потоки в помещениях и на природе</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="bg-indigo-900 bg-opacity-50 w-8 h-8 rounded-full flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-check text-indigo-400"></i> |
|
|
</div> |
|
|
<span>Изменения ауры при различных воздействиях</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="mt-8 bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-bold py-3 px-8 rounded-full hover:from-indigo-600 hover:to-purple-700 transition duration-300 flex items-center btn-glow"> |
|
|
<i class="fas fa-book-open mr-2"></i> Узнать больше |
|
|
</button> |
|
|
</div> |
|
|
<div class="md:w-1/2 relative"> |
|
|
<img src="https://cdn1.ozone.ru/s3/multimedia-a/c600/6315953542.jpg" alt="Аура человека" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/70 to-transparent md:bg-gradient-to-r md:from-gray-900 md:via-gray-900/70 md:to-transparent"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="testimonials" class="py-24 bg-gray-900 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 opacity-10"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500"></div> |
|
|
</div> |
|
|
|
|
|
<div class="container mx-auto px-4 relative z-10"> |
|
|
<div class="text-center mb-16 animate__animated animate__fadeIn"> |
|
|
<h2 class="text-4xl font-bold mb-4 title-font">Отзывы <span class="aura-color">наших клиентов</span></h2> |
|
|
<p class="text-xl text-gray-400 max-w-2xl mx-auto">Что говорят люди, которые уже попробовали AuraVision</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="testimonial-card bg-gray-800 p-6 rounded-2xl shadow-lg hover:shadow-purple-500/10 transition-all duration-300 animate__animated animate__fadeInUp" data-wow-delay="0.1s"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-14 h-14 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center mr-4"> |
|
|
<span class="text-white font-bold text-xl">АК</span> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-white">Анна К.</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-400">"Купила модель Neo и была поражена! Уже в первый день увидела ауру у своего кота. Теперь использую в своей практике как психолог."</p> |
|
|
<div class="mt-4 text-sm text-gray-500"> |
|
|
<i class="fas fa-clock mr-1"></i> 2 недели назад |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="testimonial-card bg-gray-800 p-6 rounded-2xl shadow-lg hover:shadow-purple-500/10 transition-all duration-300 animate__animated animate__fadeInUp" data-wow-delay="0.2s"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-14 h-14 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center mr-4"> |
|
|
<span class="text-white font-bold text-xl">МП</span> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-white">Михаил П.</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-400">"Premium модель действительно стоит своих денег. Вижу больше оттенков, чем в обычных синих очках. Очень удобная оправа."</p> |
|
|
<div class="mt-4 text-sm text-gray-500"> |
|
|
<i class="fas fa-clock mr-1"></i> 1 месяц назад |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="testimonial-card bg-gray-800 p-6 rounded-2xl shadow-lg hover:shadow-purple-500/10 transition-all duration-300 animate__animated animate__fadeInUp" data-wow-delay="0.3s"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-14 h-14 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center mr-4"> |
|
|
<span class="text-white font-bold text-xl">ЕС</span> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-white">Елена С.</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-400">"Пользуюсь Classic уже полгода. Отлично помогают в энергетических практиках. Клиенты в восторге, когда показываю им их ауру."</p> |
|
|
<div class="mt-4 text-sm text-gray-500"> |
|
|
<i class="fas fa-clock mr-1"></i> 6 месяцев назад |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-16 animate__animated animate__fadeIn"> |
|
|
<button class="bg-transparent border-2 border-indigo-400 text-white font-bold py-3 px-8 rounded-full hover:bg-indigo-900 hover:border-indigo-500 transition duration-300 flex items-center mx-auto btn-glow"> |
|
|
<i class="fas fa-comments mr-2"></i> Все отзывы |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-24 bg-gradient-to-br from-indigo-900 to-purple-900 text-white relative overflow-hidden"> |
|
|
<div class="absolute inset-0 opacity-20"> |
|
|
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500"></div> |
|
|
</div> |
|
|
|
|
|
<div class="container mx-auto px-4 text-center relative z-10 animate__animated animate__fadeIn"> |
|
|
<h2 class="text-4xl font-bold mb-6 title-font">Готовы увидеть <span class="aura-color">невидимое</span>?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Присоединяйтесь к тысячам людей, которые уже открыли для себя мир энергетических полей с очками AuraVision</p> |
|
|
<div class="flex flex-wrap justify-center gap-4"> |
|
|
<button class="btn-glow bg-white text-indigo-700 font-bold py-4 px-8 rounded-full hover:bg-indigo-100 transition duration-300 flex items-center shadow-lg"> |
|
|
Выбрать модель <i class="fas fa-arrow-right ml-2 animate__animated animate__fadeInRight animate__infinite"></i> |
|
|
</button> |
|
|
<button class="btn-glow bg-transparent border-2 border-white text-white font-bold py-4 px-8 rounded-full hover:bg-white hover:text-indigo-700 transition duration-300 flex items-center"> |
|
|
<i class="fas fa-question-circle mr-2"></i> FAQ |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t from-black to-transparent opacity-30 z-0"></div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer id="contacts" class="bg-black text-white py-16 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 opacity-10"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500"></div> |
|
|
</div> |
|
|
|
|
|
<div class="container mx-auto px-4 relative z-10"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div class="animate__animated animate__fadeInUp" data-wow-delay="0.1s"> |
|
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i class="fas fa-eye mr-2 text-indigo-400"></i> <span class="aura-color">AuraVision</span> |
|
|
</h3> |
|
|
<p class="text-gray-400 mb-4">Инновационные очки для видения энергетических полей и аур.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-telegram text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-vk text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-instagram text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-youtube text-xl"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="animate__animated animate__fadeInUp" data-wow-delay="0.2s"> |
|
|
<h4 class="font-bold mb-4 text-white">Модели</h4> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li><a href="#" class="hover:text-indigo-400 transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-indigo-400"></i> AuraVision Neo</a></li> |
|
|
<li><a href="#" class="hover:text-indigo-400 transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-indigo-400"></i> AuraVision Classic</a></li> |
|
|
<li><a href="#" class="hover:text-indigo-400 transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-indigo-400"></i> AuraVision Premium</a></li> |
|
|
<li><a href="#" class="hover:text-indigo-400 transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-indigo-400"></i> Аксессуары</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="animate__animated animate__fadeInUp" data-wow-delay="0.3s"> |
|
|
<h4 class="font-bold mb-4 text-white">Поддержка</h4> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li><a href="#" class="hover:text-indigo-400 transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-indigo-400"></i> Доставка и оплата</a></li> |
|
|
<li><a href="#" class="hover:text-indigo-400 transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 textindigo-400"></i> Гарантия</a></li> |
|
|
<li><a href="#" class="hover:text-indigo-400 transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-indigo-400"></i> FAQ</a></li> |
|
|
<li><a href="#" class="hover:text-indigo-400 transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2 text-indigo-400"></i> Контакты</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="animate__animated animate__fadeInUp" data-wow-delay="0.4s"> |
|
|
<h4 class="font-bold mb-4 text-white">Контакты</h4> |
|
|
<div class="space-y-3 text-gray-400"> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-phone-alt mt-1 mr-3 text-indigo-400"></i> |
|
|
<span>+7 (999) 123-45-67</span> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-envelope mt-1 mr-3 text-indigo-400"></i> |
|
|
<span>info@aura-vision.ru</span> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-map-marker-alt mt-1 mr-3 text-indigo-400"></i> |
|
|
<span>Москва, ул. Энергетическая, 15</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<button class="bg-indigo-600 text-white py-2 px-4 rounded-full text-sm hover:bg-indigo-700 transition flex items-center"> |
|
|
<i class="fas fa-headset mr-2"></i> Онлайн-консультант |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-500 mb-4 md:mb-0 animate__animated animate__fadeIn">© 2023 AuraVision. Все права защищены.</p> |
|
|
<div class="flex space-x-6 animate__animated animate__fadeIn"> |
|
|
<a href="#" class="text-gray-500 hover:text-indigo-400 transition">Политика конфиденциальности</a> |
|
|
<a href="#" class="text-gray-500 hover:text-indigo-400 transition">Условия использования</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<button id="back-to-top" class="fixed bottom-8 right-8 bg-indigo-600 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-indigo-700 transition opacity-0 invisible"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-btn').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
if (menu.classList.contains('menu-closed')) { |
|
|
menu.classList.remove('menu-closed'); |
|
|
menu.classList.add('menu-open'); |
|
|
} else { |
|
|
menu.classList.remove('menu-open'); |
|
|
menu.classList.add('menu-closed'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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) { |
|
|
targetElement.scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
if (mobileMenu.classList.contains('menu-open')) { |
|
|
mobileMenu.classList.remove('menu-open'); |
|
|
mobileMenu.classList.add('menu-closed'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const backToTopButton = document.getElementById('back-to-top'); |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTopButton.classList.remove('opacity-0', 'invisible'); |
|
|
backToTopButton.classList.add('opacity-100', 'visible'); |
|
|
} else { |
|
|
backToTopButton.classList.remove('opacity-100', 'visible'); |
|
|
backToTopButton.classList.add('opacity-0', 'invisible'); |
|
|
} |
|
|
}); |
|
|
|
|
|
backToTopButton.addEventListener('click', () => { |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const animateOnScroll = () => { |
|
|
const elements = document.querySelectorAll('.animate__animated'); |
|
|
|
|
|
elements.forEach(element => { |
|
|
const elementPosition = element.getBoundingClientRect().top; |
|
|
const screenPosition = window.innerHeight / 1.2; |
|
|
|
|
|
if (elementPosition < screenPosition) { |
|
|
const animationClass = element.classList[1]; |
|
|
element.classList.add(animationClass); |
|
|
} |
|
|
}); |
|
|
}; |
|
|
|
|
|
window.addEventListener('scroll', animateOnScroll); |
|
|
window.addEventListener('load', animateOnScroll); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.product-card').forEach(card => { |
|
|
card.addEventListener('mousemove', (e) => { |
|
|
const xAxis = (window.innerWidth / 2 - e.pageX) / 25; |
|
|
const yAxis = (windowinnerHeight / 2 - e.pageY) / 25; |
|
|
card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; |
|
|
}); |
|
|
|
|
|
card.addEventListener('mouseenter', () => { |
|
|
card.style.transition = 'none'; |
|
|
}); |
|
|
|
|
|
card.addEventListener('mouseleave', () => { |
|
|
card.style.transition = 'all 0.5s ease'; |
|
|
card.style.transform = 'rotateY(0deg) rotateX(0deg)'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.btn-glow').forEach(button => { |
|
|
button.addEventListener('mousemove', (e) => { |
|
|
const x = e.pageX - button.getBoundingClientRect().left; |
|
|
const y = e.pageY - button.getBoundingClientRect().top; |
|
|
|
|
|
button.style.setProperty('--x', `${x}px`); |
|
|
button.style.setProperty('--y', `${y}px`); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
