3.0 KiB
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:
- Klimatyzacja ▾ (dropdown —
NavDropdown)- Kategorie: Klimatyzatory ścienne, Multisplit, Przenośne, Kasetonowe, Konsolowe
- Usługi: Montaż klimatyzacji, Serwis i przeglądy
- Pompy ciepła (link do
/pompy-ciepla) - Usługi domowe ▾ (dropdown)
- Remonty i wykończenia, Hydraulika, Serwis AGD/lodówki, Drobne naprawy
- Realizacje (
/realizacje) - Blog (
/blog) - O nas (
/o-nas) - 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:
- Firma — logo, krótki opis, adres, NIP, telefon (klikalny), godziny pracy.
- Usługi — linki: Klimatyzacja, Pompy ciepła, Remonty, Hydraulika, Serwis AGD, Sklep.
- Informacje — O nas, Realizacje, Blog, Regulamin, Polityka prywatności, Reklamacje, Kontakt.
- 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 przeznext/font,globals.css.- Renderuje
<Header />,{children},<Footer />. - Bazowe
metadata(template title, opis, OG) — patrzdocs/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).