Relay: Personal assistant and AI companion landing page template for Next.js.

$39one-time payment

Buy RelayLive demo

Checkout opens soon.

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

Live demo

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

Overview

A launch page for personal assistants, browser companions and everyday AI tools. A live example conversation leads into a continuous grid of illustrated features, a working workspace and useful product examples.

Made for: Personal AI assistants, Browser and desktop companions, Research, writing and everyday productivity tools
Highlights: Centered hero, floating navigation and interactive workspace
Three examples with selected context, pause, resume and reset
Saved example library, clipboard and real text exports
Illustrated feature grid, two appearances and typed config
The look: Cloud white, ink and cobalt. Continuous vertical rails meet viewport-wide section rules. Navigation stays open at the top and contracts on scroll. One DM Sans typeface carries the conversation hero, border-sharing feature cells and aligned pricing, FAQ and footer. Includes an alternate ink appearance.

Sections

01
Navigation
Open navigation that contracts into a compact floating bar on scroll, with active anchors, appearance control and a keyboard-operable mobile menu.
02
Hero
Centered headline above a readable conversation with three selectable examples and a coordinated workspace action.
03
Product details
Four joined visual cells, each showing a useful stage of the assistant experience.
04
Assistant workspace
Three prepared examples, selectable context, a finite replay with pause/resume/reset, and a useful document with real copy and text exports.
05
Possibilities
Three aligned example columns with original product studies, coordinated workspace actions and a persistent Saved filter.
06
Your context
Two joined columns explaining selected context, local examples and text exports.
07
Pricing
Two plans in a shared ledger, calculated annual savings, separate monthly/yearly destinations and accurate billing previews.
08
FAQ
Native disclosures explaining the preview and buyer integrations.
09
Closing and footer
A cobalt closing panel, working workspace action and useful footer links.

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

Start with site.config.ts for the brand, copy, context labels, plans, links and appearance. Prepared requests, result text and context-dependent behavior live in data/scenarios.ts.

Where to change each part of Relay
To change	Edit
Brand, metadata, copy, links, plans, FAQ and default appearance	site.config.ts
Five shared type roles, palettes and spacing	styles/base.css
Font and metadata rendering	app/layout.tsx
Section order	app/page.tsx
Requests, summaries, output and context behavior	data/scenarios.ts
Assistant state and product rendering	lib/useAssistant.ts and components/product/
Product screenshot replacement	site.config.ts → workspace.screenshot

Run it

$ npm install$ npm run dev

Node.js 20.9 or newer. No environment variables.

Before you go live

Set links.app, links.docs, links.email and each plan’s monthly/yearly destination. Replace the fictional brand, claims, prices and prepared scenarios. Saved example IDs stay in this browser; exports contain the displayed document. Connect your real AI application, accounts 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, self-hosted with next/font
Dependencies: next, react, react-dom, lucide-react
Images: Original SVG mark, HTML/CSS workspace, four feature illustrations and three product studies. No external photography or stock artwork. An optional product screenshot slot is included.
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: 40 source files, about 2,300 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 Relay?

The complete Relay 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 Relay 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.app, links.docs, links.email and each plan’s monthly/yearly destination. Replace the fictional brand, claims, prices and prepared scenarios. Saved example IDs stay in this browser; exports contain the displayed document. Connect your real AI application, accounts 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 Relay are free. When a new version ships, download it again from the link in your order email.

Can I get a refund?

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