Wayline

Live preview ->

Wayline is a dark, cinematic theme for SaaS products. The first screen is built in three layers: a dusk valley behind the headline, a working product interface in the middle and autumn foliage in front, moving at different speeds as you scroll. The workflow interface is real HTML: visitors switch processes, open each step, zoom the canvas and run a five-step sample.

Below the hero come a partner band, a shared-workspace section, four use-case tabs that rebuild the workflow preview, three solution cards, six integrations, three plans with a monthly and yearly switch, six FAQs, the latest journal articles and releases, a contact invitation and a closing band.

Property	Value
Tier	Pro ($59)
Category	SaaS / Workspace
Fonts	Lora (headlines) and Inter (interface and body), bundled locally
Palette	Near-black (#050708), dark olive panels (#171816), muted peach (#dfb39b) and sage (#a4b19e)
Motion	GSAP hero parallax and content reveals, Lenis smooth scrolling on a mouse or trackpad, page fades
Styles	Tailwind CSS 4 for layout, plus src/styles/global.css and editorial.css for components
Content	Every string, price, workflow, article and release in src/config/site.ts
Languages	English by default; every route has a matching language route

Included routes

• / - layered hero, partners, why Wayline, use cases, solutions, integrations, pricing, FAQ, journal, changelog, contact invitation and closing band
• /journal/ and /journal/[slug]/ - the journal and its three articles
• /changelog/ and /changelog/[slug]/ - the release timeline and three release pages
• /contact/
• /privacy/, /terms/

The production build generates 12 static pages.

What makes Wayline different

• A product people can try - the workflow in the hero and in the use-case tabs is interactive HTML, with five steps you can open, zoom and run.
• A first screen in three layers - landscape, interface and foreground foliage move at different speeds, and the foliage never blocks a click.
• Journal and changelog in one file - articles and releases are entries in site.ts, and both feed the homepage.
• Ready for more languages - add a language by copying one template file and registering it.

Wayline-specific setup

Set the site address

Set metadata.siteUrl in src/config/site.ts to your full public address, for example https://example.com. Canonical URLs, social images and language links use it. While it is empty, those tags are left out.

Connect the forms

The signup dialog and the contact form run in an honest demo mode: they check what is typed and say that nothing was sent. To send real submissions, set an endpoint that accepts a POST with form data:

• labels.endpoint - the signup form
• contact.endpoint - the contact form

With an endpoint set, the forms show sending, success and error states. Update the form disclosure and the privacy notice for your provider.

Edit the homepage

All homepage blocks are in site.ts, in page order: hero, why, useCases, solutions, integrations, pricing, faq, journal, changelog, contact and closing. destinations sets where the “Live demo” and “Start for free” buttons go; leave them empty to open the built-in dialogs.

Edit the use cases and the workflow

Each entry in useCases.items drives one tab and its workflow preview: the trigger, validation, action, condition and completion steps, plus the points and fields shown beside it. Keep at least one use case, give each a unique id, and keep the five-step structure; the step names and descriptions are yours to change.

useCases: {
  items: [
    { id: "people", label: "People & HR", /* steps, points, fields */ },
    // ...
  ],
},

Edit pricing

pricing.plans holds each plan’s name, description, monthly and yearly price, features and an optional href for its button; without one, the button opens the signup dialog. Prices are monthly equivalents; the yearly price is billed annually.

Add an article or a release

• Add an article to journal.posts. Its slug creates /journal/<slug>/, dates use YYYY-MM-DD, and the body is a list of sections with a heading, paragraphs and optional points.
• Add a release to changelog.entries. Its slug creates /changelog/<slug>/, with the version, date, summary and a list of typed changes.

Newest dates appear first on the listings and the homepage.

Add a language

1. Copy src/i18n/locales/template.ts to a new file, for example fr.ts, and translate what you need.
2. Import it and register it in src/i18n/config.ts with its label, HTML language, Open Graph locale and direction.
3. Run npm run check, npm test, npm run test:i18n and npm run build.

Anything you leave out falls back to English. Lists such as navigation, use cases, pricing and articles replace the English list as a whole, so copy every item before translating. Set direction: "rtl" for right-to-left languages.

Change the palette

The Tailwind tokens at the top of src/styles/global.css (--color-card, --color-peach, --color-sage) set the panel and accent colours. The near-black background is set on body and .site-frame in the same file, and metadata.themeColor in site.ts sets the browser bar colour.

Tune the motion

The hero parallax, the content reveals, Lenis and their cleanup between pages are in src/scripts/motion.ts. Reduced-motion settings turn off smoothing and the decorative animation, also when they change during a visit.

The footer credit

footer.credit in site.ts holds the “Created by aerolaunch.app” line in the footer. Edit it, or remove it from src/components/Footer.astro.

Coding assistants

AGENTS.md describes the content model, the language contract, the interaction lifecycle and the checks to run, and CLAUDE.md points Claude Code to it.