84 lines
3.0 KiB
Markdown
84 lines
3.0 KiB
Markdown
# 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).
|