SaaS landing page template for Next.js (hero, features, pricing, CTA)
Most teams need a landing page before they need a product. A signup form, a clear pitch, a pricing tease, and a way to talk to humans is enough to validate interest. Reaching for a full SaaS boilerplate to ship that is overkill; reaching for a generic Next.js starter means rebuilding the conversion sections every time. A landing-page-shaped template sits between the two: production-quality marketing sections, no auth or billing baggage, and a clean upgrade path when the product actually exists.
Sections that match how SaaS landing pages actually convert
The homepage ships with the section set that converts on real SaaS sites: hero (headline, subhead, dual CTA, trust logos band), features grid (icon tiles with short descriptions), how-it-works process, integrations strip, testimonials, pricing teaser, FAQ, and a final CTA. The ordering matches the visitor journey, hook, explain, prove, price, answer, ask, not a generic landing-page template that drops blocks in arbitrary order.
Each section is a self-contained React component with its content pulled from `src/config/ui/<section>.ts`. Rearranging the page is a list reorder in `src/app/page.tsx`; removing a section is deleting one line. The structure is deliberately mechanical so non-designers can iterate without breaking the layout.
Config-first copy, no component surgery to rebrand
Every headline, subhead, button label, and FAQ entry lives in typed config files. Changing the hero headline is one string edit in `src/config/ui/hero.ts`; changing the entire feature grid is a typed array in `src/config/ui/features.ts`. TypeScript catches broken fields at build time, so a rebrand cannot silently leave a half-renamed section live.
This matters more than the section list because most teams iterate on copy more than on layout. A config-first surface keeps the iteration loop fast: edit the string, save, see the change. No grepping through 40 components to find where the headline was hardcoded.
export const heroConfig = {
eyebrow: "Next.js 16 starter",
title: "Ship a polished SaaS landing page this afternoon",
description:
"Hero, features, pricing, FAQ, and CTA wired in typed config. Rebrand without grepping.",
primaryCta: { label: "Get started", href: "/sign-up" },
secondaryCta: { label: "View pricing", href: "/pricing" },
stats: [
{ value: "Under 6k", caption: "LOC of app code" },
{ value: "Next.js 16", caption: "App Router + React 19" },
{ value: "Tailwind v4", caption: "oklch theme tokens" },
],
};SEO, OG, and structured data on day one
The landing page is wired into the same SEO surface the rest of the template ships: per-route metadata, Open Graph image generation via next/og, canonical URLs, sitemap entry, and JSON-LD nodes for Organization, WebSite, and BreadcrumbList. None of this is opt-in; it is the default so the page indexes correctly on first deploy.
FAQ blocks emit FAQPage JSON-LD automatically, which is the structured data Google rewards with rich results on `/pricing` and `/faq` pages. The feature grid does not emit Product schema because the page describes the company, not a specific product; if you sell a single product, swapping to Product schema is a config flag, not a rewrite.
When this is enough, and when to upgrade
The landing page template is enough when you need a marketing site, a pre-launch waitlist, a one-pager for a service business, or a content site for top-of-funnel SEO. Supabase Auth ships in SaaSForge Starter for a basic protected `/dashboard`, so the upgrade from 'just a landing page' to 'landing page plus authenticated demo' is already wired without adding a billing layer.
Outgrowing the template usually looks like: needing workspaces and roles (move to SaaSForge Core), needing a chat product with credits (move to SaaSForge AI), or needing CMS-driven multilingual content for a client (move to SaaSForge Agency). The design system carries across all four, so an upgrade is additive, not a rewrite of the landing surface you already shipped.