Prompts für Landingpage-Design.

Wir gestalten eine Landingpage für [Tally, eine Rechnungs-App für Freelancer]. Die Besucher sind [Designer, Texter und Entwickler, die 2–10 Rechnungen im Monat schreiben]. Die eine Aktion, die wir wollen: [kostenlose Testphase starten]. Das zentrale Versprechen: [schneller bezahlt werden, ohne Kunden hinterherzulaufen]. Belege, die wir zeigen können: [12.400 Nutzer, Zahlungen kommen im Schnitt 9 Tage früher an].

Bevor du irgendetwas gestaltest, liste die Abschnitte auf, die diese Seite braucht, in der richtigen Reihenfolge, mit je einem Satz dazu, wovon der Abschnitt den Besucher überzeugen muss.

Gestalte den Hero-Bereich in drei Richtungen, jede als eigenständige HTML-Datei in 1440×900 mit Inline-CSS und Systemschriften:
A – warm und editorial, mit einer Serifen-Überschrift
B – kräftig und dunkel, mit einer einzigen leuchtenden Akzentfarbe und großen Zahlen
C – weich und freundlich, mit abgerundeten Karten und einem hellen Verlauf
Verwende in allen dreien dieselbe Überschrift, dieselbe Unterzeile und denselben Call-to-Action. Zeichne Produktvisuals mit HTML und CSS, keine externen Bilder.

Bau Richtung [B] zu einer kompletten Landingpage in einer HTML-Datei aus, 1440px breit. Abschnitte in dieser Reihenfolge: Hero, Logoleiste, drei zentrale Features mit je einem kleinen Produktvisual, So funktioniert’s in drei Schritten, zwei Kundenzitate mit Namen und Rolle, Preise, FAQ mit fünf Fragen und ein abschließender Call-to-Action. Lass den Hero-Bereich genau so, wie er ist.

Schreib den Feature-Bereich neu. Jedes Feature braucht eine konkrete Überschrift, die sagt, was der Nutzer davon hat, einen Satz mit einem bestimmten Detail oder einer Zahl und ein kleines, in HTML gezeichnetes UI-Visual, das das Feature im Einsatz zeigt. Keine Icons in farbigen Kreisen, keine Ein-Wort-Überschriften.

Gestalte den Preisbereich mit [Free, Pro für 12 €/Monat, Studio für 29 €/Monat]. Hebe [Pro] als empfohlenen Plan hervor. Liste höchstens fünf Features pro Plan auf und beginne mit dem, was sich zwischen den Plänen unterscheidet. Füge einen Umschalter für monatlich/jährlich hinzu, der die Ersparnis bei jährlicher Zahlung zeigt, und eine Zeile unter den Karten, die den häufigsten Einwand beantwortet: [Kann ich jederzeit kündigen?].

Erstelle eine 390px breite Version dieser Seite als separate Datei. Staple die Abschnitte in einer sinnvollen Reihenfolge, halte den Call-to-Action auf dem ersten Screen ohne Scrollen sichtbar, mach jedes Tap-Ziel mindestens 44px hoch und sag mir, welche Desktop-Elemente du weggelassen oder vereinfacht hast und warum.

Prüf diese Seite auf alles, was sie KI-generiert oder nach Vorlage aussehen lässt: alles zentriert, Verlaufs-Blobs, identische Kartenraster, vage Texte, zu viele Akzentfarben. Liste auf, was du findest, behebe dann die fünf auffälligsten Probleme und lass alles andere unverändert.

Bau landing.html als [Next.js]-Seite nach, mit [Tailwind CSS] und unseren bestehenden Komponenten in [src/components]. Übernimm Layout, Abstände und Schriftgrößen aus der HTML-Datei, mach die Seite responsiv zwischen 390px und 1440px und lass die Texte genau so, wie sie sind.