Virion is a production-ready template for fintech products, SaaS startups, payment platforms and B2B software teams that have to explain a product, list its integrations, publish the thinking behind it and sell a plan. Built on Next.js 16, React 19 and TypeScript, it ships 20 page templates covering 41 routes, a thirteen-article blog, a nine-entry integrations directory, plan pages and a working cart and checkout — no CMS or backend required.

It reuses its original hand-crafted stylesheet rather than a utility framework, so the design is pixel-faithful and there is no build-time CSS pipeline to learn. Brand colors, fonts, type scale and spacing are CSS custom properties in a single :root block, and every article, integration and plan lives in an MDX or JSON file — so you can launch a real product site in hours without touching the component code.

Live demo: https://virion-nexjs.vercel.app

Tech Stack

Next.js 16 — App Router, server components, all routes prerendered to static HTML
React 19 — latest features; interactivity isolated to one client component
TypeScript — strict mode, fully typed
MDX content — articles and integrations as .mdx files with YAML frontmatter, served by [slug] dynamic routes
Original hand-crafted CSS — no Tailwind, no rewritten stylesheet; tokens as CSS custom properties in one :root block
Self-hosted fonts — served locally, no third-party font CDN
No animation library — scroll reveals, marquees, tabs and accordions in one TypeScript file, no GSAP
Client-side storefront — cart and order state in localStorage, no database, no vendor SDK

Included Pages and Templates

Home — hero, product sections, marquees, pricing tabs, testimonials and FAQ
About — company story, team and milestones
Features — the capability set laid out section by section
Integrations — a directory plus nine MDX detail pages on a [slug] route
Blog — a tabbed directory plus thirteen full-length articles
Pricing — plan tabs with a real add-to-cart, plus /product/<handle> detail pages
Storefront — cart drawer, checkout and order confirmation
Contact — enquiry form and company details
Utility — Style Guide, Changelog, License, 401 (password), 404

20 page templates, 41 routes.

Easy Content Editing

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

Articles — src/content/blog/*.mdx. Frontmatter carries the title, date, category and imagery; the body holds the article.
Integrations — src/content/integrations/*.mdx, same pattern.
Adding a file adds a page — the listings and [slug] detail routes pick it up automatically via the loader in src/lib/content.ts.
Plans — src/content/products.json drives /product/<handle> and the cart.
Static pages — edit copy and images directly in src/app/<route>/page.tsx; each page mirrors the original template markup.
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 and footer — shared components edited once in src/components/layout/.

Performance and SEO

Static-rendered pages out of the box (App Router) — all 41 routes prerendered, including every article, integration and plan page
Lazy-loaded imagery throughout with responsive srcsets
Self-hosted fonts — no third-party CDN requests at runtime
Per-page titles and metadata via the Next.js Metadata API, with Open Graph and Twitter cards
Semantic HTML structure, a single H1 per page, a route-aware active navigation state, and clean, crawlable URLs
Keyboard-navigable tabs, menus and accordions, and every animation respects the reduced motion setting

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
20 page templates covering 41 routes
Content collections: 13 articles and 9 integrations as MDX, plus plans as JSON
A working cart and checkout flow, ready to point at your payment provider
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)

Virion - Next.js 16 Fintech & SaaS Startup Template