Spaces:
Running
Running
| <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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: #f8f9fa; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.2); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .aura-pulse { | |
| animation: pulse 4s infinite alternate; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(110, 142, 251, 0.4); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 15px rgba(110, 142, 251, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(110, 142, 251, 0); | |
| } | |
| } | |
| .product-card:hover { | |
| transform: translateY(-10px); | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="hero-gradient text-white py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-eye text-3xl mr-3"></i> | |
| <h1 class="text-2xl font-bold">AuraVision</h1> | |
| </div> | |
| <nav class="hidden md:block"> | |
| <ul class="flex space-x-8"> | |
| <li><a href="#products" class="hover:text-blue-200 transition">Модели</a></li> | |
| <li><a href="#about" class="hover:text-blue-200 transition">Как это работает</a></li> | |
| <li><a href="#testimonials" class="hover:text-blue-200 transition">Отзывы</a></li> | |
| <li><a href="#contacts" class="hover:text-blue-200 transition">Контакты</a></li> | |
| </ul> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-shopping-cart text-xl cursor-pointer hover:text-blue-200"></i> | |
| <i class="fas fa-bars text-xl md:hidden cursor-pointer" id="mobile-menu-btn"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden bg-indigo-900 text-white py-4 px-4"> | |
| <ul class="space-y-3"> | |
| <li><a href="#products" class="block py-2">Модели</a></li> | |
| <li><a href="#about" class="block py-2">Как это работает</a></li> | |
| <li><a href="#testimonials" class="block py-2">Отзывы</a></li> | |
| <li><a href="#contacts" class="block py-2">Контакты</a></li> | |
| </ul> | |
| </div> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white py-16 md:py-24"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6">Откройте мир энергий с очками AuraVision</h2> | |
| <p class="text-xl mb-8 opacity-90">Уникальные линзы с цветовыми фильтрами позволяют видеть энергетическое поле человека и окружающих предметов</p> | |
| <button class="bg-white text-indigo-700 font-bold py-3 px-8 rounded-full hover:bg-indigo-100 transition duration-300 flex items-center"> | |
| Выбрать модель <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <img src="https://cdn1.ozone.ru/s3/multimedia-a/c600/6315953542.jpg" alt="Очки для видения ауры" class="rounded-lg 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-4 rounded-full font-bold text-sm"> | |
| Хит продаж! | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products Section --> | |
| <section id="products" 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-3 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="product-card bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300"> | |
| <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"> | |
| NEW | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">AuraVision Neo</h3> | |
| <p class="text-gray-600 mb-4">Синие линзы в черной узкой оправе. Идеальны для начинающих.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-indigo-600">4 990 ₽</span> | |
| <button class="bg-indigo-600 text-white py-2 px-4 rounded-full hover:bg-indigo-700 transition flex items-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> Купить | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-card bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300"> | |
| <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-gray-800">AuraVision Classic</h3> | |
| <p class="text-gray-600 mb-4">Синие линзы в круглой оправе. Классика для профессионалов.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-indigo-600">5 490 ₽</span> | |
| <button class="bg-indigo-600 text-white py-2 px-4 rounded-full hover:bg-indigo-700 transition flex items-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> Купить | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="product-card bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300"> | |
| <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-gray-800">AuraVision Premium</h3> | |
| <p class="text-gray-600 mb-4">Малиновые линзы в круглой оправе. Расширенный диапазон видения.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-indigo-600">6 990 ₽</span> | |
| <button class="bg-indigo-600 text-white py-2 px-4 rounded-full hover:bg-indigo-700 transition flex items-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> Купить | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How it works --> | |
| <section id="about" class="py-16 bg-indigo-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Как работают очки AuraVision?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="glass-card p-6 rounded-xl text-center"> | |
| <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-atom text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Фильтрация света</h3> | |
| <p class="text-gray-700">Специальные цветные линзы фильтруют обычный свет, позволяя видеть тонкие энергетические поля</p> | |
| </div> | |
| <div class="glass-card p-6 rounded-xl text-center"> | |
| <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-eye text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Адаптация зрения</h3> | |
| <p class="text-gray-700">Ваши глаза постепенно адаптируются, и через 5-10 минут вы начинаете видеть ауры</p> | |
| </div> | |
| <div class="glass-card p-6 rounded-xl text-center"> | |
| <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-chart-line text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Развитие способностей</h3> | |
| <p class="text-gray-700">Регулярное использование развивает вашу чувствительность к энергетическим полям</p> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-2xl font-bold mb-4 text-gray-800">Что вы увидите?</h3> | |
| <ul class="space-y-3 text-gray-700"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> | |
| <span>Энергетическое поле вокруг людей, животных и растений</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> | |
| <span>Различные цвета ауры, соответствующие эмоциональному состоянию</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> | |
| <span>Энергетические потоки в помещениях и на природе</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> | |
| <span>Изменения ауры при различных воздействиях</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1518895949257-7621c3c786d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Аура человека" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="testimonials" 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"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Анна К.</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-700">"Купила модель Neo и была поражена! Уже в первый день увидела ауру у своего кота. Теперь использую в своей практике как психолог."</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Михаил П.</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-700">"Premium модель действительно стоит своих денег. Вижу больше оттенков, чем в обычных синих очках. Очень удобная оправа."</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Елена С.</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-700">"Пользуюсь Classic уже полгода. Отлично помогают в энергетических практиках. Клиенты в восторге, когда показываю им их ауру."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 hero-gradient text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Готовы увидеть невидимое?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Присоединяйтесь к тысячам людей, которые уже открыли для себя мир энергетических полей с очками AuraVision</p> | |
| <button class="bg-white text-indigo-700 font-bold py-3 px-8 rounded-full hover:bg-indigo-100 transition duration-300 mx-2 mb-4 md:mb-0"> | |
| Выбрать модель <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <button class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-indigo-700 transition duration-300 mx-2"> | |
| Узнать больше <i class="fas fa-question-circle ml-2"></i> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer id="contacts" 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> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-eye mr-2"></i> AuraVision | |
| </h3> | |
| <p class="text-gray-400">Инновационные очки для видения энергетических полей и аур.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Модели</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition">AuraVision Neo</a></li> | |
| <li><a href="#" class="hover:text-white transition">AuraVision Classic</a></li> | |
| <li><a href="#" class="hover:text-white transition">AuraVision Premium</a></li> | |
| <li><a href="#" class="hover:text-white transition">Аксессуары</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Поддержка</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition">Доставка и оплата</a></li> | |
| <li><a href="#" class="hover:text-white transition">Гарантия</a></li> | |
| <li><a href="#" class="hover:text-white transition">FAQ</a></li> | |
| <li><a href="#" class="hover:text-white transition">Контакты</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Контакты</h4> | |
| <div class="space-y-3 text-gray-400"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-phone-alt mt-1 mr-3"></i> | |
| <span>+7 (999) 123-45-67</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-envelope mt-1 mr-3"></i> | |
| <span>info@aura-vision.ru</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-3"></i> | |
| <span>Москва, ул. Энергетическая, 15</span> | |
| </div> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-telegram text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-vk text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram text-xl"></i></a> | |
| </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">© 2023 AuraVision. Все права защищены.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-white">Политика конфиденциальности</a> | |
| <a href="#" class="text-gray-500 hover:text-white">Условия использования</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-btn').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'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Add animation to product cards on scroll | |
| const observerOptions = { | |
| threshold: 0.1 | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate__animated', 'animate__fadeInUp'); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.product-card').forEach(card => { | |
| observer.observe(card); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |