HVAC landing page variant 1
This commit is contained in:
commit
a98f7e1f05
288
index.html
Normal file
288
index.html
Normal file
@ -0,0 +1,288 @@
|
|||||||
|
<!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>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<style>body{font-family:'Inter',sans-serif}</style>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: { 50:'#eff6ff',100:'#dbeafe',200:'#bfdbfe',300:'#93c5fd',400:'#60a5fa',500:'#3b82f6',600:'#2563eb',700:'#1d4ed8',800:'#1e40af',900:'#1e3a8a' },
|
||||||
|
cool: { 50:'#f0f9ff',100:'#e0f2fe',200:'#bae6fd',300:'#7dd3fc',400:'#38bdf8',500:'#0ea5e9' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-white text-gray-800">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<nav class="fixed top-0 w-full bg-white/80 backdrop-blur-lg z-50 border-b border-gray-100">
|
||||||
|
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-10 h-10 bg-gradient-to-br from-primary-500 to-cool-500 rounded-xl flex items-center justify-center">
|
||||||
|
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
|
||||||
|
</div>
|
||||||
|
<span class="text-xl font-bold text-gray-900">КлиматПро</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8 text-sm font-medium text-gray-600">
|
||||||
|
<a href="#services" class="hover:text-primary-600 transition">Услуги</a>
|
||||||
|
<a href="#why" class="hover:text-primary-600 transition">Преимущества</a>
|
||||||
|
<a href="#pricing" class="hover:text-primary-600 transition">Цены</a>
|
||||||
|
<a href="#contact" class="hover:text-primary-600 transition">Контакты</a>
|
||||||
|
</div>
|
||||||
|
<a href="tel:+78001234567" class="bg-primary-600 hover:bg-primary-700 text-white px-5 py-2.5 rounded-xl text-sm font-semibold transition">
|
||||||
|
📞 8 (800) 123-45-67
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="pt-32 pb-20 relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-br from-primary-50 via-white to-cool-50"></div>
|
||||||
|
<div class="absolute top-20 right-10 w-96 h-96 bg-primary-200/30 rounded-full blur-3xl"></div>
|
||||||
|
<div class="absolute bottom-10 left-10 w-72 h-72 bg-cool-200/30 rounded-full blur-3xl"></div>
|
||||||
|
<div class="relative max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<div class="inline-flex items-center gap-2 bg-primary-100 text-primary-700 px-4 py-2 rounded-full text-sm font-medium mb-6">
|
||||||
|
❄️ Бесплатный выезд инженера
|
||||||
|
</div>
|
||||||
|
<h1 class="text-5xl lg:text-6xl font-extrabold text-gray-900 leading-tight mb-6">
|
||||||
|
Кондиционеры<br>
|
||||||
|
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-cool-500">с гарантией качества</span>
|
||||||
|
</h1>
|
||||||
|
<p class="text-lg text-gray-600 mb-8 max-w-lg">
|
||||||
|
Установка, ремонт и обслуживание кондиционеров в Москве и области. Более 12 000 довольных клиентов за 8 лет работы.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap gap-4">
|
||||||
|
<a href="#contact" class="bg-primary-600 hover:bg-primary-700 text-white px-8 py-4 rounded-2xl text-lg font-semibold transition shadow-lg shadow-primary-600/25">
|
||||||
|
Заказать установку
|
||||||
|
</a>
|
||||||
|
<a href="#pricing" class="bg-white hover:bg-gray-50 text-gray-700 px-8 py-4 rounded-2xl text-lg font-semibold transition border border-gray-200">
|
||||||
|
Рассчитать стоимость
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-8 mt-10 text-sm text-gray-500">
|
||||||
|
<div class="flex items-center gap-2">✅ Лицензия</div>
|
||||||
|
<div class="flex items-center gap-2">✅ Гарантия 3 года</div>
|
||||||
|
<div class="flex items-center gap-2">✅ 24/7 поддержка</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<div class="bg-gradient-to-br from-primary-100 to-cool-100 rounded-3xl p-8 aspect-[4/3] flex items-center justify-center">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-8xl mb-4">❄️</div>
|
||||||
|
<div class="text-primary-800 font-semibold text-lg">Идеальный климат в вашем доме</div>
|
||||||
|
<div class="text-primary-600 text-sm mt-1">от 15 000 ₽ / установка</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 bg-white rounded-2xl shadow-xl p-4 flex items-center gap-3">
|
||||||
|
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-2xl">⭐</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-bold text-gray-900">4.9 / 5.0</div>
|
||||||
|
<div class="text-xs text-gray-500">2 847 отзывов</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services -->
|
||||||
|
<section id="services" class="py-20 bg-gray-50">
|
||||||
|
<div class="max-w-7xl mx-auto px-6">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<h2 class="text-4xl font-bold text-gray-900 mb-4">Наши услуги</h2>
|
||||||
|
<p class="text-gray-600 max-w-2xl mx-auto">Полный спектр климатического оборудования для дома и бизнеса</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
<div class="bg-white rounded-2xl p-8 hover:shadow-xl transition group">
|
||||||
|
<div class="w-14 h-14 bg-primary-100 rounded-2xl flex items-center justify-center text-2xl mb-6 group-hover:bg-primary-600 group-hover:text-white transition">🔧</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Установка кондиционеров</h3>
|
||||||
|
<p class="text-gray-600">Монтаж сплит-систем, мульти-сплит и канальных кондиционеров. Работы от 1 дня.</p>
|
||||||
|
<div class="mt-4 text-primary-600 font-semibold">от 15 000 ₽ →</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-8 hover:shadow-xl transition group">
|
||||||
|
<div class="w-14 h-14 bg-orange-100 rounded-2xl flex items-center justify-center text-2xl mb-6 group-hover:bg-orange-600 group-hover:text-white transition">🛠️</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Ремонт и диагностика</h3>
|
||||||
|
<p class="text-gray-600">Выезд мастера в течение 2 часов. Запчасти в наличии. Гарантия на ремонт.</p>
|
||||||
|
<div class="mt-4 text-primary-600 font-semibold">от 3 000 ₽ →</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-8 hover:shadow-xl transition group">
|
||||||
|
<div class="w-14 h-14 bg-green-100 rounded-2xl flex items-center justify-center text-2xl mb-6 group-hover:bg-green-600 group-hover:text-white transition">🧹</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Чистка и ТО</h3>
|
||||||
|
<p class="text-gray-600">Регулярное обслуживание для продления срока службы. Дезинфекция.</p>
|
||||||
|
<div class="mt-4 text-primary-600 font-semibold">от 2 500 ₽ →</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-8 hover:shadow-xl transition group">
|
||||||
|
<div class="w-14 h-14 bg-purple-100 rounded-2xl flex items-center justify-center text-2xl mb-6 group-hover:bg-purple-600 group-hover:text-white transition">🏢</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Коммерческие проекты</h3>
|
||||||
|
<p class="text-gray-600">VRF/VRV системы для офисов, торговых центров и складов. Проектирование.</p>
|
||||||
|
<div class="mt-4 text-primary-600 font-semibold">По запросу →</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-8 hover:shadow-xl transition group">
|
||||||
|
<div class="w-14 h-14 bg-blue-100 rounded-2xl flex items-center justify-center text-2xl mb-6 group-hover:bg-blue-600 group-hover:text-white transition">❄️</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Продажа кондиционеров</h3>
|
||||||
|
<p class="text-gray-600">Все ведущие бренды: Daikin, Mitsubishi, Samsung, LG. Доставка 1-2 дня.</p>
|
||||||
|
<div class="mt-4 text-primary-600 font-semibold">от 25 000 ₽ →</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-8 hover:shadow-xl transition group">
|
||||||
|
<div class="w-14 h-14 bg-red-100 rounded-2xl flex items-center justify-center text-2xl mb-6 group-hover:bg-red-600 group-hover:text-white transition">🚨</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Аварийный вызов</h3>
|
||||||
|
<p class="text-gray-600">Экстренный ремонт 24/7. Мастер на объекте в среднем за 1.5 часа.</p>
|
||||||
|
<div class="mt-4 text-primary-600 font-semibold">от 5 000 ₽ →</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Why Us -->
|
||||||
|
<section id="why" class="py-20">
|
||||||
|
<div class="max-w-7xl mx-auto px-6">
|
||||||
|
<div class="bg-gradient-to-br from-primary-600 to-primary-800 rounded-3xl p-12 lg:p-20 text-white">
|
||||||
|
<h2 class="text-4xl font-bold mb-4">Почему выбирают нас</h2>
|
||||||
|
<p class="text-primary-200 max-w-2xl mb-12">8 лет опыта и более 12 000 установленных кондиционеров</p>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
<div>
|
||||||
|
<div class="text-4xl font-extrabold mb-2">12 000+</div>
|
||||||
|
<div class="text-primary-200">Установлено систем</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-4xl font-extrabold mb-2">8 лет</div>
|
||||||
|
<div class="text-primary-200">На рынке</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-4xl font-extrabold mb-2">3 года</div>
|
||||||
|
<div class="text-primary-200">Гарантия на работы</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-4xl font-extrabold mb-2">24/7</div>
|
||||||
|
<div class="text-primary-200">Поддержка клиентов</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pricing -->
|
||||||
|
<section id="pricing" class="py-20 bg-gray-50">
|
||||||
|
<div class="max-w-7xl mx-auto px-6">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<h2 class="text-4xl font-bold text-gray-900 mb-4">Популярные модели</h2>
|
||||||
|
<p class="text-gray-600">Установка включена в стоимость</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div class="bg-white rounded-2xl p-8 border border-gray-200 hover:shadow-xl transition">
|
||||||
|
<div class="text-sm font-semibold text-gray-500 mb-2">Эконом</div>
|
||||||
|
<h3 class="text-2xl font-bold text-gray-900 mb-1">Samsung Wind-Free</h3>
|
||||||
|
<p class="text-gray-500 mb-4">Комнатный сплит</p>
|
||||||
|
<div class="text-4xl font-extrabold text-gray-900 mb-6">25 900 ₽</div>
|
||||||
|
<ul class="space-y-3 text-gray-600 mb-8">
|
||||||
|
<li class="flex items-center gap-2">✅ Монтаж включён</li>
|
||||||
|
<li class="flex items-center gap-2">✅ Инверторный компрессор</li>
|
||||||
|
<li class="flex items-center gap-2">✅ Wi-Fi управление</li>
|
||||||
|
<li class="flex items-center gap-2">✅ Площадь до 25 м²</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#contact" class="block text-center bg-primary-600 hover:bg-primary-700 text-white py-3 rounded-xl font-semibold transition">Заказать</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-8 border-2 border-primary-600 hover:shadow-xl transition relative">
|
||||||
|
<div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary-600 text-white text-xs font-bold px-4 py-1 rounded-full">ХИТ</div>
|
||||||
|
<div class="text-sm font-semibold text-primary-600 mb-2">Оптимальный</div>
|
||||||
|
<h3 class="text-2xl font-bold text-gray-900 mb-1">Mitsubishi MSZ-AP</h3>
|
||||||
|
<p class="text-gray-500 mb-4">Настенная сплит-система</p>
|
||||||
|
<div class="text-4xl font-extrabold text-gray-900 mb-6">42 500 ₽</div>
|
||||||
|
<ul class="space-y-3 text-gray-600 mb-8">
|
||||||
|
<li class="flex items-center gap-2">✅ Монтаж включён</li>
|
||||||
|
<li class="flex items-center gap-2">✅ 3D поток воздуха</li>
|
||||||
|
<li class="flex items-center gap-2">✅ Плазменный фильтр</li>
|
||||||
|
<li class="flex items-center gap-2">✅ Площадь до 35 м²</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#contact" class="block text-center bg-primary-600 hover:bg-primary-700 text-white py-3 rounded-xl font-semibold transition">Заказать</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-2xl p-8 border border-gray-200 hover:shadow-xl transition">
|
||||||
|
<div class="text-sm font-semibold text-gray-500 mb-2">Премиум</div>
|
||||||
|
<h3 class="text-2xl font-bold text-gray-900 mb-1">Daikin Perfera</h3>
|
||||||
|
<p class="text-gray-500 mb-4">Премиальная серия</p>
|
||||||
|
<div class="text-4xl font-extrabold text-gray-900 mb-6">68 900 ₽</div>
|
||||||
|
<ul class="space-y-3 text-gray-600 mb-8">
|
||||||
|
<li class="flex items-center gap-2">✅ Монтаж включён</li>
|
||||||
|
<li class="flex items-center gap-2">✅ Flash Streamer</li>
|
||||||
|
<li class="flex items-center gap-2">✅ Тихий режим 19 дБ</li>
|
||||||
|
<li class="flex items-center gap-2">✅ Площадь до 45 м²</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#contact" class="block text-center bg-primary-600 hover:bg-primary-700 text-white py-3 rounded-xl font-semibold transition">Заказать</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact -->
|
||||||
|
<section id="contact" class="py-20">
|
||||||
|
<div class="max-w-7xl mx-auto px-6">
|
||||||
|
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-4xl font-bold text-gray-900 mb-4">Оставьте заявку</h2>
|
||||||
|
<p class="text-gray-600 mb-8">Перезвоним в течение 15 минут. Бесплатная консультация и расчёт стоимости.</p>
|
||||||
|
<form class="space-y-5">
|
||||||
|
<input type="text" placeholder="Ваше имя" class="w-full px-5 py-4 bg-gray-50 rounded-xl border border-gray-200 focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none">
|
||||||
|
<input type="tel" placeholder="Телефон" class="w-full px-5 py-4 bg-gray-50 rounded-xl border border-gray-200 focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none">
|
||||||
|
<select class="w-full px-5 py-4 bg-gray-50 rounded-xl border border-gray-200 focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none text-gray-600">
|
||||||
|
<option>Выберите услугу</option>
|
||||||
|
<option>Установка кондиционера</option>
|
||||||
|
<option>Ремонт</option>
|
||||||
|
<option>Обслуживание</option>
|
||||||
|
<option>Покупка + монтаж</option>
|
||||||
|
</select>
|
||||||
|
<button type="submit" class="w-full bg-primary-600 hover:bg-primary-700 text-white py-4 rounded-xl text-lg font-semibold transition shadow-lg shadow-primary-600/25">Отправить заявку</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="bg-gray-50 rounded-2xl p-6 flex items-center gap-4">
|
||||||
|
<div class="w-14 h-14 bg-primary-100 rounded-xl flex items-center justify-center text-2xl">📍</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-bold text-gray-900">Адрес</div>
|
||||||
|
<div class="text-gray-600">Москва, ул. Примерная, д. 1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 rounded-2xl p-6 flex items-center gap-4">
|
||||||
|
<div class="w-14 h-14 bg-green-100 rounded-xl flex items-center justify-center text-2xl">📞</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-bold text-gray-900">Телефон</div>
|
||||||
|
<div class="text-gray-600">8 (800) 123-45-67</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 rounded-2xl p-6 flex items-center gap-4">
|
||||||
|
<div class="w-14 h-14 bg-orange-100 rounded-xl flex items-center justify-center text-2xl">🕐</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-bold text-gray-900">Режим работы</div>
|
||||||
|
<div class="text-gray-600">Пн–Сб: 9:00–20:00, Вс: 10:00–18:00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-gray-900 text-gray-400 py-12">
|
||||||
|
<div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">❄️</div>
|
||||||
|
<span class="font-bold text-white">КлиматПро</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm">© 2026 КлиматПро. Все права защищены.</div>
|
||||||
|
<div class="flex gap-4 text-sm">
|
||||||
|
<a href="#" class="hover:text-white transition">Политика конфиденциальности</a>
|
||||||
|
<a href="#" class="hover:text-white transition">Оферта</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user