# 3 прототипа лендинга для клининговой компании

Готовые HTML/CSS-прототипы и документация для команды, оказывающей услуги уборки квартир, домов и офисов.

## 📁 Файлы

| Файл | Назначение |
|---|---|
| `index.html` | Стартовая страница со ссылками на 3 прототипа |
| `prototype-1-fast.html` | **Концепт 1** — «Быстрый заказ» (синий + бирюза, Manrope) |
| `prototype-2-premium.html` | **Концепт 2** — «Премиальный сервис» (тёмная бирюза + золото, Playfair + Inter) |
| `prototype-3-expert.html` | **Концепт 3** — «Эксперт по чистоте» (изумруд + мята, Inter) с интерактивным калькулятором |
| `thanks.html` | Общая страница благодарности с CTA в мессенджеры |
| `README.md` | Этот документ |

## 🎯 Общие принципы для всех концепций

**Применённые маркетинговые модели:**
- **AIDA** (Attention → Interest → Desire → Action) — структура каждого hero и CTA-блока
- **PAS** (Problem → Agitation → Solution) — построение FAQ в Концепте 3 и адресации страхов в текстах
- **Социальное доказательство** — отзывы, счётчики, кейсы, рейтинги, упоминание имён ЖК

**Технические требования (выполнены везде):**
- Mobile-first (320 → 1440)
- Glassmorphism через `backdrop-filter: blur()` на hero-карточках
- Лёгкие fade-in/slide-up анимации через `IntersectionObserver` (без сторонних библиотек)
- Семантическая разметка (header / section / footer)
- SVG-иконки inline (без HTTP-запросов)
- Google Fonts c `preconnect`
- Поля формы одинаковы во всех концептах: **Имя · Телефон · Тип объекта · Площадь · Комментарий**
- Все формы редиректят на `thanks.html`
- Deep-link протоколы: `tel:` `https://wa.me/` `https://t.me/` `https://max.ru/`

**Изображения:** в прототипах используются плейсхолдеры с описанием, что должно быть на каждом фото. При продакшен-сборке заменить на реальные снимки команды и объектов. Стилистика — естественный свет, минимализм, никаких стоковых лиц.

---

## 🟦 КОНЦЕПЦИЯ 1 · «Быстрый заказ»

### Стратегия
Привести посетителя к заявке за минимум кликов. Не отвлекать длинной историей о компании — сразу дать выбор канала связи (звонок / WhatsApp / Telegram / форма). Подходит для платного трафика (контекст, таргет), где важно ловить «горячих» клиентов.

### Целевые KPI
- Конверсия в заявку через форму — **8–12%**
- Конверсия в клик по мессенджеру — **15–25%**
- Скорость связи (perceived) — **«перезвоним за 15 минут»**

### Структура и логика блоков

#### 1️⃣ HEADER (sticky, glass)
- Логотип «СпейсКлин» + телефон справа
- Прозрачный фон с `backdrop-filter: blur(12px)` — современный «iOS-style»
- **Назначение:** телефон всегда в зоне доступа, даже при скролле

#### 2️⃣ HERO
**Заголовок:** «Профессиональная **уборка квартир и офисов** за 1 день»
**Подзаголовок:** «Команда из 4 клинеров приедет уже сегодня. Гарантия качества — или доработаем бесплатно.»
**Пилюля статуса:** «Работаем по Москве и МО · сегодня» (с пульсирующей зелёной точкой — социальный сигнал)
**CTA-кнопки (3 варианта рядом):**
- 🟦 «Рассчитать стоимость» (primary, gradient blue→cyan) → скролл к форме
- 🟢 «WhatsApp» → `wa.me`
- 🔵 «Telegram» → `t.me`

**Trust-row под кнопками:** «Без предоплаты · Свои моющие средства · Договор и чек»

**Hero-визуал:** карточка с фото клинера + 2 «glass-cards» поверх:
- «Сегодня выполнено: 14 уборок» (анимация счётчика)
- Отзыв 5 звёзд от Елены: «Приехали за 2 часа, всё блестит»

📸 **Что на фото:** клинер в форме протирает кухонную столешницу. Светлая кухня, естественный свет, реальный объект.

#### 3️⃣ ПРЕИМУЩЕСТВА (4 карточки)
- ⏱ **Приезжаем за 2 часа** — закрывает страх «когда же приедут»
- 🛡 **Гарантия качества** — закрывает страх «а вдруг плохо уберут»
- 💎 **Прозрачная цена** — закрывает страх «накрутят при оплате»
- 🌿 **Бережно к дому** — закрывает страх за животных, аллергии

