Tandem: Light-mode AI agent and workflow landing page template for Next.js.

$39one-time payment

Buy TandemLive demo

Checkout opens soon.

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

Live demo

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

Overview

An original, complete AI platform launch page with a warm product story and precise motion. Electric blue on white, a procedural point sculpture, six specialist agents, thirteen original product illustrations, and a scroll-driven wordmark make every section feel considered.

Made for: AI agent platforms and workflow products, Multi-agent workspaces and automation tools, Small-team SaaS products with human approval at their core
Highlights: Original cursor-responsive point sculpture with visibility-aware animation
Six agent cards, three workflow chapters and keyboard-accessible team tabs
Thirteen lightweight original product illustrations and an animated connection map
Rolling pricing, morphing labels, real sign-up destinations and reduced-motion support
The look: Mona Sans with expressive scale and variable-width transitions, Fragment Mono for small metadata. White and cool grey backgrounds throughout, electric blue actions, hairline frames and rounded controls. A split hero leads into varied editorial, carousel, workflow, integration and pricing compositions.

Sections

01
Navigation and hero
Responsive sticky navigation, a width-morphing headline, cursor-responsive point sculpture, three floating specialist cards and a prompt strip.
02
Manifesto
A centered positioning statement and three rolling product figures, without invented customer claims.
03
Workspace
Original workspace illustration that settles from a perspective tilt as it scrolls into view.
04
Agents
Six specialist cards in a responsive snap carousel with arrows, keyboard navigation, a rolling counter and a progress line.
05
Workflow
Three expanding steps with a morphing chapter label and layered product-image transitions.
06
Teams
Founder, marketing and operations tabs with a springing indicator and directional copy and image transitions.
07
Integrations
Six connected tools arranged around the Tandem mark, drawing paths and moving signal points.
08
Human control
Three editorial reasons for clear permissions, visible reasoning and human approval.
09
Pricing
Three plans, monthly/yearly billing, rolling prices, directional billing notes and configurable checkout links.
10
FAQ
Six questions beside a sticky introduction, with animated height and keyboard navigation.
11
Closing and footer
A second point sculpture, endpoint-ready email form, and a giant wordmark that comes together as you scroll.

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

Visible copy and production destinations live in site.config.ts. Each section and stylesheet is focused; the product images are easy to replace at documented proportions.

Where to change each part of Tandem
To change	Edit
Brand, copy, agents, plans, questions and links	site.config.ts
Palette and type scale	styles/base.css and styles/hero.css
Procedural point sculpture	components/motion/AgentSculpture.tsx
Product illustrations	public/images/
Email sign-up behavior	site.config.ts → signup
Section order and fonts	app/page.tsx and app/layout.tsx

Run it

$ npm install$ npm run dev

Node.js 20.9 or newer. No environment variables.

Before you go live

Replace the fictional product copy, prices and integration claims. Configure your email destination, checkout links and contact address. Product screens are illustrative; connect your real agent product separately.

Specifications

Framework: Next.js 15 (App Router), React 19
Language: TypeScript
Styling: Tailwind CSS v4 with design tokens and component styles
Fonts: Mona Sans, Fragment Mono, self-hosted with next/font
Dependencies: next, react, react-dom, lucide-react
Images: Thirteen original product illustrations, about 331 KB total. The point sculpture is procedural canvas; the mark and integration paths 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: 66 source files, about 5,700 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 Tandem?

The complete Tandem 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 Tandem 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 product copy, prices and integration claims. Configure your email destination, checkout links and contact address. Product screens are illustrative; connect your real agent product 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 Tandem are free. When a new version ships, download it again from the link in your order email.

Can I get a refund?

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