51 lines
3.0 KiB
JavaScript
51 lines
3.0 KiB
JavaScript
// 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>
|
|
);
|
|
}
|