Демо-проект
Лендинг химчистки: ЧистоДом
Форма вызова в первом экране, прайс карточками, шаги с таймингом.
дизайн и вёрстка · HTML · CSS · JS

Задача
ЧистоДом - выездная химчистка мебели и ковров: мастер приезжает в день заказа и чистит диван за 1-3 часа прямо в квартире. Клиент в этой нише думает «проще выкинуть, чем отчистить», боится химии при детях и животных и не хочет звонить, чтобы узнать цену. Поэтому сайт химчистки должен показывать цены сразу и принимать заявку без звонка - в первом же экране. Демо-проект: компания вымышленная, задача типовая и настоящая.
Решение
Формат - «свежесть и простота»: белый фон с небесно-голубым акцентом, округлые заголовки, карточки с большими скруглениями. Никаких тёмных секций и канцелярита: заказ чистки должен ощущаться таким же простым, как вызов такси.
- Форма вызова стоит прямо в первом экране: имя, телефон, «что почистить» - как у сервисов доставки, без прокрутки до низа страницы.
- Прайс свёрстан карточками: иконка, фото, цена. Кнопками «плюс-минус» набирается заказ, калькулятор считает итог и даёт скидку 10% от двух предметов; ковёр считается по метражу.
- Кнопка под калькулятором переносит набранный список в поле «Что почистить» финальной формы - посетитель не печатает его заново.
- Слайдеры «до/после» на обивке дивана и матрасе; подпись прямо говорит, что кадры иллюстративные - это разные предметы, у вымышленной компании не бывает настоящих работ.
- Путь визита разложен на шкале часов: заявка, выезд до 2 часов, чистка 1-3 часа, сушка 4-6 часов - «утром заявка, вечером диван сухой».
- 7 800 выездов из легенды раскрыты инфографикой: разбивка по диванам, коврам, матрасам, стульям и коляскам, счётчики оживают при прокрутке.
Детали, которые легко не заметить
- Слайдер «до/после» - нативный input type=range: работает с клавиатуры и на тачскрине без единой библиотеки, у каждого свой aria-label.
- Маска телефона смотрит на язык браузера: русскоязычным - формат +7, остальным - +1. Валидация по числу цифр, ошибки текстом под полем и привязаны к нему через aria-describedby.
- Согласие на обработку персональных данных - обязательный чекбокс в обеих формах со ссылкой на отдельную страницу политики.
- Юридическая гигиена демо: страница-дисклеймер «компании ЧистоДом не существует», noindex в мете и X-Robots-Tag в заголовках - страница не конкурирует в поиске с реальными химчистками.
- prefers-reduced-motion отключает счётчики и reveal-анимации; FAQ-аккордеон на aria-expanded, итог калькулятора объявляется через aria-live.
- Ни сборки, ни зависимостей: страница открывается с диска двойным кликом.
Цифры
Одиннадцать секций - от формы вызова в первом экране до FAQ и финальной заявки - живут на одной странице. Графика - 16 сюжетов в WebP с JPG-фолбэком, каждый в двух размерах под разные экраны, с ленивой загрузкой по мере прокрутки.
Скриншоты




