79 lines
3.1 KiB
Markdown
79 lines
3.1 KiB
Markdown
# 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.
|