AdsNation
Односторінковий пітч, що рухається, як сам продукт
- Галузь
- Цифрова зовнішня реклама (DOOH)
- Рік
- 2025
- Що ми зробили
- Маркетинговий сайт, анімація інтерфейсу, збір лідів
- Сайт
- adsnation.com
- Мови сайту
- EN
Скріни — мовою оригіналу: сайт не має української версії.
- Можливостей кампанії на сторінці
- 6
- Відгуків клієнтів у блоці довіри
- 18
- Теми, світла й темна
- 2
Огляд
AdsNation продає анімовану рекламу на цифрових екранах у людних торгових центрах і сама виготовляє креативи. Ми спроєктували й розробили сайт: одну сторінку, яка показує рекламу просто на екрані, розкладає, з чого складається кампанія, і надсилає кожен запит на прорахунок прямо в Telegram відділу продажів.
- 01Будь-яка кнопка«Get a Free Quote», «Get Started»
- 02Форма запиту3 поля
- 03Перевірка на серверітелефон і e-mail
- 04Чат продажівTelegram
01 — Завдання
Екрани в ТЦ часто продають як статичний постер, тільки більший, а покупець, який зважує бюджет на зовнішню рекламу, хоче побачити різницю, а не читати про неї. Сайт мав довести перевагу анімації вже на першому екрані й перетворити відвідувача на ліда до кінця скролу.
02 — Рішення
На перший екран ми поставили дисплей, у якому крутиться відеореклама, а поруч — два вертикальні формати для телефона: продукт видно ще до будь-якого тексту. Нижче — рядок, що прискорюється разом зі скролом, шість можливостей кампанії, стіна відгуків і один заклик до дії, повторений по всій сторінці, — і всі кнопки відкривають ту саму форму з трьох полів.
03 — Результат
Швидкий односторінковий сайт у світлій і темній темах, пререндерений і відданий із кешу, де кожна кнопка «Get a Free Quote» чи «Get Started» веде до однієї короткої форми. Заявки проходять перевірку на сервері й одразу потрапляють у чат продажів.
Екран на першому екрані
Головний блок — цифровий дисплей із рекламою всередині та два вертикальні формати поруч: саме те, що купує клієнт. Тема підлаштовується під системні налаштування відвідувача, тож екрани добре виглядають і в темному режимі.
- Відеореклама в рамці дисплея, анімовані формати телефона
- Світла й темна теми за системними налаштуваннями
- Кнопка безкоштовного прорахунку на першому екрані
З чого складається кампанія
Пропозицію розкладено на шість можливостей, за які рекламодавець справді платить, — від анімації під замовлення до показів у години пік. Завершують блок коротка обіцянка результату й кнопка замовлення.
- Анімація під замовлення, адаптована до простору ТЦ
- Ротація креативів, гнучка тривалість і частота
- Покази за розкладом і оновлення контенту в реальному часі
Довіра голосами клієнтів
Вісімнадцять відгуків стоять у три колонки, і кожна картка трохи збільшується, коли проходить середину екрана, — блок читається як натовп, а не як карусель. На телефоні список короткий і розгортається кнопкою «показати ще».
- 18 відгуків про якість креативу, швидкість і трафік
- Масштаб карток привʼязаний до скролу, на Framer Motion
- Кнопка «показати ще» на мобільному
Одна форма за кожною кнопкою
Кожен заклик до дії відкриває те саме модальне вікно з трьома полями: імʼя, телефон і e-mail. Телефон має маску американського формату, сервер ще раз перевіряє e-mail і номер, а заявка летить у Telegram-чат відділу продажів.
- Одне модальне вікно для всіх кнопок, стан у Zustand
- Маска телефона США і перевірка на сервері
- Ліди йдуть у Telegram із route handler Next.js
Ключові рішення
- Рядок-маркі зчитує швидкість скролу через пружину: текст прискорюється, коли відвідувач гортає швидко, і повертається до повільного руху.
- Сторінка пререндерена й віддається з кешу Next.js за Cloudflare; єдиний серверний код — маршрут для заявок.
- Один Zustand-стор модального вікна дає змогу кожній кнопці на сторінці відкривати ту саму форму прорахунку.
- Заявку перевіряють двічі — маска телефона на клієнті та перевірка e-mail і номера через validator.js на сервері — і лише тоді вона йде в Telegram.
