Clavo Next.js 16 Creative & Design-Agency Template

Clavo — Next.js 16 Creative & Design-Agency Template

Clavo is a premium, production-ready template for creative studios, design agencies, portfolios, and digital brands. Built on Next.js 16, React 19, and TypeScript, it ships with 37 pre-built pages, an MDX-powered blog, works, and services system, product pages with a working cart, and a fully editable content layer — no CMS or backend required.

It's styled with a hand-crafted CSS design system (no utility-framework lock-in) and a self-contained interaction layer. Every blog post, project, and service is a Markdown/MDX file — so you can launch a real client site in hours without touching the component code.

Live demo: https://clavo-peach.vercel.app

Tech Stack

• Next.js 16 — App Router, server components, all 39 routes prerendered to static HTML
• React 19 — latest features; interactivity isolated to one client component
• TypeScript — strict mode, fully typed
• MDX — blog, works, and services via `next-mdx-remote` (frontmatter parsed with `gray-matter`), served by `[slug]` dynamic routes
• Hand-crafted CSS design system — colors, type scale, and spacing as CSS custom-property tokens in one `:root` block; re-theme everything in one place
• Self-hosted fonts — Inter Tight served locally, no third-party font CDN
• Zero backend lock-in — no CMS, no commerce backend; the cart persists in `localStorage`

Included Pages and Templates

• Home — hero, services overview, selected works, studio intro, testimonials, blog feed, FAQ, and contact CTA
• About — studio story, awards, team, and testimonials
• Service — services overview (animated impact counters, services list, industries grid) plus 5 service detail pages (web, brand, product, app, marketing design)
• Works — bespoke masonry portfolio listing plus 9 project case-study pages
• Pricing — plan comparison with a Monthly/Project toggle
• Blog — listing plus 6 MDX posts with a detail template
• Products — 2 product pages with add-to-cart
• Commerce — mini-cart drawer, Checkout, PayPal Checkout, Order Confirmation (UI demo, no real payment)
• Utility — Style Guide, License, Changelog, 401 (password), 404

Easy Content Editing

No CMS needed — content lives in editable files you can change in any text editor:

• Blog posts — `src/content/blog/*.mdx` (frontmatter + Markdown body). Add a file to publish a new post; the listing and detail page pick it up automatically.
• Works — `src/content/works/*.mdx`, same pattern (drives the `/work/<slug>` case studies).
• Services — `src/content/services/*.mdx`, same pattern.
• Theme — brand colors, fonts, type scale, and spacing are CSS custom properties at the top of `public/assets/css/styles.css` — change them once to re-skin the whole site.
• Header, footer & cart — shared components edited once in `src/components/layout/`.

Performance and SEO

• Static-rendered pages out of the box (App Router) — all 39 routes prerendered, including every MDX post, project, and service
• Responsive imagery via native `srcset`
• Self-hosted fonts — no third-party CDN requests at runtime
• Per-page titles and metadata via the Next.js Metadata API (`generateMetadata` on dynamic routes)
• Semantic HTML structure and clean, crawlable URLs

Deployment

One-click deploy to Vercel — build settings are auto-detected. Also runs on Netlify, AWS Amplify, Cloudflare Pages, or any Node 20+ host.

What You Get

• Full Next.js 16 + TypeScript source code
• 37 pre-built pages covering every template section
• MDX content collections: 6 blog posts, 9 projects, 5 services, plus 2 product pages
• Self-contained HTML documentation
• Comprehensive README with setup and editing guide
• Friendly buyer support

Requirements

• Node.js 20 or higher
• Basic familiarity with the command line
• A text editor (VS Code recommended)