mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-18 20:01:22 +02:00
d36b321d9d
Applied formatting to 1487+ files using pnpm format:write - TypeScript/JavaScript files - Svelte components - Astro pages - JSON configs - Markdown docs 13 files still need manual review (Astro JSX comments)
230 lines
4.7 KiB
Markdown
230 lines
4.7 KiB
Markdown
# 📋 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?
|
|
|
|
### Legal Check
|
|
|
|
- [ ] 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_
|