admin/hvac2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HVAC landing page variant 2

Browse Source
This commit is contained in:
hohol 2026-06-15 11:54:28 +07:00
commit bbcb2f4931
1 changed files with 275 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

275
index.html Normal file
View File

@ -0,0 +1,275 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ArcticAir — Кондиционеры и климатическое оборудование</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>body{font-family:'Outfit',sans-serif}</style>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
dark: { 50:'#f6f6f7',100:'#e2e3e5',200:'#c5c7cb',300:'#9fa2a9',400:'#757880',500:'#565a63',600:'#43474f',700:'#363a41',800:'#2d3036',900:'#1a1c20',950:'#111214' },
neon: { 400:'#22d3ee',500:'#06b6d4',600:'#0891b2' },
mint: { 400:'#34d399',500:'#10b981' }
}
}
}
}
</script>
</head>
<body class="bg-dark-950 text-gray-300">
<!-- Header -->
<nav class="fixed top-0 w-full bg-dark-950/80 backdrop-blur-xl z-50 border-b border-white/5">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-neon-500 to-mint-500 rounded-xl flex items-center justify-center text-xl">❄️</div>
<span class="text-xl font-bold text-white">ArcticAir</span>
</div>
<div class="hidden md:flex items-center gap-8 text-sm font-medium text-gray-400">
<a href="#services" class="hover:text-neon-400 transition">Услуги</a>
<a href="#process" class="hover:text-neon-400 transition">Как работаем</a>
<a href="#pricing" class="hover:text-neon-400 transition">Каталог</a>
<a href="#contact" class="hover:text-neon-400 transition">Контакты</a>
</div>
<a href="tel:+78001234567" class="bg-neon-500 hover:bg-neon-600 text-dark-950 px-5 py-2.5 rounded-xl text-sm font-bold transition">
📞 Позвонить
</a>
</div>
</nav>
<!-- Hero -->
<section class="min-h-screen flex items-center relative overflow-hidden">
<div class="absolute inset-0">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-neon-500/10 rounded-full blur-[120px]"></div>
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-mint-500/10 rounded-full blur-[120px]"></div>
</div>
<div class="relative max-w-7xl mx-auto px-6 py-32 grid lg:grid-cols-2 gap-16 items-center">
<div>
<div class="inline-flex items-center gap-2 bg-neon-500/10 border border-neon-500/20 text-neon-400 px-4 py-2 rounded-full text-sm font-medium mb-8">
<span class="w-2 h-2 bg-neon-400 rounded-full animate-pulse"></span>
Работаем 24/7
</div>
<h1 class="text-6xl lg:text-7xl font-black text-white leading-[1.1] mb-6">
Холодный воздух<br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-neon-400 to-mint-400">в любой сезон</span>
</h1>
<p class="text-xl text-gray-400 mb-10 max-w-lg">
Профессиональная установка и сервис кондиционеров. Современное оборудование, лучшие мастера, гарантия результата.
</p>
<div class="flex flex-wrap gap-4">
<a href="#contact" class="group bg-gradient-to-r from-neon-500 to-mint-500 hover:from-neon-600 hover:to-mint-600 text-dark-950 px-8 py-4 rounded-2xl text-lg font-bold transition shadow-lg shadow-neon-500/20">
Заказать монтаж
<span class="inline-block ml-2 group-hover:translate-x-1 transition-transform">→</span>
</a>
<a href="#pricing" class="border border-white/10 hover:border-white/30 text-white px-8 py-4 rounded-2xl text-lg font-medium transition">
Смотреть каталог
</a>
</div>
<div class="grid grid-cols-3 gap-6 mt-14">
<div>
<div class="text-3xl font-black text-white">5K+</div>
<div class="text-sm text-gray-500">Клиентов</div>
</div>
<div>
<div class="text-3xl font-black text-white">8+</div>
<div class="text-sm text-gray-500">Лет опыта</div>
</div>
<div>
<div class="text-3xl font-black text-white">99%</div>
<div class="text-sm text-gray-500">Довольных</div>
</div>
</div>
</div>
<div class="hidden lg:block">
<div class="relative bg-gradient-to-br from-dark-800 to-dark-900 rounded-3xl p-10 border border-white/5">
<div class="aspect-square flex items-center justify-center">
<div class="text-center">
<div class="text-[120px] leading-none mb-4">❄️</div>
<div class="text-white font-bold text-xl">Совершенный комфорт</div>
<div class="text-neon-400 text-sm mt-2">Температура под вашим контролем</div>
</div>
</div>
<div class="absolute -top-3 -right-3 bg-dark-800 border border-white/10 rounded-xl px-4 py-2 text-sm">
<span class="text-neon-400 font-bold">-25°C</span> <span class="text-gray-500">обогрев</span>
</div>
<div class="absolute -bottom-3 -left-3 bg-dark-800 border border-white/10 rounded-xl px-4 py-2 text-sm">
<span class="text-mint-400 font-bold">19 дБ</span> <span class="text-gray-500">тишина</span>
</div>
</div>
</div>
</div>
</section>
<!-- Services -->
<section id="services" class="py-24">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-5xl font-black text-white mb-4">Услуги</h2>
<p class="text-gray-500 max-w-2xl mx-auto text-lg">Полный цикл работ — от подбора оборудования до послегарантийного обслуживания</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="group bg-dark-900 border border-white/5 rounded-2xl p-8 hover:border-neon-500/30 transition">
<div class="w-12 h-12 bg-neon-500/10 rounded-xl flex items-center justify-center text-2xl mb-6 group-hover:scale-110 transition">⚡</div>
<h3 class="text-xl font-bold text-white mb-3">Монтаж сплит-систем</h3>
<p class="text-gray-500">Установка настенных, канальных и кассетных кондиционеров любой сложности</p>
</div>
<div class="group bg-dark-900 border border-white/5 rounded-2xl p-8 hover:border-neon-500/30 transition">
<div class="w-12 h-12 bg-red-500/10 rounded-xl flex items-center justify-center text-2xl mb-6 group-hover:scale-110 transition">🔧</div>
<h3 class="text-xl font-bold text-white mb-3">Ремонт кондиционеров</h3>
<p class="text-gray-500">Диагностика и устранение неисправностей. Запчасти в наличии. Срочный выезд</p>
</div>
<div class="group bg-dark-900 border border-white/5 rounded-2xl p-8 hover:border-neon-500/30 transition">
<div class="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center text-2xl mb-6 group-hover:scale-110 transition">🧹</div>
<h3 class="text-xl font-bold text-white mb-3">Чистка и сервис</h3>
<p class="text-gray-500">Профилактическое обслуживание, чистка фильтров, заправка фреоном</p>
</div>
<div class="group bg-dark-900 border border-white/5 rounded-2xl p-8 hover:border-neon-500/30 transition">
<div class="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center text-2xl mb-6 group-hover:scale-110 transition">🏗️</div>
<h3 class="text-xl font-bold text-white mb-3">VRF-системы</h3>
<p class="text-gray-500">Проектирование и монтаж мультизональных систем для коммерческих объектов</p>
</div>
<div class="group bg-dark-900 border border-white/5 rounded-2xl p-8 hover:border-neon-500/30 transition">
<div class="w-12 h-12 bg-amber-500/10 rounded-xl flex items-center justify-center text-2xl mb-6 group-hover:scale-110 transition">📦</div>
<h3 class="text-xl font-bold text-white mb-3">Продажа оборудования</h3>
<p class="text-gray-500">Daikin, Mitsubishi, LG, Samsung, Toshiba — лучшие цены с гарантией</p>
</div>
<div class="group bg-dark-900 border border-white/5 rounded-2xl p-8 hover:border-neon-500/30 transition">
<div class="w-12 h-12 bg-green-500/10 rounded-xl flex items-center justify-center text-2xl mb-6 group-hover:scale-110 transition">🤝</div>
<h3 class="text-xl font-bold text-white mb-3">Сервисные контракты</h3>
<p class="text-gray-500">Абонентское обслуживание с фиксированной стоимостью и приоритетным выездом</p>
</div>
</div>
</div>
</section>
<!-- Process -->
<section id="process" class="py-24 bg-dark-900/50">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-5xl font-black text-white mb-4">Как мы работаем</h2>
<p class="text-gray-500">Прозрачный процесс от заявки до комфортного климата</p>
</div>
<div class="grid md:grid-cols-4 gap-8">
<div class="text-center">
<div class="w-16 h-16 bg-neon-500/10 border border-neon-500/20 rounded-2xl flex items-center justify-center text-3xl font-black text-neon-400 mx-auto mb-4">1</div>
<h3 class="text-lg font-bold text-white mb-2">Заявка</h3>
<p class="text-gray-500 text-sm">Оставьте заявку или позвоните — бесплатно проконсультируем</p>
</div>
<div class="text-center">
<div class="w-16 h-16 bg-neon-500/10 border border-neon-500/20 rounded-2xl flex items-center justify-center text-3xl font-black text-neon-400 mx-auto mb-4">2</div>
<h3 class="text-lg font-bold text-white mb-2">Выезд мастера</h3>
<p class="text-gray-500 text-sm">Инженер приедет, замерит и подберёт оптимальное решение</p>
</div>
<div class="text-center">
<div class="w-16 h-16 bg-neon-500/10 border border-neon-500/20 rounded-2xl flex items-center justify-center text-3xl font-black text-neon-400 mx-auto mb-4">3</div>
<h3 class="text-lg font-bold text-white mb-2">Установка</h3>
<p class="text-gray-500 text-sm">Профессиональный монтаж за 1 день. Без пыли и грязи</p>
</div>
<div class="text-center">
<div class="w-16 h-16 bg-neon-500/10 border border-neon-500/20 rounded-2xl flex items-center justify-center text-3xl font-black text-neon-400 mx-auto mb-4">4</div>
<h3 class="text-lg font-bold text-white mb-2">Гарантия</h3>
<p class="text-gray-500 text-sm">Гарантия 3 года. Бесплатное ТО в первый год обслуживания</p>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="py-24">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-5xl font-black text-white mb-4">Каталог</h2>
<p class="text-gray-500">Выберите кондиционер под ваши задачи</p>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-dark-900 border border-white/5 rounded-2xl p-8 hover:border-neon-500/20 transition">
<div class="text-sm font-bold text-neon-400 mb-2">COMPACT</div>
<h3 class="text-2xl font-bold text-white mb-1">Samsung AR09</h3>
<p class="text-gray-500 mb-6">Для комнаты до 25 м²</p>
<div class="flex items-baseline gap-2 mb-6">
<span class="text-4xl font-black text-white">28 900</span>
<span class="text-gray-500">₽</span>
</div>
<ul class="space-y-3 text-gray-400 text-sm mb-8">
<li>✦ Инвертор</li>
<li>✦ Wi-Fi модуль</li>
<li>✦ Режим Тихий</li>
<li>✦ Монтаж включён</li>
</ul>
<a href="#contact" class="block text-center border border-neon-500/30 text-neon-400 hover:bg-neon-500/10 py-3 rounded-xl font-semibold transition">Выбрать</a>
</div>
<div class="bg-gradient-to-b from-neon-500/10 to-transparent border border-neon-500/30 rounded-2xl p-8 relative">
<div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-gradient-to-r from-neon-500 to-mint-500 text-dark-950 text-xs font-black px-4 py-1 rounded-full">ПОПУЛЯРНЫЙ</div>
<div class="text-sm font-bold text-neon-400 mb-2">STANDARD</div>
<h3 class="text-2xl font-bold text-white mb-1">Mitsubishi MSZ-AP</h3>
<p class="text-gray-500 mb-6">Для комнаты до 35 м²</p>
<div class="flex items-baseline gap-2 mb-6">
<span class="text-4xl font-black text-white">45 500</span>
<span class="text-gray-500">₽</span>
</div>
<ul class="space-y-3 text-gray-400 text-sm mb-8">
<li>✦ 3D Auto</li>
<li>✦ Плазменный фильтр</li>
<li>✦ 19 дБ уровень шума</li>
<li>✦ Монтаж включён</li>
</ul>
<a href="#contact" class="block text-center bg-gradient-to-r from-neon-500 to-mint-500 hover:from-neon-600 hover:to-mint-600 text-dark-950 py-3 rounded-xl font-bold transition">Выбрать</a>
</div>
<div class="bg-dark-900 border border-white/5 rounded-2xl p-8 hover:border-neon-500/20 transition">
<div class="text-sm font-bold text-neon-400 mb-2">PREMIUM</div>
<h3 class="text-2xl font-bold text-white mb-1">Daikin Perfera</h3>
<p class="text-gray-500 mb-6">Для комнаты до 45 м²</p>
<div class="flex items-baseline gap-2 mb-6">
<span class="text-4xl font-black text-white">72 900</span>
<span class="text-gray-500">₽</span>
</div>
<ul class="space-y-3 text-gray-400 text-sm mb-8">
<li>✦ Flash Streamer</li>
<li>✦ Двойной датчик</li>
<li>✦ A++ энергоэффективность</li>
<li>✦ Монтаж включён</li>
</ul>
<a href="#contact" class="block text-center border border-neon-500/30 text-neon-400 hover:bg-neon-500/10 py-3 rounded-xl font-semibold transition">Выбрать</a>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="py-24">
<div class="max-w-4xl mx-auto px-6">
<div class="bg-gradient-to-br from-dark-800 to-dark-900 border border-white/5 rounded-3xl p-10 lg:p-16">
<div class="text-center mb-10">
<h2 class="text-4xl font-black text-white mb-4">Получите бесплатный расчёт</h2>
<p class="text-gray-500">Мастер перезвонит в течение 15 минут</p>
</div>
<form class="space-y-5">
<div class="grid md:grid-cols-2 gap-5">
<input type="text" placeholder="Ваше имя" class="w-full px-5 py-4 bg-dark-950 rounded-xl border border-white/10 focus:ring-2 focus:ring-neon-500 focus:border-transparent outline-none text-white placeholder:text-gray-600">
<input type="tel" placeholder="+7 (___) ___-__-__" class="w-full px-5 py-4 bg-dark-950 rounded-xl border border-white/10 focus:ring-2 focus:ring-neon-500 focus:border-transparent outline-none text-white placeholder:text-gray-600">
</div>
<textarea placeholder="Опишите задачу или желаемую модель" rows="4" class="w-full px-5 py-4 bg-dark-950 rounded-xl border border-white/10 focus:ring-2 focus:ring-neon-500 focus:border-transparent outline-none text-white placeholder:text-gray-600 resize-none"></textarea>
<button type="submit" class="w-full bg-gradient-to-r from-neon-500 to-mint-500 hover:from-neon-600 hover:to-mint-600 text-dark-950 py-4 rounded-xl text-lg font-bold transition">Отправить заявку</button>
<p class="text-center text-gray-600 text-sm">Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности</p>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-white/5 py-10">
<div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4">
<div class="flex items-center gap-2 text-white font-bold">❄️ ArcticAir</div>
<div class="text-sm text-gray-600">© 2026 ArcticAir. Все права защищены.</div>
<a href="tel:+78001234567" class="text-neon-400 text-sm hover:text-neon-300 transition">8 (800) 123-45-67</a>
</div>
</footer>
</body>
</html>