**UX:** hover-эффект — карточка приподнимается, добавляется тень.

#### 4️⃣ УСЛУГИ И ЦЕНЫ
**Заголовок:** «Без скрытых наценок и сюрпризов»
**Табы переключения:** Квартиры / Дома / Офисы / После ремонта
**3 карточки-тарифа:**
| Тариф | Цена | Комплектация |
|---|---|---|
| Поддерживающая | от 2 900 ₽ | 1 клинер · 2ч · базовый чек-лист |
| **Генеральная** (popular) | от 5 400 ₽ | 2 клинера · 4ч · полный чек-лист |
| После ремонта | от 7 800 ₽ | 3 клинера · 6ч · спецоборудование |

CTA-кнопка на каждой карточке — «Заказать» (скролл к форме).

#### 5️⃣ ГАЛЕРЕЯ ДО/ПОСЛЕ
4 разворота: кухня, санузел, окна, офис. Подпись с конкретикой: «Кухня 8 м² · Генеральная уборка · ЖК "Зиларт"» — конкретные адреса повышают доверие.

#### 6️⃣ ОТЗЫВЫ
3 карточки. Цитируем людей разных сегментов аудитории:
- Частное лицо (после ремонта)
- Арендодатель (постоянный клиент)
- Компания (B2B)

Над блоком — **средний рейтинг 4.9 из 5 по 1 247 отзывам на Яндексе и Авито**. Указание агрегаторов — социальное доказательство.

#### 7️⃣ ЛИД-МАГНИТ — ЧЕК-ЛИСТ
Большой яркий блок с градиентом blue→cyan.
**Заголовок:** «Чек-лист профессиональной уборки — 50 пунктов»
**Текст:** «Используйте тот же стандарт, по которому работаем мы. Распечатайте — и контролируйте любую клининговую службу. PDF, бесплатно.»
**Форма (glassmorphism):** только e-mail → кнопка «Получить чек-лист бесплатно»
**Trust-row:** «✓ 8 страниц · ✓ По комнатам · ✓ Без спама»

**Зачем:** даже если посетитель сегодня не закажет — мы получили e-mail и можем «дожимать» рассылкой. Тёплый лид остаётся в воронке.

#### 8️⃣ ФОРМА ЗАЯВКИ (главная)
Якорь `#order` — на эту секцию ссылаются все кнопки «Рассчитать стоимость».
**Заголовок:** «Рассчитать стоимость уборки»
**Подзаголовок:** «Оставьте контакты — перезвоним в течение 15 минут, рассчитаем точную цену и подтвердим время выезда.»
**Поля:** Имя · Телефон · Тип объекта (select) · Площадь · Комментарий
**CTA:** «Получить расчёт за 15 минут» (с приоритетом обещания скорости)

#### 9️⃣ FOOTER
Контакты + Услуги + Информация + Свидетельство (ИНН).

#### 🔟 STICKY MOBILE BAR (fixed, только на mobile)
В нижней части экрана всегда видна:
- 🟦 «Рассчитать стоимость» (крупная primary)
- 🟢 WhatsApp (иконка)
- 🔵 Telegram (иконка)
- ⚫ Телефон (иконка)

**Зачем:** на мобильных кнопка-действие в большом пальце пользователя в любой момент.

### Размещение лид-магнитов
- **Чек-лист** — 1 раз между отзывами и формой заявки, в виде яркого блока
- Стратегия — основной лид-магнит, форма по сути ALT-точка входа в воронку для «холодных» посетителей

### Способы повышения конверсии в этом концепте
1. **Множественность CTA в hero** — даём 4 разных способа связи (форма / WA / TG / телефон)
2. **Sticky mobile bar** — CTA не теряется при скролле на мобильных
3. **Социальное доказательство в hero** — «14 уборок сегодня» + отзыв в glass-card
4. **Конкретные сроки** — «за 15 минут», «за 2 часа», «за 1 день» — измеримые обещания
5. **Безопасность платежа** — «без предоплаты» в hero снимает финансовый страх
6. **Доверие к стандарту** — лид-магнит = чек-лист = ваш стандарт работы. Не просто «подпишись на новости»

---

