Modèle de site web

Vertex - AI Workflow Automation Landing Template

A production-grade Next.js 15 landing page for AI workflow automation products with 10 sections, a pricing comparison matrix, five pre-built pages, light and dark themes, and SEO-ready metadata.

La description de ce modèle n’est pas encore disponible en français ; elle s’affiche en anglais.

Landing Page · AI · Original $49

Ouvrir la démo

Pages

Captures de la démo, page par page. Faites défiler une page pour la voir en entier.

/Vertex
Modèle de site Vertex - AI Workflow Automation Landing Template, page /, partie 1Modèle de site Vertex - AI Workflow Automation Landing Template, page /, partie 2Modèle de site Vertex - AI Workflow Automation Landing Template, page /, partie 3Modèle de site Vertex - AI Workflow Automation Landing Template, page /, partie 4Modèle de site Vertex - AI Workflow Automation Landing Template, page /, partie 5Modèle de site Vertex - AI Workflow Automation Landing Template, page /, partie 6

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

landing page, clean and modern, low density, light

Palette

background #ffffff; surfaces [#000000,#e6e6e6,#d4d4d4,#171717]; text #171717; muted text #737373; primary #2b7fff; accents [#a4f4cf,#00bc7d,#ad46ff]

Type

headings Tiempos Headline, 600, sentence-case; body Geist, 18px; scale h1 60px / h2 36px / h3 18px

Shape & spacing

button radius 6px, card radius 12px, borders none, shadows 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 1164px

Sections (top to bottom)
  • Hero — full-width, centered headline with subheading, CTA buttons, logo row, navigation bar, tagline above headline
  • Feature showcase — stacked cards with UI mockups, labeled sections, floating elements, subtle depth via shadow
  • Workflow examples — three-column grid of feature illustrations with captions, each with a small UI snippet
  • Performance metrics — four stats in a two-by-two grid, upward trend line graphic on right side
  • Testimonials — eight-card grid with quotes, avatars, names, titles, company logos
  • Pricing — three-column comparison table with tiered plans, pricing, features, and CTAs, billing cycle selector
Signature details
  • Floating UI mockups with layered depth
  • Subtle diagonal pattern divider between sections
  • Gradient accent lines in feature cards
  • Minimalist avatar icons with soft shadows
  • Clean, high-contrast typography hierarchy
  • Hover states on interactive elements implied by design
Other pages
  • /pricing: pricing comparison matrix with tiered options
  • /features: detailed feature breakdown with UI examples
  • /testimonials: customer quotes with branding
  • /about: brand story and mission
  • /contact: form and support links

Détails du modèle

Catégorie
Landing Page, AI
Technologies
shadcn/ui, Next.js
Auteur
ruixen.ui
Publié sur
21st.dev
Prix
Original $49
  • Landing Page
  • shadcn/ui
  • AI
  • Next.js
  • Landing Page Banner
  • Startup Landing
  • Bento Feature
  • Workflow Automation

Design original de ruixen.ui, 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 "Vertex" template. Reference brief: A production-grade Next.js 15 landing page for AI workflow automation products with 10 sections, a pricing comparison matrix, five pre-built pages, light and dark themes, and SEO-ready metadata. Style and features to reflect: shadcn/ui, Next.js, Landing Page Banner, Startup Landing, Bento Feature, Workflow Automation. Use original copy and imagery for my brand rather than the reference's placeholder content.

Comment utiliser ce modèle

  1. 1

    Cliquez sur « Utiliser ce modèle » pour l’ouvrir dans Ottermind Studio avec son brief prérempli.

  2. 2

    Ajoutez au brief votre marque, votre public, vos pages et votre contenu.

  3. 3

    Ottermind crée un nouveau site inspiré de ce design — continuez à l’ajuster dans la conversation.