14 KiB
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 §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 +
whatsappNumberz globala Company (już istnieje w schemacie), linkhttps://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-inprzy 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 §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 §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).
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 martwysecondaryCta.urlz hero, patrz §1). ctaUrljuż 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 §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).
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) — [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 §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.