Hugging Face's logo

Spaces:
ii5
/
undefined
Running

App Files Community
undefined / index.html
ii5's picture
ii5
Арсенал911 — тюнінг зброї, ножі, тактичне спорядження
a1c7129 verified
Raw History Blame Contribute Delete
22.8 kB
<!DOCTYPE html>
<html lang="uk" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arsenal911 - Тюнінг зброї, ножі, тактичне спорядження</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
50: '#fafaf9',
100: '#f5f5f4',
200: '#e7e5e4',
300: '#d6d3d1',
400: '#a8a29e',
500: '#78716c',
600: '#57534e',
700: '#44403c',
800: '#292524',
900: '#1c1917',
},
secondary: {
50: '#fff7ed',
100: '#ffedd5',
200: '#fed7aa',
300: '#fdba74',
400: '#fb923c',
500: '#f97316',
600: '#ea580c',
700: '#c2410c',
800: '#9a3412',
900: '#7c2d12',
}
}
}
}
}
</script>
<style>
.hero-gradient {
background: linear-gradient(135deg, rgba(120, 113, 108, 0.9) 0%, rgba(41, 37, 36, 0.95) 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.glow-orange {
box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
}
</style>
</head>
<body class="bg-primary-900 text-primary-100 min-h-screen">
<!-- Navigation -->
<nav class="bg-primary-800 border-b border-primary-700 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<div class="flex items-center">
<div class="flex-shrink-0">
<i data-feather="shield" class="text-secondary-500 w-8 h-8"></i>
</div>
<div class="ml-3 text-xl font-bold text-white">Arsenal<span class="text-secondary-500">911</span></div>
</div>
<!-- Desktop Menu -->
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a href="#" class="text-white hover:text-secondary-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Головна</a>
<a href="#" class="text-primary-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Каталог</a>
<a href="#" class="text-primary-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Новинки</a>
<a href="#" class="text-primary-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Акції</a>
<a href="#" class="text-primary-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Про нас</a>
<a href="#" class="text-primary-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Контакти</a>
</div>
</div>
<!-- Mobile menu button -->
<div class="md:hidden">
<button type="button" class="text-primary-300 hover:text-white focus:outline-none focus:text-white">
<i data-feather="menu" class="w-6 h-6"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
<div id="vanta-bg" class="absolute inset-0"></div>
<div class="hero-gradient absolute inset-0"></div>
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6">
Тюнінг зброї, ножі,
<span class="text-secondary-500">тактичне спорядження</span>
</h1>
<p class="text-xl md:text-2xl text-primary-200 mb-8 max-w-3xl mx-auto">
Вітаємо Вас в інтернет-магазині товарів для безпеки, спорту та активного способу життя.
Широкий асортимент збройових аксесуарів, ножів та тактичного спорядження.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button class="bg-secondary-500 hover:bg-secondary-600 text-white font-bold py-3 px-8 rounded-lg transition-colors duration-300 glow-orange">
Перейти до каталогу
</button>
<button class="border-2 border-primary-400 hover:border-secondary-500 text-primary-100 font-bold py-3 px-8 rounded-lg transition-colors duration-300">
Акції та знижки
</button>
</div>
</div>
<!-- Scroll indicator -->
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2">
<div class="animate-bounce">
<i data-feather="chevron-down" class="text-secondary-500 w-8 h-8"></i>
</div>
</div>
</section>
<!-- Services Section -->
<section class="py-20 bg-primary-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Категорії товарів</h2>
<p class="text-primary-300 text-lg max-w-2xl mx-auto">
Все для зброї, тактичної підготовки та активного відпочинку
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Category 1 -->
<div class="bg-primary-700 rounded-xl p-6 card-hover border border-primary-600">
<div class="w-12 h-12 bg-secondary-500 rounded-lg flex items-center justify-center mb-4">
<i data-feather="target" class="text-white w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold text-white mb-3">Аксесуари для зброї</h3>
<p class="text-primary-300 mb-4">
Широкий вибір аксесуарів для вдосконалення вашої зброї.
</p>
<a href="#" class="text-secondary-400 hover:text-secondary-300 font-medium inline-flex items-center">
Переглянути
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
<!-- Category 2 -->
<div class="bg-primary-700 rounded-xl p-6 card-hover border border-primary-600">
<div class="w-12 h-12 bg-secondary-500 rounded-lg flex items-center justify-center mb-4">
<i data-feather="volume-x" class="text-white w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold text-white mb-3">Глушники</h3>
<p class="text-primary-300 mb-4">
Якісні глушники для різних типів зброї.
</p>
<a href="#" class="text-secondary-400 hover:text-secondary-300 font-medium inline-flex items-center">
Переглянути
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
<!-- Category 3 -->
<div class="bg-primary-700 rounded-xl p-6 card-hover border border-primary-600">
<div class="w-12 h-12 bg-secondary-500 rounded-lg flex items-center justify-center mb-4">
<i data-feather="settings" class="text-white w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold text-white mb-3">Тюнінг зброї</h3>
<p class="text-primary-300 mb-4">
Компоненти для тюнінгу та модернізації зброї.
</p>
<a href="#" class="text-secondary-400 hover:text-secondary-300 font-medium inline-flex items-center">
Переглянути
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
<!-- Category 4 -->
<div class="bg-primary-700 rounded-xl p-6 card-hover border border-primary-600">
<div class="w-12 h-12 bg-secondary-500 rounded-lg flex items-center justify-center mb-4">
<i data-feather="droplet" class="text-white w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold text-white mb-3">Чищення та догляд</h3>
<p class="text-primary-300 mb-4">
Засоби для догляду та чищення зброї.
</p>
<a href="#" class="text-secondary-400 hover:text-secondary-300 font-medium inline-flex items-center">
Переглянути
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
<!-- Category 5 -->
<div class="bg-primary-700 rounded-xl p-6 card-hover border border-primary-600">
<div class="w-12 h-12 bg-secondary-500 rounded-lg flex items-center justify-center mb-4">
<i data-feather="eye" class="text-white w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold text-white mb-3">Оптика</h3>
<p class="text-primary-300 mb-4">
Приціли, оптичні прилади та аксесуари.
</p>
<a href="#" class="text-secondary-400 hover:text-secondary-300 font-medium inline-flex items-center">
Переглянути
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
<!-- Category 6 -->
<div class="bg-primary-700 rounded-xl p-6 card-hover border border-primary-600">
<div class="w-12 h-12 bg-secondary-500 rounded-lg flex items-center justify-center mb-4">
<i data-feather="compass" class="text-white w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold text-white mb-3">Ножі</h3>
<p class="text-primary-300 mb-4">
Якісні ножі для різних цілей та завдань.
</p>
<a href="#" class="text-secondary-400 hover:text-secondary-300 font-medium inline-flex items-center">
Переглянути
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-20 bg-primary-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">
Чому обирають
<span class="text-secondary-500">Arsenal911</span>?
</h2>
<div class="space-y-6">
<div class="flex items-start">
<div class="flex-shrink-0">
<i data-feather="check-circle" class="text-secondary-500 w-6 h-6 mt-1"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-white">Досвід з 2012 року</h3>
<p class="text-primary-300">Ми працюємо на ринку збройових аксесуарів з 2012 року</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<i data-feather="check-circle" class="text-secondary-500 w-6 h-6 mt-1"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-white">Якісна продукція</h3>
<p class="text-primary-300">Працюємо тільки з перевіреними виробниками та постачальниками</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<i data-feather="check-circle" class="text-secondary-500 w-6 h-6 mt-1"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-white">Професійна консультація</h3>
<p class="text-primary-300">Наші менеджери допоможуть зробити правильний вибір</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<i data-feather="check-circle" class="text-secondary-500 w-6 h-6 mt-1"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-white">Гнучка система знижок</h3>
<p class="text-primary-300">Приємні ціни та постійні акції для постійних клієнтів</p>
</div>
</div>
</div>
</div>
<div class="relative">
<div class="bg-primary-800 rounded-2xl p-8 border border-primary-700">
<div class="grid grid-cols-2 gap-6">
<div class="text-center">
<div class="text-3xl font-bold text-secondary-500 mb-2">10000+</div>
<div class="text-primary-300">Товарів в каталозі</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-secondary-500 mb-2">13+</div>
<div class="text-primary-300">Років на ринку</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-secondary-500 mb-2">Пн-Пт</div>
<div class="text-primary-300">Графік роботи</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-secondary-500 mb-2">99%</div>
<div class="text-primary-300">Задоволених клієнтів</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 bg-gradient-to-r from-primary-800 to-primary-900">
<div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">
Готові зробити своє замовлення?
</h2>
<p class="text-xl text-primary-300 mb-8">
Зв'яжіться з нами для консультації та оформлення замовлення
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button class="bg-secondary-500 hover:bg-secondary-600 text-white font-bold py-4 px-8 rounded-lg transition-colors duration-300 glow-orange text-lg">
<i data-feather="phone" class="w-5 h-5 mr-2 inline"></i>
+380 98 311-99-11
</button>
<button class="border-2 border-primary-400 hover:border-secondary-500 text-primary-100 font-bold py-4 px-8 rounded-lg transition-colors duration-300 text-lg">
<i data-feather="mail" class="w-5 h-5 mr-2 inline"></i>
Написати нам
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-primary-950 border-t border-primary-800 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center mb-4">
<i data-feather="shield" class="text-secondary-500 w-6 h-6"></i>
<div class="ml-2 text-xl font-bold text-white">Arsenal<span class="text-secondary-500">911</span></div>
</div>
<p class="text-primary-400">
Інтернет-магазин товарів для безпеки, спорту та активного способу життя
</p>
</div>
<div>
<h3 class="text-lg font-semibold text-white mb-4">Каталог</h3>
<ul class="space-y-2">
<li><a href="#" class="text-primary-400 hover:text-white transition-colors">Аксесуари для зброї</a></li>
<li><a href="#" class="text-primary-400 hover:text-white transition-colors">Тюнінг зброї</a></li>
<li><a href="#" class="text-primary-400 hover:text-white transition-colors">Оптика</a></li>
<li><a href="#" class="text-primary-400 hover:text-white transition-colors">Ножі</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-white mb-4">Компанія</h3>
<ul class="space-y-2">
<li><a href="#" class="text-primary-400 hover:text-white transition-colors">Про нас</a></li>
<li><a href="#" class="text-primary-400 hover:text-white transition-colors">Контакти</a></li>
<li><a href="#" class="text-primary-400 hover:text-white transition-colors">Вакансії</a></li>
<li><a href="#" class="text-primary-400 hover:text-white transition-colors">Блог</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-white mb-4">Контакти</h3>
<ul class="space-y-2">
<li class="text-primary-400 flex items-center">
<i data-feather="phone" class="w-4 h-4 mr-2"></i>
+380 98 311-99-11
</li>
<li class="text-primary-400 flex items-center">
<i data-feather="phone" class="w-4 h-4 mr-2"></i>
+380 63 395-14-13
</li>
<li class="text-primary-400 flex items-center">
<i data-feather="mail" class="w-4 h-4 mr-2"></i>
info@arsenal911.com.ua
</li>
<li class="text-primary-400 flex items-center">
<i data-feather="map-pin" class="w-4 h-4 mr-2"></i>
м. Київ
</li>
</ul>
</div>
</div>
<div class="border-t border-primary-800 mt-8 pt-8 text-center">
<p class="text-primary-500">
© 2012—2025 Arsenal 911. Всі права захищені.
</p>
</div>
</footer>
<script>
// Initialize Vanta.js background
VANTA.NET({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0xf97316,
backgroundColor: 0x1c1917,
points: 12.00,
maxDistance: 25.00,
spacing: 18.00
});
// Initialize Feather Icons
feather.replace();
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
</script>
</body>
</html>