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

Лендінг DEVEX: інвестиції в ринок нерухомості

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

Коротко про проєкт

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

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

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

Лендінг DEVEX: перший екран із формою — Скріншот 1 — перший екран із формою

Як будували лендінг

Форма заявки стоїть уже на першому екрані, а далі сторінка веде від порівняння напрямів інвестування до конкретних компаній і калькулятора. На мобільних перший екран зібраний окремо, щоб форма була видна без прокрутки.

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

Структура сторінки

Перший екран: офер, два факти довіри й форма заявки на презентацію.
Порівняння 4 напрямів інвестування в нерухомість із плюсами й мінусами кожного.
«Як це працює» і слайдер компаній з описом і динамікою акцій.
Переваги формату, калькулятор, етапи роботи й футер з юридичними сторінками та попередженням про ризики.

Інтерактив

Калькулятор перераховує результат одразу після вибору суми й терміну, слайдер компаній працює зі стрілками й свайпом, а кнопки в різних блоках відкривають попап із формою. Усе написано на чистому JavaScript без бібліотек, тож сторінка залишається легкою.

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

Технічна частина

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

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

Підсумок

Проєкт отримав легкий лендінг під рекламу, який пояснює складний інвестиційний формат, дає порахувати результат і збирає заявки з будь-якого блоку — на десктопі й на телефоні.