Modèle de site web
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.
La description de ce modèle n’est pas encore disponible en français ; elle s’affiche en anglais.
Landing Page · SaaS · Gratuit
Pages
Captures de la démo, page par page. Faites défiler une page pour la voir en entier.
Analyse du design
Une lecture par IA du design de ce modèle : couleurs, typographie, espacements, sections et détails marquants. Ottermind en part quand vous utilisez le modèle.
Cette analyse n’est pas encore disponible en français ; elle s’affiche en anglais.
- 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
Détails du modèle
- Catégorie
- Landing Page, SaaS
- Auteur
- gonzalochale
- Publié sur
- 21st.dev
- Prix
- Gratuit
- Landing Page
- SaaS
Design original de gonzalochale, publié sur 21st.dev. Ottermind ne copie pas le code du modèle : il crée un nouveau site à partir du brief.
Le brief dont part Ottermind
Il s’ouvre dans Studio comme brouillon — ajoutez votre marque, votre public et vos pages avant l’envoi.
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.
Comment utiliser ce modèle
- 1
Cliquez sur « Utiliser ce modèle » pour l’ouvrir dans Ottermind Studio avec son brief prérempli.
- 2
Ajoutez au brief votre marque, votre public, vos pages et votre contenu.
- 3
Ottermind crée un nouveau site inspiré de ce design — continuez à l’ajuster dans la conversation.
