Задание: Figma. сделать дизайн лендинга по прототипу согласно тз (Дистанционная работа)
ТЗ: Дизайн лендинга по готовому прототипу
1) Задача
Сделать дизайн лендинга (без верстки) строго по прототипу (см. изображение прототипа) и вписать реферальную форму заявки (см. скриншоты формы). Итог нужен в Figma.
2) Исходные материалы
Прототип структуры (картинка): блоки и порядок не менять, можно улучшать визуально и типографику.
Требование: взять палитру/настроение/кнопки/инпуты/акценты максимально близко к референсу.
Форма заявки (скриншоты): поля и логика выбора "Частное лицо / Компания".
3) Структура лендинга (как в прототипе)
Шапка: логотип + контакты (телефон, email).
Hero-блок: заголовок "Перевозка автомобилей, негабаритных и тяжеловесных грузов, перегон грузового транспорта по РФ и СНГ".
2 колонки под hero:
слева: форма заявки (реферальная)
справа: УТП/преимущества (маркированный список)
Короткие факты/цифры (строка мелких блоков под 2 колонками).
Полоса "Согласие на обработку персональных данных" (как отдельный блок).
Блок "Почему нам доверяют": заголовок + 2-3 колонки текста/пунктов (как в прототипе).
4) Форма заявки - обязательные поля/логика
Сделать дизайн формы под существующую структуру (как на скринах), учесть состояния:
Переключатель типа клиента (выпадающий список):
"Частное лицо"
"Компания"
Если "Частное лицо":
ФИО
Телефон
Email
Пункт отправления (select)
Пункт назначения (select)
Количество транспортных средств
Марка и модель
Примечание (textarea)
Кнопка "Отправить"
Если "Компания":
Название компании
ФИО
Телефон
Email
Пункт отправления (select)
Пункт назначения (select)
Количество транспортных средств
Марка и модель
Примечание (textarea)
Кнопка "Отправить"
Требования к UI формы:
Единый стиль инпутов/селектов/кнопки как в референсе
Состояния: default / focus / error (достаточно показать 1-2 примера ошибок)
5) Адаптивы
Нужно минимум:
Desktop (ширина 1440)
Mobile (ширина 375)
Логика адаптива:
На мобилке колонки (форма + УТП) становятся в столбик, форма первой.
Факты/цифры - в 2 строки или карусель/сетку (на усмотрение дизайнера, без изменения смысла).
6) Что отдать в результате (deliverables)
В Figma:
Макеты: Desktop + Mobile (одна страница/один лендинг).
Мини-UI kit: цвета, стили текста, кнопки, инпуты/селекты (компоненты).
Страница/фрейм с примерами состояний формы (focus/error).
Все элементы собраны аккуратно, стили заданы, отступы консистентные.
7) Правки
2 круга правок включены (мелкие корректировки по тексту/отступам/цветам).
