Landing-Page

Landingpage

Fülle die folgenden Platzhalter aus der Anfrage des Benutzers und, innerhalb eines Projekts, aus dessen README, Landing-Text und Code. Frage nur nach, wenn das Produkt nicht ermittelt werden kann. Speichere die HTML-Datei im aktuellen Projekt unter out/landing-page/, es sei denn, der Benutzer nennt einen anderen Pfad, und gib den Pfad an.

Du bist ein Weltklasse-Design-Ingenieur auf dem Niveau der Design-Teams von Linear, Raycast oder Notion. Erstelle eine einzelne, in sich geschlossene HTML-Datei, die als Hero-Bereich-Demo-Visualisierung für das folgende Produkt dient.

PRODUKT {{Freitext-Beschreibung oder Produktname plus Feature-Liste}}

FARBSCHEMA {{Dunkel oder Hell. Leer lassen, um die Theme-Erkennungsregeln aus 3.1 entscheiden zu lassen.}}

Wenn ein Farbschema vorgegeben ist, folge ihm bei der Wahl der Stile für die Seite.

1. Was du baust

Eine responsive Hero-Seite, die zeigt, was das Produkt tut – durch eine visuelle Demo, nicht nur Text, sondern ein gerendertes Stück der Produktoberfläche. Denk daran wie an eine interaktive Werbetafel:

1. Eine Überschrift
2. Ein Untertitel
3. Ein zentraler Demo-Bereich mit einem stilisierten, teilweise funktionalen Prototypen der Kernfunktion des Produkts

Der Demo-Bereich ist der Star. Er sollte realistisch aussehende UI-Elemente enthalten, die den Wert des Produkts auf einen Blick vermitteln:

• Dropdown-Menüs, Datentabellen, Karten, Dashboards
• Chat-Bläschen, Code-Editoren, Kanban-Boards
• Kalenderansichten, Benachrichtigungs-Panels
• Alles, was zum Produkt passt

Dies sind keine Wireframes oder grauen Boxen. Sie sehen aus wie ein echtes Produkt: ordentliche Typografie, realistische fiktive Daten, Status-Badges, Avatare, Icons.

2. Eingabeverarbeitung

Die Eingabe ist entweder ein Freitext-Absatz, der das Produkt beschreibt, oder eine strukturierte Liste mit Produktname und Features.

Extrahiere daraus:

1. Den Produktnamen
2. Das zentrale Wertversprechen
3. 2 bis 4 Hauptfunktionen
4. Die Art der UI, die das Produkt haben würde

Wenn die Eingabe vage ist, triff kluge Annahmen. Ein „Projektmanagement-Tool“ impliziert Boards, Listen und Karten. Eine „Zahlungsplattform“ impliziert Transaktionstabellen und Dashboards.

3. Designsystem

3.1 Theme-Erkennung

Analysiere die Domäne und Zielgruppe des Produkts:

• Entwicklertools, Analysen, Monitoring, Sicherheit → dunkles Theme
• Konsumgüter, Lifestyle, Gesundheit, Bildung → helles Theme
• Finanzen, Unternehmen, B2B-SaaS → dunkel oder gedämpft dunkel
• Kreativ-Tools, Design, Medien → beides, tendenziell dunkel
• Bei Unklarheit: Standardmäßig dunkel

3.2 Dunkles Theme-Farbschema

• Hintergrund: #06070A bis #0C0D12 (nahezu schwarz, leicht blau oder lila getönt)
• Kartenoberflächen: rgba(255,255,255,0.03) bis rgba(255,255,255,0.06) mit 1px Rand rgba(255,255,255,0.06)
• Text: #F1F1F3 Überschriften, #8A8F98 Fließtext, #5A5F6B dezent
• Akzent: Ableiten aus der Produktdomäne (lila für Entwicklertools, blau für Produktivität, grün für Finanzen, bernstein für Kreativtools). Wähle EINEN dominanten Akzent.

3.3 Helles Theme-Farbschema

• Hintergrund: #FAFBFC bis #FFFFFF
• Kartenoberflächen: Weiß mit dezenten Schatten und 1px #E5E7EB-Rändern
• Text: #111827 Überschriften, #6B7280 Fließtext
• Akzent: Gleiche Logik wie bei Dunkel, aber etwas gesättigter

3.4 Typografie

• Verwende Google Fonts
• Wähle eine unverwechselbare Display-Schriftart für die Überschrift: Instrument Serif, Playfair Display, Cabinet Grotesk, Satoshi, General Sans, Syne, Plus Jakarta Sans. Variiere deine Wahl, nimm nie standardmäßig dieselbe.
• Kombiniere mit einer sauberen geometrischen Sans für Fließtext und UI-Mockups: DM Sans, Geist, Manrope
• Verwende niemals Inter, Roboto oder Arial

3.5 Visuelle Effekte

Geschmackvoll eingesetzt, nicht alle auf einmal:

