Enter your search text in the box above

Select a result to preview

breakout.now — Seiten-Definitionen & Content-Anforderungen

Zweck: Definiert JEDE nutzerrelevante Seite der App — was drauf soll, für wen, welcher Ton, welche SEO-Anforderungen, und wie sie in die Gesamt-Journey passt.
Für: Zukünftige Claude Code Agents, die Seiten erstellen oder überarbeiten.
Referenz: Lies zuerst USP-und-Stakeholder-Manifest für Stakeholder-Kontext.

Grundregeln für ALLE Seiten

  1. Sprache: Deutsch (korrekte Umlaute: ä, ö, ü, ß)
  2. Tonalität: Direkt, jung, authentisch — kein Corporate-Speak. Wie ein Kumpel, der dir was Geiles zeigt.
  3. Mobile-First: Alles muss auf 375px Breite funktionieren (max-w-2xl Container)
  4. Dark Theme: Dunkler Hintergrund, helle Akzente (Gold/Amber für Breakout, Emerald für Upcoming)
  5. Stripe-Compliance: Alle Seiten, die Zahlungen berühren, MÜSSEN Stripe-Anforderungen erfüllen (siehe Abschnitt unten)
  6. Impressum/Datenschutz: Muss von JEDER Seite erreichbar sein (Footer)
  7. SEO: Jede öffentliche Seite braucht meta title, description, OG-Tags
  8. Performance: Keine großen Bilder ohne Lazy Loading, kein Layout Shift

SEITEN-ÜBERSICHT (Sitemap)

A. Öffentliche Marketing-Seiten (nicht eingeloggt)

  1. Landing Page (Hauptseite)
  2. Creator Invite Page
  3. Artist Page
  4. A&R Page
  5. Pricing Page
  6. FAQ Page
  7. Genre-Erklärung
  8. Impressum
  9. Datenschutzerklärung
  10. AGB (Nutzungsbedingungen)
  11. Refund Policy
  12. Über uns / About

B. Community-Seiten (öffentlich, SEO-indexiert)

  1. Öffentliche Artist-Profile
  2. Community Hub / Feed
  3. Breakout Season Page
  4. Leaderboard / Rankings
  5. The Gate (Live-Voting-Ansicht)

C. App-Seiten (eingeloggt / Session-aktiv)

  1. Viewer Page (Session-Teilnahme)
  2. Creator Home / Dashboard
  3. Host Dashboard (Session-Live)
  4. Artist Home
  5. Artist Account / Profil-Bearbeitung
  6. Onboarding Page
  7. Analytics Page
  8. Bewertungskriterien Page
  9. Cashout Page
  10. Mein Account Page
  11. Support Page

DETAILLIERTE SEITEN-DEFINITIONEN

1. LANDING PAGE (Hauptseite)

Route: / bzw. breakout.now
Zielgruppe: Alle — erste Berührung mit der Marke
Status: 🟡 Existiert (LandingPage.tsx), aber minimal

Ziel der Seite: In 5 Sekunden erklären, was breakout.now ist, und den Besucher zur richtigen Aktion leiten.

Pflicht-Inhalte:

Hero-Section:

Problem-Solution-Section:

Wie es funktioniert (3-4 Schritte):

  1. Artist reicht Song ein
  2. Creator spielt & bewertet live
  3. Community stimmt ab
  4. Breakout-Gewinner qualifiziert sich fürs Tournament

Social Proof:

Tournament-Teaser:

Footer:

SEO:

Stripe-Anforderungen: Keine (keine Zahlungen auf dieser Seite)

2. CREATOR INVITE PAGE

Route: /creator oder /fuer-creator
Zielgruppe: Streamer, die breakout.now entdecken oder eingeladen wurden
Status: 🔴 Noch nicht gebaut

Ziel: Creator überzeugen, dass breakout.now ihr Stream-Format auf das nächste Level hebt.

Pflicht-Inhalte:

Hero:

Revenue-Vergleich:

Breakout = Content:

Tournament & Jury:

Features-Übersicht:

Wie es funktioniert (Creator-Perspektive):

  1. Registrieren & Session erstellen
  2. Songs kommen rein (kostenlos oder mit Boost)
  3. Du spielst, bewertest, die Community votet
  4. Breakout-Gewinner = viraler Moment
  5. Du verdienst an jedem Boost

CTA am Ende: "Jetzt als Creator starten"

SEO:

