# 04 — Layouty i nawigacja Wspólne elementy obecne na wszystkich stronach. Buduj je raz, w `components/layout/`, i reużywaj. --- ## Header (`components/layout/Header.tsx`) Sticky, biały (lub granatowy — do wyboru, spójnie), z cieniem po scrollu. **Układ (desktop):** - Lewa: logo (link do `/`). - Środek: menu główne. - Prawa: ikona wyszukiwarki, ikona konta, ikona koszyka (z licznikiem), przycisk CTA „Darmowa konsultacja". **Menu główne:** 1. **Klimatyzacja** ▾ (dropdown — `NavDropdown`) - Kategorie: Klimatyzatory ścienne, Multisplit, Przenośne, Kasetonowe, Konsolowe - Usługi: Montaż klimatyzacji, Serwis i przeglądy 2. **Pompy ciepła** (link do `/pompy-ciepla`) 3. **Usługi domowe** ▾ (dropdown) - Remonty i wykończenia, Hydraulika, Serwis AGD/lodówki, Drobne naprawy 4. **Realizacje** (`/realizacje`) 5. **Blog** (`/blog`) 6. **O nas** (`/o-nas`) 7. **Kontakt** (`/kontakt`) **Dropdown (`NavDropdown`):** pojawia się na hover/focus, panel z linkami w kolumnach, dostępny z klawiatury (Escape zamyka, focus trap niepotrzebny ale focusable linki). **Mobile (`MobileMenu`):** hamburger → pełnoekranowe lub wysuwane menu z rozwijanymi sekcjami (Klimatyzacja, Usługi domowe jako akordeony). CTA „Darmowa konsultacja" widoczne na dole. Numer telefonu klikalny. --- ## Footer (`components/layout/Footer.tsx`) Granatowe tło (`primary`), jasny tekst. 4 kolumny: 1. **Firma** — logo, krótki opis, adres, NIP, telefon (klikalny), godziny pracy. 2. **Usługi** — linki: Klimatyzacja, Pompy ciepła, Remonty, Hydraulika, Serwis AGD, Sklep. 3. **Informacje** — O nas, Realizacje, Blog, Regulamin, Polityka prywatności, Reklamacje, Kontakt. 4. **Twoje konto** — Koszyk, Logowanie, Rejestracja, Zamówienia. **Pasek dolny:** copyright + rok (dynamiczny), ikony social media, drobne oznaczenia zaufania. --- ## TrustBar (`components/layout/TrustBar.tsx`) Wąski pasek nad stopką (lub pod hero na stronie głównej). 4–5 elementów z ikonami: - Szybki termin realizacji - X lat doświadczenia - Gwarancja - Raty 0% - Certyfikaty / opinie Google Układ poziomy desktop, zawijany na mobile. --- ## Root layout (`app/layout.tsx`) - ``, font przez `next/font`, `globals.css`. - Renderuje `
`, `{children}`, `