Notch: Motion SaaS landing page template for Next.js.

$39one-time payment

Buy NotchLive demo

Checkout opens soon.

Next.js 15
CSS
TypeScript
9 sections
Light
No API keys
Updated Oct 10, 2026

Live demo

The Notch landing page template on desktop, from the hero to the footer

Overview

A complete landing page for B2B software, written for a time, capacity and invoicing product. A cobalt light curtain, crisp Geist type and considered motion in every section, with product screens as fast-loading images you swap for your own.

Made for: SaaS and B2B software launches, Time tracking, operations and finance tools, Agency, studio and professional-services products
Highlights: Fluted light-curtain hero with pointer light, word-by-word headline and a scroll-straightening product shot
Four-card bento, auto-advancing workflow over photography and a five-screen feature deck
Odometer stats, a sliding billing toggle with correct yearly totals and a self-fitting wordmark footer
Product visuals ship as images, not coded mockups; journal, legal pages and 404 included
The look: Geist with tight display tracking, white and ink with a single cobalt accent, and a light curtain of fluted blue bars. A centered hero over a tilted product shot, a logo strip, a four-card bento, a grey workflow band, a feature deck, a dark customer band, a dark-plus-panel pricing block, journal cards, a closing panel and a giant wordmark.

Sections

01
Hero
The curtain opens on load as bars rise from the edges; the tally badge draws itself, headline words rise in, and the product shot settles flat with scroll. Phones get a dedicated product image.
02
Logo strip
A slow marquee of fictional customer marks that pauses on hover and with the footer's motion control.
03
Bento
Four product moments slide in from alternating sides, with their screens rising a beat later.
04
Workflow
Three steps advance on a progress line while in view, cross-fading photographs and floating product cards. Keyboard-accessible tabs.
05
Feature deck
Five pills drop the front screen away and bring the chosen one forward over quiet tinted sheets, with a caption that morphs.
06
Customers
A dark band of three stories with odometer stats, portraits and a rating row.
07
Pricing
Monthly and yearly billing with a sliding thumb, rolling prices, exact yearly totals and savings, and configurable checkout links.
08
Journal, closing and footer
Two article cards, a closing panel with the curtain rising behind it, and a wordmark that fits its container for any brand name.
09
Pages
A journal index, three articles, privacy and terms placeholders and a custom 404.

Remove a section by deleting its line in app/page.tsx, or move the line to reorder.

Make it yours

Start in site.config.ts: brand, links, every heading, plans, stories and the footer. Articles and policy placeholders live in data/.

Where to change each part of Notch
To change	Edit
Brand, links, copy, plans and stories	site.config.ts
Journal articles	data/articles.ts
Customer logos and brand mark	components/ui/Logos.tsx and components/ui/Brand.tsx
Palette, type scale and buttons	styles/base.css
Section order	app/page.tsx
Product screens and photographs	public/images/ and ASSETS.md

Run it

$ npm install$ npm run dev

Node.js 20.9 or newer. No environment variables.

Before you go live

Replace the fictional brand, customers, stories and numbers, swap the product screens for your own, set the sign-up, sign-in, sales and checkout links, and replace the privacy and terms placeholders.

Specifications

Framework: Next.js 15 (App Router), React 19
Language: TypeScript
Styling: CSS with design tokens and component styles
Fonts: Geist, Geist Mono, self-hosted with next/font
Dependencies: next, react, react-dom, lucide-react
Images: Fourteen product screens rendered for the template and nine generated photographs and portraits of fictional people, all optimized WebP. The brand mark, customer marks and icons are SVG.
API keys and environment variables: None
Node.js: 20.9 or newer
Colour scheme: Light
Responsive: Desktop, tablet and phone
Accessibility: Skip link, visible focus, keyboard navigation, reduced motion
Deploys to: Vercel, Netlify, Cloudflare Pages or any Node host
Codebase: 74 source files, about 3,000 lines
Last updated: Oct 10, 2026

License

One license, no tiers. The full text ships as LICENSE.md in the download.

You can

Use it for your own products
Use it for any number of client projects
Change the code and design however you like
Deploy the result commercially

You can’t

Resell or share the files as a template, theme or UI kit
Publish the source as a template in a public repository

Questions

What do I get when I buy Notch?

The complete Notch project as a download: the Next.js app, its config file, a README with setup and customisation notes, and the license. The download link arrives right after checkout.

Can I use Notch for client projects?

Yes. One purchase covers your own products and any number of client projects, and you can change the code however you like. What you can’t do is resell or share the template files themselves as a template or UI kit.

Do I need API keys, a database or a backend?

No. It runs with npm install and npm run dev and deploys to Vercel, Netlify or Cloudflare Pages without any environment variables.

What should I change before I launch?

Replace the fictional brand, customers, stories and numbers, swap the product screens for your own, set the sign-up, sign-in, sales and checkout links, and replace the privacy and terms placeholders.

Do I need to know Next.js?

Basic React helps, but most changes are text edits in site.config.ts. The README walks through colours, fonts and section order.

How do updates work?

Updates to Notch are free. When a new version ships, download it again from the link in your order email.

Can I get a refund?

Yes. If Notch isn’t right for you, reply to your receipt within 14 days and you get your money back.

Should I buy all-access instead?

If you’ll use more than two templates, yes. All-access is $99 for all 21 templates, including Notch and every template added later. Three single templates would cost $117.