Page Templates

Referenz: fragjulia-redesign-v3.html für die vollständige Implementierung pro Seite.

3.1 Home (/)

Hero

• 2-Spalten-Grid (Text | Chat-Preview)
• Links: Kein Pill-Badge — stattdessen einfache Textzeile in DM Sans 0.85rem, --sage: "Anonym und kostenlos. Immer." ODER ganz weglassen (Trust-Strip sagt das bereits)
• H1: "Deine Begleiterin bei Brustkrebs." — "Begleiterin" in italic --sage
• Subtitle → 2 Buttons
• Rechts: Chat-Preview-Card mit gestepptem Linien-Pattern, simuliertem Dialog
• Chat-Eingabefeld funktional machen: onSubmit → router.push('/chat?q=' + encodeURIComponent(input)) — reduziert Friction massiv
• Dezenter Disclaimer unter Chat-Eingabefeld: "fragJulia ersetzt keine ärztliche Beratung." in --text-muted, 0.78rem

Trust-Strip

• --cream Hintergrund (sichtbar dunkler als Hero)
• Nur Text mit Dots, keine Icon-Container: ● EU-Datenschutz ● Evidenzbasiert ● Anonym ● 24/7
• Dots: 6px --sage-light. Text: --text-secondary, DM Sans 0.88rem

Features ("Was Julia kann")

