Lenkrio is a premium, production-ready template for link-management tools, SaaS startups, customer-support platforms, and digital products. Built on Next.js 16, React 19, and TypeScript, it ships with 18 page templates covering 30 prerendered routes, an MDX-powered blog and careers section, monthly/yearly pricing with a working cart and checkout, 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 built around scroll-driven motion. Every article, job post, and pricing plan lives in a Markdown/MDX or JSON file — so you can launch a real product site in hours without touching the component code.

Live demo: https://lenkrio-nextjs.vercel.app

Tech Stack

Next.js 16 — App Router, server components, all 30 routes prerendered to static HTML
React 19 — latest features; interactivity isolated to one client component
TypeScript — strict mode, fully typed
MDX — blog posts and job listings 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 and IBM Plex Mono 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 — a scroll-driven story: the animated hero with a character-by-character headline reveal, a brand marquee, the four-step link workflow with a rail that fills as you scroll, feature sections, pricing cards with hover artwork, the integration grid, the process walkthrough, and testimonials
About — company story, the scroll-linked history rail, the team collaboration cards that deal themselves in, and the team grid
Features — feature tab sets, the tool marquee, animated product illustrations, and the integration directory
Pricing — monthly and yearly billing tabs, a custom-plan call to action, and the FAQ accordion
Blog — listing plus 6 MDX articles with a date and author header, a hero image, and a rich-text body with inline figures
Careers — open-roles listing plus 6 MDX job posts with role, employment type, and posting date, a summary, and a full description
Product — 2 plan detail pages with duration pills that retype the price, a feature list, add-to-cart, and the shared FAQ
Commerce — cart modal, Checkout, PayPal Checkout, Order Confirmation (UI demo, no real payment)
Contact — contact form, map, and FAQ
Utility — Style Guide, License, Changelog, 401 (password), 404

18 page templates, 30 prerendered routes.

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 + a Markdown body). Add a file, list its slug in collections.json, and the listing card and the detail route both pick it up automatically.
Job listings — src/content/careers/*.mdx, same shape: frontmatter for the role, employment type, date, icon, and listing blurb; Markdown for the description.
Pricing plans — src/content/plans.json drives four surfaces from one entry: the home page cards, both /pricing billing tabs, the plan detail page, and the cart. Each surface has its own price slot, so monthly, yearly, and the home page can differ without duplicating the plan.
The FAQ — src/content/faqs.json is shared by the pricing page and both plan pages; edit it once and all three update.
Listing order and page copy — src/content/collections.json records the order each listing shows plus the banner and section copy around it.
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 — shared components edited once in src/components/layout/.

Performance and SEO

Static-rendered pages out of the box (App Router) — all 30 routes prerendered, including every MDX article and job post
Lazy-loaded imagery throughout
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), with Open Graph and Twitter cards
Semantic HTML structure, a route-aware active navigation state, and clean, crawlable URLs
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
18 page templates covering 30 prerendered routes
MDX content collections: 6 blog articles and 6 job listings, plus pricing plans and the FAQ as JSON
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)

Lenkrio - Next.js 16 Link Management & SaaS Startup Template