3. ARTIST PAGE

Route: /artist oder /fuer-artists
Zielgruppe: Musiker, die einen Weg suchen, gehört zu werden
Status: 🔴 Noch nicht gebaut (ArtistAuthPage existiert nur für Auth)

Ziel: Artists überzeugen, dass breakout.now ihre Chance ist — kostenlos, fair, mit echtem Potenzial.

Pflicht-Inhalte:

Hero:

Das Problem (Emotional):

Die Lösung:

Der Weg zum Tournament:

Öffentliches Profil:

FAQ-Schnellzugriff:

CTA: "Jetzt kostenlos einreichen"

SEO:

4. A&R PAGE

Route: /anr oder /fuer-labels
Zielgruppe: A&R-Manager, Label-Scouts, Booking-Agenten
Status: 🔴 Noch nicht gebaut

Ziel: A&Rs zeigen, dass breakout.now ihr Scouting revolutioniert — nach Tournament, als Phase 4.

Pflicht-Inhalte:

Hero:

Das Problem:

Die Lösung:

Pricing:

Datenschutz-Hinweis:

SEO:

5. PRICING PAGE

Route: /preise oder /pricing
Zielgruppe: Alle Stakeholder, die Kosten verstehen wollen
Status: 🔴 Noch nicht gebaut

Ziel: Transparenz über alle Kosten. Kein Kleingedrucktes, kein Verstecken.

Pflicht-Inhalte:

Grundprinzip (groß, oben):

Viewer-Bereich:

Artist-Bereich:

Creator-Bereich:

A&R-Bereich:

Stripe-Transparenz-Box (Pflicht für Stripe-Compliance):

FAQ-Integration:

SEO:

Stripe-Anforderungen: ✅ Muss Stripe-Pricing-Transparenz erfüllen

6. FAQ PAGE

Route: /faq
Zielgruppe: Alle
Status: 🔴 Noch nicht gebaut

Ziel: Alle Fragen beantworten, bevor sie gestellt werden. SEO-Gold.

Struktur (nach Stakeholder + Thema):

Allgemein:

Für Artists:

Für Creator:

Für Viewer:

Technisch:

Zahlungen:

SEO: Jede Frage = eigener <h2> oder accordion-item mit Schema.org FAQ-Markup

7. GENRE-ERKLÄRUNG

Route: /genres
Zielgruppe: Artists, Viewer
Status: 🔴 Noch nicht gebaut

Ziel: Zeigen, dass breakout.now genre-offen ist. SEO für Genre-bezogene Suchanfragen.

Pflicht-Inhalte:

SEO: Eigene meta description pro Genre, z.B. "Deutschrap auf breakout.now — reiche deinen Rap-Song kostenlos ein"

8. IMPRESSUM

Route: /impressum
Status: 🔴 Noch nicht gebaut — PFLICHT (deutsches Recht, TMG §5)

Pflicht-Inhalte (gesetzlich vorgeschrieben):

Hinweis: KEIN Marketing auf dieser Seite. Rein rechtlich.

9. DATENSCHUTZERKLÄRUNG

Route: /datenschutz
Status: 🔴 Noch nicht gebaut — PFLICHT (DSGVO)

Pflicht-Inhalte:

Stripe-Anforderungen: ✅ Stripe-Datenverarbeitung muss explizit erwähnt werden

10. AGB (Nutzungsbedingungen)

Route: /agb oder /nutzungsbedingungen
Status: 🔴 Noch nicht gebaut — PFLICHT

Pflicht-Inhalte:

Stripe-Anforderungen: ✅ Zahlungsbedingungen müssen Stripe-konform sein

11. REFUND POLICY

Route: /refund oder /erstattungen
Status: 🔴 Noch nicht gebaut — PFLICHT (Stripe-Anforderung)

Pflicht-Inhalte:

Stripe-Anforderungen: ✅ PFLICHT — Stripe verlangt eine öffentlich zugängliche Refund Policy

12. ÜBER UNS / ABOUT

Route: /ueber-uns
Status: 🔴 Noch nicht gebaut

Ziel: Vertrauen aufbauen. Zeigen, wer hinter breakout.now steht.

Pflicht-Inhalte:

13. ÖFFENTLICHE ARTIST-PROFILE

Route: /artist/:artistName oder /a/:slug
Zielgruppe: Jeder (Google-indexiert!)
Status: 🟡 ArtistProfilePage existiert, aber nicht SEO-optimiert

