Дизайн форми бронювання (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 (або іншому погодженому інструменті)

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