Website-Vorlage
SaaS Landing Template
SaaS landing page on Next.js, shadcn/ui and Tailwind v4, with pricing, feature grid and a dark theme out of the box.
Die Beschreibung dieser Vorlage ist noch nicht auf Deutsch verfügbar und wird daher auf Englisch angezeigt.
Landing Page · SaaS · Kostenlos
Seiten
Screenshots der Live-Demo, Seite für Seite. Scrollen Sie innerhalb einer Seite, um sie ganz zu sehen.
Design-Analyse
Eine KI-Auswertung des Designs dieser Vorlage: Farben, Typografie, Abstände, Abschnitte und markante Details. Ottermind startet damit, wenn Sie die Vorlage verwenden.
Diese Analyse ist noch nicht auf Deutsch verfügbar und wird daher auf Englisch angezeigt.
- Overall
SaaS landing page, modern and sleek, medium density, dark
- Palette
background #0a0a0a; surfaces [#171717, #016fee, #e5e5e5]; text #fafafa; muted text #a1a1a1; primary #016fee; accents [#016fee]
- Type
headings Geist, 500, sentence-case; body Geist, 18px; scale h1 60px / h2 24px / h3 20px
- Shape & spacing
button/card radius 8px / 14px, no borders, shadow rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px, section spacing 120px, content width 1152px
- Sections (top to bottom)
- Header — horizontal nav with logo, links, dropdown, CTA button, social icon; dark background
- Hero — centered headline, subheading, "See more" button; subtle blue radial glow behind text
- Partners — row of five brand logos on dark background
- Testimonials — six cards in two rows of three, each with star rating, quote, name, title, avatar; rounded corners, light shadow
- Stats — four metrics in a row: "50K+ Active Users", "99.9% Uptime", etc.; white text on dark
- Pricing — three plan cards (Hobby, Pro, Enterprise), Pro highlighted with border and "Most Popular" badge; pricing tiers with checkmarks and CTAs
- FAQ — accordion list with four questions, down arrows for toggling
- Footer — logo, tagline, quick links, social icons, copyright, hashtag
- Signature details
- Blue radial gradient glow behind hero text
- Rounded card shapes with soft shadows
- Consistent use of Geist font family across all text
- Subtle hover effects on buttons and cards
- Clean spacing and alignment using 1152px content width
- Accent color (#016fee) used for highlights and interactive elements
- Other pages
- /pricing: Pricing section with tiered plans and features
- /testimonials: Testimonial grid with user quotes and ratings
Details zur Vorlage
- Kategorie
- Landing Page, SaaS
- Autor
- gonzalochale
- Gelistet auf
- 21st.dev
- Preis
- Kostenlos
- Landing Page
- SaaS
Originaldesign von gonzalochale, gelistet auf 21st.dev. Ottermind kopiert nicht den Code der Vorlage, sondern erstellt aus dem Briefing eine neue Website.
Das Briefing, mit dem Ottermind startet
Es öffnet sich in Studio als Entwurf – ergänzen Sie Marke, Zielgruppe und Seiten, bevor Sie es senden.
Build a landing page website inspired by the "SaaS Landing Template" template. Reference brief: SaaS landing page on Next.js, shadcn/ui and Tailwind v4, with pricing, feature grid and a dark theme out of the box. Use original copy and imagery for my brand rather than the reference's placeholder content.
So verwenden Sie diese Vorlage
- 1
Klicken Sie auf „Diese Vorlage verwenden“, um sie mit ausgefülltem Briefing in Ottermind Studio zu öffnen.
- 2
Ergänzen Sie das Briefing um Marke, Zielgruppe, Seiten und Inhalte.
- 3
Ottermind erstellt eine neue Website, inspiriert von diesem Design – im Chat verfeinern Sie sie weiter.
