Новое Распределяем каналы MAX по категориям и территориям. Читать новость
Загружаем изображение…
Загружаем изображение…
Загружаем изображение…

От референса до живого сайта: мой новый кейс в портфолио! 🚀



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

Сайт полностью написан на HTML5, CSS3 (Tailwind CSS) и чистом JavaScript без лишних тяжелых библиотек.

Что внутри проекта (7 продающих экранов):

Главный экран — сочное УТП, интерактивные бейджи соцсетей, лид-форма и 4 сильных коммерческих преимущества с иконками.
Экран выгод — 6 структурированных карточек о том, почему клиенту выгоден прицельный таргетинг.
Схема работы — понятный пошаговый путь клиента от аудита до масштабирования.
Интерактивные кейсы — блок с переключающимися вкладками. Контент плавно меняется на JS в реальном времени.
Отзывы клиентов — социальное подтверждение с аватарами и реальными показателями бизнеса.
Интерактивный FAQ — раскрывающийся аккордеон с ответами на самые частые вопросы клиентов.
Форма обратной связи — с возможностью выбора ниши бизнеса и красивым всплывающим окном (Modal) об успешной отправке.
🛠 Технические фишки, которые я реализовал:

Интерактивный сайдбар: Слева находится панель с точками навигации. Скрипт отслеживает скролл страницы и автоматически подсвечивает ту точку, в секции которой сейчас находится пользователь.
Кастомные микро-анимации: Плавное наведение на карточки, вращающиеся иконки в FAQ, «умные» переходы во вкладках кейсов и легкое неоновое свечение на фоне.
Адаптивность 100%: Сайт идеально смотрится как на больших 4К мониторах, так и на экранах смартфонов. Мобильное меню анимировано и скрыто под удобную кнопку-бургер.
Чистый код и скорость: Благодаря минимуму внешних скриптов сайт загружается практически мгновенно.

Буду рад вашей обратной связи и лайкам в комментариях! 👇
Просмотры: 54
Открыть в MAX Сообщить о неточности

Сообщить о неточности

Опишите, что нужно исправить. Если есть источник, добавьте ссылку.

Вы покидаете datool.ru

Ссылка ведёт на внешний сайт. datool.ru не отвечает за его содержимое — проверьте адрес, прежде чем вводить пароли или платёжные данные.

Переход через 10 с

Перейти