budmin/landingpage
Watch
1
0
Fork
You've already forked landingpage
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Design-Optimierung: A11y-Fixes, AI-Tell-Reduktion und Tailwind-Migration #2

New issue
Closed
opened 2026-06-09 21:42:25 +00:00 by glow · 2 comments
glow commented 2026-06-09 21:42:25 +00:00 (Migrated from gitlab.fluffyplace.de)
Copy link

Design-Audit der Landing Page (Code-Review + gerenderte Screenshots aller 4 Routen, Desktop 1440px / Mobile 390px) gegen das Taste-Skill-Framework.

📎 Vollständiger Plan als Anhang: design-optimierungsplan.md

Kernbefunde (Details und Begründungen im Plan)

P1 – Funktionale Mängel (zuerst fixen)

  • Accordion auf /leistungen nicht tastaturbedienbar: <div onClick> statt <button> (ServicesPage.tsx:49); FAQ macht es richtig. Gleiches Problem bei den klickbaren Karten (ServicesOverview, /wissen).
  • Kontrast-Verstöße: Footer-Links Impressum/Datenschutz #374151 auf Navy ≈ 1,8:1 (fast unsichtbar – rechtlich heikel), Preishinweis/Bildunterschriften #4b5563 ≈ 2,6:1. Fix: auf ak-muted anheben.
  • prefers-reduced-motion ignoriert: float/spin-Endlosanimationen im Hero laufen immer.

P2 – AI-Tell-Reduktion (größter sichtbarer Qualitätssprung)

  • Eyebrow-Inflation: identische Uppercase-Pill über jeder Sektion (7 Stück). Nur die Hero-Pill behalten, Rest streichen.
  • 7-Farben-System: Regenbogen-Akzente auf den Karten (Grün/Violett/Orange/Pink) konkurrieren mit Cyan + Gelb. Auf einen Akzent vereinheitlichen.
  • 5 verschiedene Labels für dieselbe Kontakt-Absicht ("Jetzt Kontakt aufnehmen" / "Kontakt" / "Frage stellen" / "Anfragen" / "Individuelles Angebot anfragen") → ein Label.
  • Neon-Glow auf Button-Hover und drehender Deko-Kreis + Float gleichzeitig am Hero-Bild → reduzieren.

P3 – Assets

  • Google Fonts via CDN ist ein DSGVO-Risiko (LG München I, IP-Übermittlung abmahnfähig) → Roboto self-hosten via @fontsource/roboto (~20 min).
  • Hero-Illustration vs. echtes Foto: zur Diskussion – für "ich komme zu Ihnen nach Hause" ist das echte Gesicht das stärkste Vertrauenssignal.

P4 – Layout

  • /leistungen wirkt im Initialzustand leer (alle Accordions zu): erstes Item default öffnen, optional Desktop-Detail-Panel.
  • Sektions-Header-Muster variieren (Unterseiten linksbündig wie /ueber-mich).

