Project-Pro/carei.pagedev.pl
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jacek Pyziak
2026-03-25 00:41:16 +01:00
parent 1739f354d1
commit a82ec90a51
48 changed files with 4019 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
docs/figma-formularz/README.md Normal file
View File

@@ -0,0 +1,177 @@
# Formularz rezerwacji samochodu - Figma Design Specs
Plik Figma: https://www.figma.com/design/Q3i1CT4DL91dl638a43RBg/Carei
## Zrzuty ekranu
### Desktop (1440x1024)
![Desktop Formularz](screenshot-desktop.png)
### Mobile (390x1438)
![Mobile Formularz](screenshot-mobile.png)
## 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
![Popup Desktop](screenshot-popup-desktop.png)
### 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
![Input Kraje Stany](screenshot-input-kraje-stany.png)
### 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 |

210
docs/figma-formularz/desktop-formularz.jsx Normal file
View File

@@ -0,0 +1,210 @@
/**
* Desktop Formularz Rezerwacji - Figma Reference Code
* Node ID: 24:1639 | Size: 1440x1024
* Figma: https://www.figma.com/design/Q3i1CT4DL91dl638a43RBg/Carei?node-id=24:1639
*
* UWAGA: To jest kod referencyjny z Figmy (React + Tailwind).
* Nalezy go zaadaptowac do stosu technologicznego projektu (WordPress/PHP).
*/
const imgImage = "https://www.figma.com/api/mcp/asset/7d62e9d5-67da-4e89-adb3-68cb959aa552";
const imgImage1 = "https://www.figma.com/api/mcp/asset/7c4ee95b-a6ca-4664-b3ae-abed558c8c95";
const imgWhiteWagonSpeedsHighwayDaylightEditorialCar1 = "https://www.figma.com/api/mcp/asset/b19f198e-4b71-4e84-afa7-ea4fbef0b1e3";
const imgImage4 = "https://www.figma.com/api/mcp/asset/5b1a5a01-782c-4e31-9806-93321460eb13";
const imgImage2 = "https://www.figma.com/api/mcp/asset/0d24a24c-d505-4962-85c4-7c5e1a24a8b6";
const imgImage3 = "https://www.figma.com/api/mcp/asset/a0471dca-16f4-4142-b0ba-a2d04c7a3d6a";
const imgCaretDown = "https://www.figma.com/api/mcp/asset/c71c6991-beac-4fa3-a535-18cf0cf4dea3";
const imgLogo = "https://www.figma.com/api/mcp/asset/b679a1c6-68f7-48ea-b3d3-71be81d22dc9";
const imgLayer1 = "https://www.figma.com/api/mcp/asset/683370a1-4956-4401-bb45-27619bcb0044";
const imgVector = "https://www.figma.com/api/mcp/asset/fdf1c7d3-63c1-4027-ae64-881f582cd8de";
const imgRectangle22 = "https://www.figma.com/api/mcp/asset/9ca45d86-0986-4cec-ac47-b0c44074f7dc";
const imgLayer2 = "https://www.figma.com/api/mcp/asset/f83a9925-2305-4c3d-93ac-812bc9ad6611";
const imgVector1 = "https://www.figma.com/api/mcp/asset/cb4a1e0b-f6ad-47e9-8ed8-b7791c8d5e51";
const imgVector2 = "https://www.figma.com/api/mcp/asset/e42ecd5d-274c-44d0-bd30-ab0549312ea6";
const imgCaretDown1 = "https://www.figma.com/api/mcp/asset/8e4251ef-1a15-4f22-be18-8f47ad361a22";
const imgMapPin = "https://www.figma.com/api/mcp/asset/a20f5eb0-4d70-4fdb-b230-f019fcca8891";
const imgCheck = "https://www.figma.com/api/mcp/asset/43d06708-0af0-4d32-be36-f6d6bdcdc6f8";
const imgCalendarBlank = "https://www.figma.com/api/mcp/asset/e6e03b59-391e-4785-ad2a-6ede64b251f1";
const imgVector3 = "https://www.figma.com/api/mcp/asset/f4e47efe-d2db-408a-bbc2-96e9a092b594";
const imgVector4 = "https://www.figma.com/api/mcp/asset/1bc3c7f1-121c-4ff5-8196-cb74bec1d63f";
const imgX = "https://www.figma.com/api/mcp/asset/1a74632a-93e6-4953-a509-cdcecd5181f6";
export default function DesktopFormularz() {
return (
<div className="bg-white relative size-full" data-name="Desktop Formularz" data-node-id="24:1639">
<div className="-translate-x-1/2 absolute bg-[rgba(0,0,0,0.2)] h-[950px] left-1/2 top-[75px] w-[1440px]" data-name="bg" data-node-id="24:2121" />
<div className="-translate-x-1/2 -translate-y-1/2 absolute bg-[#ededf3] content-stretch flex flex-col gap-[24px] items-start justify-center left-1/2 overflow-clip px-[48px] py-[40px] rounded-[16px] top-[calc(50%+24.5px)]" data-node-id="24:2123">
<p className="font-['Albert_Sans:Bold',sans-serif] font-bold leading-[0] min-w-full relative shrink-0 text-[#2f2482] text-[20px] text-center w-[min-content]" data-node-id="24:2124">
<span className="leading-[32px]">Wypełnij formularz rezerwacji</span>
<span className="leading-[32px] text-[red]">.</span>
</p>
<div className="grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0 w-full" data-name="Dane wynajmu" data-node-id="24:2125">
<div className="bg-white col-1 h-[48px] ml-0 mt-0 relative rounded-[8px] row-1 w-[48.83%]" data-name="Input" data-node-id="24:2126">
<p className="absolute font-['Albert_Sans:Medium',sans-serif] font-medium leading-[0] left-[16px] text-[#2f2482] text-[0px] top-[12px] whitespace-nowrap" data-node-id="24:2127">
<span className="font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[24px] text-[15px]">Segment B</span>
<span className="font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] text-[#505050] text-[15px]">{` (np. Toyta Yaris)`}</span>
</p>
<div className="-translate-y-1/2 absolute right-[12px] size-[16px] top-1/2" data-name="CaretDown" data-node-id="24:2128">
<img alt="" className="absolute block max-w-none size-full" src={imgCaretDown1} />
</div>
</div>
<div className="bg-white col-1 h-[48px] ml-0 mt-[80px] relative rounded-[8px] row-1 w-[48.83%]" data-name="Input" data-node-id="24:2131">
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[36px] text-[#505050] text-[15px] top-[12px] whitespace-nowrap" data-node-id="24:2132">
Miejsce odbioru
</p>
<div className="absolute left-[12px] size-[16px] top-[16px]" data-name="MapPin" data-node-id="24:2234">
<img alt="" className="absolute block max-w-none size-full" src={imgMapPin} />
</div>
</div>
<div className="col-1 content-stretch flex gap-[12px] items-center ml-[51.69%] mt-[92px] relative row-1 w-[30.930000000000003%]" data-node-id="24:2136">
<div className="bg-[#2f2482] overflow-clip relative rounded-[8px] shrink-0 size-[24px]" data-node-id="24:2137">
<div className="-translate-x-1/2 -translate-y-1/2 absolute left-1/2 size-[12px] top-1/2" data-name="Check" data-node-id="24:2138">
<img alt="" className="absolute block max-w-none size-full" src={imgCheck} />
</div>
</div>
<p className="font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[24px] relative shrink-0 text-[#2f2482] text-[14px] whitespace-nowrap" data-node-id="24:2141">
Zwrot w tej samej lokalizacji
</p>
</div>
<div className="bg-white col-1 h-[48px] ml-[75.97%] mt-0 relative rounded-[8px] row-1 w-[24.03%]" data-name="Input" data-node-id="24:2142">
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[36px] text-[#505050] text-[15px] top-[calc(50%-12px)] whitespace-nowrap" data-node-id="24:2143">
Do kiedy?
</p>
<div className="absolute left-[12px] size-[16px] top-[16px]" data-name="CalendarBlank" data-node-id="24:2144">
<img alt="" className="absolute block max-w-none size-full" src={imgCalendarBlank} />
</div>
</div>
<div className="bg-white col-1 h-[48px] leading-[24px] ml-[50.91%] mt-0 relative rounded-[8px] row-1 w-[24.030000000000005%] whitespace-nowrap" data-name="Input" data-node-id="24:2150">
<p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold left-[16px] text-[#2f2482] text-[15px] top-[calc(50%-5px)] tracking-[-0.3px]" data-node-id="24:2151">
11:00, 28.02.2026
</p>
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal left-[16px] text-[#505050] text-[12px] top-[calc(50%-22px)]" data-node-id="24:2152">
Od kiedy?
</p>
</div>
<p className="col-1 font-['Albert_Sans:SemiBold',sans-serif] font-semibold ml-[85.58%] mt-[52px] relative row-1 text-[#2f2482] text-[0px] text-center w-[14.410000000000002%]" data-node-id="24:2153">
<span className="font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] text-[#505050] text-[15px]">Wybrano:</span>
<span className="leading-[24px] text-[14px]">{` 3 dni`}</span>
</p>
</div>
<div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full" data-name="Opcje dodatkowe" data-node-id="24:2154">
<div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0" data-name="Separator" data-node-id="24:2155">
<div className="col-1 h-0 ml-0 mt-[8px] relative row-1 w-[770px]" data-name="Vector" data-node-id="24:2156">
<div className="absolute inset-[-0.5px_0]">
<img alt="" className="block max-w-none size-full" src={imgVector3} />
</div>
</div>
<div className="bg-[#ededf3] col-1 content-stretch flex items-center justify-center ml-[314.5px] mt-0 overflow-clip px-[24px] relative row-1" data-node-id="24:2157">
<p className="font-['Roboto:Regular',sans-serif] font-normal leading-[16px] relative shrink-0 text-[12px] text-[rgba(0,0,0,0.24)] text-center whitespace-nowrap" data-node-id="24:2158">
Opcje dodatkowe
</p>
</div>
</div>
<div className="content-stretch flex gap-[16px] items-start relative shrink-0 w-full" data-name="Opcje" data-node-id="24:2159">
<div className="bg-white h-[118px] overflow-clip relative rounded-[8px] shrink-0 w-[376px]" data-name="Opcja dodatkowa" data-node-id="24:2160">
<div className="absolute border border-[#d0d0d0] border-solid left-[16px] rounded-[8px] size-[24px] top-[16px]" data-node-id="24:2161" />
<p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[20px] left-[56px] text-[#2f2482] text-[15px] top-[calc(50%-43px)] whitespace-nowrap" data-node-id="24:2162">
Rozszerzone ubezpieczenie
</p>
<p className="absolute font-['Roboto:Regular',sans-serif] font-normal h-[34px] leading-[16px] left-[56px] text-[#505050] text-[12px] top-[40px] w-[262px]" data-node-id="24:2163">
Obejmuje brak odpowiedzialności najemcy za wszelki szkody poniesione na aucie.
</p>
<p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[24px] left-[56px] text-[#2f2482] text-[14px] top-[78px] whitespace-nowrap" data-node-id="24:2164">
300 zł
</p>
</div>
<div className="bg-white h-[118px] overflow-clip relative rounded-[8px] shrink-0 w-[376px]" data-name="Opcja dodatkowa" data-node-id="24:2165">
<div className="absolute border border-[#d0d0d0] border-solid left-[16px] rounded-[8px] size-[24px] top-[16px]" data-node-id="24:2166" />
<p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[20px] left-[56px] text-[#2f2482] text-[15px] top-[calc(50%-43px)] w-[262px]" data-node-id="24:2167">
Fotelik dla dziecka
</p>
<p className="absolute font-['Roboto:Regular',sans-serif] font-normal leading-[16px] left-[56px] text-[#505050] text-[12px] top-[40px] w-[262px]" data-node-id="24:2168">
Prosimy zawrzeć wiek dziecka w wiadomości.
</p>
<p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[24px] left-[56px] text-[#2f2482] text-[14px] top-[78px] whitespace-nowrap" data-node-id="24:2169">
50 zł
</p>
</div>
</div>
</div>
<div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full" data-name="Dane najemcy" data-node-id="24:2170">
<div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0" data-name="Separator" data-node-id="24:2171">
<div className="col-1 h-0 ml-0 mt-[8px] relative row-1 w-[770px]" data-name="Vector" data-node-id="24:2172">
<div className="absolute inset-[-0.5px_0]">
<img alt="" className="block max-w-none size-full" src={imgVector3} />
</div>
</div>
<div className="bg-[#ededf3] col-1 content-stretch flex items-center justify-center ml-[323px] mt-0 overflow-clip px-[24px] relative row-1" data-node-id="24:2173">
<p className="font-['Roboto:Regular',sans-serif] font-normal leading-[16px] relative shrink-0 text-[12px] text-[rgba(0,0,0,0.24)] text-center whitespace-nowrap" data-node-id="24:2174">
Dane najemcy
</p>
</div>
</div>
<div className="content-start flex flex-wrap gap-[16px] items-start relative shrink-0 w-full" data-node-id="24:2220">
<div className="bg-white h-[48px] leading-[24px] relative rounded-[8px] shrink-0 w-[376px] whitespace-nowrap" data-name="Input" data-node-id="24:2175">
<p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold left-[16px] text-[#2f2482] text-[15px] top-[calc(50%-5px)]" data-node-id="24:2176">
Daria
</p>
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal left-[16px] text-[#505050] text-[12px] top-[calc(50%-22px)]" data-node-id="24:2177">
Imię
</p>
</div>
<div className="bg-white h-[48px] leading-[24px] relative rounded-[8px] shrink-0 w-[376px] whitespace-nowrap" data-name="Input" data-node-id="24:2226">
<p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold left-[16px] text-[#2f2482] text-[15px] top-[calc(50%-5px)]" data-node-id="24:2227">
Pyziak
</p>
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal left-[16px] text-[#505050] text-[12px] top-[calc(50%-22px)]" data-node-id="24:2228">
Nazwisko
</p>
</div>
<div className="bg-white h-[48px] relative rounded-[8px] shrink-0 w-[376px]" data-name="Input" data-node-id="24:2178">
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[16px] text-[#505050] text-[15px] top-[calc(50%-12px)] whitespace-nowrap" data-node-id="24:2179">
Adres e-mail
</p>
</div>
<div className="bg-white h-[48px] relative rounded-[8px] shrink-0 w-[376px]" data-name="Input" data-node-id="24:2180">
<p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[24px] left-[72px] text-[#2f2482] text-[15px] top-[calc(50%-5px)] whitespace-nowrap" data-node-id="24:2181">
+48
</p>
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[72px] text-[#505050] text-[12px] top-[calc(50%-22px)] w-[62px]" data-node-id="24:2182">
Nr telefonu
</p>
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[109px] text-[#c7c7c7] text-[15px] top-[calc(50%-5px)] tracking-[2.85px] whitespace-nowrap" data-node-id="24:2183">
___ ___ ___
</p>
</div>
</div>
</div>
<div className="bg-white h-[143px] relative rounded-[8px] shrink-0 w-full" data-name="Input" data-node-id="24:2191">
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[16px] text-[#505050] text-[15px] top-[calc(50%-59.5px)] whitespace-nowrap" data-node-id="24:2192">
Twoja wiadomość dotycząca rezerwacji
</p>
</div>
<div className="content-stretch flex items-center justify-between relative shrink-0 w-full" data-node-id="24:2221">
<div className="content-stretch flex gap-[12px] items-center relative shrink-0" data-node-id="24:2193">
<div className="bg-[#2f2482] overflow-clip relative rounded-[8px] shrink-0 size-[24px]" data-node-id="24:2194">
<div className="-translate-x-1/2 -translate-y-1/2 absolute left-1/2 size-[12px] top-1/2" data-name="Check" data-node-id="24:2195">
<img alt="" className="absolute block max-w-none size-full" src={imgCheck} />
</div>
</div>
<p className="font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[0] relative shrink-0 text-[#2f2482] text-[14px] whitespace-nowrap" data-node-id="24:2198">
<span className="leading-[24px]">{`Zgadzam się na `}</span>
<span className="[text-decoration-skip-ink:none] decoration-solid leading-[24px] underline">Politykę Prywatności</span>
</p>
</div>
<div className="bg-[red] content-stretch flex gap-[10px] items-center justify-center overflow-clip px-[24px] py-[16px] relative rounded-[8px] shrink-0 w-[238px]" data-name="Button A Black" data-node-id="24:2199">
<div className="h-[11.998px] relative shrink-0 w-[12px]" data-name="Vector" data-node-id="24:2200">
<img alt="" className="absolute block max-w-none size-full" src={imgVector} />
</div>
<div className="flex flex-col font-['Albert_Sans:SemiBold',sans-serif] font-semibold justify-center leading-[0] relative shrink-0 text-[14px] text-white whitespace-nowrap" data-node-id="24:2201">
<p className="leading-[14px]">Wyślij</p>
</div>
</div>
</div>
<div className="absolute left-[24px] size-[24px] top-[24px]" data-name="X" data-node-id="32:170">
<img alt="" className="absolute block max-w-none size-full" src={imgX} />
</div>
</div>
</div>
);
}

89
docs/figma-formularz/input-wyszukiwarka-krajow.jsx Normal file
View File

@@ -0,0 +1,89 @@
// Figma Design Context: Wyszukiwarka krajów (Input — stany)
// Node ID: 122:1054 (Active/Wyszukiwanie), 122:1091 (Default pusty), 123:1195 (Default wybrane)
// Pobrano: 2026-03-25
// UWAGA: Kod referencyjny React+Tailwind z Figma MCP — do adaptacji na PHP/HTML/CSS
const imgImage1 = "https://www.figma.com/api/mcp/asset/08457e8b-11f6-4194-b0a2-a5b2c900a505"; // Flaga Niemcy
const imgImage2 = "https://www.figma.com/api/mcp/asset/54e5a65c-6ca3-4749-89cf-12d9651f8a07"; // Flaga Norwegia
const imgImage3 = "https://www.figma.com/api/mcp/asset/dff6d6a5-6c45-46ef-9ed5-50ca45e0aef8"; // Flaga Czechy
const imgPlus = "https://www.figma.com/api/mcp/asset/f6b0c0c6-ab8c-4156-9e90-650bb559fa2f";
const imgVector11 = "https://www.figma.com/api/mcp/asset/a858c025-8ee0-4a0b-ad87-7a13a6a57d21";
const imgPlus1 = "https://www.figma.com/api/mcp/asset/07f69e9c-5ea5-4b67-b4e8-cc09e619e1fe"; // Plus (dodaj)
const imgPlus2 = "https://www.figma.com/api/mcp/asset/1f56ab37-6765-401c-807e-dedef33f0056"; // X (usuń)
const imgPlus3 = "https://www.figma.com/api/mcp/asset/9b64413d-57e9-4917-87d9-e158e3266e16";
/*
* STANY WYSZUKIWARKI KRAJÓW:
*
* Stan 1 (Default pusty, 122:1091):
* - Ikona "+" + "Wyszukaj i dodaj kraj na trasie"
* - Pole zwinięte, 770x48
*
* Stan 2 (Active/Wyszukiwanie, 122:1054):
* - Pole tekstowe z wpisanym tekstem (np. "N|")
* - Separator linia
* - Pod spodem: karty krajów pasujących do frazy
* - Karta: Flaga (24px, rounded-full) + Nazwa + "od 50 do 250 zł" + "+" (dodaj)
* - 2 kolumny obok siebie (363px each)
* - Drugi wariant: po wybraniu jednego (np. "C|"):
* - Wybrany kraj: bg rgba(47,36,130,0.05), border rgba(47,36,130,0.2), ikona "×"
* - Wyniki: normalne karty z "+"
*
* Stan 3 (Default wybrane, 123:1195):
* - Ikona "+" + "Wyszukaj i dodaj kraj na trasie"
* - Pod spodem: karty wybranych krajów z "×" do usunięcia
* - bg-white, border rgba(0,0,0,0.1), 770x128 total
*
* KARTY KRAJÓW:
* - Wymiar: 363x56
* - Flaga: 24px okrągła (overflow hidden, border #d3d3d3)
* - Nazwa: Albert Sans SemiBold 15px, #2F2482
* - Cena: "od 50 do 250 zł" — 10px "od"/"do", 14px wartości, #505050
* - Akcja: "+" (dodaj) lub "×" (usuń)
* - Wybrany: bg rgba(47,36,130,0.05), border rgba(47,36,130,0.2)
*/
export default function Input() {
return (
<div className="bg-white relative rounded-[8px] size-full" data-name="Input" data-node-id="122:1054">
<div className="absolute content-stretch flex gap-[8px] items-center left-[16px] top-[12px]" data-node-id="122:1055">
<div className="relative shrink-0 size-[16px]" data-name="Plus" data-node-id="122:1056">
<img alt="" className="absolute block max-w-none size-full" src={imgPlus} />
</div>
<p className="font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[0] relative shrink-0 text-[#2f2482] text-[15px] tracking-[-0.3px] whitespace-nowrap" data-node-id="122:1060">
<span className="leading-[24px]">N</span>
<span className="leading-[24px] text-[#505050]">|</span>
</p>
</div>
<div className="absolute bottom-[80px] h-0 left-[16px] w-[738px]" data-node-id="122:1061">
<div className="absolute inset-[-0.5px_0]">
<img alt="" className="block max-w-none size-full" src={imgVector11} />
</div>
</div>
{/* Karta: Niemcy */}
<div className="absolute border border-[rgba(0,0,0,0.1)] border-solid h-[56px] left-[16px] overflow-clip rounded-[8px] top-[60px] w-[363px]" data-name="Opcja dodatkowa" data-node-id="122:1104">
<p className="absolute font-semibold left-[43.5px] text-[#2f2482] text-[15px] top-[calc(50%-10px)]">Niemcy</p>
<p className="absolute left-[310.5px] text-[#505050] text-right top-[15.5px]">
<span className="text-[10px]">od </span><span className="text-[14px]">50 </span>
<span className="text-[10px]">do </span><span className="text-[14px]">250 zł</span>
</p>
<div className="absolute left-[11.5px] overflow-clip rounded-full size-[24px] top-[15.5px]" data-name="Flag">
<img alt="Niemcy" src={imgImage1} />
</div>
<div className="absolute left-[330.5px] size-[16px] top-[19.5px]" data-name="Plus">
<img alt="Dodaj" src={imgPlus1} />
</div>
</div>
{/* Karta: Norwegia */}
<div className="absolute border border-[rgba(0,0,0,0.1)] border-solid h-[56px] left-[391px] overflow-clip rounded-[8px] top-[60px] w-[363px]" data-name="Opcja dodatkowa" data-node-id="122:1114">
<p className="absolute font-semibold left-[43.5px] text-[#2f2482] text-[15px] top-[calc(50%-10px)]">Norwegia</p>
<div className="absolute left-[11.5px] overflow-clip rounded-full size-[24px] top-[15.5px]" data-name="Flag">
<img alt="Norwegia" src={imgImage2} />
</div>
<div className="absolute left-[330.5px] size-[16px] top-[19.5px]" data-name="Plus">
<img alt="Dodaj" src={imgPlus1} />
</div>
</div>
</div>
);
}

177
docs/figma-formularz/mobile-formularz.jsx Normal file
View File

@@ -0,0 +1,177 @@
/**
* Mobile Formularz Rezerwacji - Figma Reference Code
* Node ID: 1:171 | Size: 390x1438
* Figma: https://www.figma.com/design/Q3i1CT4DL91dl638a43RBg/Carei?node-id=1:171
*
* UWAGA: To jest kod referencyjny z Figmy (React + Tailwind).
* Nalezy go zaadaptowac do stosu technologicznego projektu (WordPress/PHP).
*/
const imgImage1 = "https://www.figma.com/api/mcp/asset/d7462c8b-c33e-4426-addc-6aa7121245be";
const imgCaretDown = "https://www.figma.com/api/mcp/asset/22507870-d317-4bee-bc66-02b7e215ec0d";
const imgList = "https://www.figma.com/api/mcp/asset/bf6515df-4385-405a-8211-f508bacdd20a";
const imgLogo = "https://www.figma.com/api/mcp/asset/5d5683fa-8bea-4a2b-9dae-faffa5b81b1b";
const imgVector = "https://www.figma.com/api/mcp/asset/54b76a10-8f4c-4661-8579-bbcd00e7976e";
const imgCaretDown2 = "https://www.figma.com/api/mcp/asset/623eeea2-80e1-4a81-acde-9d8df8732678";
const imgCheck = "https://www.figma.com/api/mcp/asset/b452ba20-ab69-4d6d-a006-1763b04e4ca1";
const imgCalendarBlank = "https://www.figma.com/api/mcp/asset/3d81b9b9-8c42-47e9-812f-7568c688cdb3";
const imgMapPin = "https://www.figma.com/api/mcp/asset/19dfc075-5ce6-4084-9a95-1f1904c56643";
const imgVector1 = "https://www.figma.com/api/mcp/asset/c5011a40-85ba-420b-a94c-f3a3ba5dbe89";
const imgVector2 = "https://www.figma.com/api/mcp/asset/f5f57fd8-7758-4c5e-a232-478f70ec4924";
const imgX = "https://www.figma.com/api/mcp/asset/81fbb5d4-04d5-4b57-bbed-f0249d23800a";
export default function MobileFormularz() {
return (
<div className="bg-white relative size-full" data-name="Mobile Formularz" data-node-id="1:171">
<div className="-translate-x-1/2 absolute bg-[rgba(0,0,0,0.2)] h-[1479px] left-1/2 top-[-2px] w-[390px]" data-name="bg" data-node-id="2:1158" />
<div className="absolute bg-[#ededf3] content-stretch flex flex-col gap-[24px] h-[1257px] items-start justify-center left-0 overflow-clip px-[24px] py-[32px] rounded-tl-[16px] rounded-tr-[16px] top-[181px] w-[390px]" data-node-id="2:1160">
<p className="font-['Albert_Sans:Bold',sans-serif] font-bold leading-[0] min-w-full relative shrink-0 text-[#2f2482] text-[20px] w-[min-content]" data-node-id="2:1175">
<span className="leading-[32px]">Wypełnij formularz rezerwacji</span>
<span className="leading-[32px] text-[red]">.</span>
</p>
<div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0" data-name="Dane wynajmu" data-node-id="10:751">
<div className="bg-white col-1 h-[48px] ml-0 mt-0 relative rounded-[8px] row-1 w-[342px]" data-name="Input" data-node-id="4:76">
<p className="absolute font-['Albert_Sans:Medium',sans-serif] font-medium leading-[0] left-[16px] text-[#2f2482] text-[0px] top-[12px] whitespace-nowrap" data-node-id="2:1165">
<span className="font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[24px] text-[15px]">Segment B</span>
<span className="font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] text-[#505050] text-[15px]">{` (np. Toyta Yaris)`}</span>
</p>
<div className="-translate-y-1/2 absolute right-[12px] size-[16px] top-1/2" data-name="CaretDown" data-node-id="4:78">
<img alt="" className="absolute block max-w-none size-full" src={imgCaretDown2} />
</div>
</div>
<div className="bg-white col-1 h-[48px] leading-[24px] ml-0 mt-[64px] relative rounded-[8px] row-1 w-[167px] whitespace-nowrap" data-name="Input" data-node-id="4:351">
<p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold left-[16px] text-[#2f2482] text-[15px] top-[calc(50%-5px)] tracking-[-0.3px]" data-node-id="4:352">
11:00, 28.02.2026
</p>
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal left-[16px] text-[#505050] text-[12px] top-[calc(50%-22px)]" data-node-id="4:353">
Od kiedy?
</p>
</div>
<div className="bg-white col-1 h-[48px] ml-[175px] mt-[64px] relative rounded-[8px] row-1 w-[167px]" data-name="Input" data-node-id="4:343">
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[36px] text-[#505050] text-[15px] top-[calc(50%-12px)] whitespace-nowrap" data-node-id="4:344">
Do kiedy?
</p>
<div className="absolute left-[12px] size-[16px] top-[16px]" data-name="CalendarBlank" data-node-id="4:345">
<img alt="" className="absolute block max-w-none size-full" src={imgCalendarBlank} />
</div>
</div>
<p className="col-1 font-['Albert_Sans:SemiBold',sans-serif] font-semibold ml-[120px] mt-[120px] relative row-1 text-[#2f2482] text-[0px] text-center whitespace-nowrap" data-node-id="2:1222">
<span className="font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] text-[#505050] text-[15px]">Wybrano:</span>
<span className="leading-[24px] text-[14px]">{` 3 dni`}</span>
</p>
<div className="bg-white col-1 h-[48px] ml-0 mt-[156px] relative rounded-[8px] row-1 w-[342px]" data-name="Input" data-node-id="24:2246">
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[36px] text-[#505050] text-[15px] top-[12px] whitespace-nowrap" data-node-id="24:2247">
Miejsce odbioru
</p>
<div className="absolute left-[12px] size-[16px] top-[16px]" data-name="MapPin" data-node-id="24:2248">
<img alt="" className="absolute block max-w-none size-full" src={imgMapPin} />
</div>
</div>
<div className="col-1 content-stretch flex gap-[12px] items-center ml-0 mt-[220px] relative row-1" data-node-id="4:154">
<div className="bg-[#2f2482] overflow-clip relative rounded-[8px] shrink-0 size-[24px]" data-node-id="4:110">
<div className="-translate-x-1/2 -translate-y-1/2 absolute left-1/2 size-[12px] top-1/2" data-name="Check" data-node-id="4:111">
<img alt="" className="absolute block max-w-none size-full" src={imgCheck} />
</div>
</div>
<p className="font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[24px] relative shrink-0 text-[#2f2482] text-[14px] whitespace-nowrap" data-node-id="4:109">
Zwrot w tej samej lokalizacji
</p>
</div>
</div>
<div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full" data-name="Opcje dodatkowe" data-node-id="10:749">
<div className="content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full" data-name="Opcje" data-node-id="10:748">
<div className="bg-white h-[118px] overflow-clip relative rounded-[8px] shrink-0 w-full" data-name="Opcja dodatkowa" data-node-id="10:734">
<div className="absolute border border-[#d0d0d0] border-solid left-[16px] rounded-[8px] size-[24px] top-[16px]" data-node-id="10:735" />
<p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[20px] left-[56px] text-[#2f2482] text-[15px] top-[calc(50%-43px)] whitespace-nowrap" data-node-id="10:736">
Rozszerzone ubezpieczenie
</p>
<p className="absolute font-['Roboto:Regular',sans-serif] font-normal h-[34px] leading-[16px] left-[56px] text-[#505050] text-[12px] top-[40px] w-[262px]" data-node-id="10:737">
Obejmuje brak odpowiedzialności najemcy za wszelki szkody poniesione na aucie.
</p>
<p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[24px] left-[56px] text-[#2f2482] text-[14px] top-[78px] whitespace-nowrap" data-node-id="10:738">
300 zł
</p>
</div>
<div className="bg-white h-[104px] overflow-clip relative rounded-[8px] shrink-0 w-full" data-name="Opcja dodatkowa" data-node-id="10:740">
<div className="absolute border border-[#d0d0d0] border-solid left-[16px] rounded-[8px] size-[24px] top-[16px]" data-node-id="10:741" />
<p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[20px] left-[56px] text-[#2f2482] text-[15px] top-[calc(50%-36px)] w-[262px]" data-node-id="10:742">
Fotelik dla dziecka
</p>
<p className="absolute font-['Roboto:Regular',sans-serif] font-normal leading-[16px] left-[56px] text-[#505050] text-[12px] top-[40px] w-[262px]" data-node-id="10:743">
Prosimy zawrzeć wiek dziecka w wiadomości.
</p>
<p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[24px] left-[56px] text-[#2f2482] text-[14px] top-[64px] whitespace-nowrap" data-node-id="10:744">
50 zł
</p>
</div>
</div>
</div>
<div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full" data-name="Dane najemcy" data-node-id="10:750">
<div className="bg-white h-[48px] leading-[24px] relative rounded-[8px] shrink-0 w-full whitespace-nowrap" data-name="Input" data-node-id="4:115">
<p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold left-[16px] text-[#2f2482] text-[15px] top-[calc(50%-5px)]" data-node-id="4:116">
Daria
</p>
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal left-[16px] text-[#505050] text-[12px] top-[calc(50%-22px)]" data-node-id="4:117">
Imię
</p>
</div>
<div className="bg-white h-[48px] leading-[24px] relative rounded-[8px] shrink-0 w-full whitespace-nowrap" data-name="Input" data-node-id="24:2222">
<p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold left-[16px] text-[#2f2482] text-[15px] top-[calc(50%-5px)]" data-node-id="24:2223">
Pyziak
</p>
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal left-[16px] text-[#505050] text-[12px] top-[calc(50%-22px)]" data-node-id="24:2224">
Nazwisko
</p>
</div>
<div className="bg-white h-[48px] relative rounded-[8px] shrink-0 w-full" data-name="Input" data-node-id="4:124">
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[16px] text-[#505050] text-[15px] top-[calc(50%-12px)] whitespace-nowrap" data-node-id="4:125">
Adres e-mail
</p>
</div>
<div className="bg-white h-[48px] relative rounded-[8px] shrink-0 w-full" data-name="Input" data-node-id="4:127">
<p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[24px] left-[72px] text-[#2f2482] text-[15px] top-[calc(50%-5px)] whitespace-nowrap" data-node-id="4:128">
+48
</p>
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[72px] text-[#505050] text-[12px] top-[calc(50%-22px)] w-[62px]" data-node-id="4:129">
Nr telefonu
</p>
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[109px] text-[#c7c7c7] text-[15px] top-[calc(50%-5px)] tracking-[2.85px] whitespace-nowrap" data-node-id="4:131">
___ ___ ___
</p>
</div>
<div className="bg-white h-[143px] relative rounded-[8px] shrink-0 w-full" data-name="Input" data-node-id="4:151">
<p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[16px] text-[#505050] text-[15px] top-[calc(50%-59.5px)] whitespace-nowrap" data-node-id="4:152">
Twoja wiadomość dotycząca rezerwacji
</p>
</div>
</div>
<div className="content-stretch flex gap-[12px] items-center relative shrink-0" data-node-id="4:155">
<div className="bg-[#2f2482] overflow-clip relative rounded-[8px] shrink-0 size-[24px]" data-node-id="4:156">
<div className="-translate-x-1/2 -translate-y-1/2 absolute left-1/2 size-[12px] top-1/2" data-name="Check" data-node-id="4:157">
<img alt="" className="absolute block max-w-none size-full" src={imgCheck} />
</div>
</div>
<p className="font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[0] relative shrink-0 text-[#2f2482] text-[14px] whitespace-nowrap" data-node-id="4:160">
<span className="leading-[24px]">{`Zgadzam się na `}</span>
<span className="[text-decoration-skip-ink:none] decoration-solid leading-[24px] underline">Politykę Prywatności</span>
</p>
</div>
<div className="bg-[red] content-stretch flex gap-[10px] items-center justify-center overflow-clip px-[24px] py-[16px] relative rounded-[8px] shrink-0 w-full" data-name="Button A Black" data-node-id="2:1264">
<div className="h-[11.998px] relative shrink-0 w-[12px]" data-name="Vector" data-node-id="2:1265">
<img alt="" className="absolute block max-w-none size-full" src={imgVector} />
</div>
<div className="flex flex-col font-['Albert_Sans:SemiBold',sans-serif] font-semibold justify-center leading-[0] relative shrink-0 text-[14px] text-white whitespace-nowrap" data-node-id="2:1266">
<p className="leading-[14px]">Wyślij</p>
</div>
</div>
<p className="font-['Albert_Sans:Medium',sans-serif] font-medium leading-[0] min-w-full relative shrink-0 text-[#505050] text-[14px] text-center w-[min-content] whitespace-pre-wrap" data-node-id="4:165">
<span className="leading-[16px]">{`Infolinia 24h: `}</span>
<span className="[text-decoration-skip-ink:none] decoration-solid leading-[16px] underline">+48 572 663 614</span>
</p>
<div className="absolute right-[24px] size-[24px] top-[19px]" data-name="X" data-node-id="32:175">
<img alt="" className="absolute block max-w-none size-full" src={imgX} />
</div>
</div>
</div>
);
}

58
docs/figma-formularz/node-ids.md Normal file
View File

@@ -0,0 +1,58 @@
# Figma Node IDs - Formularz rezerwacji
File key: `Q3i1CT4DL91dl638a43RBg`
## Glowne frame'y
| Element | Node ID | Opis |
|---------|---------|------|
| Desktop Formularz | `24:1639` | Pelna strona desktop z modalem formularza |
| Mobile Formularz | `1:171` | Pelna strona mobile z bottom-sheet formularza |
## Mniejsze komponenty "Form" (wewnatrz innych stron)
| Node ID | Rozmiar | Kontekst |
|---------|---------|----------|
| `24:1583` | 422x422 | Form component |
| `25:3518` | 422x422 | Form component |
| `25:3615` | 422x422 | Form component |
| `25:3992` | 422x422 | Form component |
| `25:4470` | 422x422 | Form component |
| `24:2309` | 422x422 | Form component |
| `25:3240` | 422x422 | Form component |
| `24:1487` | 422x422 | Form component |
## Kluczowe node ID wewnatrz Desktop Formularz (24:1639)
### Dane wynajmu (24:2125)
| Element | Node ID |
|---------|---------|
| Segment dropdown | `24:2126` |
| Od kiedy? (filled) | `24:2150` |
| Do kiedy? | `24:2142` |
| Wybrano: X dni | `24:2153` |
| Miejsce odbioru | `24:2131` |
| Checkbox zwrot lokalizacja | `24:2136` |
### Opcje dodatkowe (24:2154)
| Element | Node ID |
|---------|---------|
| Separator | `24:2155` |
| Rozszerzone ubezpieczenie | `24:2160` |
| Fotelik dla dziecka | `24:2165` |
### Dane najemcy (24:2170)
| Element | Node ID |
|---------|---------|
| Separator | `24:2171` |
| Imie | `24:2175` |
| Nazwisko | `24:2226` |
| Email | `24:2178` |
| Telefon | `24:2180` |
### Pozostale
| Element | Node ID |
|---------|---------|
| Textarea wiadomosc | `24:2191` |
| Checkbox prywatnosc | `24:2193` |
| Przycisk Wyslij | `24:2199` |
| Przycisk X (zamknij) | `32:170` |
| Background overlay | `24:2121` |

50
docs/figma-formularz/popup-overlay.jsx Normal file
View File

@@ -0,0 +1,50 @@
// Figma Design Context: Popup/Overlay (Krok 2 formularza)
// Node ID: 32:645 (Overlay), 32:397 (POPUP)
// Rozmiar: 866x1354
// Pobrano: 2026-03-25
// UWAGA: Kod referencyjny React+Tailwind z Figma MCP — do adaptacji na PHP/HTML/CSS
const imgImage1 = "https://www.figma.com/api/mcp/asset/8a38c799-dead-4b1d-8ff0-d00597dfea2c";
const imgCaretDown = "https://www.figma.com/api/mcp/asset/a349db71-cdd5-4d4a-9807-28cf459feb32";
const imgMapPin = "https://www.figma.com/api/mcp/asset/9b1a041f-b48d-40f5-b2cd-43b716da2966";
const imgCheck = "https://www.figma.com/api/mcp/asset/6cb28b8a-fbee-4804-94a0-bb2819214249";
const imgCalendarBlank = "https://www.figma.com/api/mcp/asset/4b9d051a-4eab-465b-b264-8526c710b149";
const imgVector = "https://www.figma.com/api/mcp/asset/4bde070b-db1f-4ab3-b6f2-c440d5e8aec5";
const imgCaretDown1 = "https://www.figma.com/api/mcp/asset/e5de2ce7-5f1e-4aa8-b82c-7d02fcc27f94";
const imgVector1 = "https://www.figma.com/api/mcp/asset/754220ec-12e8-4b70-8890-d97d730ac1ac";
const imgVector2 = "https://www.figma.com/api/mcp/asset/5160affe-7594-4684-b552-23e39717de49";
const imgX = "https://www.figma.com/api/mcp/asset/95812780-10b8-4394-8736-5598c84f2fec";
/*
* STRUKTURA POPUP (Krok 2):
*
* 1. Nagłówek: "Wypełnij formularz rezerwacji." + X
* 2. Dane wynajmu: Segment, Od kiedy, Do kiedy, Wybrano X dni, Miejsce odbioru, Zwrot w tej samej lokalizacji
* 3. Wyjazd zagraniczny: checkbox "Planuję trasę poza granicę Polski" → wyszukiwarka krajów
* 4. Ubezpieczenie: Pakiet ochrony Soft (od 190 do 800 zł), Pakiet ochrony Premium (od 200 do 1200 zł)
* 5. Opcje dodatkowe: Dodatkowy kierowca (100 zł), Zwiększenie limitu km, Pełny bak (650 zł),
* GPS Europa, Podstawka, Fotelik 9-18kg, Fotelik 18-36kg, Zwrot nieumytego (290 zł)
* 6. Dane najemcy: Imię, Nazwisko, Email, Telefon (+48)
* 7. Wiadomość: textarea
* 8. Stopka: Zgoda na Politykę Prywatności + Wyślij
*
* RÓŻNICE VS KROK 1:
* - Nowa sekcja "Wyjazd zagraniczny" z checkboxem i wyszukiwarką krajów
* - Nowa sekcja "Ubezpieczenie" (Soft / Premium) (też raczej pobierane z API, z cenami jako zakresy)
* - Rozbudowane opcje dodatkowe (8 pozycji zamiast 2)
* - Ceny jako zakresy "od X do Y zł" (zależne od cennika API)
*/
export default function Overlay() {
return (
<div className="relative size-full" data-name="Overlay" data-node-id="32:645">
<div className="-translate-x-1/2 -translate-y-1/2 absolute bg-[#ededf3] content-stretch flex flex-col gap-[24px] items-start justify-center left-1/2 overflow-clip px-[48px] py-[40px] rounded-[16px] top-[calc(50%+18.5px)]" data-name="POPUP" data-node-id="32:397">
<p className="font-['Albert_Sans:Bold',sans-serif] font-bold leading-[0] min-w-full relative shrink-0 text-[#2f2482] text-[20px] text-center w-[min-content]" data-node-id="32:398">
<span className="leading-[32px]">Wypełnij formularz rezerwacji</span>
<span className="leading-[32px] text-[red]">.</span>
</p>
{/* ... pełny kod w odpowiedzi Figma MCP get_design_context nodeId=32:645 ... */}
</div>
</div>
);
}

BIN
docs/figma-formularz/screenshot-desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 173 KiB

BIN
docs/figma-formularz/screenshot-input-kraje-stany.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
docs/figma-formularz/screenshot-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

BIN
docs/figma-formularz/screenshot-popup-desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB