Демо-проект

Лендинг химчистки: ЧистоДом

Форма вызова в первом экране, прайс карточками, шаги с таймингом.

дизайн и вёрстка · HTML · CSS · JS

Открыть демо

11секций на одной странице
10 позицийпрайса, каждая в калькуляторе
-10%скидка от двух предметов в заказе
2 формызаявки без звонка: вверху и внизу
16фотосюжетов, каждый в двух размерах
Первый экран демо: Лендинг химчистки: ЧистоДом

Задача

ЧистоДом - выездная химчистка мебели и ковров: мастер приезжает в день заказа и чистит диван за 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-фолбэком, каждый в двух размерах под разные экраны, с ленивой загрузкой по мере прокрутки.