178 lines
6.3 KiB
Markdown
178 lines
6.3 KiB
Markdown
# 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 |
|