Лендинг
Лендинг, на котором дом строится, пока его листают
Продающая страница мастерской каркасных домов: чертёж на первом экране собирается в дом по прокрутке, дальше проекты с ценами, этапы стройки, состав цены и квиз, который считает стоимость и собирает заявку. Ниже рабочая версия: листайте и посчитайте свой дом.
Открыть отдельно: лендинг во весь экран. Мастерская, проекты и цены вымышленные, фото с Unsplash.
- Задача
- Строительной компании нужен лендинг, который отличает её от сотни похожих сайтов с фотографией дома и формой «оставьте телефон». Человек должен за пару минут понять, что входит в цену и сколько будет стоить его дом, и оставить заявку уже с расчётом.
- Решение
- Собрал одну длинную страницу вокруг идеи «сначала рисуем, потом строим»: первый экран с чертежом, который собирается в дом по прокрутке, проекты с ценой «от», шесть этапов с линией прогресса, честный состав цены и квиз из пяти шагов с итогом и формой телефона.
- Что получает владелец
- Первый экран, который запоминают и досматривают до конца
- Заявки приходят уже с площадью, комплектацией и примерной ценой
- Цены на странице сходятся между собой: проекты и квиз считаются одной формулой
- В рабочей версии заявка уходит в Telegram или CRM, подключаются Метрика и цели по шагам квиза
- Стек
- Astro
- GSAP и ScrollTrigger
- TypeScript
- SCSS
- SVG-анимация
- Шрифты Jost и Manrope
Как устроено
При открытии чертёж вычерчивается сам, а прокрутка достраивает дом: фундамент, стены, крыша, свет в окнах. Первый экран закреплён ровно на это время, дальше страница идёт обычной прокруткой.
Площадь, этажность, фундамент, комплектация и срок дают диапазон цены и срок стройки. Цена «от» у проектов посчитана той же формулой, поэтому цифры на странице сходятся между собой.
Телефон форматируется по мере ввода, ошибка показывается рядом с полем и объясняет, что исправить. Согласие на обработку данных по 152-ФЗ обязательно и проверяется до отправки.
Если в системе отключено движение или скрипт не загрузился, виден готовый дом и все блоки. Проекты листаются пальцем, мышью, кнопками и с клавиатуры.
Анимации на GSAP подключены только на этой странице, фото пережаты под размер экрана, шрифты лежат рядом с сайтом. Страница не прыгает при загрузке.
Соберу страницу под ваш продукт: первый экран с характером, понятная цена, квиз или калькулятор и форма заявки, которая уходит в Telegram или CRM. Смета по разделам, оплата по этапам после приёмки.
Напишите в чате на Профи.ру, что за проект и к какому сроку. В ответ пришлю смету по пунктам.