Formularz rezerwacji samochodu - Figma Design Specs
Plik Figma: https://www.figma.com/design/Q3i1CT4DL91dl638a43RBg/Carei
Zrzuty ekranu
Desktop (1440x1024)
Mobile (390x1438)
Wersje formularza
| Wersja | Node ID | Rozmiar | Plik |
|---|---|---|---|
| Desktop | 24:1639 |
1440x1024 | desktop-formularz.jsx |
| Mobile | 1:171 |
390x1438 | mobile-formularz.jsx |
Kolory (Design Tokens)
| Nazwa | Hex | Zastosowanie |
|---|---|---|
| Carei Blue | #2F2482 |
Primary, tekst, checkboxy, nagłowki |
| Carei Red | #FF0000 |
Przyciski CTA, kropka w tytule |
| Tło formularza | #EDEDF3 |
Background modala |
| Tekst szary | #505050 |
Labele, placeholdery |
| Placeholder jasny | #C7C7C7 |
Maska telefonu |
| Border input | #D0D0D0 |
Obramowanie checkboxow opcji |
| Background strony | #F8F8F8 |
Tło sekcji |
Typografia
- Font primary: Albert Sans (Bold, SemiBold, Medium, Regular)
- Font system: Roboto (separatory sekcji)
- Tytul formularza: Albert Sans Bold 20px,
#2F2482 - Labele inputow: Albert Sans Regular 15px,
#505050 - Wartosci inputow: Albert Sans SemiBold 15px,
#2F2482 - Labele male (np. "Od kiedy?"): Albert Sans Regular 12px,
#505050 - Przycisk CTA: Albert Sans SemiBold 14px, white
Struktura formularza
1. Naglowek
- Tytul: "Wypelnij formularz rezerwacji." (z czerwona kropka)
- Przycisk zamkniecia (X) w rogu
2. Dane wynajmu
- Segment pojazdu - dropdown (np. "Segment B (np. Toyota Yaris)")
- Od kiedy? - date+time picker (np. "11:00, 28.02.2026")
- Do kiedy? - date picker z ikona kalendarza
- Wybrano: X dni - automatyczne podsumowanie
- Miejsce odbioru - text input z ikona MapPin
- Zwrot w tej samej lokalizacji - checkbox (domyslnie zaznaczony)
3. Opcje dodatkowe (sekcja z separatorem)
- Rozszerzone ubezpieczenie - checkbox, 300 zl
- Opis: "Obejmuje brak odpowiedzialnosci najemcy za wszelki szkody poniesione na aucie."
- Fotelik dla dziecka - checkbox, 50 zl
- Opis: "Prosimy zawrzec wiek dziecka w wiadomosci."
4. Dane najemcy (sekcja z separatorem)
- Imie - text input
- Nazwisko - text input
- Adres e-mail - text input
- Nr telefonu - z wyborem flagi kraju (+48), maska "___ ___ ___"
5. Wiadomosc
- Textarea - "Twoja wiadomosc dotyczaca rezerwacji" (143px wysokosci)
6. Stopka
- Zgoda na Polityke Prywatnosci - checkbox z linkiem
- Przycisk "Wyslij" - czerwony CTA z ikona strzalki
Roznice Desktop vs Mobile
| Element | Desktop (1440px) | Mobile (390px) |
|---|---|---|
| Layout inputow danych wynajmu | 2-3 kolumny obok siebie | 1 kolumna (full width) |
| Imie + Nazwisko | Obok siebie (2x 376px) | Pod soba (full width) |
| Email + Telefon | Obok siebie (2x 376px) | Pod soba (full width) |
| Opcje dodatkowe | Obok siebie (2x 376px) | Pod soba (full width) |
| Przycisk Wyslij | Po prawej obok checkboxa | Full width pod checkboxem |
| Dodatkowy element | - | "Infolinia 24h: +48 572 663 614" na dole |
| Modal | Wycentrowany overlay | Bottom sheet (od dolu) |
Wymiary komponentow
- Input height: 48px
- Textarea height: 143px
- Border radius inputow: 8px
- Border radius modala: 16px
- Padding modala desktop: 48px horizontal, 40px vertical
- Padding modala mobile: 24px horizontal, 32px vertical
- Gap miedzy sekcjami: 24px
- Gap wewnatrz sekcji: 16px
- Checkbox size: 24px (border-radius: 8px)
- Przycisk CTA: padding 16px 24px, border-radius 8px
Popup — rozwinięty formularz (Krok 2)
Plik Figma node: 32:645 (Overlay, 866x1354)
Zrzut ekranu Desktop
Struktura Popup (rozszerzenia vs Krok 1)
Popup to rozwinięta wersja formularza po wypełnieniu Kroku 1. Zawiera dodatkowe sekcje:
Wyjazd zagraniczny
- Separator: "Wyjazd zagraniczny"
- Checkbox: "Planuję trasę poza granicę Polski"
- Po zaznaczeniu → pojawia się wyszukiwarka krajów (patrz niżej)
Ubezpieczenie
- Separator: "Ubezpieczenie"
- Pakiet ochrony Soft — karta z checkbox, opisem, ceną "od 190 do 800 zł"
- Pakiet ochrony Premium — karta z checkbox, opisem, ceną "od 200 do 1200 zł"
Opcje dodatkowe (rozbudowane vs Krok 1)
- Dodatkowy kierowca — 100 zł, z opisem
- Zwiększenie limitu kilometrów — od 50 do 250 zł, z opisem
- Pełny bak paliwa — 650 zł
- Nawigacja GPS Europa — od 50 do 200 zł
- Podstawka dla dziecka — od 50 do 250 zł
- Fotelik 9-18 kg — od 50 do 250 zł
- Fotelik 18-36 kg — od 50 do 250 zł
- Zwrot nieumytego pojazdu — 290 zł
Dane najemcy + Wiadomość + Stopka
Identyczne jak w Kroku 1.
Node IDs (Popup)
| Element | Node ID | Rozmiar |
|---|---|---|
| Overlay (desktop) | 32:645 |
866x1354 |
| POPUP (wewnętrzny) | 32:397 |
866x1316 |
| OverlayMobile | 32:650 |
390x1257 |
Wyszukiwarka krajów (Input — rozwinięcia formularza)
Elementy po lewej stronie Popup w Figmie — 3 stany pola "Wyszukaj i dodaj kraj na trasie":
Zrzut ekranu — stany wyszukiwarki
Stan 1: Default (pusty)
- Node ID:
122:1091 - Ikona "+" + tekst: "Wyszukaj i dodaj kraj na trasie"
- Pole jest zwinięte
Stan 2: Active (wyszukiwanie)
- Node ID:
122:1054 - Pole tekstowe z wpisanym tekstem (np. "N|")
- Pod spodem: karty krajów pasujących do frazy (z flagą, nazwą, ceną "od 50 do 250 zł", przycisk "+")
- Np. 🇩🇪 Niemcy, 🇳🇴 Norwegia
- Drugi stan: po wybraniu (np. "C|") — wybrany kraj (🇩🇪 Niemcy) z "×" do usunięcia, + wyniki wyszukiwania (🇨🇿 Czechy)
Stan 3: Default z wybranymi (zwinięty)
- Node ID:
123:1195 - Ikona "+" + tekst: "Wyszukaj i dodaj kraj na trasie"
- Pod spodem: karty wybranych krajów z flagą, nazwą, ceną i przyciskiem "×" do usunięcia
- Np. 🇩🇪 Niemcy od 50 do 250 zł ×, 🇨🇿 Czechy od 50 do 250 zł ×
Node IDs (Wyszukiwarka krajów)
| Stan | Node ID | Opis |
|---|---|---|
| Default (pusty) | 122:1091 |
Zwinięty, tylko tekst "Wyszukaj i dodaj kraj" |
| Active (wyszukiwanie) | 122:1054 |
Rozwinięty z wynikami wyszukiwania |
| Default (wybrane) | 123:1195 |
Zwinięty z kartami wybranych krajów |