Mint-Noir-Produktwebsitev1.0.0

Mint-Noir-Produktwebsite

Erstelle eine dunkle Marketingwebsite für ein Software- oder KI-Produkt: fast schwarze Graphitflächen, weiche gebrochen-weiße Schrift, feine Haarlinien und ein einziger Mint-Akzent, wobei in jeder Headline ein Wort in einer großen kursiven Serifenschrift steht. Das Beispiel nutzt das fiktive Produkt Corvel, ein KI-Business-Team für Onlinehändler; du ersetzt die Inhalte und behältst die Komposition, die den Stil wiedererkennbar macht.

Was du bekommst

Fünf verknüpfte Seiten teilen sich eine fixierte Navigationsleiste und einen Footer:

• Produkt – eine Ankündigungs-Pill, eine zweizeilige Verlaufs-Headline, Download- und Browser-CTAs, eine Avatar-Vertrauensleiste und ein großes, per Code gezeichnetes App-Fenster mit KPI-Kacheln, Umsatzdiagramm und einer Notiz zur wichtigsten Erkenntnis. Darunter folgen ein Integrationsstreifen, drei Feature-Karten, ein Bento-Grid, ein Testimonial in Serifenschrift mit Ergebniszahlen und ein leuchtender Abschluss-CTA.
• Preise – ein Monats-/Jahresschalter, der alle Preise neu berechnet, drei Tarife, deren mittlerer durch einen Glow hervorgehoben wird, eine Vergleichstabelle und ein Abrechnungs-FAQ.
• Ressourcen – eine Hilfecenter-Suche, die beim Tippen filtert, sechs Kategoriekarten, beliebte Artikel, Tutorials nach Level und eine Support-Karte.
• Events – ein hervorgehobener Live-Workshop mit laufendem Countdown und Agenda, filterbare kommende Sessions, Aufzeichnungskarten und ein Newsletter-Formular.
• Changelog – eine Release-Zeitleiste, deren aktiver Knoten dem Scrollen folgt, ausführliche Release-Karten und ein Button zum Laden älterer Releases.

Das Paket enthält außerdem das Template, einen Styleguide, eine Seitenbibliothek, Icon-Regeln, einen Leitfaden zur Framework-Anpassung und einen lokalen Validator.

Mach sie zu deiner

Beginne mit dem Produktnamen, einer Kategorie in einem Satz und dem Hero-Satz und wähle dann das eine Wort, das zur Mint-Serifenschrift wird. Ergänze die Integrationen, die dein Produkt tatsächlich unterstützt, drei Features, eine Kundengeschichte mit glaubwürdigen Zahlen und deine Tarife. Gibt es noch keine Hilfeartikel, Events oder Release Notes, kann der Assistent klar als fiktiv gekennzeichnete Entwürfe zur Prüfung erstellen.

Sag dem Assistenten, welches Framework du nutzt, oder lass ihn dein Projekt lesen. Ohne Vorgabe baut er ein Projekt mit Next.js App Router und TypeScript und macht jede Seite zu einer echten Route und jeden wiederkehrenden Block zu einer Komponente.

Fotos zeigen ausschließlich Menschen: kleine runde Avatare und ein Porträt auf der Agenten-ID-Karte. Verwende eigene Teamfotos oder generiere ein einheitliches Set vor schlichtem dunklem Hintergrund mit weichem, warmem Licht.

Ergebnis prüfen

Öffne jede Seite in Desktop- und Smartphone-Breite. Wechsle den Abrechnungszeitraum, durchsuche das Hilfecenter, filtere die Events, melde dich für eine Session an, bestätige die Bento-Aktion und lade ältere Releases. Führe bei einem Einzeldatei-Build den mitgelieferten Validator aus, bei einem Framework-Build die projekteigenen Checks. Das Beispiel sendet keine Daten; binde echte Dienste nur dort an, wo deine Produktivwebsite sie braucht.