Webサイトテンプレート

Vetra

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

このテンプレートの説明はまだ日本語に対応していないため、英語で表示しています。

Landing Page · SaaS · 無料

ライブデモを開くソースリポジトリを見る

ページ

ライブデモのページごとのスクリーンショットです。枠内をスクロールするとページ全体を見られます。

Vetra Webサイトテンプレート、/ ページ、2 番目 — /Vetra - AI-Powered Project Management & Team Collaboration

デザイン解説

このテンプレートのデザインを AI が読み解いたものです：配色、書体、余白、セクション、特徴的なディテール。テンプレートを使うと Ottermind はここから始めます。

この解説はまだ日本語に対応していないため、英語で表示しています。

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

テンプレート情報

カテゴリ: Landing Page, SaaS, AI
作者: larsen66
掲載元: 21st.dev
価格: 無料

Landing Page
AI
SaaS

オリジナルデザイン：larsen66（21st.dev に掲載）。Ottermind はテンプレートのコードをコピーせず、ブリーフをもとに新しいサイトを作ります。

Ottermind が起点にするブリーフ

Studio で下書きとして開きます。送信前にブランド、対象者、ページを書き足してください。

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.