thermcool/docs/specs/04-layouts.md

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)

• <html lang="pl">, font przez next/font, globals.css.
• Renderuje <Header />, {children}, <Footer />.
• Bazowe metadata (template title, opis, OG) — patrz docs/specs/03-seo.md.
• JSON-LD LocalBusiness może iść tu lub na stronie głównej.

---

Layout stron formalnych (app/(formalne)/layout.tsx)

Prosty, jednokolumnowy: nagłówek tytułu + treść tekstowa (prose), opcjonalny spis treści z kotwicami po lewej na dłuższych stronach. Ten sam Header/Footer co reszta.

---

Wspólny komponent CTA (components/sections/CtaBanner.tsx)

Powtarzalny baner końcowy: nagłówek („Masz pytania? Umów darmową konsultację"), podtytuł, przycisk CTA + numer telefonu. Tło primary lub accent-light. Używany na końcu większości stron (przyjmuje propsy: tytuł, opis, tekst przycisku).