Footnote: AI writing tool landing page template for Next.js.

$39one-time payment

Buy FootnoteLive demo

Checkout opens soon.

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

Live demo

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

Overview

A dark, editorial landing page for AI writing and research products, built around the footnote: every section is a piece of evidence, from a before-and-after draft with numbered citations to a proof ledger.

Made for: AI writing tools, Content platforms, Research products
Highlights: Before and after draft with real footnote markers
Annotated method with margin notes
Grid frame with + marks only where lines meet
One config file and one colour palette
The look: Dark graphite, warm-white text and one blue accent. Headlines are set in a light serif with an italic accent phrase, the page sits inside two thin vertical rules, and small + marks appear only where lines really meet. There are no shadows: depth comes from hairlines and spacing.

Sections

01
Hero
Serif headline with an italic accent phrase over an animated dot field, with a row of customer names.
02
The difference
The same paragraph written twice: uncited claims underlined on one side, numbered footnotes on the other.
03
Method
An annotated draft. Each row is one sentence with a margin note explaining the move.
04
Engine
Three alternating sections with a source matrix, a sources list and a voice panel.
05
Proof
Three figures and a customer quote.
06
FAQ
Every answer written out as plain text, so there is nothing to click.
07
Closing sign-up
Email capture with a confirmation state.
08
Footer
Links, legal and the wordmark.

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.

Text morph · Sign-upText that changes the way it should: shared letters slide over, new ones rise out of a blur, the width eases.

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 Footnote
To change	Edit
All copy, links, numbers, FAQ	site.config.ts
Colours	app/globals.css (@theme)
Fonts	app/layout.tsx
Which sections appear, and in what order	app/page.tsx
The grid lines and + marks	components/ui/Grid.tsx
The three engine visuals	components/sections/Engine.tsx

Run it

$ npm install$ npm run dev

Node.js 18.18 or newer. No environment variables.

Before you go live

The sign-up form in components/sections/FinalCta.tsx only shows a confirmation message, so connect its onSubmit to your own sign-up endpoint or email provider. The logos in the hero are text placeholders: swap them for your customers’ marks.

Specifications

Framework: Next.js 15 (App Router), React 19
Language: TypeScript
Styling: Tailwind CSS v4 with design tokens and component styles
Fonts: Newsreader, Instrument Sans, IBM Plex Mono, self-hosted with next/font
Dependencies: next, react, react-dom, lucide-react, clsx, tailwind-merge
Images: None. Every visual is built in code.
API keys and environment variables: None
Node.js: 18.18 or newer
Colour scheme: Dark
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: 19 source files, about 1,300 lines
Last updated: Oct 7, 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 Footnote?

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

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

Can I get a refund?

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