|
|
<!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> |
|
|
|
