Fix FAQFull: Use isDraft boolean for draft filtering, fix Kontakt ID override
This commit is contained in:
MichalC
@@ -0,0 +1,291 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user