Vetra is a high-quality landing page template and portfolio-grade reference implementation for an AI marketing automation platform. It demonstrates how to present a software product through a clean, highly animated, and conversion-focused single-page website.
Built as a production-ready application, Vetra leverages the Next.js App Router, combining Server and Client Components to deliver a performant, visually engaging user experience without needing a backend database.
Vetra landing page preview — the first viewport establishes the AI marketing automation story and visual style.
What this project demonstrates
Vetra is a single-page product narrative. It shows how to sequence trust, capability, pricing, integration, language support, and final conversion sections without requiring a database or app backend.
Core Features & Sections
The application is composed of modular marketing sections, rendered sequentially:
- Hero section with a dashboard preview.
- "Trusted-by" companies and logos strip.
- Features grid detailing AI capabilities.
- Integration showcase using an orbiting circles effect.
- Transparent pricing cards with an animated monthly/annual billing toggle.
Vetra heavily emphasizes design and interaction to increase conversion:
- Framer Motion 11 powers scroll animations and entrance effects.
- Custom magicui-style components like
particles,ripple, andmagic-card. - Clean dark and light mode toggle using
next-themes. - Premium typography powered by the locally hosted variable font, Satoshi.
Designed for strict performance and maintainability:
- Content is fully data-driven via typed constants in
src/constants/. - Uses route groups like
(marketing)to cleanly separate the layout from future app routes. - Strictly typeset with TypeScript 5.
Technology Stack
The platform leverages a cutting-edge frontend ecosystem optimized for developer experience and UI polish.
Next.js 15 & React 19
Utilizing the latest App Router, Server Components, and the metadata API.
shadcn/ui & Radix
Accessible, headless primitives completely styled with Tailwind CSS 3.4.
Framer Motion & Flow
Advanced interactions, layout animations, and animated numeric price transitions.
React Hook Form & Zod
Strict schema validation and optimized state management for the conversion components.
Application Architecture
Constant-Driven Content All copy, pricing structures, features lists,
and navigation links live within the src/constants/ directory. This allows
the entire site to be easily re-themed and repurposed without touching the
UI component layer or hooking up a database.
Centralized Metadata A robust generateMetadata() helper in
src/utils/metadata.ts creates a single source of truth for SEO, OpenGraph
data, and dynamic icons (light/dark adaptative favicons).
MagicUI Components To build a modern aesthetic, custom animations like
orbiting-circles, ripple, and particles are isolated as reusable
client components inside the src/components/ui/ folder, interacting
seamlessly with shadcn/ui.
Folder Structure
Below is the project's atomic directory configuration:
Customization & Extensibility
A dashboard-style section gives the landing page a concrete product signal, showing the kind of analytics and campaign visibility the product promises.
Pricing Section
The pricing section uses an animated monthly / annual plan presentation, giving the single-page narrative a clear conversion point.
Remaining Screenshot Slots
| Path to add | Screenshot needed |
|---|---|
/public/images/projects/vetra/integrations.webp | Integration orbiting-circles section |
/public/images/projects/vetra/languages.webp | Language support section |
Live Demo
Experience the smooth animations and responsive layout firsthand. Visit Vetra Live
