Дизайн формы бронирования (popup)

Нужно в короткие сроки

Техническое задание для дизайнера: форма бронирования (popup) для сайта supertrust.ae

📌 Цель

Разработать удобную и лёгкую в использовании форму бронирования в виде popup-окна, для двух услуг:

    •    Обычная уборка

    •    Генеральная уборка

Форма должна быть пошаговой, не перегруженной, с акцентом на мобильный UX и в соответствии с брендбуком. Количество шагов — до 5, логика адаптируется под выбранную услугу.

🖼️ Формат

    •    Модальное окно, вызываемое кнопкой Book Now

    •    Пошаговая форма с переключением «назад/вперёд» или progress-баром

🧼 Услуги и логика расчёта

1. Обычная уборка

    •    Пользователь указывает:

    •    Количество клинеров

    •    Количество часов

    •    Стоимость = клинеры × часы × ставка (ставка задаётся разработчиком)

2. Генеральная уборка

    •    Пользователь выберает:

    •    Количество спален

    •    Стоимость рассчитывается от количества спален 

🧭 Структура шагов

✅ Шаг 1: Выбор услуги

    •    Карточки:

    •    Обычная уборка

    •    Генеральная уборка

    •    Под каждой — краткое пояснение

✅ Шаг 2: Детали услуги

Если выбрана Обычная уборка:

    •    Поля:

    •    Кол-во клинеров (от 1 до 5, выбор в виде кнопок или селектора)

    •    Кол-во часов (от 2 до 12, шаг 1 час)

    •    Отображается стоимость (автоматически пересчитывается)

Если выбрана Генеральная уборка:

    •    Поля:

    •    выбор Кол-во спален (Studio, 1 BHK, 2 BHK, 3 BHK итд до 6)

    •    Отображается стоимость (по формуле от количества комнат)

✅ Шаг 3: Контактные данные

    •    Имя

    •    Телефон (обязательное поле)

    •    Email (опционально)

    •    Комментарий (опционально)

✅ Шаг 4: Время и адрес

    •    Календарь: выбор даты

    •    Время: выпадающий список/слоты

    •    Адрес: строка 

✅ Шаг 5: Подтверждение и оплата

    •    Сводка:

    •    Тип уборки

    •    Указанные параметры (клинеры/часы или спальни)

    •    Адрес

    •    Дата и время

    •    Итоговая стоимость

    •    Выбор способа оплаты:

    •    Картой онлайн

    •    Наличными

    •    Кнопка: Подтвердить заказ

🎨 Дизайн

    •    Следовать брендбуку (цвета, шрифты, отступы, кнопки)

    •    Современный, минималистичный стиль

    •    Очень важно: адаптация под мобильные устройства

    •    Интерактивные элементы должны быть крупными и понятными

🧾 На выходе от дизайнера

    •    Макет всех экранов формы в Figma (или другом согласованном инструменте)

    •    Готовность к передаче разработчику (экспорт стилей, компонентов, размеров)