P5 – Technische Hygiene

  • Inline-Styles statt der konfigurierten Tailwind-Tokens (#38bdf8 ~40× hartkodiert) → komponentenweise Migration, macht alle Farb-Fixes erst wartbar.
  • JS-Hover (onMouseEnter + useState) → CSS hover:/focus-visible:, transition: all → gezielte Properties.

Empfohlene Reihenfolge

  1. P1 komplett (~3h, Pflicht) → 2. Eyebrows + CTA-Labels + Glow (~2h) → 3. Fonts (~0,5h) → 4. Tailwind-Migration (~6-8h) → 5. Farben (~1h) → 6. /leistungen-Layout (~3h) → 7. Hero-Foto (Inhaber-Entscheidung).

Schritte 1-3 sind risikoarm und sofort mergebar.

Bewusst nicht geändert

Dark-only Theme (Markenentscheidung), Gedankenstriche (korrektes Deutsch, kein AI-Tell), Copy/Tonalität (stärkstes Asset der Seite), Informationsarchitektur.

Screenshots (Ist-Zustand)

Startseite /leistungen (Initialzustand)
desktop-home desktop-leistungen

🤖 Generated with Claude Code

Design-Audit der Landing Page (Code-Review + gerenderte Screenshots aller 4 Routen, Desktop 1440px / Mobile 390px) gegen das Taste-Skill-Framework. **📎 Vollständiger Plan als Anhang:** [design-optimierungsplan.md](/uploads/345f94feabc6035d999e6fb74f2da274/design-optimierungsplan.md) ## Kernbefunde (Details und Begründungen im Plan) ### P1 – Funktionale Mängel (zuerst fixen) - **Accordion auf /leistungen nicht tastaturbedienbar**: `<div onClick>` statt `<button>` (`ServicesPage.tsx:49`); FAQ macht es richtig. Gleiches Problem bei den klickbaren Karten (ServicesOverview, /wissen). - **Kontrast-Verstöße**: Footer-Links Impressum/Datenschutz `#374151` auf Navy ≈ 1,8:1 (fast unsichtbar – rechtlich heikel), Preishinweis/Bildunterschriften `#4b5563` ≈ 2,6:1. Fix: auf `ak-muted` anheben. - **`prefers-reduced-motion` ignoriert**: float/spin-Endlosanimationen im Hero laufen immer. ### P2 – AI-Tell-Reduktion (größter sichtbarer Qualitätssprung) - **Eyebrow-Inflation**: identische Uppercase-Pill über *jeder* Sektion (7 Stück). Nur die Hero-Pill behalten, Rest streichen. - **7-Farben-System**: Regenbogen-Akzente auf den Karten (Grün/Violett/Orange/Pink) konkurrieren mit Cyan + Gelb. Auf einen Akzent vereinheitlichen. - **5 verschiedene Labels für dieselbe Kontakt-Absicht** ("Jetzt Kontakt aufnehmen" / "Kontakt" / "Frage stellen" / "Anfragen" / "Individuelles Angebot anfragen") → ein Label. - **Neon-Glow auf Button-Hover** und **drehender Deko-Kreis + Float gleichzeitig** am Hero-Bild → reduzieren. ### P3 – Assets - **Google Fonts via CDN ist ein DSGVO-Risiko** (LG München I, IP-Übermittlung abmahnfähig) → Roboto self-hosten via `@fontsource/roboto` (~20 min). - **Hero-Illustration vs. echtes Foto**: zur Diskussion – für "ich komme zu Ihnen nach Hause" ist das echte Gesicht das stärkste Vertrauenssignal. ### P4 – Layout - **/leistungen wirkt im Initialzustand leer** (alle Accordions zu): erstes Item default öffnen, optional Desktop-Detail-Panel. - Sektions-Header-Muster variieren (Unterseiten linksbündig wie /ueber-mich). ### P5 – Technische Hygiene - **Inline-Styles statt der konfigurierten Tailwind-Tokens** (`#38bdf8` ~40× hartkodiert) → komponentenweise Migration, macht alle Farb-Fixes erst wartbar. - JS-Hover (`onMouseEnter` + `useState`) → CSS `hover:`/`focus-visible:`, `transition: all` → gezielte Properties. ## Empfohlene Reihenfolge 1. P1 komplett (~3h, Pflicht) → 2. Eyebrows + CTA-Labels + Glow (~2h) → 3. Fonts (~0,5h) → 4. Tailwind-Migration (~6-8h) → 5. Farben (~1h) → 6. /leistungen-Layout (~3h) → 7. Hero-Foto (Inhaber-Entscheidung). Schritte 1-3 sind risikoarm und sofort mergebar. ## Bewusst nicht geändert Dark-only Theme (Markenentscheidung), Gedankenstriche (korrektes Deutsch, kein AI-Tell), Copy/Tonalität (stärkstes Asset der Seite), Informationsarchitektur. ## Screenshots (Ist-Zustand) | Startseite | /leistungen (Initialzustand) | |---|---| | ![desktop-home](/uploads/704ff889029c5be5bfb4101a8f958c75/desktop-home.png) | ![desktop-leistungen](/uploads/a23e5f9891238fb593a9a08a54459fcc/desktop-leistungen.png) | 🤖 Generated with [Claude Code](https://claude.com/claude-code)
glow commented 2026-06-09 22:10:08 +00:00 (Migrated from gitlab.fluffyplace.de)
Copy link

mentioned in merge request !5

mentioned in merge request !5
glow commented 2026-06-16 10:33:39 +00:00 (Migrated from gitlab.fluffyplace.de)
Copy link

mentioned in commit f79a407be2

mentioned in commit f79a407be2fad6e60ee8792d2fcca3d2ba99829b
glow (Migrated from gitlab.fluffyplace.de) closed this issue 2026-06-16 10:33:40 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels   
design

   
frontend
No labels
design
frontend
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
budmin/landingpage#2
No description provided.