## 🟢 КОНЦЕПЦИЯ 2 · «Премиальный сервис»

### Стратегия
Не торопить с заявкой — сначала построить доверие. Транслировать статус и уровень. Подходит для аудитории с большим средним чеком (загородные дома, премиум-квартиры, B2B-офисы). SEO-трафик и рекомендации.

### Целевые KPI
- Конверсия в заявку «бесплатная оценка» — **5–8%** (меньше, но дороже)
- Средний чек заявки — **в 2–3 раза выше**, чем в Концепте 1
- Доля постоянных клиентов — **выше 60%**

### Визуальный язык
- Цветовая палитра: глубокая бирюза `#0d9488`, тёплое золото `#b8923a`, кремовый фон `#fcfbf7`
- Шрифты: **Playfair Display** для заголовков (журнальный, статусный) + **Inter** для текста
- Композиция: много воздуха, тонкие линии, угловатые карточки (radius 4px вместо 22px), премиальная палитра «отеля»

### Структура и логика блоков

#### 1️⃣ HEADER (transparent on hero)
- Логотип «Atelier·Clean»
- Меню навигации: Почему мы · Процесс · Пакеты · Кейсы · Вопросы
- Телефон в «капсуле» с прозрачным фоном

#### 2️⃣ HERO (full-bleed)
Полноэкранный hero (`min-height: 90vh`) с тёмным градиентом поверх фото команды.

**Eyebrow:** «— ПРЕМИАЛЬНАЯ УБОРКА С 2014 ГОДА»
**Заголовок (Playfair, italic-акцент на ключевом слове):**
> «Уборка, к которой *возвращаются* снова и снова»

**Подзаголовок:** «Команда сертифицированных клинеров со страховой ответственностью. Восстанавливаем чистоту в квартирах, домах и офисах — без посредников и переплат.»

**CTA:**
- 🟡 «Бесплатный расчёт стоимости» (золото на тёмном фоне)
- Текстовая ссылка «или позвонить нам»

**Hero-trust:** «🛡 Застрахованы на 5 млн ₽ · 📜 Сертифицированы ISSA · 👥 100% собственные сотрудники»

📸 **Что на фото:** команда из 6 клинеров в фирменной форме на ступенях дорогого ЖК. Тёплый кинематографичный свет, реалистично, без улыбок «на камеру».

#### 3️⃣ STATS BAR (тонкая полоса)
4 цифры на белом фоне с золотыми акцентами:
- **12 400+** Выполненных уборок
- **820+** Постоянных клиентов
- **4.97 ★** Средний рейтинг
- **10 лет** На рынке Москвы

**UX-приём:** анимация счётчика при попадании в viewport.

#### 4️⃣ ПОЧЕМУ НАМ ДОВЕРЯЮТ (6 карточек, нумерованных)
Большой Playfair-номер `01-06` в углу каждой карточки (золотой, opacity 0.25). Заголовки в Playfair, тексты — Inter.

1. Каждый клинер проходит 3-недельный курс
2. Договор и страховка на любую уборку
3. Свои клинеры — без аутсорса
4. Премиальные средства Ecover и Method
5. Бригада 3–6 человек на одну уборку
6. Контроль качества супервайзером

**Особенность:** не пытаемся «впихнуть» 8 преимуществ — каждое раскрыто 1–2 предложениями, без воды.

#### 5️⃣ ЭТАПЫ РАБОТЫ (5 шагов)
Длинный вертикальный список карточек с большими золотыми номерами `01-05`. Каждый шаг содержит:
- Заголовок (Playfair)
- Описание
- **Уголок времени** (золотая капсула): «10 минут», «1 день», «14 дней гарантии»

**UX:** на hover карточка сдвигается вправо на 8px.

#### 6️⃣ КЕЙСЫ И ПРИМЕРЫ РАБОТ (4 карточки)
Каждый кейс — полноценная мини-история:
- **Большое фото объекта** (16:12)
- Локация (📍 Хамовники) и дата (📅 Январь 2026)
- Заголовок-сценарий: «Пентхаус 220 м² после новогодних праздников»
- Параграф истории
- 3 метрики внизу: Срок · Клинеров · Стоимость

📸 **Что на фото:** не «до/после», а сам объект во всей красоте — пентхаусы, дома, офисы. Премиальная съёмка.

#### 7️⃣ ПАКЕТЫ УСЛУГ (3 тарифа)
**Заголовок:** «Три формата сотрудничества»

