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,88 @@
+# 02 — Design System
+
+Pełna definicja systemu projektowego. Zaimplementuj jako tokeny w `tailwind.config.ts`
+i CSS variables w `globals.css`. Wszystkie komponenty korzystają z tokenów, nie z wartości „na sztywno".
+
+---
+
+## Paleta kolorów
+
+| Token | Hex | Zastosowanie |
+|-------|-----|--------------|
+| `primary` (granat) | `#0F2A47` | nagłówki, header, footer, tekst akcentowany |
+| `primary-light` | `#1B3D63` | hover na elementach primary |
+| `accent` (cyjan) | `#2BA8E0` | akcenty „chłodu", linki, ikony, podkreślenia |
+| `accent-light` | `#E3F4FC` | tła sekcji związanych z klimatyzacją |
+| `cta` (pomarańcz) | `#F39320` | przyciski akcji, wyróżnienia konwersji |
+| `cta-hover` | `#D97D0D` | hover przycisków CTA |
+| `bg` | `#FFFFFF` | główne tło |
+| `bg-muted` | `#F5F7FA` | tła naprzemiennych sekcji |
+| `text` | `#1A2230` | tekst podstawowy |
+| `text-muted` | `#5A6678` | tekst drugorzędny, opisy |
+| `border` | `#E2E8F0` | obramowania kart, separatory |
+| `success` | `#16A34A` | potwierdzenia, „dostępne" |
+
+Tryb: na start jasny. Przygotuj zmienne tak, by dark mode dało się dodać później bez przepisywania.
+
+---
+
+## Typografia
+
+- Font: **Inter** lub **Poppins** przez `next/font/google` (subset latin + latin-ext dla polskich znaków).
+- Skala (desktop / mobile):
+  - H1: 48–56px / 32–36px, bold, line-height 1.1
+  - H2: 36–40px / 28px, bold
+  - H3: 24–28px / 20px, semibold
+  - Body: 16–18px / 16px, regular, line-height 1.6
+  - Small: 14px
+- Nagłówki w kolorze `primary`. Tekst w `text`. Opisy w `text-muted`.
+- Maksymalna szerokość bloku tekstu: ~70 znaków (czytelność).
+
+---
+
+## Spacing i layout
+
+- Kontener: max-width 1280px, padding boczny 16px (mobile) / 24–32px (desktop), wyśrodkowany.
+- Odstępy między sekcjami: 80–120px desktop / 48–64px mobile. Dużo powietrza.
+- Siatka kart: grid responsywny (1 kol. mobile → 2 → 3/4 desktop), gap 24px.
+- Sekcje naprzemiennie `bg` i `bg-muted` dla rytmu wizualnego.
+
+---
+
+## Komponenty UI (na bazie shadcn/ui, dostosowane do tokenów)
+
+- **Button** — warianty: `cta` (pomarańcz, główny), `primary` (granat), `outline`, `ghost`.
+  Zaokrąglenie `rounded-lg`, padding wygodny, wyraźny hover i focus ring.
+- **Card** — `rounded-xl`, `border`, subtelny cień (`shadow-sm` → `shadow-md` na hover dla klikalnych).
+- **Accordion** — do FAQ. Płynne rozwijanie, ikona +/− lub chevron.
+- **Input / Textarea / Select** — spójne obramowania, focus w kolorze `accent`, czytelne labelki.
+- **Badge / Tag** — do kategorii (realizacje, blog) i wyróżnień produktów.
+- **Tabs** — do zakładek na karcie produktu.
+
+---
+
+## Wspólne komponenty własne (`components/common/`)
+
+- **SectionHeading** — eyebrow (mały tekst nad), H2, opcjonalny podtytuł. Wyśrodkowany lub do lewej.
+- **CTAButton** — przycisk z ikoną, wariant cta, używany w hero i banerach.
+- **StatCounter** — duża liczba + podpis (np. „3500 realizacji").
+- **IconCard** — ikona + tytuł + opis + opcjonalny link. Baza dla siatek usług.
+- **StepItem** — numer + tytuł + opis. Baza dla procesów krok-po-kroku.
+- **Placeholder** — szary blok z ikoną i opisem zamiast docelowego zdjęcia.
+
+---
+
+## Stany i interakcje
+
+- Hover: subtelne podniesienie cienia / zmiana koloru, transition 150–200ms.
+- Focus: widoczny ring w kolorze `accent` (dostępność).
+- Loading: skeleton dla list (sklep, blog).
+- Puste stany: czytelny komunikat + CTA (np. pusty koszyk).
+
+---
+
+## Zasada nadrzędna
+
+Design ma wyglądać jak zaprojektowany przez człowieka: spójny, czysty, z oddechem.
+Unikaj efektu „szablonu AI": przeładowania gradientami, zbyt wielu kolorów, ciasnych sekcji,
+losowych cieni. Mniej, ale konsekwentnie.