59 lines
2.4 KiB
Markdown
59 lines
2.4 KiB
Markdown
# 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.
|