| Пакет | Цена | Что внутри |
|---|---|---|
| Стандарт | от 4 200 ₽ | 2 клинера · 56 пунктов · гарантия 7 дней |
| **Премиум** (featured, тёмный фон) | от 9 800 ₽ | 3 клинера + супервайзер · 87 пунктов · гарантия 14 дней |
| VIP | от 22 000 ₽ | 5–8 клинеров · персональный менеджер 24/7 · работа с антиквариатом · гарантия 30 дней |

**Visual hack:** Premium-тариф «поднят» на 12px вверх и инвертирован в тёмную тему. Над ним — золотой ярлык «Выбор клиентов».

#### 8️⃣ ГАРАНТИИ (тёмная секция)
Тёмный фон, золотые иконки, белый текст.
**Заголовок:** «Чёткие *обязательства*, а не маркетинг»
**Подзаголовок:** «Каждая гарантия закреплена в договоре. Не на словах, не на сайте — а юридически.»

4 гарантии в карточках:
- Страховка на 5 млн ₽
- Возврат денег
- Бесплатная доработка 14 дней
- Фиксированная цена в договоре

**Зачем тёмная секция:** визуальный «провал» в потоке — заставляет внимательно прочесть. Гарантии — критичный блок доверия.

#### 9️⃣ БЕСПЛАТНАЯ ОЦЕНКА СТОИМОСТИ (главный CTA)
Двухколоночный блок:
- **Слева:** контент-блок с заголовком «Узнайте точную цену *сегодня*», 4 буллета преимуществ оценки, бэйдж «⚡ Без обязательств»
- **Справа:** форма заявки в премиальном оформлении (углы 6px, мягкие тени)

**Поля:** Имя · Телефон · Тип объекта · Площадь · Комментарий
**CTA:** «Записаться на бесплатную оценку» (тёмная кнопка → hover в бирюзу)

#### 🔟 FAQ (Playfair-заголовки в аккордеоне)
6 вопросов с подробными ответами. Открытый по умолчанию — первый.
- Что входит в стоимость, а за что доплачивать?
- Можно ли заказать уборку на сегодня?
- Что делать, если бригада что-то испортит?
- Безопасно ли пускать клинеров в дом?
- Какие средства используете?
- Можно ли заключить договор на регулярную уборку?

#### 1️⃣1️⃣ FOOTER + КОНТАКТЫ + КАРТА
4 колонки: О компании / Контакты / Услуги / Зона выезда (со стилизованной картой). Внизу — лицензия и копирайт.

### Размещение лид-магнитов
- **Главный магнит** — «Бесплатный выезд оценщика в день обращения». Размещён в hero (CTA), в этапах работы (шаг 02), в основной форме (заголовок) — троекратное повторение
- Дополнительно — стат-бар, кейсы и гарантии работают как «soft magnets» доверия

### Способы повышения конверсии в этом концепте
1. **Бесплатная оценка** = низкий барьер входа («не покупка, а консультация»)
2. **Социальное доказательство объёмом цифр** — 12 400+ уборок, 820+ клиентов, 4.97★
3. **Длинная страница доверия** до CTA — премиум-клиент должен «прогреться»
4. **Имена брендов** (Ecover, Method, ISSA) — апелляция к узнаваемому статусу
5. **Кейсы как UGC-доказательства** — конкретные объекты в престижных районах
6. **Гарантии в договоре** — снимает страх «обманут на дорогой уборке»
7. **Структура AIDA-PAS**: Attention (Hero) → Interest (Trust, Stats) → Desire (Cases, Process) → Action (Estimate Form) с PAS-вставками в гарантиях

---

## 🟩 КОНЦЕПЦИЯ 3 · «Эксперт по чистоте»

### Стратегия
Превратить лендинг в инструмент. Калькулятор даёт пользователю **сейчас и без звонка** то, ради чего он пришёл — цену. Это снимает главное возражение «не хочу разговаривать, чтобы узнать прайс». Дополнительно — образовательный контент удерживает посетителя и формирует экспертный имидж.

### Целевые KPI
- Конверсия из калькулятора в заявку — **15–20%** (за счёт того, что человек уже видит цифру)
- Время на сайте — **3+ минуты** (контент удерживает)
- E-mail-лиды в воронку через скидку — **25–35%** посетителей

