Zastosowanie wszystkich poprawek UI i logiki kalkulatora

2026-08-10 23:26:52 +02:00
commit 7324a6f800
218 changed files with 33628 additions and 0 deletions
@@ -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,
+     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.