198 lines
9.6 KiB
HTML
198 lines
9.6 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; }
|
||
</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="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" 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>
|
||
</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="3" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-card">
|
||
<span class="kt-ai-chip">популярное</span>
|
||
<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 м², 1 мастер, 4–6 часов. Всё включено.</p>
|
||
</article>
|
||
<article class="kt-ai-card">
|
||
<h3>Уборка после ремонта</h3>
|
||
<p class="price">от 25 000 ₸ / объект</p>
|
||
<p>Квартира 40–60 м², 2 мастера, 1 день. С вывозом строительного мусора.</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>
|
||
</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="script.js"></script>
|
||
|
||
</body>
|
||
</html>
|