### Визуальный язык
- Изумрудный `#10b981` + мятный `#d1fae5` — «чистота, свежесть»
- Inter (моноаскетика, дружелюбно)
- Карточки 20–22px, мягкие тени, простые формы

### Структура и логика блоков

#### 1️⃣ HEADER (sticky, glass)
- Логотип «ЧистоЭксперт»
- Телефон (на десктопе)
- **Tенька-CTA:** «Рассчитать → 30 сек» — постоянное приглашение к калькулятору

#### 2️⃣ HERO с КАЛЬКУЛЯТОРОМ
Двухколоночный блок:

**Слева:**
- Pill «Калькулятор работает в реальном времени» с пульсирующей точкой
- **Заголовок:** «Точная стоимость уборки **за 30 секунд**»
- Подзаголовок: «Двигайте ползунки — и сразу видите цену. Никаких звонков для расчёта, никаких сюрпризов в чеке.»
- Жёлтый промо-баннер: «🎁 Скидка 10% на первый заказ через калькулятор — уже включена в расчёт»
- Trust-row: «Цена фиксируется · Без предоплаты · Выезд сегодня»

**Справа — ИНТЕРАКТИВНЫЙ КАЛЬКУЛЯТОР** (карточка с верхней полосой-градиентом):

1. **Сегмент-контрол** «Тип объекта»: Квартира / Дом / Офис / После ремонта (разные базовые ставки за м²)
2. **Сегмент-контрол** «Тип уборки»: Поддерживающая / Генеральная / VIP (множители 1× / 1.7× / 2.4×)
3. **Range-slider** «Площадь»: 20–250 м² (с подсветкой бирюзовым прогрессом)
4. **4 чекбокса допов:** Мойка окон (+500₽) · Холодильник (+700₽) · Духовка (+600₽) · Глажка (+900₽)
5. **Итого** на тёмной плашке:
   - Старая цена зачёркнута
   - Новая цена со скидкой 10% — большим шрифтом
   - Состав: «⚡ Бригада 2 клинера · ~2,5 часа»
   - CTA-кнопка справа «Заказать →»

**Логика расчёта (живая в JS):**
```
total = max(площадь × ставка × множитель + сумма_доплат, минимум_типа)
финал = total × 0.9  // скидка 10%
```

📸 **Hero-фон не нужен** — калькулятор сам по себе визуальная доминанта.

#### 3️⃣ УСЛУГИ (4 направления)
Карточки с цветными иконками: Квартиры · Загородные дома · Офисы · После ремонта. Каждая указывает базовую ставку (от 50–120 ₽/м²) — для прозрачности.

#### 4️⃣ ДО/ПОСЛЕ (3 примера)
Аналогично Концепту 1, но компактнее (3 карточки вместо 4).

#### 5️⃣ СОВЕТЫ ПО УБОРКЕ (6 статей блога)
**Заголовок:** «Полезные материалы от наших клинеров»

6 карточек статей с мятными плашками-обложками, эмодзи-иконками и подписями «X мин чтения»:
- 🍳 7 способов отмыть жир на плите без агрессивной химии
- 🪟 Как помыть окна без разводов
- 🛁 Известковый налёт и ржавчина: что реально работает
- 🛋️ Чистка светлой мебели и ковров: 9 пятен и решений
- 🌿 Эко-уборка: что работает, а что миф
- 🏠 Уборка после ремонта своими руками

**Зачем:** SEO-приток на длинный хвост запросов + экспертный статус. Каждая статья ведёт обратно на калькулятор и форму.

#### 6️⃣ FAQ ПО СХЕМЕ PAS
**Заголовок:** «Ответы по схеме "вопрос → проблема → решение"»

Каждый ответ структурирован как:
- **Проблема:** что обычно идёт не так у других клинингов
- **Решение:** как мы это решили

Пример:
> **Вопрос:** «А вдруг я закажу — а цена окажется выше, чем в калькуляторе?»
> **Знакомая проблема.** Многие клининги «дорисовывают» цену после приезда — за пробки, этажи, мебель. Мы так не делаем.
> **Решение:** цена из калькулятора фиксируется в заявке.

**Это сильнее обычного FAQ** — снимает скрытые возражения, а не отвечает на формальные вопросы.

