Overview
Verve is a polished, production-ready marketing website built with Next.js 15, React 19, Tailwind CSS v4, and shadcn/ui. It serves as a beautiful, high-conversion front door for a product while also acting as a reusable template that can be customized quickly thanks to its constants-driven content, modular components, and fully-typed codebase.
Route Architecture
All public-facing pages live inside a single (marketing) route group
utilizing the Next.js App Router. This ensures shared layouts (like navbar and
footer) remain consistent without cluttering URLs.
Tech Stack
- Next.js 15.3 — App Router, server components, metadata API, and image optimization * React 19 — Latest concurrent features and hooks * TypeScript 5 — Strict typing across the entire codebase
- Tailwind CSS v4 — Utility-first styling natively utilizing
@tailwindcss/postcss* shadcn/ui & Radix UI — Unstyled, accessible UI primitives tailored for modern web apps * Next Themes — Native dark mode plumbing (site ships in dark mode by default) * clsx & tailwind-merge — Safe conditional className merging
- Framer Motion v12 — Section animations, staggered entrances, and hover layout effects * Number Flow (@number-flow/react) — Cinematic number transition capabilities * React Hook Form & Zod — Type-safe form validation pipeline * pnpm & ESLint 9 — Fast installs and strict linting environments
Feature Breakdown
Dynamic Homepage
Hero section, partner marquees, animated capabilities grid, number stats, and cinematic FAQ accordions.
Constants-Driven Data
All layout copy, plans, and links are extracted to src/constants/
enforcing separation of concerns from JSX.
Validating Forms
Robust react-hook-form coupled meticulously with Zod schemas for
instantaneous UX resolution.
Component Architecture
The presentation layer operates primarily across three architectural tiers:
components/ui/ (The Atoms) Low-level, reusable primitives orchestrated
via shadcn/ui. Every Radix node from accordions to textareas resides here
providing atomic structural blocks.
components/global/ (The Shell) App-wide structural scaffolding like
standard Container bounds, universally scaled Wrappers, SVG Icons, and
root layout contexts via Providers natively loading theme switches.
components/marketing/... (The Layouts) Sectional modules assembled for
explicit pages. For instance, creating a new /demo page only requires a
components/demo directory linking specifically crafted elements to its
page.tsx payload.
Project Anatomy
Application Routing
All public navigation routes reside seamlessly inside the explicit (marketing) group. Keeping the URI uncluttered entirely (e.g. /about instead of /marketing/about):
| Page Path | Purpose |
|---|---|
/ | The focal Hero hook, how-it-works progression, structured feature grid, dynamic animated testimonials and stats. |
/about | Architectural narrative depicting origin structure via our mission pillars. |
/pricing | Tiered plan cards sourced directly via @number-flow/react toggles resolving monthly/annual scaling. |
/integrations | Index overview detailing multi-brand capabilities. |
/blog | Grid articles rendered natively mapping out the recent technical explorations. |
/contact | Safely typed interactive communication payloads handled safely through instantaneous sonner toasts. |
Quick Start
Basic Commands
Standard dependencies use Node.js 20+ and heavily recommend the pnpm runtime:
bash pnpm install bash pnpm dev Spins the local server bound gracefully to
http://localhost:3000
bash pnpm build Outputs edge-enabled static payloads ready for
platform hosting frameworks.
Launch Your Project Fast
Immerse yourself within the live demo at verve.naseemkhan.dev today and witness exactly how quickly you can convert brilliant ideas directly into high-converting productions!