• Section-Header mit Overline
• 2×2 Card-Grid
• KEINE Icons / Icon-Container — stattdessen 3px linke Farblinie pro Card
• Oder: SVG-Illustrationen (#4 Dialog, #1 Verbundenheit, #3 Buch, #10 Stift) bei 32px, ohne Container

Emotional Quote — DARK SECTION

• Full-width, --forest Hintergrund — der emotionale Herzschlag der Seite
• Radiale Gradient-Overlays für Tiefe
• Zitat: Cormorant Garamond italic, --cream, zentriert

„Ich konnte nicht mal meine Telefonate annehmen oder meine Befunde durchlesen. Ich hatte einfach zu viel Angst. Und genau dafür ist diese Plattform da."

• Attribution: "— Julia, Gründerin" + Link "Ihre Geschichte lesen →" nach /wer
• Anführungszeichen deutsch korrekt: „ unten öffnend
• Trennzeichen: "Gründerin · Ihre Geschichte lesen →"

Alltag & Gesundheit

• Sage-Tint Hintergrund (siehe Sektions-Rhythmus in color.mdx)
• KEINE Emojis — SVG-Illustrationen:
  • Bewegung → #2 Wachstum (48px)
  • Ernährung → #6 Fürsorge (48px)
  • Mentale Gesundheit → #11 Stärke (48px)

Evidence-Strip

• --cream Hintergrund
• 3 Spalten, zentriert
• Horizontaler Divider (24px, --sage-light) über jedem Titel

FAQ

• Max-width 760px, zentriert
• Erste Frage standardmäßig offen
• Accordion: Cormorant Garamond Frage + "+" Toggle

CTA-Footer

• --cream + leichter Terracotta-Tint im Gradient
• Zentrierte Card, border-radius 24px
• H2 + Subtitle + Primary Button (Terracotta)

3.2 Chat (/chat)

Layout

• Vollbild-Chat-Interface, kein Hero
• Nav vereinfacht: nur Logo + "Zurück zur Startseite"
• Chat-Container: max-width 720px, zentriert, volle Höhe

Chat-Bereich

• Hintergrund: --warm-white
• User-Bubble: rechts, --sage Hintergrund, weiß Text, border-radius 18px (unten-rechts 6px)
• Julia-Bubble: links, --cream-light Hintergrund, --text-primary, border-radius 18px (unten-links 6px), "Julia"-Label darüber in --sage
• Timestamp unter jeder Bubble: 0.75rem, --text-muted

Eingabefeld

• Am unteren Rand fixiert, Pill-Form (100px)
• Border: 1px solid rgba(168, 184, 154, 0.3)
• Placeholder: "Stell mir deine Frage …"
• Send-Button: Kreis, --terracotta, Pfeil weiß
• Focus: Border --sage

Leerer Zustand

• Zentriert: Julia-Greeting
• Vorschlagskarten: 3–4 häufige Fragen als klickbare Chips (Pill, --cream-light Hintergrund, Border --sage-light/30%)

Hinweis-Banner

• Über dem Eingabefeld: "fragJulia ersetzt keine ärztliche Beratung." (--text-muted, 0.78rem)

3.3 Community (/community)

Hero

• Schmal, kein Full-Screen
• H1: "Community" + Subtitle: "Austausch, Live-Formate und Orientierung — respektvoll moderiert."
• 2 Buttons: "Zur Community" (Primary) + "Regeln ansehen" (Secondary)

Schnellzugriff

• 3 horizontale Cards: Live-Formate | Regeln & Sicherheit | Beitrag schreiben
• Cormorant Garamond H3

"So funktioniert's"

• 3-Step vertikal: 01 Lesen & finden → 02 Fragen stellen → 03 Unterstützen
• Große Zahl in --sage-light/20% Hintergrund-Kreis
• Verbindungslinie zwischen Schritten (vertikaler Strich, --sage-light/15%)

Regeln & Schutz

• Card mit --cream-light Hintergrund
• Regeln als Prose (keine Bullet-Points)
• Links: Datenschutz, Moderationsprinzipien

Live-Formate

• 2 Feature-Cards (größer als Standard):
  • fragJulia Runde: "Zuhören reicht. Wöchentlich, moderiert."
  • KDFF: "1 Expert*in, 60 Minuten, klare Antworten."
• Darunter Hinweis-Card: "Breastfriend finden — 1:1 Austausch"

Kategorien

• Grid 2×4
• KEIN "#" als Icon — SVG-Illustrationen pro Kategorie (32–40px, --sage opacity 0.5):

Neu diagnostiziert       →  #4 Dialog (Sprechblase)
OP & Recovery            →  #2 Wachstum
Chemo & Nebenwirkungen   →  #6 Fürsorge
Strahlentherapie         →  #12 Horizont
Hormontherapie           →  #2 Wachstum (variiert)
Rant & Vent              →  #11 Stärke — Farblinie in --terracotta
Angehörige               →  #1 Verbundenheit

3.4 Community-Unterkategorien

/community?category=[slug]:

• Breadcrumb: Community → [Kategorie]
• H1: Kategoriename + Subtitle
• Sortierung: Neueste / Meiste Antworten / Unbeantwortet

Post-Liste

• Karte pro Post: Titel (Cormorant Garamond 600, 1.2rem) + Vorschau (2 Zeilen truncated) + Meta "Vor 3 Stunden · 5 Antworten" + optional Therapiephase-Badge

Einzelner Post (/community/[id])

• Post-Header: Titel + Meta + Kategorie-Badge
• Post-Body: Fließtext, max-width 680px
• Antworten: Thread-Ansicht, leicht eingerückt
• Antwortfeld am Ende (gleicher Stil wie Chat-Eingabefeld)
• Seitlich: "Melden" + "Blockieren" als dezente Text-Links

3.5 Community Live-Formate

/community/live/runde (fragJulia Runde)

• Hero + "Was ist das?" (direkt sichtbar)
• "So funktioniert's" — 4 horizontale Features: Moderiert | Zuhören reicht | Anonym | Max. 8 Teilnehmerinnen
• Termine: 3 Cards nebeneinander (Montag 19:00 / Mittwoch 19:00 / Freitag 10:00)
• Vertrauenshinweis: "Alles, was in der Runde gesagt wird, bleibt in der Runde."
• CTA: "Zur nächsten Runde anmelden" (Primary)

/community/live/kdff (Keine dummen Fragen Freitag)

• Hero + "Wie Reddit AMA — aber kuratiert"
• 4-Step Timeline (horizontal): Montag sammeln → Mittwoch sortieren → Freitag antworten → Samstag Kurzfazit
• Timeline-Stil: Punkte verbunden mit Linie, --sage-light
• Expert*innen-Grid 2×3: Onkologie | Radiologie | Gynäkologie/Chirurgie / Psychoonkologie | Sozialrecht | Onko-Nurse
• Sozialrecht-Card mit "Häufig gefragt" Badge
• Beispielfragen: 4 Items mit "?" Icon
• "Warum Forum statt Live?" — 4 Benefits kompakt
• CTAs: "Zum aktuellen KDFF-Thread" + "Vergangene Ausgaben durchsuchen"

3.6 Breastfriend (/breastfriend)

• Wizard/Stepper-UI, zentriert, max-width 600px
• Progressbar oben: 4 Schritte, aktiver in --sage

Schritt 1: Situation

• H2: "Wo stehst du gerade?"
• 3 große vertikale Auswahl-Cards: Diagnose / Therapie / Nachsorge
• Ausgewählt: --sage Border + --sage/8% Hintergrund

Schritte 2–4

• Gleicher Auswahl-Stil
• "Weiter" (Primary) + "Später" Link

Sicherheitshinweis (permanent sichtbar)

• "Wenn sich etwas komisch anfühlt: Blockieren & melden — ohne Erklärung."
• Card mit --cream Hintergrund

Matching-Ergebnis

• Animation "Wir suchen jemanden für dich"
• Anonymes Profil-Card mit Matching-Infos
• "Nachricht senden" Button

3.7 Datenschutz (/datenschutz)

Hero

• H1: "Deine Daten gehören dir" + Subtitle "Transparent, sicher und DSGVO-konform."
• 2 Buttons: "Einstellungen öffnen" + "Vollständige Erklärung"

Datenschutz-Versprechen

• Großer Absatz + Trust-Badge-Zeile: "EU-Server · DSGVO-konform · Verschlüsselt"

Prinzipien (2×2 Grid)

• Verschlüsselung | EU-Server | Minimale Daten | Volle Kontrolle
• Card: Icon + H4 + Kurzbeschreibung

Einstellungen

• Card mit Toggle-Switches:
  • Chat-Verlauf speichern
  • Anonyme Produktverbesserung
• Aktiver Toggle: --sage
• Toggle-Beschreibung ändert sich je nach Zustand

Links

• "Vollständige Datenschutzerklärung" + "Forschung unterstützen"

3.8 Magazin (/magazin) — Editorial-Layout

Kernprinzip: Magazin = Entdecken. Asymmetrisch, editorial.

Hero (unterscheidet sich vom Lexikon)

• NICHT zentriert, KEIN Icon — linksbündig, 2-Spalten
• Links: Overline "MAGAZIN" + H1 "Wissen & Geschichten" + Subtitle
• Rechts: neuester Artikel als Highlight-Card (Kategorie-Badge, Titel, Lesezeit)

Artikelliste

• Vertikales Layout, volle Breite Cards
• Kategorie-Farbcoding als 3px linke Borderline:

Körperbild & Identität    →  --blush
Therapie & Sicherheit     →  --sage
Familie & Kinderwunsch    →  --sand
Mentale Gesundheit        →  --terracotta-light
Umfeld & Kommunikation    →  --mint
Bewegung, Reha            →  --olive

• Kategorie-Badge: heller Hintergrund der jeweiligen Farbe + dunkler Text
• H2: Artikeltitel (Cormorant Garamond 600)
• Vorschau-Text (3 Zeilen) + "X Min Lesezeit"

Artikel-Detailseite (/magazin/[slug])

• Max-width 720px, zentriert
• Kategorie-Badge + H1 + Lesezeit + Datum
• Cormorant Garamond Zwischenüberschriften, DM Sans Body
• Quellenangaben am Ende
• Verwandte Artikel: 2–3 Cards

Footer-CTA

• "Hast du einen Artikel-Vorschlag oder möchtest selbst schreiben?"
• E-Mail-Link: magazin@fragjulia.de

3.9 Rezepte (/rezepte)

Hero

• H1: "Einfach. Alltagstauglich. Für Therapiephasen."
• Subtitle + Sicherheitslink

Suchfeld

• Pill-Form, zentriert, max-width 500px
• Placeholder: "Übelkeit", "wenig Appetit", "proteinreich", "mild"

Therapiephasen-Grid (2×2)

• KEINE Emojis — SVG-Illustrationen:

Chemotherapie    →  #6 Fürsorge (48px)
Strahlentherapie →  #12 Horizont (48px)
Hormontherapie   →  #2 Wachstum (48px)
Nachsorge        →  #12 Horizont (48px, variiert)

3.10 Lexikon (/lexikon) — Such-zentriert

Kernprinzip: Lexikon = Finden. Das Suchfeld IST der Hero.

Hero (unterscheidet sich vom Magazin)

• Zentriert, KEIN Icon oben — das Suchfeld dominiert
• H1: "Brustkrebs-Lexikon" + Subtitle
• Suchfeld direkt im Hero (Pill-Form)
• Alphabetische Navigation (A–Z) direkt unter dem Suchfeld

Begriffsliste

• Gruppiert nach Buchstabe
• Buchstaben-Header: groß, --sage-light
• Begriffe klickbar, expandieren inline
• Erklärungen in klarer Sprache

3.11 FAQ (/faq)

• Max-width 800px, zentriert
• Erste Frage standardmäßig offen
• Kategorisiert: Über fragJulia | Chat | Community | Datenschutz | Allgemein
• Cormorant Garamond Frage + "+" Toggle
• Smooth max-height Transition

3.12 Wer ist Julia? (/wer) — Editorial-Layout

Dies ist die emotional stärkste Seite der Plattform. Julias eigene Brustkrebsgeschichte. Verdient ein eigenes, sorgfältiges Layout.

Hero

• Overline: "Die Geschichte hinter fragJulia"
• H1: "Wer ist Julia?"
• Kein Subtitle, kein Icon — der Text spricht für sich

Editorial-Body

• Max-width 680px (enger als Standard — wie ein Magazin-Essay)
• Cormorant Garamond für Zwischentitel
• DM Sans für Fließtext, line-height: 1.9 (großzügiger als Standard 1.7)
• Pull-Quotes für die stärksten Sätze, in --sage, Cormorant Italic, eingerückt:

„Du bist keine Statistik, ich bin keine Statistik, ich bin Julia."

„Und ich hole mir Stück für Stück mein wunderschönes Leben zurück."

„Und genau dafür ist diese Plattform da."

• Kein Feature-Grid, keine Cards, keine Sidebar — nur Text und Raum

Abschluss

• Illustration #12 (Horizont) als dekoratives Element, 120px, zentriert
• CTA: "Bereit, deine Fragen zu stellen?" + Primary Button

Quellen & Vertrauen

• Kurzer Absatz:

  "Julias Antworten basieren auf den aktuellen S3-Leitlinien der Deutschen Krebsgesellschaft, Informationen der Deutschen Krebshilfe und peer-reviewed Studien."

• Falls medizinischer Beirat existiert: hier benennen. Falls nicht: "Wir arbeiten daran, einen medizinischen Beirat aufzubauen." Transparenz > Marketing.

Quelle: DesignGUIDE/fragjulia-design-brief-v3.md §3.1–§3.12.