Introduction
What Velat is, who it's for, and why it's built the way it is.
What is Velat?
Velat is a production-ready landing page kit for AI startups, SaaS products, and developer tool companies. Built with Next.js 16, Tailwind CSS, and Turbopack.
It's not a theme. It's not a template pack. It's a complete foundation for launching an AI product website in hours instead of weeks — with the design decisions, conversion patterns, and technical architecture already solved.
Who this is for
Founders and indie hackers launching an AI product. You need a landing page that looks like it was designed by a senior team, without hiring one.
Agencies and freelancers building client sites. You need a reusable foundation that ships fast, looks premium, and doesn't need to be rebuilt for every new project.
Developers who can code but don't want to spend a week on design. You need a system that respects your time — clean code, no magic, easy to customize.
If any of those sound like you, Velat is built for you.
What makes it different
Conversion-first structure
Every section is arranged to move a visitor from curiosity to action. Hero, social proof, product grid, metrics, pricing — in that order, because that's the order that converts.
Most templates are decoration first. Velat is structure first.
Production-grade code
- ―Next.js 16 App Router with Server Components
- ―TypeScript throughout — no
any, no@ts-ignore - ―Tailwind CSS with a custom design system
- ―Turbopack for fast builds and hot reload
- ―Static generation for every page that can be static
You're not inheriting a rushed codebase. You're inheriting a foundation you can ship to production without shame.
Content-driven
You don't edit JSX to change text. All content lives in JSON and Markdown:
- ―
configuration.json— site name, navbar, footer, home page, contact - ―
about.json— about page - ―
products/index.json+*.md— product catalog - ―
blog/index.json+*.md— blog posts - ―
docs/index.json+*.md— documentation
Non-developers can update the site. Developers can extend it.
Dark mode that actually works
System preference detection, manual toggle, persistent across sessions, no flash of wrong theme on load.
The details that separate a template from a product.
What's included
Pages
- ―Home — hero, logo cloud, bento grid, proof metrics, pricing teaser
- ―About — manifesto, team grid, CTA
- ―Products — filterable catalog with search and pagination
- ―Product detail — features, pricing, related products
- ―Blog — filterable list with categories and pagination
- ―Blog post — table of contents, share button, related posts
- ―Contact — form with validation, success state, Formspree-ready
- ―Docs — multi-page documentation with sidebar navigation
28 pre-rendered pages total.
Design system
- ―Custom Tailwind configuration
- ―Editorial typography (Playfair Display + Inter)
- ―Glass pill navbar
- ―Editorial card components
- ―Ambient glow effects
- ―Grain texture overlay
- ―Dark and light mode variants
Developer experience
- ―Full TypeScript
- ―Path aliases (
@/components,@/lib,@/data) - ―Clean folder structure
- ―Documented in
/docs - ―Zero configuration to start
What you can do with it
Launch your AI product site — replace the copy, swap the images, deploy. Live in an afternoon.
Build client sites — one purchase, unlimited client projects. Agencies love this.
Learn Next.js 16 — the codebase is clean and readable. Use it as a reference for App Router, Server Components, and modern Next.js patterns.
Extend it — add Stripe, add auth, add a dashboard. The foundation is solid.
What you cannot do
- ―Resell or redistribute the kit itself
- ―Share the source files with people who haven't purchased
- ―Republish it as a theme, template, or starter kit
- ―Claim it as your own original work
You can use it for unlimited personal and client projects. Build as many sites as you want.
Tech stack
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript 5 |
| Styling | Tailwind CSS 3 |
| Bundler | Turbopack |
| Fonts | next/font (Playfair Display + Inter) |
| Content | Markdown + JSON |
| Forms | react-hook-form + zod |
| Icons | lucide-react |
| Animation | CSS transitions |
No unnecessary dependencies. Every package has a reason to be there.
Requirements
- ―Node.js 20.9 or later
- ―npm 10 or later
- ―Modern browser (Chrome, Safari, Firefox, Edge)
- ―Any code editor (VS Code recommended)
No database. No server. No backend.
Next steps
1. [Installation](/docs/installation) — get it running in 5 minutes
2. [Configuration](/docs/configuration) — change site name, navbar, footer, copy
3. [Content](/docs/content) — write blog posts and product pages
4. [Deployment](/docs/deployment) — publish to Vercel, Netlify, Cloudflare, or a VPS
5. [Troubleshooting](/docs/troubleshooting) — solutions to common problems
Support
If you get stuck:
1. Check the Troubleshooting page first
2. Read the full error message — Next.js errors point to the exact file and line
3. Search the error text on Google or Stack Overflow
4. Check the official Next.js docs at https://nextjs.org/docs
This kit is designed to be self-sufficient. Everything you need to ship is documented here.