feat: complete website implementation

This commit is contained in:
Radosław Smoliński
2026-06-21 21:53:15 +02:00
parent b147112bdc
commit dfd3888517
110 changed files with 18276 additions and 217 deletions
@@ -0,0 +1,78 @@
# 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.