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)