Ziel: Artist-Portfolio, das bei Google gefunden wird. Wichtig für Artists UND für A&Rs.

Pflicht-Inhalte:

SEO:

Google-Indexierung: ✅ MUSS indexiert werden (kein noindex!)

14. COMMUNITY HUB / FEED

Route: /community
Status: 🟡 CommunityPage existiert mit Tabs (SeasonTab, RankingTab, TheGateTab)

Ziel: Zentraler Anlaufpunkt für die gesamte breakout.now Community.

Tabs/Bereiche:

SEO: Teilweise indexierbar (Feed ja, personalisierte Daten nein)

15. BREAKOUT SEASON PAGE

Route: /season oder /season/1
Status: 🟡 SeasonTab existiert als Community-Tab

Ziel: Alles über die aktuelle Season auf einen Blick.

Pflicht-Inhalte:

SEO:

16. LEADERBOARD / RANKINGS

Route: /rankings oder innerhalb /community
Status: 🟡 RankingTab + RankingView existieren

Pflicht-Inhalte:

SEO: Indexierbar (aber anonymisiert vor Ranking Lock)

17. THE GATE (Live-Voting)

Route: Innerhalb /community oder als /gate
Status: 🟡 TheGateTab existiert

Ziel: Aktive Voting-Sessions anzeigen, zum Mitmachen einladen.

Pflicht-Inhalte:

18-28. APP-SEITEN (eingeloggt)

Diese Seiten sind funktional und existieren bereits. Hier die Content-Richtlinien:

Viewer Page (18): Minimalistisch, Fokus auf Queue + Voting. Kein Account nötig. Onboarding-Briefing beim ersten Besuch.

Creator Home (19): Dashboard mit Sessions, Earnings, Quick-Actions. Onboarding für neue Creator.

Host Dashboard (20): Live-Session-Management. Audio-Player, Queue, Breakout-Button, Ratings. Keine Ablenkung — das ist ein Arbeitstool.

Artist Home (21): Feed mit eigenen Ergebnissen, offene Sessions, Leaderboard-Position. Motivierend, nicht überladen.

Artist Account (22): Profil bearbeiten, Links, Bio, Genre. Klar, einfach.

Onboarding (23): Rollenbezogen (Creator/Artist/Viewer). Kurze Briefings, nicht überspringbar beim ersten Mal.

Analytics (24): Nur Creator. Session-Performance, Revenue, Trends. Daten-fokussiert.

Bewertungskriterien (25): Creator-konfigurierbar. Default-Kriterien + Custom. Erklärung warum strukturierte Bewertung besser ist.

Cashout (26): Stripe Connect Auszahlung. Klartext: Was du verdient hast, was abgezogen wird, was du bekommst.

Mein Account (27): Account-Einstellungen, Passwort, Löschung. Standard.

Support (28): Kontaktformular + FAQ-Link. Erreichbar von überall.

Stripe-Compliance-Anforderungen (für ALLE zahlungsrelevanten Seiten)

Stripe verlangt von Plattformen, die Stripe Connect nutzen:

  1. Öffentliche Refund Policy → /refund (PFLICHT)
  2. Klare Preisangaben → Pricing Page muss alle Gebühren transparent zeigen
  3. Datenschutz-Hinweis → Stripe als Zahlungsdienstleister in Datenschutzerklärung nennen
  4. AGB mit Zahlungsbedingungen → AGB müssen Zahlungs- und Erstattungsbedingungen enthalten
  5. Kontaktinformationen → Impressum mit erreichbarer E-Mail/Adresse
  6. Kein irreführendes Pricing → Stripe-Gebühren separat ausweisen, nicht verstecken
  7. SSL/HTTPS → Alle Seiten (wird von Netlify automatisch bereitgestellt)

SEO-Gesamtstrategie

Indexierbare Seiten (Google Sitemap):

Nicht indexierbar (noindex):

Schema.org Markup:

Meta-Tags-Template:

<title>[Seitentitel] | breakout.now</title>
<meta name="description" content="[160 Zeichen max]">
<meta property="og:title" content="[Seitentitel]">
<meta property="og:description" content="[Beschreibung]">
<meta property="og:image" content="[OG-Image URL]">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<link rel="canonical" href="https://breakout.now/[path]">

Content-Tonalität-Guide

Dos:

Don'ts:

Marken-Sprache: