Нужно в короткие сроки
Техническое задание для дизайнера: форма бронирования (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 (или другом согласованном инструменте)
• Готовность к передаче разработчику (экспорт стилей, компонентов, размеров)
