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)