Клиент — локальная клининговая компания, которая оказывает услуги поддерживающей, генеральной уборки и уборки после ремонта.
Основная задача: получить современный, доверительный лендинг, который будет конвертировать посетителей в заявки.
Цели проекта:
— Сделать одностраничный сайт с чистым, премиальным дизайном, который вызывает доверие у целевой аудитории (семьи, владельцы квартир, люди после ремонта).
— Реализовать интерактивный калькулятор стоимости прямо на первом экране, чтобы посетитель сразу видел цену и не уходил со страницы.
— Добавить удобную систему выбора даты и времени, приближённую к ощущению записи в один клик.
— Обеспечить полную адаптивность: сайт должен аккуратно и компактно выглядеть на мобильных устройствах, так как основной трафик — со смартфонов.
— Реализовать рабочие модальные окна: «Все услуги», «Онлайн-запись» (форма заказа), «Все отзывы» — чтобы все элементы на странице были интерактивными и функциональными.
Проанализировал референс и сформировал структуру: Hero-блок с УТП и калькулятором, секции услуг, расписание свободных окон, чек-лист «Что входит», быстрая форма заказа, отзывы, блок подписки, футер с контактами.
Реализовал калькулятор на чистом JavaScript: ползунок площади, выбор типа уборки (чипы), чекбоксы допуслуг. Итог пересчитывается мгновенно.
Добавил блок свободных окон с выбором времени. При клике на время автоматически открывается модалка заказа с подставленной датой и временем. Также сделал карточку «Другой день → Выбрать в календаре» с нативным date picker.
Разработал 3 модальных окна: «Все услуги» (6 карточек с ценами и описанием), «Онлайн-запись» (полноценная форма заказа как у CRM) и «Все отзывы» (6 отзывов с аватарами).
Все кнопки на сайте рабочие — «Заказать уборку», «Посмотреть услуги», «Смотреть все отзывы», «Оформить подписку» открывают соответствующие модалки. Форма при отправке показывает подтверждение.
Вместо стандартных галочек подобрал тематические SVG-иконки для каждого пункта (капля — полы, лист — эко-средства, кровать — постель и т.д.), реализовал через SVG-спрайт для быстрой загрузки.
Добавил премиальные микро-анимации: блик на кнопках при наведении (shine sweep), мягкий подъём с тенью, эффект нажатия (scale), плавное появление блоков при скролле (Intersection Observer), hover-эффекты на карточках услуг и пунктах чек-листа.
Тщательно проработал мобильную адаптацию: компактная шапка, уменьшенные шрифты, отступы и паддинги, однолонковая раскладка форм и списков, 2-колоночная сетка слотов — всё компактно и читаемо без скролла вбок.
Стек: чистый HTML + CSS + Vanilla JS. Никаких фреймворков, зависимостей и времени загрузки на бандлы — сайт открывается мгновенно.
Готовый, полностью функциональный лендинг
— Сайт загружается менее чем за 1 секунду (статика без зависимостей, оптимизированные изображения).
— Калькулятор работает мгновенно и позволяет потенциальному клиенту узнать стоимость за 5 секунд (это убирает главный барьер перед заявкой.)
— Все CTA-кнопки ведут к конверсионному действию (форма заказа), выбор времени автоматически подставляет данные в форму — минимум трения.
— Мобильная версия выглядит аккуратно и компактно, соответствует стандартам современных мобильных интерфейсов.
— Премиальные анимации и продуманные микро-взаимодействия создают ощущение качественного продукта и повышают доверие к бренду.
— Сайт можно развернуть на любом хостинге, привязать домен и подключить реальную обработку заявок (CRM, Telegram-бот, email) — архитектура готова к масштабированию.