292 lines
14 KiB
Markdown
292 lines
14 KiB
Markdown
# Strona główna — `/pl/` i `/de/` (page id 1, slug `home`/`home`)
|
||
|
||
Sekcja po sekcji, w kolejności renderu. Wzorce animacji (`reveal-up`,
|
||
`parallax-tilt`, `count-up`, `line-draw`, `stamp-in`) odsyłają do
|
||
[01-design-system-impeccable.md](./01-design-system-impeccable.md) §4 — nie
|
||
powtarzam tu ich definicji, tylko gdzie je zastosować.
|
||
|
||
Istniejące pola/treść z `content-snapshot.json` są dobre jakościowo — poniżej
|
||
zaznaczam **[ZACHOWAĆ]** gdzie treść zostaje, **[DOPRACOWAĆ]** gdzie proponuję
|
||
zmianę, **[NOWE]** gdzie brakuje elementu.
|
||
|
||
---
|
||
|
||
## 0. Element globalny: floating WhatsApp button
|
||
|
||
Nie jest osobnym blokiem strony — to element w layout (`(frontend)/[locale]/layout.tsx`),
|
||
widoczny na WSZYSTKICH podstronach, nie tylko home. Opisuję tu, bo determinuje
|
||
przestrzeń na hero.
|
||
|
||
- **Treść**: ikona WhatsApp + `whatsappNumber` z globala Company (już istnieje
|
||
w schemacie), link `https://wa.me/{whatsappNumber}`.
|
||
- **Layout**: sticky, prawy-dolny róg, 56×56px na desktopie / 52×52px mobile,
|
||
zawsze nad treścią (z-index ponad ThemeSwitcher).
|
||
- **Animacja**: `stamp-in` przy pierwszym renderze (raz), potem statyczny —
|
||
ŻADNEGO pulsowania w pętli (reguła anty-slop „pulsing status dot").
|
||
Delikatny scale 1→1.05 TYLKO na hover, bez bounce.
|
||
- **Widoczność**: ukryty, gdy użytkownik jest w obrębie sekcji FinalCTA (tam
|
||
i tak jest duży przycisk WhatsApp — dublowanie dwóch identycznych CTA na
|
||
ekranie naraz to szum, nie pomoc) — pokazuje się ponownie po przescrollowaniu dalej.
|
||
- **a11y**: `aria-label="Napisz do nas na WhatsApp"` / `"Auf WhatsApp schreiben"`,
|
||
widoczny fokus, osiągalny Tabem.
|
||
|
||
---
|
||
|
||
## 1. Hero (`blockType: hero`)
|
||
|
||
**[ZACHOWAĆ treść, DOPRACOWAĆ wygląd]** — treść PL/DE jest mocna („Odbierz
|
||
zwrot podatku z Niemiec / Rozliczymy Cię po polsku"), nic nie zmieniam
|
||
w kopii poza jednym punktem niżej.
|
||
|
||
| Pole (CMS) | Treść |
|
||
|---|---|
|
||
| `title` | Odbierz zwrot podatku z Niemiec *(bez zmian)* |
|
||
| `titleAccent` | Rozliczymy Cię po polsku — **tu, i tylko tu, dopuszczalna kursywa Fraunces na słowie „po polsku"** (patrz zakaz italic-display w [01](./01-design-system-impeccable.md) §5) |
|
||
| `subtitle` | *(bez zmian)* |
|
||
| `primaryCta` | Napisz na WhatsApp *(bez zmian, prowadzi do `wa.me`)* |
|
||
| `secondaryCta` | Zobacz jak to działa → **[DOPRACOWAĆ]** `url` obecnie `#jak-to-dziala`, ale na stronie nie ma sekcji o tym `id` (proces jest w bloku `process` bez ustawionego `id="jak-to-dziala"`) — dodać `id` do sekcji Process (pkt 6 niżej) albo zmienić link na realny anchor. Martwy link kotwicowy to błąd funkcjonalny, nie tylko wizualny. |
|
||
| `floatingStat` | 20+ / Lat doświadczenia *(bez zmian)* |
|
||
| `image` / `imageSecondary` | patrz niżej |
|
||
|
||
**Zdjęcia (obecnie puste — krytyczny brak):**
|
||
- `image` (główne, duże): Janusz Kędzierski w naturalnym otoczeniu pracy —
|
||
NIE studio z białym tłem, NIE stockowe zdjęcie „uśmiechnięty biznesmen".
|
||
Kierunek: biurko z dokumentami/laptopem, ciepłe światło dzienne, kadr 4:5
|
||
lub 3:4 (pionowy, żeby zmieścić parallax-tilt bez przycinania twarzy).
|
||
- `imageSecondary` (mała, nakładająca się karta w rogu głównego zdjęcia — tak
|
||
sugeruje istniejący layout z dwoma obrazami): detal — dłoń podpisująca
|
||
dokument, kalkulator + Lohnsteuerbescheinigung, albo logo/pieczątka firmy.
|
||
Wzmacnia metaforę „dokument", nie duplikuje twarzy z głównego zdjęcia.
|
||
- Jeśli zdjęcia klienta nie będą gotowe na start: NIE wstawiać stockowego
|
||
zdjęcia przypadkowej osoby (to prawdziwa firma, fałszywa twarz = ryzyko
|
||
zaufania i prawne). Lepszy tymczasowy wariant: zdjęcie dokumentów/biurka
|
||
bez osoby, dopóki zdjęcie Janusza nie będzie gotowe.
|
||
|
||
**Layout:** dwie kolumny na desktopie (tekst lewo, zdjęcie prawo — układ już
|
||
zaimplementowany), pełna szerokość na mobile z tekstem NAD zdjęciem (czytelność
|
||
przed obrazem na małym ekranie).
|
||
|
||
**Animacja:** `reveal-up` na blok tekstowy (już jest — stagger 0.14s, zachować),
|
||
`parallax-tilt` WYŁĄCZNIE na `image` główne (już jest, `useParallax3D` —
|
||
zachować, nie dodawać do `imageSecondary`, żeby nie kręciło się dwoma
|
||
warstwami naraz), `stamp-in` na `floatingStat`.
|
||
|
||
**Tło:** tekstura papieru (grain, patrz [01](./01-design-system-impeccable.md) §2)
|
||
na całej sekcji hero, bardzo subtelna. Bez gradientowego halo za nagłówkiem.
|
||
|
||
---
|
||
|
||
## 2. TrustBar (`blockType: trustBar`)
|
||
|
||
**[ZACHOWAĆ treść]** — 4 punkty (b.b.h., 100% po polsku, wsparcie w US,
|
||
wieloletnie doświadczenie) to dobry pasek zaufania od razu pod hero.
|
||
|
||
**Layout:** pozioma belka, 4 pozycje w rzędzie na desktopie (2×2 na tablet,
|
||
pionowa lista na mobile), ikona + tekst, separator to cienka pionowa linia
|
||
`--border-color` między pozycjami (nie karty z cieniem — to pasek, nie grid kart).
|
||
|
||
**Tło:** kontrastowe względem hero — `--card-color` (biała belka na papierowym
|
||
tle) LUB odwrotnie cienka linia `line-draw` nad i pod paskiem zamiast pełnego tła.
|
||
|
||
**Animacja:** `reveal-up` ze stagger 0.08s na 4 pozycje, trigger przy wejściu
|
||
w viewport (pasek jest tuż pod hero, więc to będzie prawie natychmiastowe przy
|
||
scrollu — subtelne, nie efekciarskie).
|
||
|
||
---
|
||
|
||
## 3. UniqueValue (`blockType: uniqueValue`)
|
||
|
||
**[ZACHOWAĆ treść]** „Rozliczenia bez bariery językowej" — jasny, jeden
|
||
argument różnicujący.
|
||
|
||
**Zdjęcie (`image`, puste):** kadr pokazujący RELACJĘ, nie dokument — np.
|
||
rozmowa (telefon/WhatsApp w ręku) albo dłonie przy wspólnym przeglądaniu
|
||
dokumentów. To sekcja o barierze językowej, więc obraz powinien sugerować
|
||
KOMUNIKACJĘ, nie biurokrację (ta metafora jest już w hero).
|
||
|
||
**Layout:** dwie kolumny, zdjęcie i tekst na przemian względem hero (jeśli
|
||
hero ma tekst-lewo/zdjęcie-prawo, tu odwrotnie — zdjęcie-lewo/tekst-prawo) —
|
||
prosty rytm wizualny przy scrollu, bez potrzeby dodatkowych efektów.
|
||
|
||
**Features (`features[]`):** 2 pozycje („Bez barier językowych",
|
||
„Indywidualne podejście") — renderować jako checkmarki, nie jako osobne karty
|
||
(to są 2 punkty, karta na 2 punkty to nested-card/overkill).
|
||
|
||
**Animacja:** `reveal-up`, zdjęcie i tekst wchodzą z lekkim przesunięciem
|
||
w przeciwnych kierunkach (zdjęcie z boku, tekst z dołu) — wystarczy, żeby
|
||
nie było identyczne z sekcją 5 (Stats) czy 6 (ServicesList).
|
||
|
||
---
|
||
|
||
## 4. Stats (`blockType: stats`)
|
||
|
||
**[ZACHOWAĆ treść, DOPRACOWAĆ animację]** 20+ lat / 100% po polsku / §4 Nr. 11.
|
||
|
||
To dokładnie wzorzec „hero metric layout" z katalogu anty-slop — dopuszczalny
|
||
TU, bo każda liczba ma realny opis pod spodem (`description`), ale wymaga
|
||
świadomego wykonania:
|
||
|
||
**Layout:** 3 kolumny równej wagi (nie jedna duża + dwie małe — to nie jest
|
||
hierarchia ważności, to 3 równorzędne dowody), separator cienką pionową linią.
|
||
|
||
**Animacja:** `count-up` na wartościach numerycznych (20+, 100%) — UWAGA:
|
||
„§4 Nr. 11" to nie jest liczba do zliczania, tylko oznaczenie paragrafu —
|
||
zostaje statyczne, bez count-up (fałszywe zastosowanie count-up na tekście
|
||
byłoby zauważalnym błędem). `line-draw` pod całą sekcją jako domknięcie.
|
||
|
||
**Tło:** pełna szerokość, `--card-color` lub delikatnie inny odcień papieru
|
||
niż otoczenie, żeby sekcja miała optyczną „ramkę" bez rysowania karty wokół
|
||
każdej liczby osobno.
|
||
|
||
---
|
||
|
||
## 5. ServicesList (`blockType: servicesList`)
|
||
|
||
**[ZACHOWAĆ treść]** 3 usługi (Deklaracje, Kontrola decyzji, Ulgi i dopłaty) —
|
||
to skrócona wersja pełnej listy z `/uslugi` (7 usług, patrz [03-uslugi.md](./03-uslugi.md)).
|
||
|
||
**Layout:** 3 karty w rzędzie (1 kolumna mobile), każda z `linkText` → link do
|
||
`/uslugi#<kotwica-usługi>` (obecnie `linkText: "Zobacz więcej"` bez `linkUrl`
|
||
w polu — **[DOPRACOWAĆ]** dodać pole `linkUrl` do configu bloku jeśli go nie
|
||
ma, bo aktualnie te trzy „Zobacz więcej" nie mają dokąd prowadzić poza całą
|
||
stroną `/uslugi`).
|
||
|
||
**Animacja:** `reveal-up` stagger 0.1s na 3 karty. Bez ikon w kwadratowych
|
||
„tile" nad tytułem (reguła anty-slop) — jeśli ikona, to mała, obok tytułu.
|
||
|
||
**Tło:** neutralne, bez zmiany względem otoczenia — ta sekcja ma być spokojna,
|
||
kontrast wizualny rezerwujemy dla Stats i Affiliation.
|
||
|
||
---
|
||
|
||
## 6. Process (`blockType: process`, drugi na stronie — pierwszy jest na
|
||
`/jak-sie-umowic`)
|
||
|
||
**[ZACHOWAĆ treść, DOPRACOWAĆ funkcjonalnie]** 3 kroki (WhatsApp → dokumenty →
|
||
zwrot).
|
||
|
||
- **[DOPRACOWAĆ]** dodać `id="jak-to-dziala"` do sekcji (naprawia martwy
|
||
`secondaryCta.url` z hero, patrz §1).
|
||
- `ctaUrl` już poprawnie wskazuje `/pl/jak-sie-umowic` — zachować.
|
||
- `image` (puste): zdjęcie/ilustracja procesu — NIE trzy identyczne ikony w
|
||
kółkach z numerem 1/2/3 (to dokładnie wzorzec „tiny numbered section
|
||
labels"/„icon tile" połączony). Zamiast tego: jedno zdjęcie kontekstowe
|
||
(np. dokumenty na biurku) obok listy kroków, kroki numerowane pełnym słowem
|
||
„Krok 1", „Krok 2", „Krok 3" w Fraunces, nie małą cyfrą-ozdobnikiem.
|
||
|
||
**Layout:** lista kroków pionowo po lewej z cienką pionową linią `line-draw`
|
||
łączącą numery kroków (metafora „ścieżki"), zdjęcie po prawej, sticky przy
|
||
scrollu do wysokości listy kroków (zdjęcie zostaje w miejscu, kroki
|
||
przewijają się obok — efekt „prowadzenia za rękę").
|
||
|
||
**Animacja:** `line-draw` rysuje się w dół w miarę scrollowania przez sekcję
|
||
(scroll-linked, nie viewport-trigger-once — to jedyne miejsce na stronie
|
||
głównej, gdzie animacja jest powiązana z postępem scrolla, nie jednorazowym
|
||
wejściem w viewport — używać oszczędnie, dokładnie tu ma sens narracyjny).
|
||
|
||
---
|
||
|
||
## 7. Affiliation (`blockType: affiliation`)
|
||
|
||
**[ZACHOWAĆ treść, UZUPEŁNIĆ media]** „Zaufanie i bezpieczeństwo" — kluczowa
|
||
sekcja prawna/zaufania (b.b.h., §4 Nr. 11 StBerG).
|
||
|
||
**`logo` (puste):** logo b.b.h. Lohnsteuerhilfeverein e.V. — klient wspomniał,
|
||
że je ma (patrz [10-architektura-cms.md](./10-architektura-cms.md) §1, dane
|
||
wejściowe). Bez logo ta sekcja jest gołym tekstem i traci najmocniejszy
|
||
dowód wiarygodności, jaki strona może pokazać.
|
||
|
||
**`trustPoints` (obecnie puste `[]`):** **[NOWE — wypełnić]** propozycja treści:
|
||
- „Licencjonowana pomoc podatkowa (§4 Nr. 11 StBerG), nie samozwańcze doradztwo"
|
||
- „Członkostwo w b.b.h. Lohnsteuerhilfeverein e.V. — stowarzyszeniu działającym w całych Niemczech"
|
||
- „Pełna odpowiedzialność zawodowa i ubezpieczenie w ramach stowarzyszenia"
|
||
|
||
DE odpowiednio: „Zugelassene Lohnsteuerhilfe (§4 Nr. 11 StBerG)...", itd.
|
||
|
||
**Layout:** logo b.b.h. widoczne, blok tekstu obok (nie pod spodem —
|
||
wiarygodność ma być na pierwszy rzut oka, nie po przeczytaniu akapitu),
|
||
`trustPoints` jako krótka lista z checkmarkiem, `linkText`/`linkUrl` prowadzi
|
||
do `/o-nas` (obecnie) — do rozważenia przekierowanie zamiast do `/stowarzyszenie`,
|
||
skoro ta strona istnieje właśnie po to, żeby rozwinąć temat b.b.h. (patrz
|
||
[07-stowarzyszenie.md](./07-stowarzyszenie.md)).
|
||
|
||
**Tło:** to jest kandydat na jedyne miejsce na stronie z delikatnie innym tłem
|
||
niż papier — np. bardzo blady odcień akcentu (2-3% `--accent-color` jako tło)
|
||
albo obramowanie w kolorze pieczęci, żeby sekcja „prawna" wizualnie
|
||
odróżniała się jako punkt zaufania, nie kolejny akapit.
|
||
|
||
**Animacja:** `stamp-in` na logo (wchodzi jak przybita pieczęć), `reveal-up`
|
||
na resztę.
|
||
|
||
---
|
||
|
||
## 8. Testimonials (`blockType: testimonials`)
|
||
|
||
**[ZACHOWAĆ treść]** 3 opinie (Piotr/Monachium, Anna/Berlin, Krzysztof/Dortmund)
|
||
— konkretne, z imieniem i miastem, dobra jakość dowodu społecznego.
|
||
|
||
**Layout:** NIE karuzela z auto-scrollującym marquee (zakaz w katalogu
|
||
anty-slop). Zamiast tego: 3 karty statyczne obok siebie na desktopie (stack
|
||
pionowy na mobile), każda z dużym znakiem cudzysłowu w Fraunces jako element
|
||
graficzny (spójne z motywem „dokumentu"/pieczęci), bez zdjęć profilowych
|
||
(nie ma ich w danych — nie wymyślać awatarów).
|
||
|
||
**Animacja:** `reveal-up` stagger 0.12s. Bez zoom-on-hover na kartach.
|
||
|
||
**Tło:** neutralne, spokojne — to sekcja do czytania, nie do „wow".
|
||
|
||
---
|
||
|
||
## 9. FAQTeaser (`blockType: faqTeaser`)
|
||
|
||
**[ZACHOWAĆ treść — 8 pytań]** ale to dużo jak na „teaser". Na stronie
|
||
głównej pokazywać TYLKO pierwsze 4-5 pytań (najczęstsze/najkrótsze odpowiedzi),
|
||
z wyraźnym CTA „Zobacz wszystkie pytania →" prowadzącym do pełnej strony
|
||
`/faq` (patrz [06-faq.md](./06-faq.md)) — **[DOPRACOWAĆ]** obecny blok nie ma
|
||
pola na link do pełnego FAQ ani limitu liczby pytań; dodać `ctaUrl`/`ctaText`
|
||
do configu, analogicznie do bloku `process`.
|
||
|
||
**Layout:** accordion (pytanie klika się, odpowiedź rozwija) — jedno otwarte
|
||
naraz, żeby lista nie „skakała" w dół przy każdym kliknięciu. Ikona plus/minus
|
||
lub chevron obracający się o 180°, transform nie layout-affecting (zgodnie
|
||
z zasadą motion w [01](./01-design-system-impeccable.md) §4).
|
||
|
||
**Animacja:** rozwijanie odpowiedzi: `height: auto` przez `AnimatePresence`/
|
||
`useMeasure` (Framer Motion), 200-250ms, bez bounce.
|
||
|
||
---
|
||
|
||
## 10. FinalCTA (`blockType: finalCta`)
|
||
|
||
**[ZACHOWAĆ treść]** „Gotowy na wyższy zwrot podatku? / Rozpocznij na WhatsApp".
|
||
|
||
**Layout:** pełna szerokość, wyraźnie oddzielona od reszty strony (to ostatni
|
||
akord przed stopką) — duży przycisk WhatsApp, wyśrodkowany, otoczony
|
||
spokojnym tłem.
|
||
|
||
**Tło:** jedyne miejsce, gdzie dopuszczalny mocniejszy akcent koloru — np.
|
||
pełne tło w `--accent-color` (ciemna pieczęć-czerwień) z jasnym tekstem, jako
|
||
wizualny „stempel domykający" stronę. To jest świadome odejście od
|
||
neutralnego papieru — ma sygnalizować „koniec dokumentu, czas na podpis/akcję".
|
||
|
||
**Animacja:** `stamp-in` na cały blok (skala + lekki obrót, jak przybicie
|
||
pieczątki na końcu formularza) — to najbardziej „efektowne" miejsce na
|
||
stronie, uzasadnione tym, że to jedyny call-to-action, który się tu pojawia.
|
||
|
||
---
|
||
|
||
## 11. Nowa sekcja do rozważenia: wideo „Co to jest Lohnsteuerhilfe"
|
||
|
||
Inspiracja z bbh (mają dedykowaną sekcję wideo). **[NOWE — faza 2, nie
|
||
blokuje startu]** — wymaga nagrania materiału (Janusz tłumaczy po polsku, czym
|
||
jest doradztwo podatkowe i dlaczego warto skorzystać z uprawnionego
|
||
Lohnsteuerhilfeverein zamiast np. samodzielnego rozliczenia). Realna wartość:
|
||
(a) SEO (wideo + transkrypcja), (b) zaufanie (twarz + głos silniej buduje
|
||
relację niż tekst), (c) wyjaśnienie niszowego tematu (Lohnsteuerhilfeverein to
|
||
pojęcie nieznane większości odwiedzających).
|
||
|
||
Jeśli/gdy powstanie: nowy blok `VideoSection` (pole `video` jako `upload` do
|
||
R2/storage lub `videoUrl` do YouTube/Vimeo embed, `poster` jako `upload→media`,
|
||
`title`, `description`) — umieszczony między sekcją 6 (Process) a 7
|
||
(Affiliation). Nie blokuje uruchomienia strony bez tej sekcji.
|