Gemento is a premium, production-ready template for SaaS companies, task and project management tools, workflow platforms, and digital products. Built on Next.js 16, React 19, and TypeScript, it ships with 16 page templates covering 27 prerendered routes, an MDX-powered blog and integrations directory, a three-tier pricing page with a full comparison table, 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 confident dark interface built around scroll-driven motion. Every article, integration, and listing order 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://gemento-nextjs.vercel.app

Tech Stack

Next.js 16 — App Router, server components, all 27 routes prerendered to static HTML
React 19 — latest features; interactivity isolated to one client component
TypeScript — strict mode, fully typed
MDX — blog posts and integration pages 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 and Gilroy served locally, no third-party font CDN
Zero backend lock-in — no CMS, no database, no third-party runtime requests

Included Pages and Templates

Home — a scroll-driven story: the animated hero, the app preview cards, a brand marquee, the feature breakdown, the integrations grid, testimonials, pricing, the FAQ accordion, and two featured articles
About — the mission statement, team profiles, and two scroll-linked horizontal galleries that advance as you scroll
Features — the feature breakdown with tabbed detail, continuous card marquees, and the FAQ
Pricing — three tiers with a full feature comparison table and the shared FAQ
Integrations — a filterable directory with five category tabs, plus 6 integration detail pages with a rich-text setup guide
Blog — a featured post above a six-card grid, plus 7 MDX articles with an author header, hero image, table of contents, pull quotes, numbered steps, checklists, and a copy-link control
Contact — enquiry form with enquiry types and office details
Utility — Style Guide, Changelog, License, Privacy Policy, Terms & Conditions, 401 (password), 404

16 page templates, 27 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 carries the title, date, read time, author with portrait and role, hero image, and table of contents. The body is written as the five blocks the design lays an article out in: prose, numbered steps, a figure, a pull quote, and a checklist. An ordered list is the numbered steps and a bullet list is the checklist — no special syntax to learn.
Integrations — src/content/integrations/*.mdx. Frontmatter carries the name, summary, and both icons (the detail page and the directory card use different ones); the body is ordinary Markdown.
Listing order — src/content/collections.json records the one thing a per-item file cannot state: which post is featured, the order of the blog grid, the two posts the home page pulls up, the three each post links on as related, and the integration directory's category tabs.
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, FAQ and CTA — shared components edited once in src/components/; the FAQ and the closing call to action appear on 24 pages and live in a single file each.

Performance and SEO

Static-rendered pages out of the box (App Router) — all 27 routes prerendered, including every MDX article and integration page
Lazy-loaded imagery throughout, AVIF artwork
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
Keyboard-navigable tabs and menus, 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
16 page templates covering 27 prerendered routes
MDX content collections: 7 blog articles and 6 integration pages, plus the listing order 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)

Gemento - Next.js 16 SaaS & Task Management Template