Visonaria - Next.js 16 Creative Agency & Digital Studio Template

Visonaria is a Next.js 16 template for design studios, branding agencies, digital product teams and marketing consultancies — anyone who is judged on their own website before a client reads a word of their work. Built on the App Router with React 19 and TypeScript in strict mode, it ships 15 page templates covering 24 fully static routes, with the case studies and articles driven by MDX files and every repeated list on a page by JSON. No CMS or backend required.

Whether you run a two-person brand studio, a product design consultancy, a marketing agency or an independent practice, Visonaria gives you every page the case needs — a work index with five full case studies, a six-article journal, an animated services list, a pricing page and a contact page — opening on a scroll-scrubbed hero that hands off through three full-screen stages. Content lives in files: add a case study and it appears on the work index, in the home page's scroll rail and at its own URL without touching a component.

Tech Stack

• Next.js 16 — App Router, every route prerendered to static HTML at build time

• React 19 — server components throughout, with one small client island for the interaction layer

• TypeScript — strict mode, npm run typecheck clean

• Hand-crafted CSS — one plain stylesheet driven by CSS custom properties, no utility framework and no build-time CSS pipeline

• Self-hosted webfonts — Poppins and Archivo Expanded as woff2, no third-party font requests at runtime

• MDX content layer — gray-matter frontmatter with a prose parser that renders into the design's own markup

• Zero animation libraries — no jQuery, no GSAP: the split text, scroll reveals, scroll-linked sections, counters and carousel are one TypeScript file

Included Pages and Templates

Core pages

• Home with a scroll-scrubbed hero that hands off through three full-screen stages, two project columns that travel in opposite directions, an animated services list, a stacked achievements panel and a tag marquee running both ways

• About the studio with count-up statistics, a testimonial row whose cards part around whichever one you point at, a values grid and a team carousel

• Contact with an enquiry form and the office details

Work

• Work index with 5 case study pages: year, services, timeline, two gallery photographs and a three-part write-up

Services

• Services page with a process breakdown, a stack of award cards that leave one at a time as you scroll, the animated services list and an unrotating partner logo grid

Journal

• Blog index and 6 full-length articles with author, published date, reading time and a full-width figure

Pricing

• Two-plan grid with per-plan feature lists

Utility pages

• Style guide, license, instructions, changelog, a 401 password-protected page and a 404 page

15 page templates. 24 static routes.

Easy Content Editing

Everything you change lives in src/content/. Edit a file, rebuild, done.

• src/content/blog/*.mdx — the 6 articles: author, published date, reading time, card and hero images, the related trio and the body

• src/content/works/*.mdx — the 5 case studies: year, services, timeline, tags, card and hero images, two gallery photographs and a three-region write-up

• src/content/site/services.json — the animated services list the home page and the services page share

• src/content/site/pricing.json — the 2 plans: price, period and feature list

• src/content/site/values.json, stats.json, testimonials.json — the about page

• src/content/site/awards.json, partners.json — the services page

• src/content/site/achievements.json — the home page's award tiles and figures

• src/content/site/changelog.json — the release list

Each file states its own order, so the sequence the design was built around lives with the content instead of in a separate index. Add a case study and it appears on the work index, in the home page's scroll rail and at its own route — with no component to touch.

Body copy is Markdown: section headings, paragraphs and a figure. A prose parser places each block inside the design's own markup, so the words stay editable and the layout stays exact. A case study's body is written as three regions separated by a rule, because the design puts a photograph between them.

Theming is one file. Every brand colour, font, spacing step and type size is a CSS custom property in the :root block at the top of public/assets/css/styles.css. Change a value there and it propagates across every page.

Performance and SEO

• Every route prerendered as static HTML, ready for a CDN

• Per-page title, description and Open Graph and Twitter card metadata

• Absolute share-image URLs so link previews resolve

• Self-hosted fonts with font-display: swap and zero third-party requests

• Lazy-loaded imagery with responsive srcset on every photograph

• Semantic markup with one H1 per page, real buttons, a skip link and landmarks

• Keyboard-reachable navigation panel, carousel and forms

• Full prefers-reduced-motion support, and readable with JavaScript off

Deployment

Deploys to Vercel, Netlify, Cloudflare Pages or any static host. npm run build prerenders every route; there is no server, no database and no API to configure.

What You Get

• The complete Next.js 16 project source

• 15 page templates covering 24 static routes

• 6 articles and 5 case studies as editable MDX

• Nine JSON files covering every repeated list in the design

• The original stylesheet and self-hosted webfonts

• Full HTML documentation

• Changelog and third-party license file

Requirements

• Node.js 20 or newer

• npm 10 or newer, or pnpm, yarn or bun