Кейс: Розробка товарного Landing Page на HTML/Tailwind для Holy Land ABR Pads
Задача
Перед студією стояло завдання розробити комерційний Landing Page для продажу конкретного продукту ізраїльської косметики — оновлюючих дисків ABR Complex Peeling Pads (Holy Land). Сайт має слугувати кінцевою точкою в ланцюжку продажів (для прийому трафіку з таргетованої та контекстної реклами), детально пояснювати властивості товару та збирати заявки.
Основні технічні та маркетингові вимоги до проєкту:
- Відмова від готових конструкторів (Tilda, WordPress) на користь чистого HTML та Tailwind CSS для швидкого завантаження на мобільних пристроях.
- Структурована подача інформації: від опису складу та принципу дії до відгуків і відповідей на часті запитання.
- Створення інтуїтивного блоку вибору комплектації товару з автоматичним розрахунком вартості.
1. Структура та логіка сторінки
Лендинг розбитий на класичні контентні блоки, які закривають основні питання покупця:
- Головний екран: Короткий опис продукту, УТП («Сяюча шкіра без зусиль»), візуалізація товару та кнопка дії.
- Проблематика: Перелік естетичних проблем шкіри, які вирішує комплекс кислот і ретинолу.
- Інструкція: Покроковий алгоритм використання дисків у домашніх умовах з акцентом на SPF-захист.
- Розбір складу: Інфографіка з ключовими активними компонентами.
- Блок довіри та FAQ: Інтерактивні відгуки та акордеон частих запитань.
2. Верстка та візуальне оформлення
Сайт зверстаний з використанням утилітарного CSS-фреймворку Tailwind. Це дозволило написати чистий код без надлишкових стилів.
- Колірна гама: Спокійна палітра в еко-стилі. Оливково-зелений (#7A9A88), фони — кремовий (#FCFBF7) та бежевий (#F5F3EB).
- Типографіка: Зв'язка шрифтів Playfair Display для заголовків та Manrope для основного тексту.
- Анімація: На чистому JavaScript реалізовано плавне появу елементів (fade-in-up) при прокручуванні.
3. Функціонал замовлення та калькулятор наборів
Щоб спростити процес покупки, у блок замовлення на чистому JS вбудовано скрипт вибору кількості серветок (набори по 10, 15, 20 або 24 штуки). При перемиканні радіокнопок скрипт динамічно змінює ціну, виводить інформацію про подарунок та оновлює дані для відправки форми.
4. Технічна частина
Сайт повністю автономний, зверстаний за стандартами семантичного HTML5. У підвал сторінки інтегровані обов'язкові для модерації рекламних мереж модальні вікна (Політика конфіденційності, Умови повернення). Також додано кнопку швидкого прокручування сторінки наверх.
Результат
Розроблено акуратний товарний Landing Page на чистому коді для оригінального продукту Holy Land, який швидко завантажується. Проєкт повністю виконує своє технічне завдання: стабільно працює на будь-яких смартфонах, не перевантажений зайвими скриптами та готовий до запуску рекламних кампаній.