InHarmony Преленды тест

Описание задачи:

Мы создаем преленд для сбора благотворительных средств на поддержку реальных инициатив в серой зоне (области с активными боевыми действиями, где испытываются серьезные трудности с доставкой воды, еды, медикаментов и других благ). Важен акцент на мобильную версию сайта, так как основная часть трафика будет мобильной.

Основные задачи:

Создать универсальную структуру преленда, которую можно адаптировать с минимальными изменениями для различных кампаний.

Контент легко заменяем: изображения, заголовки, описания и сумма сборов могут быть обновлены в зависимости от конкретной ситуации.

Дизайн и верстка преленда с фокусом на удобство использования на мобильных устройствах.

Все элементы должны легко адаптироваться под экраны смартфонов (легкий доступ к форме доната, минимальные скроллы и задержки).

Настроить блок оплаты, который поддерживает единоразовые и рекуррентный платежи.
Внедрить трекинг с использованием Redtrack.io для аналитики.

Включить трекинг событий на каждом этапе (нажатие кнопок, ввод данных, завершение оплаты).

Использовать поддомен: help.inharmony.com.ua.
Использовать хостинг Эда IP сервера 67.205.171.145

Примеры:

За основу берем ленд: https://www.actionagainsthunger.org/take-action/donate/ukraine-emergency-response/ (используем первые три экрана — донат, сертификаты, краткая информация).
Дополняем блоками по типу https://rescue-team.rolda.org/ (особенно внимание на оформление и донатные формы).

Структура лендинга:

1.Главный экран (Hero Section)

Эмоциональная картинка: Визуальный триггер, подчеркивающий проблему (изображение людей, страдающих в серой зоне). Важно, чтобы картинка мгновенно вызывала сочувствие и мотивацию помочь.
Заголовок: Прямое и краткое сообщение, акцент на срочность (например: "Срочная помощь в зоне боевых действий").
Форма пожертвования:

Переключатель между единоразовым и ежемесячным платежом.
Фиксированные суммы ($25, $50, $100 и т.д.) + поле для произвольной суммы.
Кнопка "Donate Now": Яркая и заметная, сразу под формой для удобства пользователя.
Информация о безопасности платежа (иконка замка или надпись "Secure Payment").

2.Блок доверия (Trust Section)

Рейтинги и сертификации:

Визуальные значки рейтингов (например, Charity Navigator, Charity Watch Top-Rated, Platinum Transparency).
Текст о том, сколько процентов средств идет непосредственно на помощь (например, "91% of your donation goes to help those in need").

Дополнительные ссылки:

Кнопка для тех, кто хочет помочь через рекомендованные фонды ("Have a Donor-Advised Fund? Give Here").

3.Информация о проблеме (About the Campaign Section)

Описание: Краткая информация о сборе средств, акцент на реальные проблемы серой зоны (например, "Срочная доставка воды и медикаментов в зону активных боевых действий").
Цифры и факты: Дополнить важными статистическими данными о том, как сборы помогают людям на месте.
Фотографии: Реальные изображения, подтверждающие деятельность организации (например, помощь людям на фоне обстрелов).

4.Подтверждение и благодарность (Thank You Section)

Текст благодарности: Сообщение пользователю о том, что его помощь имеет значение (например, "Спасибо за поддержку! Ваша помощь спасает жизни").
Социальные кнопки: Включить кнопки для быстрого распространения информации о сборе (Facebook, Instagram, Twitter и другие).

Платежный сервис - https://wiki.wayforpay.com/uk

Тут описано как работать с wayforpay - https://wiki.wayforpay.com/view/852102

ФИдбек по первой версии верстки.

Правки и новые вводные:

На главном экране оставляем место для Заголовка (Н1) и подзаголовка (Н3)
По дефолту ставим Monthly оплату (чтобы автоматом была подписка на месяц)
Cделать подпись под Monthly, как в оригинале, чтобы прям понимали что подписка будет. (Будем там писать разный текст, который будет мотивировать на подписку)
Уменьшить суммы в Monthly, чтобы было им приятней 😃 Суммы можешь взять как в оригинале. И нужно проверить, чтобы суммы при нажатии вставлялись.
Скрываем блок с “Proud to be one of the world’s highest-rated nonprofits” и добавляем бегущую строку с теми кто задонатил. Делаем как в том примере - https://rescue-team.rolda.org/. Для мобильной версии нашего сайта, делаем строку сразу после блока с оплатой
Добавляем блок под статистику. Будем тут писать какие-то главные 4 цифреных показателя. Берем пример с этого сайта - https://uanimals.org/en/
Добавляем блоки с рекомендационными сборами, которые у нас еще проходят. Делаем по типу блога, где показывается баннера с описанием и он кликабельный. Можно так же по примеру https://www.actionagainsthunger.org/take-action/donate/ukraine-emergency-response/ . Делаем 2-3 таких блока. Или же делаем их карусель/слайдер.
Добавляем в конец Our Partnerships по примеру https://uanimals.org/en/
Добавить В конце форму для подписки на мейл рассылку , по примеру https://uanimals.org/en/
Убрать статистику снизу по шейрам и лайкам