SaaS-Landingpage
Eine Landingpage für Software hat eine Aufgabe, aus einem Besuch einen Test zu machen. Die Reihenfolge folgt den Fragen, die sich Besucher beim Scrollen stellen, was ist das, wer nutzt es, was kann es, was kostet es und kann ich es gefahrlos ausprobieren.
Die Reihenfolge
Von oben nach unten, so wie die Sections auf der fertigen Seite stehen.
Schritt 2 / 10 · Hero
Auftakt
Das Versprechen in einer Zeile und ein Screenshot des Produkts, damit schon der erste Screen zeigt, was man bekommt.
Der erste Bildschirm einer Seite in sechzehn Aufbauten, vom mittigen Statement bis zu Video, App, Reitern, Formular und Terminal.
Schritt 3 / 10 · Logo Clouds
Logo-Wolke
Bekannte Kunden direkt unter dem Hero beantworten die stille Frage, ob andere schon darauf vertrauen.
Kunden und Partner auf einen Blick, in acht Aufbauten von der ruhigen Reihe bis zum Laufband und dunklen Band.
Schritt 4 / 10 · Features
Merkmale
Drei bis sechs Features mit echten Ergebnissen machen das Versprechen überprüfbar.
Was ein Angebot kann, in fünfzehn Aufbauten: Raster, Karten, Zeilen, Reiter, vier Bento-Layouts, Schritte und ein Vorher und Nachher.
Schritt 5 / 10 · Product Tour
Produkttour
Ein geführter Blick ins laufende Produkt ersetzt für die meisten Besucher den Demo-Termin.
Ein geführter Gang durch ein Produkt, in sechs Aufbauten: Schritte mit wechselndem Bildschirm, Scroll-Erzählung, Hotspots auf einem Bildschirm, Karussell, Filmkapitel und eine Tour im Produkt mit Spotlicht.
Schritt 6 / 10 · Pricing
Preise
Klare Pläne mit einem hervorgehobenen Favoriten, erst nachdem der Nutzen gezeigt ist.
Pakete, Stufen, Rechner und Preislisten, formatiert in der Sprache des Besuchers.
Schritt 7 / 10 · Testimonials
Stimmen
Zitate mit Name und Rolle direkt nach dem Preis begegnen Zweifeln dort, wo sie entstehen.
Zitate, Bewertungen, Sterne, Videos und Beiträge der Menschen, die es nutzen.
Schritt 8 / 10 · FAQ
Fragen
Antworten zu Vertrag, Daten und Support nehmen die letzten Gründe zu warten.
Häufige Fragen als natives Akkordeon, Raster, Reiter und Suche, auf Wunsch mit FAQPage-Daten.
Schritt 9 / 10 · Kostenlos testen
Kostenlos testen
Die abschließende Einladung wiederholt das Angebot und sagt, was im Test enthalten ist.
Einen Test starten, ohne offene Fragen. Das Formular mit den folgenden Schritten, die Testtage auf einer Spur, ein Plan mit dem Datum der ersten Abbuchung, drei Wege zum Start und ein Fenster, das den Teamnamen beim Tippen übernimmt.
Alles auf einmal installieren
Ein Befehl legt alle Components dieser Sammlung in dein Projekt.
aiw add @ai-website/navbar @ai-website/hero @ai-website/logos @ai-website/features @ai-website/product-tour @ai-website/pricing @ai-website/testimonials @ai-website/faq @ai-website/free-trial @ai-website/footerPrompt für deinen KI-Assistenten
Gib Claude, Cursor, Copilot oder Codex die Reihenfolge mit, dann entsteht die Seite aus genau diesen Teilen.
Bau eine SaaS-Landingpage mit dem UI Kit. Nutze in dieser Reihenfolge Navigation, Auftakt, Logo-Wolke, Merkmale, Produkttour, Preise, Stimmen, Fragen, Kostenlos testen und Fußzeile. Schreib echte Texte für mein Angebot und prüf die Seite in Light und Dark.Weitere Sammlungen
- Lokales GeschäftCafé, Laden oder Handwerk um die Ecke
- ArztpraxisVertrauen, Sprechzeiten und der nächste freie Termin
- Online-ShopVom Regal bis zur Bestellung
- PortfolioErst die Arbeit, dann der Mensch dahinter
- Blog oder MagazinTitelseite, Lesen und Wiederkommen
- EventProgramm, Tickets und der Countdown
- App-DashboardDas Gerüst und die Screens darin
- KI-ProduktWas die KI tut, ehrlich gezeigt
- Creator-SeiteEine Person, ihr Werk und ihr Publikum