#### 7️⃣ СКИДКА 10% (Lead Magnet #2)
Большая зелёно-бирюзовая капсула со светящимся радиал-градиентом.
- Огромная цифра **−10%**
- Заголовок: «Скидка на первый заказ + чек-лист в подарок»
- Текст: «Оставьте e-mail — пришлём промокод, который можно использовать на любую уборку. Плюс — авторский чек-лист профессиональной уборки на 50 пунктов.»
- Форма glass-card: input + button «Получить скидку»
- Note: «Промокод приходит мгновенно. Без спама — 1 письмо в месяц с полезным контентом.»

**Зачем 2 разных магнита (калькулятор + скидка):** охватываем 2 сегмента — «прагматики» (нужна цена сейчас) и «выгодоискатели» (нужна скидка).

#### 8️⃣ ФОРМА ЗАЯВКИ
Аналогична Концепту 1, но скидка автоматически применяется. Поле «Комментарий» подсказывает: «Когда удобно убирать, особые пожелания, промокод...»

#### 9️⃣ FOOTER
Стандартный с контактами, мессенджерами, разделами.

### Размещение лид-магнитов
- **Магнит #1: Калькулятор** — в hero, главный «крючок» страницы
- **Магнит #2: Скидка 10% + чек-лист** — отдельная секция перед формой заявки
- **Магнит #3 (soft): Контент** — 6 статей блога удерживают и возвращают через ретаргетинг

### Способы повышения конверсии в этом концепте
1. **Калькулятор = главный конверсионный инструмент.** Клиент сам подбирает услугу → намного выше commitment, когда нажимает «Заказать»
2. **Цена со скидкой больше и ярче исходной** — визуальный гэп подталкивает к решению
3. **«Заказать» в калькуляторе** — кнопка в зоне «полученной ценности»
4. **PAS в FAQ** — закрывает возражения, которые обычно остаются в голове
5. **Контент удерживает trafic** — статьи увеличивают глубину сессии и снижают bounce rate
6. **Два разных магнита** — двухступенчатая воронка: e-mail сегодня → продажа потом
7. **Промокод как «триггер»** — даёт «срочную причину» оставить контакт

---

## 📊 Сравнение трёх концепций

| Параметр | 1. Быстрый заказ | 2. Премиум | 3. Эксперт |
|---|---|---|---|
| **Целевая аудитория** | Массовый сегмент, контекст-трафик | Премиум-клиент, B2B | Прагматики и сравниватели |
| **Стратегия** | Скорость и простота | Доверие через статус | Самостоятельный расчёт + контент |
| **Длина страницы** | Средняя (~10 экранов) | Длинная (~14 экранов) | Длинная с интерактивом |
| **Главный CTA** | «Рассчитать стоимость» | «Бесплатный расчёт» | «Заказать» из калькулятора |
| **Лид-магнит** | Чек-лист 50 пунктов | Бесплатный выезд оценщика | Калькулятор + скидка 10% |
| **Ожидаемая конверсия** | 8–12% | 5–8% (но дороже) | 10–15% |
| **Когда применять** | Быстрый запуск, тест ниши | Дорогой бренд, репутация | Высокая конкуренция по цене |

## 🔌 Интеграции и автоматизация (рекомендации)

Все формы сейчас отправляют GET-запрос на `thanks.html`. Для продакшена:

1. **Подключить серверную обработку формы:**
   - PHP/Node-эндпоинт
   - Telegram-бот для моментальных уведомлений менеджеру
   - amoCRM / Bitrix24 API для создания сделки

2. **Метрики и аналитика:**
   - Яндекс.Метрика + цели: отправка формы, клик в мессенджер, заполнение калькулятора
   - Webvisor для UX-аудита
   - Heatmaps (Plerdy, Hotjar)

3. **Чат-виджет (опционально):** JivoSite или Carrot Quest в правом нижнем углу — для тех, кто хочет общаться, но не звонить

4. **A/B-тестирование UTP в hero** — лучший способ найти максимальный CTR на конкретной аудитории

## 🚀 Как открыть прототипы

```bash
# В директории проекта
cd /home/roman/projects/clining

# Открыть в браузере (Linux)
xdg-open index.html

# или прямой запуск любого прототипа
xdg-open prototype-1-fast.html
xdg-open prototype-2-premium.html
xdg-open prototype-3-expert.html
```

Можно также запустить простой HTTP-сервер для корректной работы шрифтов:
```bash
python3 -m http.server 8000
# Открыть http://localhost:8000
```

---

**Все прототипы полностью адаптивны, работают без backend и готовы к демонстрации заказчику.**