feat: complete website implementation

2026-06-21 21:53:15 +02:00
parent b147112bdc
commit dfd3888517
110 changed files with 18276 additions and 217 deletions
@@ -0,0 +1,83 @@
+# 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).