# Strony 08–11 — Realizacje, Blog, O nas, Kontakt

---

## 08 — Realizacje (`/realizacje`)

### Sekcje
1. **Hero** — H1 „Nasze realizacje" + jedno zdanie.
2. **Filtry kategorii** (`ProjectFilters`) — przyciski: Wszystkie · Klimatyzacja · Pompy ciepła ·
   Remonty · Hydraulika. Client Component (filtrowanie po stanie).
3. **Siatka realizacji** (`ProjectsGrid`) — karty z `content/projects.ts`: zdjęcie, tytuł,
   lokalizacja, tag kategorii. Hover: powiększenie + nakładka z tytułem.
4. **Pasek liczb** (`StatsBar`) — liczba realizacji, lat, miast.
5. **CTA końcowe** (`CtaBanner`) — „Chcesz podobny efekt? Umów konsultację".

### SEO
Metadata: wiersz „Realizacje". JSON-LD: opcjonalnie ItemList.

---

## 09 — Blog (`/blog` + `/blog/[slug]`)

### Lista (`/blog`)
1. **Hero** — H1 „Blog i poradniki" + zdanie.
2. **Filtry kategorii** — Klimatyzacja, Pompy ciepła, Remonty, Hydraulika, Porady.
3. **Wyróżniony artykuł** (`FeaturedPost`) — duży kafel (post z `featured: true`).
4. **Siatka artykułów** (`PostsGrid`) — karty: miniatura, kategoria, tytuł, zajawka, data, „Czytaj więcej".
5. **Paginacja** — prosta (lub „pokaż więcej").

### Wpis (`/blog/[slug]`)
- `generateStaticParams` + `generateMetadata` z danych posta.
- Układ: tytuł (H1), meta (data, autor, kategoria), obraz główny, treść (`prose`),
  sekcja „Powiązane artykuły" (3 karty), CTA do usługi powiązanej z tematem.
- JSON-LD: BlogPosting + BreadcrumbList.

### SEO
Metadata: wiersz „Blog" (lista) / dynamiczne (wpis).

---

## 10 — O nas (`/o-nas`)

### Sekcje
1. **Hero** — H1 „O nas" + zdanie misji.
2. **Historia firmy** (`AboutStory`) — tekst + zdjęcie (placeholder).
3. **Pasek statystyk** (`StatsBar`) — lata, realizacje, klienci, miasta (z `content/company.ts`).
4. **Wartości / jak pracujemy** (`ValuesGrid`) — 3–4 kafelki.
5. **Certyfikaty i uprawnienia** (`CertificatesSection`) — logotypy, F-gaz, autoryzacje (placeholdery).
6. **Opinie** (`Testimonials`).
7. **CTA końcowe** (`CtaBanner`).

### SEO
Metadata: wiersz „O nas". JSON-LD: LocalBusiness (rozszerzony).

---

## 11 — Kontakt (`/kontakt`)

### Sekcje
1. **Nagłówek** — H1 „Kontakt" + zachęta.
2. **Dwie kolumny** (`ContactSection`):
   - Lewa: dane kontaktowe (telefon, e-mail, adres, godziny, NIP) — duże, klikalne.
   - Prawa: **formularz** (`ContactForm`, Client Component) — RHF + Zod:
     imię, telefon, e-mail, temat (select: Klimatyzacja / Pompy ciepła / Remonty / Hydraulika /
     Serwis AGD / Inne), wiadomość, zgoda RODO (checkbox), przycisk „Wyślij".
     Walidacja inline, stany: błąd / wysyłanie / sukces. Obsługa przez Server Action
     w `app/kontakt/actions.ts` (na razie bez realnej wysyłki — miejsce na integrację, np. Resend).
3. **Mapa** (`MapEmbed`) — Google Maps na całą szerokość (placeholder/iframe).
4. **Szybki kontakt** — przyciski „Zadzwoń" / „Napisz".

### SEO
Metadata: wiersz „Kontakt". JSON-LD: LocalBusiness.

---

## Uwaga
Formularz: poprawna dostępność (labelki powiązane z polami, komunikaty błędów czytane przez czytniki),
focus na pierwszym błędnym polu, blokada podwójnego wysłania.