managarten/apps-archived/uload/docs/marketing/Landing-Page-Guidelines.md
Till-JS 61d181fbc2 chore: archive inactive projects to apps-archived/
Move inactive projects out of active workspace:
- bauntown (community website)
- maerchenzauber (AI story generation)
- memoro (voice memo app)
- news (news aggregation)
- nutriphi (nutrition tracking)
- reader (reading app)
- uload (URL shortener)
- wisekeep (AI wisdom extraction)

Update CLAUDE.md documentation:
- Add presi to active projects
- Document archived projects section
- Update workspace configuration

Archived apps can be re-activated by moving back to apps/

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-29 07:03:59 +01:00

4.7 KiB

📋 Landing Page Guidelines & Best Practices

🎯 Grundprinzipien

1. Authentizität vor Übertreibung

  • Vermeiden: Unrealistische Nutzerzahlen ("10.000+ Nutzer" wenn man gerade startet)
  • Stattdessen: Ehrliche Positionierung ("Beta Launch 2024", "Neu am Markt")
  • Alternative Metriken: Response-Zeit, Uptime, Herkunft ("Made in Germany")

2. Konsistente Preisgestaltung

  • Alle Preisangaben müssen identisch sein zwischen:
    • Landing Page
    • Pricing Page
    • Stripe Integration
  • Immer prüfen: /src/routes/(app)/pricing/+page.svelte als Single Source of Truth

3. Realistische Social Proof

  • Vermeiden: Fake Testimonials mit erfundenen Erfolgsgeschichten
  • Alternativen für neue Startups:
    • Beta-Tester Feedback
    • Use Cases statt Success Stories
    • Feature-Highlights statt Nutzerzahlen
    • Technische Stärken (Uptime, Performance, Security)

🏗️ Struktur-Empfehlungen

Hero Section

1. Trust Badges (DSGVO, Sicherheit, Performance)
2. Klare Value Proposition (Headline + Subheadline)
3. Direkte Action (Form oder CTA)
4. Visual Preview oder Demo

Content Sections (Reihenfolge)

1. Hero Section
2. Zielgruppen (mit Tabs für verschiedene Personas)
3. Feature Showcase (interaktiv wenn möglich)
4. Pricing (transparent, keine versteckten Kosten)
5. Social Proof / Use Cases
6. Trust Signals (Sicherheit, Compliance)
7. Footer mit allen wichtigen Links

🎨 Design Patterns

Farbcodierung

  • Primary Action: bg-theme-primary
  • Secondary Action: border-theme-primary
  • Success: Grün (#10b981)
  • Trust/Security: Blau (#3b82f6)
  • Premium/Special: Purple (#9333ea)

Komponenten-Struktur

/src/lib/components/landing/
├── HeroSection.svelte
├── TargetAudience.svelte
├── FeatureShowcase.svelte
├── PricingSection.svelte
├── Testimonials.svelte
└── TrustSignals.svelte

Checkliste vor Go-Live

Content Check

  • Alle Preise konsistent?
  • Keine übertriebenen Metriken?
  • Rechtschreibung geprüft?
  • CTAs klar und eindeutig?

Technical Check

  • Mobile responsive?
  • Ladezeiten optimiert?
  • Forms funktionieren?
  • Analytics tracking aktiv?
  • DSGVO-Hinweise vorhanden?
  • Impressum verlinkt?
  • Datenschutz verlinkt?
  • Cookie-Banner (falls nötig)?

🚀 Launch-Phasen Messaging

Phase 1: Beta Launch (Aktuell)

  • "Beta-Zugang sichern"
  • "Sei einer der Ersten"
  • "Early Access Features"
  • "Exklusiver Beta-Preis"

Phase 2: Public Launch

  • "Jetzt verfügbar"
  • "X Beta-Tester vertrauen uns"
  • "Launch-Angebot"

Phase 3: Growth

  • Echte Nutzerzahlen
  • Case Studies
  • Erfolgsgeschichten
  • Partner-Logos

📊 Metriken für neue Startups

Statt Nutzerzahlen diese Metriken verwenden:

Technische Metriken

  • Uptime (99.9%)
  • Response Time (<100ms)
  • Support Response (<2h)
  • API Verfügbarkeit

Qualitative Metriken

  • Made in Germany/EU
  • DSGVO-konform
  • SSL-verschlüsselt
  • Open Source (falls zutreffend)

Zeitliche Metriken

  • Gegründet/Launch Jahr
  • Updates pro Monat
  • Feature Releases

🔄 A/B Testing Empfehlungen

Test-Elemente

  1. Headlines (Value Proposition)
  2. CTA-Buttons (Text & Farbe)
  3. Pricing-Darstellung
  4. Feature-Reihenfolge
  5. Trust-Signal Platzierung

Tracking

  • Conversion Rate
  • Bounce Rate
  • Time on Page
  • Scroll Depth
  • Click-through Rate

📝 Copy-Writing Tipps

Do's

  • Kurze, prägnante Headlines
  • Benefits vor Features
  • Aktive Sprache
  • Social Proof einbauen
  • Dringlichkeit ohne Fake-Scarcity

Don'ts

  • Technischer Jargon
  • Zu viele Superlative
  • Unklare CTAs
  • Walls of Text
  • Stock-Phrasen

🎯 Conversion-Optimierung

Above the Fold

  • Value Proposition in 5 Sekunden verstehbar
  • Primärer CTA sichtbar
  • Trust-Signale erkennbar
  • Keine Ablenkungen

Form-Optimierung

  • Minimale Felder
  • Inline-Validation
  • Clear Error Messages
  • Progress Indicators (bei Multi-Step)

Mobile First

  • Touch-optimierte Buttons (min. 44x44px)
  • Lesbare Schriftgrößen (min. 16px)
  • Vereinfachte Navigation
  • Schnelle Ladezeiten (<3s)

🔍 Regelmäßige Reviews

Monatlich prüfen

  • Analytics-Daten
  • Conversion-Raten
  • User-Feedback
  • Konkurrenz-Analyse

Quarterly Updates

  • Content-Refresh
  • Feature-Updates
  • Testimonial-Updates
  • Design-Tweaks

💡 Quick Wins

  1. Loading Performance: Bilder optimieren, Lazy Loading
  2. Trust Building: Security Badges prominent platzieren
  3. Social Proof: Beta-Tester Zitate einbauen
  4. Urgency: "Beta-Preis" oder "Launch-Angebot"
  5. Simplicity: Ein klarer CTA pro Section

Letztes Update: Januar 2025 Nächstes Review: Q2 2025