WebsiteРазработка сайтов62

Лендинг DEVEX: инвестиции в рынок недвижимости

Лендинг под трафик для инвестиционного проекта: калькулятор доходности, слайдер компаний, форма и попап заявки, отдельная мобильная версия первого экрана.

Коротко о проекте

Проект: DEVEX; инвестиции в акции строительных компаний
Тип: Лендинг под трафик; + 2 юридические страницы
Главная страница: 8 блоков; от оффера до футера с предупреждением о рисках
Заявка: Форма + попап; валидация полей и согласие на обработку данных
Интерактив: Калькулятор и слайдер; слайдер листается свайпом
Стек: HTML + SCSS + JS; без фреймворков, адаптив

Контекст и задача

DEVEX предлагает зарабатывать на рынке недвижимости через акции строительных и девелоперских компаний, а не покупку квартир. Под рекламный трафик нужен был лендинг, который объясняет формат простыми словами, сравнивает его с классическими инвестициями в недвижимость и собирает заявки на презентацию проектов.

Лендинг DEVEX: первый экран с формой — Скриншот 1 — первый экран с формой

Как строили лендинг

Форма заявки стоит уже на первом экране, а дальше страница ведёт от сравнения направлений инвестирования к конкретным компаниям и калькулятору. На мобильных первый экран собран отдельно, чтобы форма была видна без прокрутки.

Лендинг DEVEX: направления инвестирования — Скриншот 2 — направления инвестирования

Структура страницы

Первый экран: оффер, два факта доверия и форма заявки на презентацию.
Сравнение 4 направлений инвестирования в недвижимость с плюсами и минусами каждого.
«Как это работает» и слайдер компаний с описанием и динамикой акций.
Преимущества формата, калькулятор, этапы работы и футер с юридическими страницами и предупреждением о рисках.

Интерактив

Калькулятор пересчитывает результат сразу после выбора суммы и срока, слайдер компаний работает со стрелками и свайпом, а кнопки в разных блоках открывают попап с формой. Всё написано на чистом JavaScript без библиотек, поэтому страница остаётся лёгкой.

Лендинг DEVEX: слайдер компаний — Скриншот 3 — слайдер компаний

Техническая часть

Вёрстка на HTML и SCSS с модульной структурой (переменные, миксины, компоненты, лейаут), адаптив под мобильные и планшеты. Формы проверяют имя и телефон и не отправляются без согласия на обработку данных. Отдельно сделаны страницы «Политика конфиденциальности» и «Условия использования».

Лендинг DEVEX: попап заявки — Скриншот 5 — попап заявки

Итог

Проект получил лёгкий лендинг под рекламу, который объясняет сложный инвестиционный формат, даёт посчитать результат и собирает заявки из любого блока — на десктопе и на телефоне.