Index: AI research and knowledge workspace landing page template for Next.js.

$39one-time payment

Buy IndexLive demo

Checkout opens soon.

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

Live demo

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

Overview

A warm editorial launch page for research, knowledge and AI products. A wide source-to-synthesis scene, purposeful heading motion and a scroll-led product story turn a collection of ideas into a clear product narrative.

Made for: AI research and search products, Knowledge workspaces and browser extensions, Writing, reading and personal productivity tools
Highlights: Segmented heading accents, brief label decoding and responsive ambient fields
Three coordinated research examples with real source and citation dialogs
Scroll-led product story, keyboard example selection and complete brief exports
Three aligned plans, correct billing reviews and configurable destinations
The look: Warm paper, ink, stone and persimmon. Instrument Sans carries a consistent display and reading hierarchy. Segmented heading accents, briefly decoded labels and sparse animated fields express sources becoming understanding. Open prose alternates with functional product screens and a dark evidence chapter. One badge per section, a 64px navigation row and three aligned plans complete the page.

Sections

01
Navigation
Compact open navigation, useful anchors, a main example action and an Escape-aware mobile menu.
02
Hero
A wide headline and research scene with three selectable topics, measured connection paths, original source objects and cited findings.
03
Introduction
An open editorial statement with an assembled accent and a concise source trail.
04
Product story
Collect, Connect and Understand share a large sticky stage. Desktop scrolling and manual controls advance it; phones show the three chapters in normal reading order.
05
Evidence
A dark source-to-answer chapter with a working reference back to the corresponding passage.
06
Examples
Open collection rows with keyboard selection, coordinated cited previews, clipboard fallback and complete plain-text exports.
07
Pricing
Three aligned plans with an emphasized Curious tier, monthly/yearly billing, per-person pricing and correct local plan reviews.
08
FAQ
Native disclosures explaining the examples, exports and buyer integrations.
09
Closing and footer
A persimmon closing field with original sheet artwork, working destinations and a remembered motion control.

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

Make it yours

Start with site.config.ts for the brand, copy, plans and links. The complete fictional sources and their cited findings live in one separate data file.

Where to change each part of Index
To change	Edit
Brand, metadata, copy, FAQ, plans and destinations	site.config.ts
Source passages, topics, connections and cited findings	data/topics.ts
Palette, gutters, shared type and control sizes	styles/base.css
Fonts and page metadata	app/layout.tsx
Section order	app/page.tsx
Accent, decode, visibility and ambient motion	components/motion/ and styles/motion.css
Research scenes, source previews and exports	components/product/

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, prices, feature allowances and sample research. The source dialogs, selections, brief exports and pricing reviews work locally; connect your own AI, document processing, accounts and checkout separately.

Specifications

Framework: Next.js 15 (App Router), React 19
Language: TypeScript
Styling: CSS with design tokens and component styles
Fonts: Instrument Sans, Geist Mono, self-hosted with next/font
Dependencies: next, react, react-dom, lucide-react
Images: Original HTML/CSS/SVG mark, source objects, sheets, connection diagrams and ambient fields. Original fictional research passages. No stock images or reference-site assets.
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,200 lines
Last updated: Oct 9, 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 Index?

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

Can I get a refund?

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