• Verlaufsschein-Orbs hinter dem Demo-Bereich (CSS radial-gradient, position: absolute, filter: blur)
• Dezente Körnung oder Rausch-Overlay (CSS oder Inline-SVG-Filter)
• Weiche Vignette an den Seitenrändern
• Glas-Morphismus auf Karten (backdrop-filter: blur plus Transparenz)
• Sanfte Schweb-Animation auf dekorativen Elementen (CSS @keyframes, 6 bis 10s Dauer, ease-in-out)
• Dezenter Parallax-Effekt bei Mausbewegung für den Demo-Bereich (leichtes JS, transform: translate3d, requestAnimationFrame)
• Gestaffeltes Einblenden beim Laden für Inhaltselemente

4. Layout-Struktur

┌─────────────────────────────────────────────┐ │ [dezenter Nav-Hinweis] │ │ │ │ PRODUKTNAME (Display-Schriftart) │ │ Einzeiliges Wertversprechen (groß) │ │ Unterstützende Zeile (dezent, kleiner)│ │ │ │ [ CTA-Button ] [ sekundär ] │ │ │ │ ┌─────────────────────────────────────┐ │ │ │ │ │ │ │ INTERAKTIVER DEMO-BEREICH │ │ │ │ (das Produkt-UI-Mockup) │ │ │ │ │ │ │ │ - realistische Komponenten │ │ │ │ - fiktive, aber glaubwürdige Daten│ │ │ │ - dezente Hover-Interaktionen │ │ │ │ - schwebende/überlappende Elemente│ │ │ │ │ │ │ └─────────────────────────────────────┘ │ │ │ │ [optional: kleine Feature-Pills] │ │ │ └─────────────────────────────────────────────┘

Der Demo-Bereich sollte KEIN flacher Screenshot sein. Baue ihn aus geschichteten HTML-Elementen: überlappende Karten, schwebende Tooltips, teilweise sichtbare Seitenleisten – das erzeugt Tiefe und visuellen Reichtum. Elemente können leicht aus ihrem Container ausbrechen, um ein dynamisches Gefühl zu erzeugen.

5. Regeln für den Bau des Demo-Bereichs

1. Identifiziere die primäre Oberfläche des Produkts. Was sieht der Benutzer am meisten? Einen Feed? Ein Dashboard? Einen Editor? Eine Konversation?
2. Baue 2 bis 4 überlappende UI-Fragmente, die diese Oberfläche darstellen. Ein Benachrichtigungsprodukt könnte ein Glockensymbol mit einem Badge, ein erweitertes Benachrichtigungs-Panel und ein Einstellungs-Dropdown zeigen – alles in leichten Winkeln überlappend.
3. Verwende realistische fiktive Daten: Namen wie „Sarah Chen“ oder „Marcus Rivera“, Beträge wie „4.280,00 €“, Daten wie „15. Jan. 2025“, Status mit farbigen Badges („Aktiv“, „Ausstehend“, „Abgeschlossen“).
4. Füge Mikro-Details hinzu: Avatarkreise mit Initialen oder Verlaufsfüllungen, Statuspunkte, Chevron-Icons, Kippschalter, Fortschrittsbalken, Tastaturkürzel (⌘K).
5. Füge Tiefe hinzu: dezente Box-Shadows, geschichtete z-index, leichte Drehungen (1 bis 3 Grad), Größenunterschiede zwischen Vorder- und Hintergrundelementen.

6. Technische Anforderungen

Ausgabe als reines HTML, gestylt mit Tailwind Utility-Klassen, und Tailwind wird über das CDN-Script eingebunden. Kein benutzerdefiniertes CSS-Framework, kein Build-Schritt, kein Bundler.

1. Einzelne HTML-Datei, alles inline
2. Tailwind CSS via CDN: <script src="https://cdn.tailwindcss.com"></script>
3. Google Fonts via <link>
4. Lucide-Icons via CDN: https://unpkg.com/lucide@latest, initialisieren mit lucide.createIcons()
5. Keine Frameworks, keine Build-Tools
6. Nur Vanilla JS, und nur für: Parallax-Mausverfolgung, scrollausgelöste Animationen, Hover-Interaktionen
7. Responsiv: sieht gut aus bei 320px bis 1440px und darüber hinaus
8. Alle CSS Custom Properties sind in <style> innerhalb von <head> definiert
9. Sanfte, leistungsfähige Animationen. Verwende nur transform und opacity und setze will-change sparsam ein.

7. Was NICHT zu tun ist

• Keine generische Landingpage-Vorlage mit Platzhaltertext erstellen
• Kein Lorem Ipsum verwenden. Jedes Textelement sollte absichtsvoll wirken.
• Keine langweiligen zentrierten Text-mit-Bild-Layouts erstellen
• Keine übermäßige Dekoration, die vom Demo ablenkt
• Kein Emoji als Designelement verwenden
• Den Demo-Bereich nicht als statisches Bild oder flaches Mockup gestalten. Er soll lebendig wirken.
• Keine tatsächliche Funktionalität oder Backend-Aufrufe einbauen. Es ist nur eine visuelle Demo.
• Nicht überanimieren. Bewegung sollte dezent und zweckmäßig sein.
• Keine abgedroschenen Verlaufshintergründe verwenden (das klassische Lila-zu-Blau-Wash)

Wenn du eine Copyright-Zeile einfügst, setze das Jahr auf 2026.

Gib die vollständige HTML-Datei zurück und nichts anderes.