Earshot: AI receptionist landing page template for Next.js.

$39one-time payment

Buy Earshot Live demo

Or get all 48 templates for $149

Next.js 16
CSS
TypeScript
14 sections
Light
No API keys
Palette
Updated Oct 27, 2026

hairlineui.com/demo/earshotLive demo

The first screen of the Earshot landing page template

01Overview

At a glance

A complete landing page for Earshot, an AI receptionist that answers every call to a clinic, salon or service business, books into the calendar and texts the owner a recap. The page runs on a frame of rails, rules and cells, and every section turns a phone call into something you can watch: silk that carries the voice, tapes that play the call, a clock of the week and a switchboard of bookings.

Made for

AI receptionists, voice agents and call-answering products
Booking, scheduling and front-desk software for clinics, salons and service crews
Any SaaS that wants a precise, grid-built page with real motion graphics instead of stock art

Canvas silk ribbons that carry a call from the caller into the product
Three calls played as tapes: waveform, playhead, word-by-word transcript and actions
A week-of-calls clock swept by scroll, a switchboard wired through the grid lines
Glossy animated tokens in the headings, rolling prices, journal with drawn covers

02The look

Its own palette and type

The colours and type it ships with. Tap a colour to copy it.

AaInter TightIncluded with the template
The quick brown fox jumps over the lazy dog
0123456789
AaInterIncluded with the template
The quick brown fox jumps over the lazy dog
0123456789

Inter Tight headings with Inter for reading. A cool off-white page with ink type and one signal red for Earshot's voice. Two rails run down the page, rules with square nodes divide the sections, and content sits in hairline cells: no cards, no drop shadows. Glossy red tokens, lacquer buttons, pearl tiles, small lit scenes in every feature cell and pale pearl and blush silk give it its lit objects. Everything is drawn in code; the only images are two product screens.

03Sections

14 sections, in page order

From the first screen to the footer.

01
Hero
A two-line headline whose full stop is a ringing lamp, the trial and demo-line buttons, and the product screen rising into place, with pale silk wings falling around the headline and running behind it; every few seconds a pulse carries a call down each wing.
02
Navigation
A clear bar that turns solid with a hairline on scroll, and a phone menu that opens out of the bar and closes on Escape.
03
Proof
Three stats with lit tokens, then a rating cell beside two strips of customer wordmarks running in opposite directions.
04
Listen
Three calls played as tapes: the waveform drawn from the transcript, a playhead, the line being said filling in word by word, each action landing on the time axis and the outcome at the end. It plays by itself and moves on; pick a call to jump to it.
05
Features
Six cells, each a small lit scene in pearl and red lacquer: the answer button ringing then pressed, a new patient dropping into Thursday's diary, a question answered from your notes, the urgent hand-off to the person on call, recaps arriving on a lock screen and greetings around the voice.
06
After hours
A week of calls as a lit clock on a pearl plate, one ring per day and one slice per hour. It pins while you scroll: a lacquer hand sweeps the week, every voicemail slice lights up red and the counters and answered share move with it.
07
Setup
Three steps in cells whose scenes complete as you scroll: call forwarding switching on, twelve answers filling a ring and the calendar syncing.
08
Comparison
The one dark band: voicemail, an answering service and Earshot in the frame's cells, Earshot's column lit from above, with red silk glowing under the call to action.
09
Integrations
A switchboard: Earshot in the middle and sixteen tools around it. Each booking runs out along the grid lines to its tool, whose pearl tile turns red.
10
Voices
Four owners in cells, each quote over a voiceprint drawn from its own words.
11
Pricing
Three plans with a lacquer monthly/yearly switch, rolling prices and a meter of minutes per plan; buttons go to each plan's checkout link.
12
Journal, FAQ and closing
Three articles with drawn covers, questions beside a sticky head in the left third, and the demo line set huge with the hero's silk returning.
13
Footer
Link columns in cells, then the wordmark across the page with its lit token.
14
Pages
A journal index, three articles with drawn covers, a contact page with a working form, privacy and terms placeholders and a custom 404.

04Make it yours

Where everything lives

Every heading, paragraph, plan and destination lives in site.config.ts, and the calls, the week and the articles are plain data files. Drop a token into any title with {wave}, {ring}, {phone}, {moon}, {clock}, {plug} or {check}.

Where to change each part of Earshot
To change	Edit
Brand, copy, stats, features, steps, comparison, integrations, plans, FAQ and links	site.config.ts
The calls the hero and Listen play	data/calls.ts
The week on the After hours clock	data/week.ts
Journal articles	data/articles.ts
Sign-up, demo line, booking and contact endpoint	site.config.ts → links
Palette, type and the frame	styles/base.css, app/layout.tsx
Product screens	public/images/
Section order	app/page.tsx

Run it

$ npm install$ npm run dev

Node.js 20.9 or newer. No environment variables.

Before you go live

Replace the fictional company, customers, calls and figures. Set links.signup, links.demoLine, links.booking and links.contactEndpoint (or keep the email fallback), each plan's checkout links and site.url in site.config.ts, and swap in screenshots of your own product.

05Specifications

What’s under the hood

sections: 14
source files: 71
lines of code: ~5,200
dependencies: 3
API keys needed: 0

Stack

Framework: Next.js 16 (App Router), React 19
Language: TypeScript
Styling: CSS with design tokens and component styles
Dependencies: nextreactreact-dom

Design

Fonts: Inter Tight, Inter, self-hosted with next/font
Images: Two product screens shipped as WebP, about 240 KB together. The silk, tapes, clock, switchboard, tokens, covers, wordmarks and icons are all drawn in code.
Colour scheme: Light
Responsive: Desktop, tablet and phone

Quality

Accessibility: Skip link, visible focus, keyboard navigation, reduced motion
API keys and environment variables: None
Node.js: 20.9 or newer

Shipping

Deploys to: Vercel, Netlify, Cloudflare Pages or any Node host
Codebase: 71 source files, about 5,200 lines
Last updated: Oct 27, 2026

06License

One license, no tiers

The full text ships as LICENSE.md in the download and is on the license page.

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

07Questions

Before you buy

What do I get when I buy Earshot?

The complete Earshot project as a download: the Next.js app, its config file, a README with setup and customisation notes, and the license. It’s added to your account’s library the moment payment goes through.

Can I use Earshot 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 Earshot are free. When a new version ships, download it again from your library.

Can I get a refund?

Yes. If Earshot isn’t right for you, email support@hairlineui.com within 14 days and you get your money back. No reason needed.

Should I buy all-access instead?

If you’ll use more than two templates, yes. All-access is $149 for all 48 templates, including Earshot and every template added later. Three single templates would cost $117.

08All-access