Лендинг SaaS-сервиса для оптимизации рекламных кампаний с помощью нейросетей. Интерфейс реализован на React, стилизация — через Tailwind CSS. Интерфейс разбит на независимые компоненты, что позволяет переиспользовать UI и упрощает поддержку и масштабирование проекта.
Ключевой элемент страницы — интерактивный калькулятор, который расчитывает насколько вырастет количество лидов при использовании сервиса. Я сделала модель не статической, а интерактивной, чтобы пользователь смог сразу видеть влияние параметров. Пользователь меняет ползунки на любом из трех параметров: текущий рекламный бюджет, стоимость клика, текущую конверсию. А калькулятор мгновенно расчитывает:
· текущие лиды
· потенциальные лиды при использовании сервиса
· процент прироста
Все значения пересчитываются реактивно через state, а UI мгновенно обновляется. Чтобы пользователю было проще понять эффект, результат показывается не только цифрами. Также в калькулятор добавлена динамическая визуализация роста лидов. Когда пользователь меняет параметры:
· график обновляется
· значения пересчитываются
· пользователь видит влияние каждого параметра
Интересная проблема возникла при реализации калькулятора. При стандартной формуле:
clicks = budget / CPCleads = clicks × conversion rate
процент прироста почти не менялся. Из-за этого интерфейс выглядел "статичным", и пользователь мог решить, что калькулятор просто показывает заранее заданный результат. Поэтому формулу пришлось переработать, чтобы результат зависел от входных параметров. Таким образом лендинг превращается из статической страницы в интерактивный инструмент, который помогает пользователю оценить потенциальный эффект от сервиса. Для React-лендинга это нормальный результат.
Несколько небольших решений сильно улучшили пользовательский опыт:
✔ калькулятор находится ближе к началу
✔ значения можно менять интуитивно
✔ результат обновляется мгновенно
✔ интерфейс не перегружен параметрами
Главная цель —показать ценность продукта за 10–15 секунд.
Ссылка на сайт
https://www.optiadsai.com/Ссылка на ГитХаб
https://github.com/irinaLeonova55/saas
