Tempo: Mobile app launch landing page template for Next.js.

$39one-time payment

Buy TempoLive demo

Checkout opens soon.

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

Live demo

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

Overview

A sophisticated light launch page for mobile apps and everyday consumer tools. A tactile focus dial, interactive phone screens and distinct editorial sections combine warm paper, pale sage and forest green.

Made for: Habit and routine apps, Journals and reading apps, Personal planners and consumer tools
Highlights: Real focus timer synchronized with the phone preview
Plan, Focus and Reflect screens with screenshot replacements
Saved reflections, routine controls and a sample-week explorer
Paper-and-sage design with configurable content and pricing
The look: Warm white and charcoal with sage surfaces and forest-green accents. DM Sans display and interface type, Lora italic accents and Geist Mono details. A coded device frame and physical-looking dial anchor the page; original CSS/SVG illustrations keep every visual editable.

Sections

01
Navigation
Anchor links, a mobile menu and a working app-preview action.
02
Hero
A compact editorial headline above a tactile dial and interactive phone. A real timer supports duration selection, pause, resume and reset.
03
Product chapters
Plan, Focus and Reflect tabs coordinate the copy and phone screens. Shared routine controls and saved reflections work across previews.
04
Daily timeline
A forest-green sequence of original morning, focus and reflection illustrations, vertical on phones.
05
Thoughtful details
An interactive sample-week explorer, synchronized pace controls and a quiet leaf composition.
06
Everyday stories
Three spacious editable story cards, explicitly labeled as illustrative.
07
Membership
Two plans, computed annual savings and accurate plan-review dialogs.
08
FAQ
Native disclosures explaining the preview, storage and buyer integrations.
09
Closing and footer
An original app icon in concentric rings, app-preview action and footer navigation.

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

Built with

Its motion comes from free components in our library, shipped in components/hairline/ so you can use them anywhere else on the page too.

Make it yours

Every word, link and price lives in site.config.ts. TypeScript flags a missing or misspelled field, so you can’t quietly break a section.

Where to change each part of Tempo
To change	Edit
Brand, primary copy, routines, stories, plans, FAQ and destinations	site.config.ts
Drop-in app screenshots	site.config.ts → screens
Palette and shared typography	styles/base.css
Fonts and metadata	app/layout.tsx
Section order	app/page.tsx
Section headlines and microcopy	components/sections/
App interface and local interactions	components/app/ and lib/

Run it

$ npm install$ npm run dev

Node.js 20.9 or newer. No environment variables.

Before you go live

Set links.ios, links.android, optional links.app, links.email and each plan’s href in site.config.ts. Replace the fictional brand, stories, membership features and sample data. The timer is local, routines are current-page state and reflections save only in this browser; connect your actual app and checkout separately.

Specifications

Framework: Next.js 15 (App Router), React 19
Language: TypeScript
Styling: Tailwind CSS v4 with design tokens and component styles
Fonts: DM Sans, Lora, Geist Mono, self-hosted with next/font
Dependencies: next, react, react-dom, lucide-react
Images: No external photography or image licenses. Device, dial, app screens and illustrations are original HTML/CSS/SVG. App screenshot slots are available.
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: 42 source files, about 4,900 lines
Last updated: Oct 8, 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 Tempo?

The complete Tempo 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 Tempo 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?

Set links.ios, links.android, optional links.app, links.email and each plan’s href in site.config.ts. Replace the fictional brand, stories, membership features and sample data. The timer is local, routines are current-page state and reflections save only in this browser; connect your actual app and checkout separately.

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 Tempo are free. When a new version ships, download it again from the link in your order email.

Can I get a refund?

Yes. If Tempo 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 17 templates, including Tempo and every template added later. Three single templates would cost $117.