| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Ника - Офисная техника и ПО для камчатских организаций</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| DEFAULT: '#0056B3', |
| 50: '#E6F3FF', |
| 100: '#CCE7FF', |
| 200: '#99D0FF', |
| 300: '#66B8FF', |
| 400: '#33A1FF', |
| 500: '#0056B3', |
| 600: '#004494', |
| 700: '#003375', |
| 800: '#002255', |
| 900: '#001137', |
| }, |
| secondary: { |
| DEFAULT: '#C41230', |
| 50: '#FEE8EB', |
| 100: '#FDD1D7', |
| 200: '#FBA3AF', |
| 300: '#F87585', |
| 400: '#F54760', |
| 500: '#C41230', |
| 600: '#9E0E26', |
| 700: '#780A1C', |
| 800: '#520713', |
| 900: '#2C0309', |
| } |
| }, |
| animation: { |
| 'fade-in': 'fadeIn 0.5s ease-in-out', |
| 'slide-up': 'slideUp 0.6s ease-out', |
| 'bounce-soft': 'bounceSoft 2s infinite', |
| }, |
| keyframes: { |
| fadeIn: { |
| '0%': { opacity: '0' }, |
| '100%': { opacity: '1' }, |
| }, |
| slideUp: { |
| '0%': { transform: 'translateY(20px)', opacity: '0' }, |
| '100%': { transform: 'translateY(0)', opacity: '1' }, |
| }, |
| bounceSoft: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-10px)' }, |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .gradient-text { |
| background: linear-gradient(135deg, #0056B3 0%, #002255 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| .hero-overlay { |
| background: linear-gradient(135deg, rgba(0, 86, 179, 0.9) 0%, rgba(0, 34, 85, 0.9) 100%); |
| } |
| .card-hover { |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| .card-hover:hover { |
| transform: translateY(-8px) scale(1.02); |
| box-shadow: 0 20px 40px rgba(0, 86, 179, 0.2); |
| } |
| .vendor-logo { |
| transition: all 0.3s ease; |
| filter: grayscale(100%); |
| opacity: 0.7; |
| } |
| .vendor-logo:hover { |
| filter: grayscale(0%); |
| opacity: 1; |
| transform: scale(1.1); |
| } |
| .scroll-smooth { |
| scroll-behavior: smooth; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 scroll-smooth"> |
| |
| <header class="bg-white shadow-lg sticky top-0 z-50 border-b-2 border-primary-500"> |
| <nav class="container mx-auto px-4 lg:px-8"> |
| <div class="flex justify-between items-center py-4"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center"> |
| <i data-feather="cpu" class="w-6 h-6 text-white"></i> |
| </div> |
| <h1 class="text-2xl font-bold text-primary-500">Ника</h1> |
| </div> |
| |
| <div class="hidden lg:flex items-center space-x-8"> |
| <a href="#home" class="text-gray-700 hover:text-primary-500 transition-colors font-medium border-b-2 border-transparent hover:border-primary-500 pb-1">Главная</a> |
| <a href="#vendors" class="text-gray-700 hover:text-primary-500 transition-colors font-medium border-b-2 border-transparent hover:border-primary-500 pb-1">Вендоры</a> |
| <a href="#price" class="text-gray-700 hover:text-primary-500 transition-colors font-medium border-b-2 border-transparent hover:border-primary-500 pb-1">Прайс-лист</a> |
| <a href="#delivery" class="text-gray-700 hover:text-primary-500 transition-colors font-medium border-b-2 border-transparent hover:border-primary-500 pb-1">Доставка</a> |
| <a href="#contacts" class="text-gray-700 hover:text-primary-500 transition-colors font-medium border-b-2 border-transparent hover:border-primary-500 pb-1">Контакты</a> |
| <button class="bg-primary-500 text-white px-6 py-2 rounded-full hover:bg-primary-600 transition-all transform hover:scale-105 shadow-md"> |
| Сделать заказ |
| </button> |
| </div> |
| |
| <button id="mobileMenuBtn" class="lg:hidden"> |
| <i data-feather="menu" class="w-6 h-6 text-gray-700"></i> |
| </button> |
| </div> |
| |
| <div id="mobileMenu" class="hidden lg:hidden pb-4 border-t border-gray-200 mt-4 pt-4"> |
| <a href="#home" class="block py-2 text-gray-700 hover:text-primary-500 hover:bg-primary-50 px-2 rounded">Главная</a> |
| <a href="#vendors" class="block py-2 text-gray-700 hover:text-primary-500 hover:bg-primary-50 px-2 rounded">Вендоры</a> |
| <a href="#price" class="block py-2 text-gray-700 hover:text-primary-500 hover:bg-primary-50 px-2 rounded">Прайс-лист</a> |
| <a href="#delivery" class="block py-2 text-gray-700 hover:text-primary-500 hover:bg-primary-50 px-2 rounded">Доставка</a> |
| <a href="#contacts" class="block py-2 text-gray-700 hover:text-primary-500 hover:bg-primary-50 px-2 rounded">Контакты</a> |
| </div> |
| </nav> |
| </header> |
|
|
| |
| <section id="home" class="relative overflow-hidden"> |
| <div class="absolute inset-0"> |
| <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/03header_slider_photo.jpg" alt="Доставка" class="w-full h-full object-cover"> |
| <div class="hero-overlay absolute inset-0"></div> |
| </div> |
| <div class="relative container mx-auto px-4 lg:px-8 py-24 lg:py-32"> |
| <div class="max-w-3xl mx-auto text-center text-white"> |
| <h2 class="text-4xl lg:text-6xl font-bold mb-6 animate-fade-in"> |
| Офисная техника и ПО для камчатских организаций |
| </h2> |
| <p class="text-xl lg:text-2xl mb-8 animate-slide-up"> |
| Надежные решения для вашего бизнеса с 2010 года |
| </p> |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> |
| <button class="bg-primary-500 text-white px-8 py-3 rounded font-semibold hover:bg-primary-600 transition-all transform hover:scale-105 shadow-lg"> |
| Каталог продукции |
| </button> |
| <button class="bg-white text-primary-500 px-8 py-3 rounded font-semibold hover:bg-primary-50 hover:text-primary-600 transition-all shadow-lg"> |
| Консультация |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 lg:py-24"> |
| <div class="container mx-auto px-4 lg:px-8"> |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-2xl shadow-xl p-8 card-hover"> |
| <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="truck" class="w-8 h-8 text-primary-500"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">ДОСТАВКА</h3> |
| <p class="text-gray-600 mb-4">по всему Камчатскому краю</p> |
| <p class="text-primary-500 font-semibold">в самые минимальные сроки</p> |
| </div> |
| |
| |
| <div class="bg-white rounded-2xl shadow-xl p-8 card-hover"> |
| <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="package" class="w-8 h-8 text-primary-500"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ</h3> |
| <p class="text-gray-600 mb-4">для офисных компьютеров</p> |
| <p class="text-primary-500 font-semibold">под любые задачи</p> |
| </div> |
| |
| |
| <div class="bg-white rounded-2xl shadow-xl p-8 card-hover"> |
| <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="monitor" class="w-8 h-8 text-primary-500"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">ОФИСНАЯ ТЕХНИКА</h3> |
| <p class="text-gray-600 mb-4">лучших мировых производителей</p> |
| <p class="text-primary-500 font-semibold">по минимальным ценам</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 lg:py-24 bg-white"> |
| <div class="container mx-auto px-4 lg:px-8"> |
| <div class="grid lg:grid-cols-2 gap-12 items-center"> |
| <div class="order-2 lg:order-1 animate-slide-up"> |
| <h2 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-6"> |
| О компании <span class="gradient-text">ООО "Ника"</span> |
| </h2> |
| <p class="text-gray-600 mb-6 leading-relaxed"> |
| Компания ООО "Ника" была образована в 2010 году. Основным видом деятельности являются оптовая торговля офисным оборудованием, в том числе компьютерное и периферийное оборудование, комплектующие, расходные материалы для офисной техники и программное обеспечение для нужд предприятий и организаций Камчатского края. |
| </p> |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="flex items-center space-x-3"> |
| <i data-feather="check-circle" class="w-5 h-5 text-primary-500"></i> |
| <span class="text-gray-700">10+ лет на рынке</span> |
| </div> |
| <div class="flex items-center space-x-3"> |
| <i data-feather="check-circle" class="w-5 h-5 text-primary-500"></i> |
| <span class="text-gray-700">1000+ клиентов</span> |
| </div> |
| <div class="flex items-center space-x-3"> |
| <i data-feather="check-circle" class="w-5 h-5 text-primary-500"></i> |
| <span class="text-gray-700">Официальный дилер</span> |
| </div> |
| <div class="flex items-center space-x-3"> |
| <i data-feather="check-circle" class="w-5 h-5 text-primary-500"></i> |
| <span class="text-gray-700">Гарантия качества</span> |
| </div> |
| </div> |
| </div> |
| <div class="order-1 lg:order-2"> |
| <img src="http://nika-kamchatka.ru/upload/medialibrary/f6e/f6e1e2da7771657f325c3a1f93f97dc3.png" alt="Оборудование" class="rounded-2xl shadow-2xl w-full"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 lg:py-24 bg-gray-50"> |
| <div class="container mx-auto px-4 lg:px-8"> |
| <h2 class="text-3xl lg:text-4xl font-bold text-center text-gray-800 mb-12"> |
| Наши преимущества |
| </h2> |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| <div class="bg-white rounded-xl p-6 text-center card-hover"> |
| <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i data-feather="layers" class="w-6 h-6 text-primary-500"></i> |
| </div> |
| <h3 class="font-bold text-gray-800 mb-2">Широкий</h3> |
| <p class="text-primary-500 font-semibold">ассортимент</p> |
| </div> |
| <div class="bg-white rounded-xl p-6 text-center card-hover"> |
| <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i data-feather="trending-down" class="w-6 h-6 text-primary-500"></i> |
| </div> |
| <h3 class="font-bold text-gray-800 mb-2">Минимальные</h3> |
| <p class="text-primary-500 font-semibold">цены</p> |
| </div> |
| <div class="bg-white rounded-xl p-6 text-center card-hover"> |
| <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i data-feather="users" class="w-6 h-6 text-primary-500"></i> |
| </div> |
| <h3 class="font-bold text-gray-800 mb-2">Квалифицированный</h3> |
| <p class="text-primary-500 font-semibold">персонал</p> |
| </div> |
| <div class="bg-white rounded-xl p-6 text-center card-hover"> |
| <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i data-feather="award" class="w-6 h-6 text-primary-500"></i> |
| </div> |
| <h3 class="font-bold text-gray-800 mb-2">Качественное</h3> |
| <p class="text-primary-500 font-semibold">обслуживание</p> |
| </div> |
| <div class="bg-white rounded-xl p-6 text-center card-hover"> |
| <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i data-feather="map-pin" class="w-6 h-6 text-primary-500"></i> |
| </div> |
| <h3 class="font-bold text-gray-800 mb-2">Доставка по</h3> |
| <p class="text-primary-500 font-semibold">Камчатскому краю</p> |
| </div> |
| <div class="bg-white rounded-xl p-6 text-center card-hover"> |
| <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i data-feather="zap" class="w-6 h-6 text-primary-500"></i> |
| </div> |
| <h3 class="font-bold text-gray-800 mb-2">Выполнение</h3> |
| <p class="text-primary-500 font-semibold">нестандартных заказов</p> |
| </div> |
| <div class="bg-white rounded-xl p-6 text-center card-hover"> |
| <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i data-feather="shield" class="w-6 h-6 text-primary-500"></i> |
| </div> |
| <h3 class="font-bold text-gray-800 mb-2">Гарантия</h3> |
| <p class="text-primary-500 font-semibold">производителей</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="vendors" class="py-16 lg:py-24 bg-white"> |
| <div class="container mx-auto px-4 lg:px-8"> |
| <h2 class="text-3xl lg:text-4xl font-bold text-center text-gray-800 mb-12"> |
| Наши партнеры |
| </h2> |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8"> |
| <a href="https://www.apc.ru/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo"> |
| <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_apc.jpg" alt="APC" class="h-12 object-contain"> |
| </a> |
| <a href="https://www8.hp.com/ru/ru/home.html" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo"> |
| <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_hp.jpg" alt="HP" class="h-12 object-contain"> |
| </a> |
| <a href="https://iru.ru/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo"> |
| <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_iru.jpg" alt="IRU" class="h-12 object-contain"> |
| </a> |
| <a href="https://www.xerox.ru/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo"> |
| <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_xerox.jpg" alt="Xerox" class="h-12 object-contain"> |
| </a> |
| <a href="https://www.brother.ru/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo"> |
| <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_brother.jpg" alt="Brother" class="h-12 object-contain"> |
| </a> |
| <a href="https://russia.kyocera.com/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo"> |
| <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_kyocera.jpg" alt="Kyocera" class="h-12 object-contain"> |
| </a> |
| <a href="https://www.kaspersky.ru/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo"> |
| <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_kaspersky.jpg" alt="Kaspersky" class="h-12 object-contain"> |
| </a> |
| <a href="https://www.microsoft.com/ru-ru" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo"> |
| <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_microsoft.jpg" alt="Microsoft" class="h-12 object-contain"> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 lg:py-24 bg-gray-50"> |
| <div class="container mx-auto px-4 lg:px-8"> |
| <div class="max-w-2xl mx-auto"> |
| <h2 class="text-3xl lg:text-4xl font-bold text-center text-gray-800 mb-12"> |
| Сделать заказ |
| </h2> |
| <form class="bg-white rounded-2xl shadow-xl p-8"> |
| <div class="mb-6"> |
| <label class="block text-gray-700 font-semibold mb-2">ФИО:</label> |
| <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary-500 transition-colors" placeholder="Введите ваше ФИО"> |
| </div> |
| <div class="mb-6"> |
| <label class="block text-gray-700 font-semibold mb-2">E-mail:</label> |
| <input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary-500 transition-colors" placeholder="example@email.com"> |
| </div> |
| <div class="mb-6"> |
| <label class="block text-gray-700 font-semibold mb-2">Телефон:</label> |
| <input type="tel" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary-500 transition-colors" placeholder="+7 (___) ___-__-__"> |
| </div> |
| <div class="mb-6"> |
| <label class="block text-gray-700 font-semibold mb-2">Комментарий к заказу:</label> |
| <textarea class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary-500 transition-colors" rows="4" placeholder="Опишите ваш заказ..."></textarea> |
| </div> |
| <div class="mb-6"> |
| <div class="flex items-center space-x-2"> |
| <input type="checkbox" id="agree" class="w-4 h-4 text-primary-500"> |
| <label for="agree" class="text-gray-600 text-sm">Я согласен с условиями обработки персональных данных</label> |
| </div> |
| </div> |
| <button type="submit" class="w-full bg-primary-500 text-white py-3 rounded-lg font-semibold hover:bg-primary-600 transition-all transform hover:scale-105"> |
| Подтвердить заказ |
| </button> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contacts" class="py-16 lg:py-24 bg-white"> |
| <div class="container mx-auto px-4 lg:px-8"> |
| <h2 class="text-3xl lg:text-4xl font-bold text-center text-gray-800 mb-12"> |
| Наши реквизиты |
| </h2> |
| <div class="max-w-3xl mx-auto"> |
| <div class="bg-gray-50 rounded-2xl p-8"> |
| <div class="space-y-4"> |
| <div class="flex items-start space-x-3"> |
| <i data-feather="map-pin" class="w-5 h-5 text-primary-500 mt-1"></i> |
| <div> |
| <p class="font-semibold text-gray-800">Адрес:</p> |
| <p class="text-gray-600">683023, Камчатский край, г. Петропавловск-Камчатский ул. Флотская д. 14 кв. 6</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <i data-feather="phone" class="w-5 h-5 text-primary-500 mt-1"></i> |
| <div> |
| <p class="font-semibold text-gray-800">Телефон:</p> |
| <p class="text-gray-600">+7 (909) 830-87-77</p> |
| <p class="text-gray-600">Факс: (415) 2-256-864</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <i data-feather="file-text" class="w-5 h-5 text-primary-500 mt-1"></i> |
| <div> |
| <p class="font-semibold text-gray-800">Реквизиты:</p> |
| <p class="text-gray-600">ИНН/КПП 4101139197/410101001</p> |
| <p class="text-gray-600">ОГРН 1104101003841</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <i data-feather="credit-card" class="w-5 h-5 text-primary-500 mt-1"></i> |
| <div> |
| <p class="font-semibold text-gray-800">Банковские реквизиты:</p> |
| <p class="text-gray-600">р/сч 40702810836170003423 в Северо-Восточном Банке Сбербанка России г. Магадан</p> |
| <p class="text-gray-600">БИК 044442607, к/сч 30101810300000000607</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-zinc-900 text-white py-12"> |
| <div class="container mx-auto px-4 lg:px-8"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <div class="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center"> |
| <i data-feather="cpu" class="w-6 h-6 text-white"></i> |
| </div> |
| <h3 class="text-xl font-bold">Ника</h3> |
| </div> |
| <p class="text-gray-400">Оптовые продажи офисной и компьютерной техники для предприятий на Камчатке</p> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-4">Меню</h4> |
| <ul class="space-y-2"> |
| <li><a href="#home" class="text-gray-400 hover:text-primary-500 transition-colors">Главная</a></li> |
| <li><a href="#vendors" class="text-gray-400 hover:text-primary-500 transition-colors">Вендоры</a></li> |
| <li><a href="#price" class="text-gray-400 hover:text-primary-500 transition-colors">Прайс-лист</a></li> |
| <li><a href="#delivery" class="text-gray-400 hover:text-primary-500 transition-colors">Доставка</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-4">Услуги</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-primary-500 transition-colors hover:text-white border-l-2 border-transparent hover:border-primary-500 pl-2">Офисная техника</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-primary-500 transition-colors hover:text-white border-l-2 border-transparent hover:border-primary-500 pl-2">Программное обеспечение</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-primary-500 transition-colors hover:text-white border-l-2 border-transparent hover:border-primary-500 pl-2">Расходные материалы</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-primary-500 transition-colors hover:text-white border-l-2 border-transparent hover:border-primary-500 pl-2">Сервисное обслуживание</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-4">Контакты</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li class="flex items-center space-x-2"> |
| <i data-feather="phone" class="w-4 h-4"></i> |
| <span>+7 (909) 830-87-77</span> |
| </li> |
| <li class="flex items-center space-x-2"> |
| <i data-feather="mail" class="w-4 h-4"></i> |
| <span>nika@example.ru</span> |
| </li> |
| <li class="flex items-center space-x-2"> |
| <i data-feather="map-pin" class="w-4 h-4"></i> |
| <span>Петропавловск-Камчатский</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-zinc-800 mt-8 pt-8 text-center text-gray-400"> |
| <p>© 2010 - 2024 ООО "Ника" - Все права защищены</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <button id="backToTop" class="fixed bottom-8 right-8 bg-primary-500 text-white w-12 h-12 rounded-full shadow-lg hidden hover:bg-primary-600 transition-all transform hover:scale-110"> |
| <i data-feather="arrow-up" class="w-6 h-6 mx-auto"></i> |
| </button> |
|
|
| <script> |
| |
| feather.replace(); |
| |
| |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
| const mobileMenu = document.getElementById('mobileMenu'); |
| |
| mobileMenuBtn.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| const backToTopBtn = document.getElementById('backToTop'); |
| |
| window.addEventListener('scroll', () => { |
| if (window.scrollY > 300) { |
| backToTopBtn.classList.remove('hidden'); |
| } else { |
| backToTopBtn.classList.add('hidden'); |
| } |
| }); |
| |
| backToTopBtn.addEventListener('click', () => { |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| target.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
| |
| mobileMenu.classList.add('hidden'); |
| } |
| }); |
| }); |
| |
| |
| const orderForm = document.querySelector('form'); |
| orderForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| |
| const name = orderForm.querySelector('input[type="text"]').value; |
| const email = orderForm.querySelector('input[type="email"]').value; |
| const phone = orderForm.querySelector('input[type="tel"]').value; |
| const agree = orderForm.querySelector('#agree').checked; |
| |
| if (!name || !email || !phone) { |
| showNotification('Пожалуйста, заполните все обязательные поля', 'error'); |
| return; |
| } |
| |
| if (!agree) { |
| showNotification('Необходимо согласие на обработку персональных данных', 'error'); |
| return; |
| } |
| |
| showNotification('Ваш заказ успешно отправлен! Мы свяжемся с вами в ближайшее время.', 'success'); |
| orderForm.reset(); |
| }); |
| |
| |
| function showNotification(message, type) { |
| const notification = document.createElement('div'); |
| notification.className = `fixed top-20 right-4 px-6 py-4 rounded-lg shadow-lg z-50 animate-slide-up border-l-4 ${ |
| type === 'success' ? 'bg-green-50 text-green-800 border-green-500' : 'bg-red-50 text-red-800 border-red-500' |
| }`; |
| notification.textContent = message; |
| document.body.appendChild(notification); |
| |
| setTimeout(() => { |
| notification.remove(); |
| }, 3000); |
| } |
| |
| |
| const observerOptions = { |
| threshold: 0.1, |
| rootMargin: '0px 0px -50px 0px' |
| }; |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('animate-fade-in'); |
| } |
| }); |
| }, observerOptions); |
| |
| document.querySelectorAll('.card-hover').forEach(el => { |
| observer.observe(el); |
| }); |
| |
| |
| const phoneInput = document.querySelector('input[type="tel"]'); |
| phoneInput.addEventListener('input', (e) => { |
| let value = e.target.value.replace(/\D/g, ''); |
| if (value.length > 0) { |
| if (value[0] === '7') { |
| value = value.substring(1); |
| } |
| if (value.length <= 3) { |
| value = `+7 (${value}`; |
| } else if (value.length <= 6) { |
| value = `+7 (${value.substring(0, 3)}) ${value.substring(3)}`; |
| } else if (value.length <= 8) { |
| value = `+7 (${value.substring(0, 3)}) ${value.substring(3, 6)}-${value.substring(6)}`; |
| } else { |
| value = `+7 (${value.substring(0, 3)}) ${value.substring(3, 6)}-${value.substring(6, 8)}-${value.substring(8, 10)}`; |
| } |
| } |
| e.target.value = value; |
| }); |
| </script> |
| </body> |
| </html> |
|
|
