Landing Page

Was macht Landing Page?

Erstellen Sie in Minuten schöne, responsive Landing Pages.

Wann verwenden

• Ein neues Produkt oder Feature einführen
• Eine Marketing- oder Werbeseite erstellen
• Ein Portfolio oder eine persönliche Website bauen
• Eine Anmeldeseite oder Wartelistenseite erstellen
• Ein Produktkonzept schnell prototypen

Funktionsweise

1. Seitenabschnitte

Jede effektive Landing Page folgt dieser Struktur:

┌─────────────────────────────┐
│  Navigation (Logo + Links)        │
├─────────────────────────────┤
│  Hero (Überschrift + CTA)         │
├─────────────────────────────┤
│  Social Proof / Logos             │
├─────────────────────────────┤
│  Features (3-4 Karten)            │
├─────────────────────────────┤
│  So funktioniert's (3 Schritte)   │
├─────────────────────────────┤
│  Testimonials                     │
├─────────────────────────────┤
│  Preisgestaltung (optional)       │
├─────────────────────────────┤
│  CTA (Hauptaktion wiederholen)    │
├─────────────────────────────┤
│  Footer                           │
└─────────────────────────────┘

2. Hero-Bereich

Der Hero-Bereich entscheidet über Erfolg oder Misserfolg der Seite. Halten Sie es einfach:

function Hero() {
  return (
    <section className="py-20 px-6 text-center">
      {/* Badge */}
      <div className="inline-flex items-center rounded-full bg-blue-50 px-3 py-1 text-sm text-blue-700 mb-6">
        Jetzt in der öffentlichen Beta
      </div>

      {/* Überschrift — ein klares Wertversprechen */}
      <h1 className="text-5xl font-bold tracking-tight text-gray-900 max-w-3xl mx-auto">
        Bringen Sie Ihr Produkt <span className="text-blue-600">10x schneller</span> mit KI auf den Markt
      </h1>

      {/* Unterüberschrift — unterstützt die Überschrift */}
      <p className="mt-6 text-xl text-gray-600 max-w-2xl mx-auto">
        Hören Sie auf, Boilerplate zu schreiben. Lassen Sie KI die repetitive Arbeit erledigen,
        während Sie sich auf das Wesentliche konzentrieren.
      </p>

      {/* CTA — eine primäre Aktion */}
      <div className="mt-10 flex gap-4 justify-center">
        <a href="#" className="px-8 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700">
          Kostenlos starten
        </a>
        <a href="#" className="px-8 py-3 border border-gray-300 rounded-lg font-medium hover:bg-gray-50">
          Demo ansehen
        </a>
      </div>
    </section>
  )
}

3. Feature-Karten

const features = [
  { icon: '⚡', title: 'Blitzschnell', description: 'In Sekunden bereitstellen, nicht in Stunden' },
  { icon: '🔒', title: 'Standardmäßig sicher', description: 'Sicherheit auf Enterprise-Niveau integriert' },
  { icon: '📊', title: 'Analysen', description: 'Echtzeit-Einblicke in Ihre Daten' },
]

function Features() {
  return (
    <section className="py-20 px-6 bg-gray-50">
      <h2 className="text-3xl font-bold text-center mb-12">Alles, was Sie brauchen</h2>
      <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        {features.map(f => (
          <div key={f.title} className="bg-white p-6 rounded-xl shadow-sm">
            <div className="text-3xl mb-4">{f.icon}</div>
            <h3 className="text-lg font-semibold mb-2">{f.title}</h3>
            <p className="text-gray-600">{f.description}</p>
          </div>
        ))}
      </div>
    </section>
  )
}

4. Design-Prinzipien

• Ein CTA pro Abschnitt — überfordern Sie nicht mit Auswahlmöglichkeiten
• Weißraum ist Ihr Freund — großzügiger Abstand (py-20, gap-8)
• Maximale Breite bei Text — lassen Sie Text nie die volle Breite einnehmen (max-w-3xl)
• Visuelle Hierarchie — größer = wichtiger, verwenden Sie font-bold sparsam
• Mobile First — für Mobilgeräte entwerfen, mit md: und lg: Breakpoints verbessern
• Schnell laden — verwenden Sie next/image, minimieren Sie JS, keine schweren Bibliotheken

5. Schnellstart

# Schnellster Weg: Next.js + Tailwind
npx create-next-app@latest landing --typescript --tailwind --app
cd landing
npm run dev

Qualitäts-Checkliste

• Sieht auf Mobilgeräten gut aus (bei 375px Breite prüfen)
• Hero-Überschrift ist klar und prägnant (< 10 Wörter)
• Ein eindeutiger CTA oberhalb der Falte
• Seite lädt in < 2 Sekunden
• Alle Links und Buttons funktionieren
• Favicon und Meta-Tags gesetzt

Beispiele

> Baue eine Landing Page für ein KI-Schreibtool
> Erstelle eine Wartelistenseite mit E-Mail-Anmeldung für eine mobile App
> Baue eine Portfolio-Landing Page mit Projektvorstellung