4.6 KiB
Usługi / Leistungen — /pl/uslugi i /de/leistungen (page id 2)
Bloki: pageHeader → servicesDetailed → eligibility → finalCta.
Wzorce animacji: patrz 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-drawprzy 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 alegalNotice— 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 §10 — spójność między stronami jest tu ważniejsza niż wariacja.