Plantilla web

Vetra

Animated landing page for an AI marketing automation platform, built with Next.js, Tailwind CSS and Framer Motion.

La descripción de esta plantilla aún no está disponible en español, así que se muestra en inglés.

Landing Page · SaaS · Gratis

Páginas

Capturas de la demo, página a página. Desplázate dentro de cada página para verla entera.

/Vetra - AI-Powered Project Management & Team Collaboration
Plantilla web Vetra, página /, parte 1Plantilla web Vetra, página /, parte 2Plantilla web Vetra, página /, parte 3Plantilla web Vetra, página /, parte 4Plantilla web Vetra, página /, parte 5

Análisis del diseño

Una lectura por IA del diseño de esta plantilla: colores, tipografía, espaciado, secciones y detalles característicos. Ottermind parte de ella cuando usas la plantilla.

Este análisis aún no está disponible en español, así que se muestra en inglés.

Overall

SaaS landing page, futuristic, high-density, dark

Palette

background #09090b; surfaces [#2563eb, #fafafa, #3b82f6, #0ea5e9]; text #fafafa; muted text #a3a3a3; primary #3b82f6; accents [#2563eb, #0ea5e9]

Type

headings heading, 700, sentence-case; body heading, 18px; scale h1 72px / h2 48px / h3 20px

Shape & spacing

button radius 7.6px, card radius 24px, no borders, subtle drop shadows, section spacing 120px, content width 1152px

Sections (top to bottom)
  • Hero — full-width, centered headline with two CTA buttons, dark gradient background with faint circular overlay, floating dashboard mockup below
  • Trusted brands — logo row centered, followed by feature grid of 5 cards in 2 rows (3+2), each with icon, title, subtitle, and illustrative UI element
  • Dashboard preview — two data cards side-by-side (Campaign Insights, Audience Metrics), then Social Media Integration with central logo and radial social icons
  • Pricing — two-tier plan cards (Standard, Mastermind) with toggle for billing, followed by language support grid with flags and names
  • Footer — not visible in screenshots
Signature details
  • Floating dashboard UI mockup with macOS-style window controls
  • Animated radial pulse around central social integration icon
  • Subtle glow on interactive elements like buttons and hover states
  • Consistent use of purple-blue accent gradients in charts and highlights
  • Minimalist card design with rounded corners and soft inner shadows
  • Micro-interactions implied via hover states and animated transitions
Other pages
  • /pricing: pricing comparison table with tiered features
  • /features: detailed feature breakdown with illustrations
  • /blog: article list with thumbnails and meta-data
  • /contact: form with input fields and submission button

Detalles de la plantilla

Categoría
Landing Page, SaaS, AI
Autor
larsen66
Publicada en
21st.dev
Precio
Gratis
  • Landing Page
  • AI
  • SaaS

Diseño original de larsen66, publicado en 21st.dev. Ottermind no copia el código de la plantilla: crea una web nueva a partir del briefing.

El briefing del que parte Ottermind

Se abre en Studio como borrador: añade tu marca, tu público y tus páginas antes de enviarlo.

Build a landing page website inspired by the "Vetra" template. Reference brief: Animated landing page for an AI marketing automation platform, built with Next.js, Tailwind CSS and Framer Motion. Use original copy and imagery for my brand rather than the reference's placeholder content.

Cómo usar esta plantilla

  1. 1

    Haz clic en «Usar esta plantilla» para abrirla en Ottermind Studio con el briefing ya escrito.

  2. 2

    Añade al briefing tu marca, tu público, las páginas y el contenido.

  3. 3

    Ottermind crea una web nueva inspirada en este diseño; sigue ajustándola en el chat.