# Linea, a free app landing page template

> Landing page for a mobile app or SaaS (demo: a live-captioning app for phone calls). One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/).

A one-page site for a free app that turns phone calls and the conversations around you into live captions. Warm paper and espresso bands with one green accent stack over each other as you scroll; spoken words cross from a waveform into readable caption bubbles, a phone builds its transcript feature by feature, and a row of places slides sideways along two curved voice lines.

- Page: https://8b.com/templates/linea/
- Live demo: https://8bsite.github.io/app-landing-page-template/
- Repository (GitHub template): https://github.com/8bsite/app-landing-page-template
- Download ZIP: https://github.com/8bsite/app-landing-page-template/archive/refs/heads/main.zip
- Size: 134 KB, 9 photos (Unsplash), fonts: Host Grotesk
- Motion: GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll

## Use it with an AI coding agent

Download the files into the project (Windows PowerShell: `curl.exe`):

```bash
curl -LO https://raw.githubusercontent.com/8bsite/app-landing-page-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/app-landing-page-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/app-landing-page-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/app-landing-page-template/main/CREDITS.md
```

Then:

```text
Read AGENTS.md, then edit index.html. Use this template as the base for a landing page for <your app or SaaS product: what it does, who it is for, pricing or free plan, where to sign up or download>. Keep the layout, the motion and the single-file format; replace the brand name, copy, photos, the phone screen, reviews, links and contacts, and recolour it through the CSS variables if needed.
```

Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/app-landing-page-template my-site`.

## Design

Linea is an app landing page template for a mobile app with a free plan, shown as a live-captioning app for phone calls. It fits a messaging or accessibility app, and any SaaS product whose features can be shown one by one on a phone screen.

- Palette: #faf5f0 (warm paper background), #eee5dc (deeper paper bands and review cards), #1b1411 (espresso text and dark bands), #1f3954 (navy hero and calls band), #33cc7a (green buttons, your captions, curved lines), #66574f (muted body text), #bacde0 (pale blue text on navy), #b8aba3 (muted text on espresso)
- Fonts: Host Grotesk (the only family: large, tightly tracked semibold headings and regular body text)

Each section is a sheet with large rounded top corners laid over the last, in paper, navy and espresso. Captions are chat bubbles with a tiny waveform: paper for the other voice, green for yours. The phone is built in HTML, not a screenshot, and buttons are green pills.

## Sections and motion

- **Navigation** (navigation): top bar: logo, section links, Get-the-app button; phone menu overlay
- **Every call, written as it’s spoken.** (hero): first screen: headline over a full-bleed photo, lead, proof line, button; caption chips ride curved lines across the photo. Motion: Smooth scrolling runs page-wide and headings slide up line by line. Leaving the hero, the photo zooms while copy and caption chips lift at different speeds.
- **Nothing lost between a voice and a word.** (voice-to-text): two-panel stage: speech on one side, readable captions on the other (demo: They speak / You read). Motion: Pinned, three spoken lines drawn as bars slide into the You read panel and become caption bubbles while the waveform swells.
- **Calls that feel easy again.** (calls): feature list beside a sticky phone whose screen builds one step per feature. Motion: Each feature brightens as it reaches mid-screen and the sticky phone adds that step's messages; on exit the phone shrinks and tilts.
- **Captions, set your way.** (caption-styles): a wall-sized sample sentence over a list of eight settings with drawn controls. Motion: The sample card grows out of the phone screen; then, tied to scroll, its sentence thickens and the card flips from light to dark.
- **Captions for the room, too.** (in-person): horizontal track of five places with photos and caption pairs, two curved lines run through all of them. Motion: Pinned, five places slide sideways as you scroll, two curved lines draw along, and each card's caption pair rises in.
- **Recommended by clinicians. Loved by the people who use it.** (testimonials): expert quote with portrait beside two columns of short reviews. Motion: Review columns rise at two different speeds, or cards slide in from alternate sides on phones, while the portrait zooms out.
- **Three steps, then just talk.** (how-it-works): three numbered step cards that stack on top of each other. Motion: The three step cards stick and stack as you scroll; each new card shrinks and dims the one beneath.
- **Questions, answered plainly.** (faq): questions and answers (native <details>)
- **Your next call can be the easy one.** (call-to-action): closing call to action over a photo that opens from a small window to the full band. Motion: The photo opens from a small window to the full band, and green bars over the heading clear word by word.
- **Talk to a person, any way you like.** (contact): support hours, a photo, three ways to reach the team and a contact form (placeholders)
- **Live captions for every call and conversation.** (footer): tagline, link columns, giant wordmark, copyright with the Design: 8B credit and a legal note. Motion: Tied to scroll, the giant Linea wordmark rises into place while the logo's two strokes draw themselves.

## Good for

- SaaS or mobile app landing page
- app with a free plan or a sign-up
- communication, messaging or accessibility product
- any product whose features can be shown on a phone screen one by one

## Questions

**Is the phone a screenshot?** No. It is built in HTML and CSS: caller, status, number, five message bubbles and a tab bar. Each message appears with its feature as you scroll, so you edit the text in place.

**Where do the download buttons lead?** Only within the page, to the closing call to action or the top; there are no store badges yet. The contact form sends nothing until connected to a form service such as Formspree or Netlify Forms.

## Before publishing

Replace: social preview image, favicon, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses).

## License

Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. The "Design: 8B" footer link is optional.