93 lines
4.6 KiB
Markdown
93 lines
4.6 KiB
Markdown
# 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.
|