feat: complete website implementation
This commit is contained in:
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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ą.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
Reference in New Issue
Block a user