# 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#` (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.