Projekt formularza rezerwacji (popup)

Potrzebne w krótkim czasie

Specyfikacja techniczna dla projektanta: formularz rezerwacji (popup) dla strony supertrust.ae

📌 Cel

Opracować wygodny i łatwy w użyciu formularz rezerwacji w formie popupu, dla dwóch usług:

    •    Czyszczenie zwykłe

    •    Generalne sprzątanie

Formularz powinien być wieloetapowy, nieprzeładowany, z naciskiem na UX mobilny i zgodny z brandbookiem. Liczba kroków — do 5, logika dostosowuje się do wybranej usługi.

🖼️ Format

    •    Okno modalne wywoływane przyciskiem Book Now

    •    Formularz wieloetapowy z przełączaniem „wstecz/do przodu” lub paskiem postępu

🧼 Usługi i logika kalkulacji

1. Czyszczenie zwykłe

    •    Użytkownik wskazuje:

    •    Liczbę sprzątaczy

    •    Liczbę godzin

    •    Koszt = sprzątacze × godziny × stawka (stawka ustalana przez programistę)

2. Generalne sprzątanie

    •    Użytkownik wybiera:

    •    Liczbę sypialni

    •    Koszt obliczany na podstawie liczby sypialni

🧭 Struktura kroków

✅ Krok 1: Wybór usługi

    •    Karty:

    •    Czyszczenie zwykłe

    •    Generalne sprzątanie

    •    Pod każdą — krótkie wyjaśnienie

✅ Krok 2: Szczegóły usługi

Jeśli wybrano Czyszczenie zwykłe:

    •    Pola:

    •    Liczba sprzątaczy (od 1 do 5, wybór w formie przycisków lub selektora)

    •    Liczba godzin (od 2 do 12, krok 1 godzina)

    •    Wyświetla się koszt (automatycznie przeliczany)

Jeśli wybrano Generalne sprzątanie:

    •    Pola:

    •    Wybór liczby sypialni (Studio, 1 BHK, 2 BHK, 3 BHK itd. do 6)

    •    Wyświetla się koszt (według wzoru od liczby pokoi)

✅ Krok 3: Dane kontaktowe

    •    Imię

    •    Telefon (pole obowiązkowe)

    •    Email (opcjonalnie)

    •    Komentarz (opcjonalnie)

✅ Krok 4: Czas i adres

    •    Kalendarz: wybór daty

    •    Czas: lista rozwijana / sloty

    •    Adres: linia tekstu

✅ Krok 5: Potwierdzenie i płatność

    •    Podsumowanie:

    •    Typ sprzątania

    •    Podane parametry (sprzątacze/godziny lub sypialnie)

    •    Adres

    •    Data i czas

    •    Ostateczny koszt

    •    Wybór metody płatności:

    •    Karta online

    •    Gotówka

    •    Przycisk: Potwierdź zamówienie

🎨 Projekt

    •    Zgodnie z brandbookiem (kolory, czcionki, marginesy, przyciski)

    •    Nowoczesny, minimalistyczny styl

    •    Bardzo ważne: dostosowanie do urządzeń mobilnych

    •    Elementy interaktywne powinny być duże i zrozumiałe

🧾 Efekt końcowy od projektanta

    •    Makieta wszystkich ekranów formularza w Figma (lub innym zatwierdzonym narzędziu)

    •    Gotowość do przekazania deweloperowi (eksport stylów, komponentów, rozmiarów)