Fix FAQFull: Use isDraft boolean for draft filtering, fix Kontakt ID override
This commit is contained in:
@@ -0,0 +1,92 @@
|
||||
# Usługi / Leistungen — `/pl/uslugi` i `/de/leistungen` (page id 2)
|
||||
|
||||
Bloki: `pageHeader` → `servicesDetailed` → `eligibility` → `finalCta`.
|
||||
Wzorce animacji: patrz [01-design-system-impeccable.md](./01-design-system-impeccable.md) §4.
|
||||
|
||||
---
|
||||
|
||||
## 1. PageHeader (`blockType: pageHeader`)
|
||||
|
||||
**[ZACHOWAĆ treść]** „Kompleksowe rozliczenia podatkowe dla Polaków w Niemczech".
|
||||
|
||||
**Layout:** prosty nagłówek strony — H1 + subtitle, wycentrowany lub do lewej
|
||||
(spójnie z resztą page-headerów w serwisie), bez zdjęcia tła (to strona typu
|
||||
„Read/Persuade mieszany" — treść ma się liczyć, nie hero-wizual po raz drugi).
|
||||
|
||||
**Tło:** cienka linia `line-draw` pod nagłówkiem jako separator do sekcji usług
|
||||
— to page-header, nie hero, więc bez tekstury/parallax, subtelniej niż na home.
|
||||
|
||||
**Animacja:** `reveal-up`, pojedyncze wejście, bez stagger (dwa elementy: H1 + subtitle).
|
||||
|
||||
---
|
||||
|
||||
## 2. ServicesDetailed (`blockType: servicesDetailed`)
|
||||
|
||||
**[ZACHOWAĆ treść — 7 usług]** Deklaracja podatkowa, wstępne obliczenie
|
||||
zwrotu, kontrola decyzji, odwołania, całoroczne doradztwo, klasa podatkowa,
|
||||
ulgi/Kindergeld. Treść konkretna i kompletna — nie zmieniam.
|
||||
|
||||
**Ryzyko anty-slop:** 7 identycznych kart z ikoną = klasyczny wzorzec
|
||||
„identical card grids" + „icon tile stacked above heading" z katalogu. Musi
|
||||
zostać rozbite:
|
||||
|
||||
**Layout — dwupoziomowa hierarchia zamiast jednej siatki:**
|
||||
- **Usługa #1 „Sporządzenie deklaracji podatkowej"** wyróżniona jako pozycja
|
||||
główna, szersza karta (2 kolumny szerokości na desktopie), z ikoną OBOK
|
||||
tytułu (nie nad, nie w kwadratowym tile) i pełnym opisem widocznym od razu —
|
||||
to jest usługa, po którą przychodzi 90% odwiedzających.
|
||||
- Pozostałe 6 usług w siatce 2×3 (desktop) / 1 kolumna (mobile), karty
|
||||
jednolite ale mniejsze niż wyróżniona, z ikoną małą, inline z tytułem.
|
||||
- Każda karta ma cienki górny akcent (`line-draw` przy wejściu w viewport),
|
||||
NIE grubą kolorową krawędź z boku (zakaz side-tab).
|
||||
|
||||
**Ikony:** już zmapowane w danych (`fileText`, `calculator`, `shieldCheck`,
|
||||
`scale`, `helpCircle`, `users`, `coins` — prawdopodobnie lucide-react, zgodnie
|
||||
z resztą projektu). Renderować w kolorze `--accent-color`, rozmiar
|
||||
proporcjonalny do tekstu (nie oversized — reguła „massive icons").
|
||||
|
||||
**Animacja:** `reveal-up` stagger 0.08s po kolei, karta wyróżniona wchodzi
|
||||
jako pierwsza i lekko większa amplituda (24px zamiast 16px), żeby podkreślić
|
||||
hierarchię ruchem, nie tylko rozmiarem.
|
||||
|
||||
---
|
||||
|
||||
## 3. Eligibility (`blockType: eligibility`)
|
||||
|
||||
**[ZACHOWAĆ treść]** „Dla kogo — zakres uprawnień wg §4 Nr. 11 StBerG" —
|
||||
merytorycznie kompletna (kto może skorzystać / limity dochodów dodatkowych
|
||||
18 000€/36 000€ / kto jest wykluczony). To jedna z najważniejszych sekcji na
|
||||
całej stronie prawnie — Beratungsbefugnis jest podstawą działania firmy.
|
||||
|
||||
**Layout — kluczowe: to NIE jest sekcja marketingowa, to jest informacja
|
||||
prawna, więc traktować wizualnie jak fragment dokumentu, nie jak feature-grid:**
|
||||
- Dwie kolumny obok siebie: **„Kto może skorzystać"** (lista z ✓, kolor
|
||||
neutralny/zielonkawy stonowany, nie jaskrawy) vs **„Kogo NIE obejmują nasze
|
||||
uprawnienia"** (lista z ✕, kolor stonowany, nie agresywny czerwony — to nie
|
||||
jest błąd/ostrzeżenie, to fakt prawny).
|
||||
- `limitationsText` (limity 18 000€/36 000€) jako osobny, wyraźnie
|
||||
wydzielony akapit między dwiema kolumnami a `legalNotice` — to najbardziej
|
||||
„techniczny" fragment i ludzie go pomijają, jeśli nie ma wizualnego zaczepu
|
||||
(np. cienka ramka, mała ikona dokumentu/paragrafu z boku).
|
||||
- `legalNotice` (podstawa prawna) na samym dole, mniejszym tekstem, jako
|
||||
formalne domknięcie — jak stopka dokumentu prawnego, nie call-to-action.
|
||||
|
||||
**Tło:** delikatnie wydzielone od reszty strony (np. `--card-color` na całą
|
||||
sekcję, cienka ramka `--border-color` dookoła) — sygnalizuje „to jest
|
||||
oficjalna informacja, nie marketing".
|
||||
|
||||
**Animacja:** BEZ efektownego wejścia — `reveal-up` bardzo subtelny (8px, nie
|
||||
24px) albo brak animacji w ogóle. To sekcja do przeczytania w spokoju, ruch
|
||||
tu odwracałby uwagę od treści prawnej.
|
||||
|
||||
**Uwaga treściowa (nie wizualna, ale ważna):** limity 18 000€/36 000€ i
|
||||
podstawa `§4 Nr. 11 StBerG` to dane prawne, które mogą się zmieniać rok do
|
||||
roku — do weryfikacji z klientem przed publikacją, że kwoty są aktualne na
|
||||
2026 (nie kopiować bez sprawdzenia, to nie jest zakres tego planu wizualnego).
|
||||
|
||||
---
|
||||
|
||||
## 4. FinalCTA
|
||||
|
||||
**[ZACHOWAĆ treść]** identyczny wzorzec jak w [02-strona-glowna.md](./02-strona-glowna.md)
|
||||
§10 — spójność między stronami jest tu ważniejsza niż wariacja.
|
||||
Reference in New Issue
Block a user