thermcool/docs/pages/08-11-realizacje-blog-onas-kontakt.md

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.