267 lines
14 KiB
HTML
267 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Дизайн: Стандартный дизайн. Сохраняй все пять CSS; подробности в design.md. -->
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>ЧистоДом — клининг квартир и офисов</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="stylesheet" href="design-system/vibe-theme.css">
|
||
<style>
|
||
/* ДС рисует кнопки для <button>; у ссылки-кнопки браузер добавляет подчёркивание */
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.kt-ai-hero h1 mark {
|
||
background: var(--vibe-tint);
|
||
color: var(--kt-ai-fg);
|
||
padding: 0 6px;
|
||
border-radius: 6px;
|
||
}
|
||
.price { font-size: 22px; font-weight: 500; color: var(--kt-ai-primary); margin: 8px 0; }
|
||
.kt-ai-card h3 { margin-bottom: 4px; }
|
||
.ct-step {
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
width: 28px; height: 28px; border-radius: 50%;
|
||
background: var(--kt-ai-primary);
|
||
color: var(--kt-ai-fg-on-fill);
|
||
font-weight: 600; font-size: 14px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.kt-ai-card .kt-ai-chip { margin-bottom: 10px; }
|
||
#lead-ok { color: var(--kt-ai-primary); font-weight: 500; margin: 0; }
|
||
.loyalty-head { display: flex; align-items: center; gap: var(--kt-ai-space-5); flex-wrap: wrap; }
|
||
.loyalty-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--kt-ai-space-4); margin: var(--kt-ai-space-7) 0 var(--kt-ai-space-5); }
|
||
.loyalty-stamp { width: 48px; height: 48px; border-radius: 50%; border: 1.5px dashed var(--kt-ai-border-strong); display: inline-flex; align-items: center; justify-content: center; color: transparent; }
|
||
.loyalty-stamp-done { border-style: solid; border-color: var(--kt-ai-primary); background: var(--kt-ai-primary-subtle); color: var(--kt-ai-fg); }
|
||
.loyalty-gift { border-style: solid; border-color: var(--kt-ai-primary); background: var(--kt-ai-primary-subtle); color: var(--kt-ai-fg); }
|
||
.loyalty-note { margin: 0 0 var(--kt-ai-space-4); font-size: 13px; color: var(--kt-ai-fg-muted); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong>ЧистоДом</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#services">Услуги</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#prices">Цены</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#loyalty">Скидки</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Заказать уборку</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1>ЧистоДом — <mark>профессиональная уборка</mark> квартир и офисов</h1>
|
||
<p class="kt-ai-hero-sub">Приезжаем с профессиональной химией, моем то, что вы откладывали месяцами. Бесплатный расчёт стоимости за 10 минут.</p>
|
||
<div class="kt-ai-hero-actions">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#contacts">Заказать уборку</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#prices">Смотреть цены</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="services" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Что мы моем</h2>
|
||
<p>Любой вид уборки — от поддержки чистоты до генеральной после ремонта.</p>
|
||
</div>
|
||
<div class="kt-ai-grid" data-cols="4" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile">
|
||
<h3>Генеральная уборка</h3>
|
||
<p>Полная мойка всех поверхностей: санузел, кухня, окна, техника, под мойкой и за шкафами. Результат — как новоселье.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Поддерживающая уборка</h3>
|
||
<p>Регулярно 1–2 раза в месяц, чтобы чистота не требовала выходных. Можно с постоянным мастером у вас.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Уборка после ремонта</h3>
|
||
<p>Штукатурка, следы краски, пыль из щелей, строительный мусор. Выходим на объект до заселения.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Мойка окон и рам</h3>
|
||
<p>Остекление с обеих сторон, рамы и подоконники, раздвижные панорамы. Без разводов.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Уборка офисов</h3>
|
||
<p>Ежедневное или разовое обслуживание: переговорки, санузлы, кухня, ковролиновые зоны.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Химчистка мебели</h3>
|
||
<p>Диваны, кресла, матрасы. Удаляем пятна, запахи и возвращаем ткани первичный вид.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Электрик</h3>
|
||
<p>Замена розеток, выключателей, люстр, сборка щитков, устранение замыканий. С гарантией до 12 месяцев.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Сантехник</h3>
|
||
<p>Установка смесителей, унитазов, ванн, труб, устранение засоров и протечек. Пришуровка с первого раза.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="prices" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Цены</h2>
|
||
<p>Финальную стоимость назовём после короткого звонка: площадь, состояние и пожелания.</p>
|
||
</div>
|
||
<div class="kt-ai-grid" data-cols="4" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-card">
|
||
<h3>Поддерживающая уборка</h3>
|
||
<p class="price">от 5 000 ₸ / час</p>
|
||
<p>2–3 часа. Пыль, влажная уборка, вынос мусора.</p>
|
||
</article>
|
||
<article class="kt-ai-card">
|
||
<h3>Генеральная уборка</h3>
|
||
<p class="price">от 12 000 ₸ / объект</p>
|
||
<p>40–60 м², 4–6 часов. Всё включено.</p>
|
||
</article>
|
||
<article class="kt-ai-card">
|
||
<h3>После ремонта</h3>
|
||
<p class="price">от 25 000 ₸ / объект</p>
|
||
<p>2 мастера, 1 день. Вывоз мусора.</p>
|
||
</article>
|
||
<article class="kt-ai-card">
|
||
<h3>Электрик</h3>
|
||
<p class="price">от 6 000 ₸ / выезд</p>
|
||
<p>Диагностика + работа, гарантия 12 мес.</p>
|
||
</article>
|
||
<article class="kt-ai-card">
|
||
<h3>Сантехник</h3>
|
||
<p class="price">от 6 000 ₸ / выезд</p>
|
||
<p>Разовый вызов, устранение течи/засора.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="loyalty" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Карта скидок</h2>
|
||
<p>Копите визиты — получайте бесплатную уборку и повышенную скидку.</p>
|
||
</div>
|
||
<article class="kt-ai-card loyalty-card" style="margin-top:var(--kt-ai-space-9)">
|
||
<div class="loyalty-head">
|
||
<strong>ЧистоДом · карта лояльности</strong>
|
||
<span class="kt-ai-chip">10 визитов — 11-й бесплатно</span>
|
||
</div>
|
||
<div class="loyalty-stamps" aria-label="Штампы за визиты">
|
||
<svg class="loyalty-stamp loyalty-stamp-done" aria-hidden="true"><use href="#check"></use></svg>
|
||
<svg class="loyalty-stamp loyalty-stamp-done" aria-hidden="true"><use href="#check"></use></svg>
|
||
<svg class="loyalty-stamp loyalty-stamp-done" aria-hidden="true"><use href="#check"></use></svg>
|
||
<svg class="loyalty-stamp loyalty-stamp-done" aria-hidden="true"><use href="#check"></use></svg>
|
||
<svg class="loyalty-stamp loyalty-stamp-done" aria-hidden="true"><use href="#check"></use></svg>
|
||
<span class="loyalty-stamp"></span>
|
||
<span class="loyalty-stamp"></span>
|
||
<span class="loyalty-stamp"></span>
|
||
<span class="loyalty-stamp"></span>
|
||
<svg class="loyalty-stamp loyalty-gift" aria-hidden="true"><use href="#sparkles"></use></svg>
|
||
</div>
|
||
<p class="loyalty-note">На 5-м визите — дополнительно −10% к счёту. Штампы действуют 12 месяцев.</p>
|
||
</article>
|
||
<div class="kt-ai-grid" data-cols="3" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile">
|
||
<h3>−10% на 5-й визит</h3>
|
||
<p>Постоянным клиентам с первого месяца. Аккумулируется на каждый следующий 5-й визит.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Офисы от 3 месяцев</h3>
|
||
<p>Абонемент на регулярное обслуживание: −15% к каждой уборке, фиксированная смета.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Приведи друга</h3>
|
||
<p>Вам и новому клиенту — −200 ₸ с первой заявки. Без лимита по количеству.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="how" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Как мы работаем</h2>
|
||
<p>Четыре шага от заявки до чистой квартиры.</p>
|
||
</div>
|
||
<div class="kt-ai-grid" data-cols="4" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile">
|
||
<span class="ct-step">1</span>
|
||
<h3>Заявка</h3>
|
||
<p>Заполняете форму или звоните. Уточняем детали за 10 минут.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<span class="ct-step">2</span>
|
||
<h3>Расчёт</h3>
|
||
<p>Называем точную цену. Смета фиксируется и не меняется.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<span class="ct-step">3</span>
|
||
<h3>Уборка</h3>
|
||
<p>Мастера приезжают в удобные время с собственным инвентарём.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<span class="ct-step">4</span>
|
||
<h3>Приёмка</h3>
|
||
<p>Проверяете результат вместе с мастером. Оплата после приёмки.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contacts" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap" style="max-width:720px">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Заказать уборку</h2>
|
||
<p>Оставьте контактные данные, и мы перезвоним в течение 15 минут в рабочее время.</p>
|
||
</div>
|
||
<form id="lead-form" style="margin-top:var(--kt-ai-space-9); display:grid; gap:var(--kt-ai-space-6)">
|
||
<div class="kt-ai-field">
|
||
<label for="name">Ваше имя</label>
|
||
<input id="name" name="name" class="kt-ai-input" type="text" placeholder="Как к вам обращаться?" required>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="phone">Телефон</label>
|
||
<input id="phone" name="phone" class="kt-ai-input" type="tel" placeholder="+7 (___) ___-__-__" required>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="type">Вид уборки</label>
|
||
<select id="type" name="type" class="kt-ai-select">
|
||
<option value="regular">Поддерживающая</option>
|
||
<option value="deep">Генеральная</option>
|
||
<option value="post-remont">После ремонта</option>
|
||
<option value="windows">Окна</option>
|
||
<option value="office">Офис</option>
|
||
<option value="furniture">Химчистка мебели</option>
|
||
<option value="electrician">Электрик</option>
|
||
<option value="plumber">Сантехник</option>
|
||
</select>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="comment">Комментарий</label>
|
||
<textarea id="comment" name="comment" class="kt-ai-textarea" placeholder="Площадь, адрес, удобное время, особые пожелания"></textarea>
|
||
</div>
|
||
<button type="submit" class="kt-ai-btn" data-variant="primary" data-size="lg">Отправить заявку</button>
|
||
<p id="lead-ok" style="display:none">Спасибо! Мы перезвоним в течение 15 минут.</p>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 ЧистоДом</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-link" href="tel:+77001234567">+7 700 123-45-67</a>
|
||
</footer>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script src="script.js"></script>
|
||
|
||
</body>
|
||
</html>
|