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
+58
View File
@@ -0,0 +1,58 @@
# Strona 01 — Strona główna (`/`)
Cel: w kilka sekund pokazać dwa filary (HVAC + usługi domowe) i skierować klienta do jego tematu.
Komponenty z `components/sections/`, dane z `content/`.
---
## Sekcje (kolejność od góry)
### 1. Hero (`HeroSection`)
- H1: np. „Klimatyzacja, pompy ciepła i usługi domowe — kompleksowo".
- Podtytuł: jedno zdanie o doborze, montażu i serwisie.
- Dwa przyciski: CTA „Darmowa konsultacja" (wariant cta) + „Zobacz ofertę" (outline).
- W tle realistyczne zdjęcie (placeholder) lekko przyciemnione dla czytelności tekstu.
- Pod hero: 3–4 mikro-atuty z ikonami (doświadczenie, gwarancja, szybki termin, raty 0%).
### 2. Dwa filary (`PillarsSection`)
- Dwa duże kafle obok siebie (na mobile pod sobą):
- „Chłód i ogrzewanie" → klimatyzacja + pompy ciepła (akcent cyjan), przycisk „Sprawdź".
- „Twój dom" → remonty, hydraulika, serwis AGD (akcent pomarańcz), przycisk „Sprawdź".
- Każdy kafel: ikona, tytuł, jedno zdanie, link.
### 3. Siatka usług (`ServicesGrid`)
- 6 kart (`IconCard`) z `content/services.ts`: Montaż klimatyzacji, Serwis i przeglądy,
Pompy ciepła, Remonty, Hydraulika, Serwis lodówek/AGD.
- Każda: ikona (lucide), tytuł, krótki opis, link do podstrony.
### 4. Proces (`ProcessSteps`)
- 4 kroki poziomo (na mobile pionowo): Kontakt i konsultacja → Wycena/audyt → Realizacja →
Uruchomienie i serwis. Numerowane, z ikonami i strzałkami.
### 5. Dlaczego my (`WhyUs` + `StatsBar`)
- 4–6 kafelków atutów + pasek liczb (`StatCounter`): lata doświadczenia, liczba realizacji,
uprawnienia F-gaz, ocena klientów. Dane z `content/company.ts`.
### 6. Polecane klimatyzatory (`FeaturedProducts`)
- 4 karty produktowe (`ProductCard`) z `content/products.ts`: zdjęcie, nazwa, cena z montażem,
przycisk „wybierz". Link „Zobacz wszystkie" → `/sklep`.
### 7. Opinie (`Testimonials`)
- 3 cytaty: imię, ocena gwiazdkowa, treść. Opcjonalnie logo Google.
### 8. Blog (`BlogPreview`)
- 3 najnowsze wpisy z `content/posts.ts`: miniatura, kategoria, tytuł, „Czytaj więcej".
### 9. CTA końcowe (`CtaBanner`)
- „Masz pytania? Umów darmową konsultację" + telefon + przycisk.
---
## SEO
- Metadata: patrz tabela w `docs/specs/03-seo.md` (wiersz „Główna").
- JSON-LD: LocalBusiness.
- Jeden H1 (hero), sekcje jako H2.
## Uwagi
- Naprzemienne tła sekcji (`bg` / `bg-muted`) dla rytmu.
- Wszystkie zdjęcia jako placeholdery z komentarzem TODO.
+60
View File
@@ -0,0 +1,60 @@
# Strona 02 — Klimatyzacja (`/klimatyzacja`)
Najbardziej rozbudowana strona usługowa. Łączy usługę (montaż/serwis) z wejściem do sklepu.
Wzorzec: rozbudowana strona montażu z konkurencji (proces + cennik + FAQ).
---
## Sekcje (kolejność)
### 1. Hero (`HeroSection`)
- Eyebrow nad H1: „15+ lat doświadczenia · Split i multisplit · Uprawnienia F-gaz".
- H1: „Montaż klimatyzacji — dobór, instalacja, serwis".
- Podtytuł + dwa CTA: „Dobierz klimatyzator" (cta) i „Sprawdź cennik" (outline, scroll do cennika).
- Lista 4 atutów z haczykami: bezpłatny audyt, estetyczny montaż, zgodność F-gaz, serwis po montażu.
### 2. Co obejmuje montaż (`InfoHighlights`)
- Krótki opis + 3 wyróżnione fakty: czas montażu (4–8 h split), cena od…, zasięg działania.
### 3. Rodzaje klimatyzatorów (`AcTypesSection`)
- 3 grupy kart: **SPLIT** (ścienne, konsolowe, kasetonowe, kanałowe), **MULTISPLIT** (2–5 pomieszczeń),
**POZOSTAŁE** (z grzaniem, z oczyszczaczem). Każda grupa: ikona, lista podtypów, link do kategorii sklepu.
### 4. Proces montażu krok po kroku (`ProcessSteps` — wariant rozszerzony)
- 8–9 ponumerowanych kroków z `content/process.ts`: przygotowanie miejsca → przewiert →
instalacja freonowa → montaż jednostek → próba szczelności → uruchomienie → szkolenie.
### 5. Konfigurator doboru (`ConfiguratorTeaser`)
- Blok z 4 krokami: marka → moc → funkcje → cena z montażem. Na tym etapie statyczny UI
(interaktywność opcjonalnie później). Obok porada „10 m² = 1 kW". Przycisk „Dobierz klimatyzator".
### 6. Cennik (`PricingTable`)
- Tabela z `content/pricing.ts`: kolumny — usługa / cena netto / brutto os. prywatna / brutto firma.
- Sekcje tabeli: split, multisplit, usługi dodatkowe.
- Pod tabelą: „Co obejmuje montaż podstawowy" (lista) + przycisk „Pobierz cennik PDF" (placeholder).
- Adnotacja o stawkach VAT 8%/23%.
### 7. Producenci (`BrandsGrid`)
- Siatka logotypów marek (placeholdery), które firma montuje.
### 8. Polecane modele (`FeaturedProducts`)
- 6–8 kart produktowych z `content/products.ts`.
### 9. Dlaczego my (`WhyUs`)
- 6 kafelków: profesjonalizm, uprawnienia F-gaz, opinie, szybkie terminy, duży wybór, lokalnie.
### 10. FAQ (`FaqAccordion`)
- Z `content/faq.ts` (zestaw „klimatyzacja"): jak dobrać moc, ile trwa montaż, zgoda wspólnoty,
VAT 8/23%, jak często przegląd, czy grzeje, czy mogę montować sam.
### 11. CTA końcowe (`CtaBanner`)
- „Niestandardowa instalacja? Zamów indywidualną wycenę" + telefon.
---
## SEO
- Metadata: wiersz „Klimatyzacja". JSON-LD: Service + FAQPage + BreadcrumbList.
## Uwagi
- Tabela cennika responsywna (na mobile: scroll poziomy lub układ kart).
- Accordion FAQ jako Client Component.
+42
View File
@@ -0,0 +1,42 @@
# Strona 03 — Pompy ciepła (`/pompy-ciepla`)
---
## Sekcje (kolejność)
### 1. Hero (`HeroSection`)
- H1: „Pompy ciepła — niższe rachunki, niezależność, dofinansowanie".
- Podtytuł + 2 CTA: „Darmowa konsultacja" (cta) + „Sprawdź dofinansowanie".
- W tle zdjęcie pompy ciepła przy domu jednorodzinnym (placeholder).
### 2. Korzyści (`BenefitsGrid`)
- 4 karty z ikonami: oszczędność, ekologia, komfort całoroczny, dotacje (Czyste Powietrze / Mój Prąd).
### 3. Rodzaje pomp (`HeatPumpTypes`)
- 3 karty: powietrze-woda, powietrze-powietrze, gruntowe. Każda: ikona, opis, dla kogo.
### 4. Dla kogo / kiedy się opłaca (`UseCases`)
- Sekcja z punktami: dom nowy, modernizacja, wymiana starego kotła. Krótkie opisy.
### 5. Proces wdrożenia (`ProcessSteps`)
- Kroki: audyt → dobór → wycena → montaż → uruchomienie → serwis.
### 6. Dofinansowanie (`FundingSection`)
- Wyróżniony blok (tło accent-light): hasło o programach dotacji, krótki opis,
przycisk „Sprawdź, ile możesz dostać". Oznacz treść jako placeholder do aktualizacji.
### 7. Realizacje pomp ciepła (`ProjectsGallery`)
- Galeria realizacji filtrowana do kategorii „pompy-ciepla" z `content/projects.ts`.
### 8. FAQ (`FaqAccordion`)
- Zestaw „pompy ciepła": koszty, oszczędności, czy działa zimą, hałas, serwis.
### 9. CTA końcowe (`CtaBanner`)
---
## SEO
- Metadata: wiersz „Pompy ciepła". JSON-LD: Service + FAQPage.
## Uwagi
- Treści o dofinansowaniach mogą się zmieniać — wyraźnie oznacz jako do aktualizacji.
+38
View File
@@ -0,0 +1,38 @@
# Strona 04 — Usługi domowe (`/uslugi-domowe`)
Strona-rozdzielnik. Zbiera wszystkie usługi „w domu" i kieruje do podstron. Prosta, czytelna.
---
## Sekcje (kolejność)
### 1. Hero (`HeroSection`)
- H1: „Usługi domowe — remonty, hydraulika i naprawy w jednym miejscu".
- Podtytuł + CTA „Darmowa konsultacja".
### 2. Siatka usług (`ServicesGrid` — wariant duży)
- 4 duże kafle (`IconCard`):
- Remonty i wykończenia → `/uslugi-domowe/remonty`
- Hydraulika → `/uslugi-domowe/hydraulika`
- Serwis AGD / lodówki → `/uslugi-domowe/serwis-agd`
- Drobne naprawy → (sekcja informacyjna lub kotwica)
- Każdy: ikona, tytuł, opis, przycisk „Sprawdź".
### 3. Jak pracujemy (`ProcessSteps`)
- 3–4 kroki: zgłoszenie → wycena → realizacja → odbiór.
### 4. Dlaczego my (`WhyUs`)
- Atuty: doświadczeni fachowcy, terminowość, sprzątanie po pracy, gwarancja.
### 5. Realizacje (`ProjectsGallery`)
- Wybrane realizacje z kategorii remonty/hydraulika, najlepiej z before/after.
### 6. CTA końcowe (`CtaBanner`)
---
## SEO
- Metadata: wiersz „Usługi domowe". JSON-LD: Service + BreadcrumbList.
## Uwagi
- Ta strona ma głównie nawigować dalej — nie przeładowuj treścią.
+65
View File
@@ -0,0 +1,65 @@
# Strony 05–07 — Podstrony usług domowych
Trzy podstrony pod `/uslugi-domowe/`. Wspólny wzorzec: hero → zakres → proces → dowody → FAQ → CTA.
---
## 05 — Remonty i wykończenia (`/uslugi-domowe/remonty`)
### Sekcje
1. **Hero** — H1 „Remonty i wykończenia wnętrz", CTA „Bezpłatna wycena".
2. **Zakres prac** (`ServicesGrid`) — karty: remonty mieszkań, łazienki, kuchnie, malowanie,
gładzie, glazura/terakota, podłogi, zabudowy GK. Ikona + krótki opis.
3. **Proces** (`ProcessSteps`) — oględziny → kosztorys → harmonogram → prace → odbiór.
4. **Galeria przed/po** (`BeforeAfterSlider`) — mocna sekcja wizualna, slider dwóch zdjęć.
Dane z `content/projects.ts` (kategoria „remonty", pole beforeAfter). Client Component.
5. **Dlaczego my** (`WhyUs`) — terminowość, czystość, własna ekipa, gwarancja.
6. **Opinie** (`Testimonials`).
7. **FAQ** (`FaqAccordion`) — zestaw „remonty": wycena, czas realizacji, materiały, gwarancja.
8. **CTA końcowe** (`CtaBanner`).
### SEO
Metadata: wiersz „Remonty". JSON-LD: Service + FAQPage + BreadcrumbList.
---
## 06 — Hydraulika (`/uslugi-domowe/hydraulika`)
### Sekcje
1. **Hero** — H1 „Usługi hydrauliczne — instalacje, naprawy, awarie", CTA + telefon awaryjny.
2. **Zakres usług** (`ServicesGrid`) — instalacje wod-kan, wymiana rur, montaż armatury,
biały montaż, ogrzewanie, awarie/przecieki, udrażnianie.
3. **Szybka pomoc / awarie** (`EmergencyBlock`) — wyróżniony blok (tło pomarańcz/akcent)
z dużym numerem telefonu i informacją o czasie reakcji.
4. **Proces** (`ProcessSteps`) — zgłoszenie → diagnoza → wycena → naprawa.
5. **Cennik orientacyjny** (`PricingTable` — uproszczona) — opcjonalnie.
6. **Dlaczego my** (`WhyUs`).
7. **FAQ** (`FaqAccordion`) — zestaw „hydraulika".
8. **CTA końcowe** (`CtaBanner`).
### SEO
Metadata: wiersz „Hydraulika". JSON-LD: Service + FAQPage + BreadcrumbList.
---
## 07 — Serwis AGD / lodówki (`/uslugi-domowe/serwis-agd`)
### Sekcje
1. **Hero** — H1 „Serwis lodówek i urządzeń chłodniczych", CTA „Zgłoś naprawę".
2. **Co naprawiamy** (`ServicesGrid`) — lodówki, zamrażarki, chłodziarki, lady i witryny
chłodnicze, agregaty.
3. **Typowe usterki** (`SymptomsList`) — lista z ikonami: nie chłodzi, głośna praca,
zbiera wodę, oszrania, nie włącza się.
4. **Proces zgłoszenia** (`ProcessSteps`) — zgłoszenie → diagnoza → wycena → naprawa → gwarancja.
5. **Dlaczego my** (`WhyUs`) — dojazd, oryginalne części, gwarancja na naprawę.
6. **FAQ** (`FaqAccordion`) — zestaw „serwis AGD".
7. **CTA końcowe** (`CtaBanner`).
### SEO
Metadata: wiersz „Serwis AGD". JSON-LD: Service + FAQPage + BreadcrumbList.
---
## Uwaga wspólna
Wszystkie trzy korzystają z tych samych komponentów sekcji co reszta strony —
różnią się treścią (z `content/`), nie strukturą. Nie twórz osobnych wariantów komponentów bez potrzeby.
@@ -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.
+80
View File
@@ -0,0 +1,80 @@
# Strony 12–15 — E-commerce
Sklep z klimatyzatorami. Stan koszyka przez Zustand (`lib/cart-store.ts`, persist do localStorage).
---
## 12 — Sklep / listing (`/sklep`)
### Sekcje
1. **Nagłówek kategorii** — H1 + krótki opis SEO.
2. **Pasek narzędzi** — liczba wyników + sortowanie (cena rosnąco/malejąco, popularność, nowości).
3. **Układ dwukolumnowy:**
- Lewa (`ProductFilters`, Client) — filtry: producent (checkboxy), moc (zakres/checkboxy),
cena (suwak), typ/kategoria, funkcje (Wi-Fi, grzanie). Na mobile: panel wysuwany.
- Prawa (`ProductsGrid`) — siatka kart (`ProductCard`): zdjęcie, marka, nazwa, moc,
cena, cena z montażem, przycisk „wybierz", ikona serca (lista życzeń — UI).
4. **Paginacja** lub „pokaż więcej".
5. **Blok opisowy SEO** na dole.
### Dane
Z `content/products.ts` przez `getProducts()`. Filtrowanie/sortowanie po stronie klienta.
---
## 13 — Karta produktu (`/sklep/[slug]`)
- `generateStaticParams` + `generateMetadata` z danych produktu.
### Układ
1. **Górna część — dwie kolumny:**
- Lewa (`ProductGallery`, Client) — duże zdjęcie + miniatury.
- Prawa (`ProductInfo`) — marka, nazwa (H1), cena, cena z montażem (VAT 8%),
wybór wariantu mocy (jeśli są warianty), przyciski „Dodaj do koszyka" i „Kup z montażem",
ikony: lista życzeń, porównanie. Atuty: dostawa, gwarancja, raty.
2. **Zakładki** (`Tabs`, Client) — Opis / Dane techniczne (tabela ze `specs`) / Opinie.
3. **Podobne produkty** (`FeaturedProducts`) — 4 karty z tej samej kategorii.
### Akcje
„Dodaj do koszyka" → `cart-store` (dodaje produkt + wybrany wariant). Feedback (toast/licznik w headerze).
### JSON-LD
Product + Offer + BreadcrumbList.
---
## 14 — Koszyk (`/koszyk`)
### Układ
1. **Lista pozycji** (`CartItems`, Client) — miniatura, nazwa, wariant, ilość (− / +),
cena jednostkowa, suma pozycji, usuń. Opcja „dodaj montaż" przy pozycji.
2. **Podsumowanie** (`CartSummary`) — wartość, VAT, suma, pole kodu rabatowego (UI),
przycisk „Przejdź do zamówienia".
3. **Pusty koszyk** — stan pusty z komunikatem + przycisk „Przejdź do sklepu".
### Dane
Stan z `cart-store` (Zustand, persist). Bez realnego checkoutu na tym etapie —
przycisk prowadzi do placeholdera / strony „w przygotowaniu" lub formularza zamówienia (do ustalenia).
---
## 15 — Raty 0% (`/raty`)
### Sekcje
1. **Hero** — H1 + hasło o ratach 0%.
2. **Jak to działa** (`ProcessSteps`) — kroki wnioskowania.
3. **Kalkulator rat** (`InstallmentCalculator`, Client) — suwak kwoty → wyświetla ratę miesięczną
(prosty wzór: kwota / liczba rat, np. do 20 rat 0%). Bez integracji finansowej — kalkulacja poglądowa.
4. **Warunki** — lista warunków (placeholder).
5. **FAQ** (`FaqAccordion`).
6. **CTA** — „Złóż wniosek" (placeholder / link do kontaktu).
### Uwaga
Oznacz wszystkie liczby i warunki jako poglądowe/do uzupełnienia — to treści zależne od oferty banku.
---
## Uwaga wspólna (e-commerce)
- Komponenty sklepu w `components/shop/`.
- Ceny i produkty to mock — wyraźnie oznaczone, łatwe do podmiany.
- Dostępność: przyciski z aria-label, liczniki ilości obsługiwane z klawiatury.
+32
View File
@@ -0,0 +1,32 @@
# Strona 16 — Strony formalne
Pięć prostych stron tekstowych w route group `(formalne)`. Wspólny layout jednokolumnowy.
---
## Strony
- `/regulamin`
- `/polityka-prywatnosci`
- `/reklamacje`
- `/dostawa`
- `/gwarancja`
## Layout (`app/(formalne)/layout.tsx`)
- Ten sam Header/Footer co reszta.
- Treść w jednej kolumnie, styl `prose`, czytelne nagłówki sekcji.
- Na dłuższych stronach (regulamin, polityka prywatności): spis treści z kotwicami po lewej
(sticky na desktopie).
## Treść
- Placeholdery z realistyczną strukturą sekcji (np. polityka prywatności: administrator danych,
zakres, cele, cookies, prawa użytkownika, kontakt).
- Wyraźnie oznacz, że treść prawna wymaga uzupełnienia/weryfikacji przez właściciela
(`{/* TODO: treść prawna do uzupełnienia */}`).
- Nie generuj wiążących treści prawnych jako gotowych — to ma być rusztowanie do wypełnienia.
## SEO
- Metadata podstawowe (title + description). `robots`: index, follow (lub noindex dla wybranych — do decyzji).
- JSON-LD: niepotrzebne.
## Uwaga
Te strony są linkowane ze stopki. Upewnij się, że linki w footerze prowadzą do istniejących tras.