SaaS Landing Page Template

Quick Start

1. Unzip and open index.html in a browser, or serve the folder with any static server (npx serve .).
2. The pages are plain HTML files: index.html (the landing page), pricing.html (plans, calculator, comparison, billing questions), customers.html (a long-form customer story and short quotes) and start.html (sign-up with a live preview).
3. All pages share assets/style.css and assets/script.js. There is no build step.
4. Deploy the folder as it is to any static host.

Using It With Your Own Design

• Colour: pick one of the five presets (see Palettes) or repaint the tokens at the top of assets/style.css (--paper, --ink, --block, --block-2, their --on-* text colours, and --light). Keep body text on your block colours at 4.5:1; the measured pairs are listed in the :root comment.
• Type: Young Serif for every display line by default (each palette can set its own --font-display and --font-display-weight), Be Vietnam Pro for body and interface text, all self-hosted in assets/fonts/.
• Your product: each window is ordinary markup. Rewrite the rows, labels and figures for your own software; the totals are computed from data attributes on those rows (see below), so they stay right.
• Photographs: one per collage, plus four headshots and the customer story set. See Images.
• Another kind of SaaS: the layout suits scheduling and HR tools, payroll, booking software, field-service apps and CRMs. Replace the rota with a pipeline, a calendar or a job board in the same window chrome, keep the colour slab and the photograph, and rewrite the copy.

Pages and Configuration

Every feature looks for its own markup and does nothing when it is missing, so you can delete a section, or a page and its links, without touching the script.

Navigation

Desktop: a quiet top bar (wordmark, three links, one pill) that turns into a floating pill once the page scrolls. Mark the current page with aria-current="page" in the bar, the footer and the phone sheet. Phones: the bar keeps the wordmark, and a bottom pill opens a sheet of page names set in the display serif on the page's block colour (data-sheet-colour="block-2" on <body> for the second block colour, the first otherwise). The sheet moves focus in, keeps Tab inside, closes on Escape, the Close button or a tap outside, returns focus to the Menu button and pauses smooth scrolling while open. The pill tucks away while you scroll down and returns when you scroll up. Without JavaScript the footer page list is the navigation.

The hero rota ([data-rota])

• Each person is a .rota__row with data-name and data-rate (hourly rate).
• Each day is a .rota__cell with data-day (mon to sun); a shift is a <button class="shift"> inside it with data-start and data-end (24-hour, HH:MM). The visible label (7–3) is text you write.
• data-forecast on the window is the week's forecast takings; wage cost is hours times rate, and the percentage is against that forecast.
• A shift moves to another person in the same day column, by pointer or touch, or by keyboard: Enter or Space picks it up, the arrow keys choose a person, Enter drops and Escape cancels. A person already working that day is refused. Totals count to their new values and a live region announces them.
• The phone ([data-phone]) shows the request to whoever received the shift. Accept keeps it; Decline sends the shift back. Reset the rota puts everything back.
• The hint above the window ([data-rota-hint]) names a move that works with the shipped rows; change it if you change the rows.

Wage cost against forecast ([data-planner])

One .planner__bar per day with data-wage (that day's wage cost) and data-share (that day's share of the week's takings; the shares should add up to 1). data-low, data-high and data-max on [data-planner-bars] set the target band and the chart's top. The range input sets the forecast. The inline --h heights and labels in the markup are what a visitor without JavaScript sees.

Swap thread ([data-thread]) and timesheets ([data-timesheet])

The thread's messages are plain paragraphs; they play in one after another when the phone scrolls into view, and Approve or Decline replaces the buttons with a result line. Timesheet rows carry data-mins (the clocked length in minutes) for the approved total.

Pricing calculator ([data-calc])

All prices are data attributes on the calculator: data-venue-price, data-group-price, data-group-from (venues needed for the group price), data-included (people included per venue), data-extra-price (per extra person) and data-payroll-price (per venue). Change them there and in the plan cards' text.

Customers

[data-week] takes data-before and data-after (hours per day, Monday first) and data-max (the chart's top). The two captions are on [data-week-captions]. Short stories in [data-more] carry data-kind; the filter buttons' data-filter values match those, and a filter with no matches shows [data-more-empty].

Start (sign-up)

The form is a static front end and sends nothing. It collects a name, venue name, venue type, team size and work email; on submit the script checks the three required fields and shows a success panel. To make it live, remove the submit handler in initStart (marked in assets/script.js) and point the form's action at Formspree, Netlify Forms, your CRM or your own sign-up endpoint. The preview window is decoration that follows the form: venue type sets the opening hours (data-hours on each radio) and shift labels (PATTERNS in the script), and team size draws up to six rows.

Palettes

Five colour-and-type presets ship in assets/style.css. The default is in :root; the other four are :root[data-palette="..."] blocks. Each is a committed pair of flat block colours with its own paper, ink, highlight and display face, measured to the same contrast bar (the figures are in each block's comment).

To use one, set it on the <html> tag of every page: <html lang="en-GB" data-palette="teal">. Or, once you have chosen, copy that block's values into :root and delete the palette blocks. The display faces are self-hosted in assets/fonts/; a browser downloads only the face in use.

The tokens are semantic: --block and --block-2 are the two band colours, --on-block and --on-block-2 the text that reads on each (light on dark blocks, ink on a light one), --block-text the first block colour darkened where it is needed as text on paper, and --light the highlight (a lifted shift, the swap request, slabs). A block colour is never the page ground, and the two blocks are never text and ground for each other.

Images

The photographs are bundled as art-directed WebP derivatives in assets/img/, baked from Pexels originals (Pexels licence: free to use, no attribution required; credit is appreciated). assets/img-manifest.json lists every source URL with its crop, size and grade; to regenerate after changing it, run bun scripts/build-template-assets.ts saas-landing-template from the GSAP Vault repository, or replace files in assets/img/ directly at the same names and sizes.

The people photographed are not the named characters; the names, quotes and figures are fiction. Replace them with your own customers before you publish.

What is mocked

Everything a visitor can press works in the page, and nothing leaves it: the rota, swap request, approvals, calculator and sign-up are front-end demonstrations with no account, server or email behind them. The customer story, quotes and figures are fictional.

Accessibility

• Every interaction works by keyboard and touch as well as mouse: the rota (Enter, arrows, Escape), steppers, switches, filters and the form use native buttons and inputs with visible focus.
• Live regions announce rota totals, swap results, the forecast verdict, calculator totals and form errors.
• Reduced motion: no entrances or count-ups; every control still works and moves happen instantly.
• Without JavaScript, or with the CDN blocked, every page reads as a complete document with its static figures, and the footer carries the navigation.
• Text contrast is measured on every surface (see the :root comment).

Dependencies

• GSAP with ScrollTrigger (all pages), Draggable (Home) and Flip (Customers), loaded from jsDelivr. Built against GSAP 3.15.0; works with GSAP 3.12+.
• Lenis 1.3.17 for smooth scrolling, optional: delete the script tag and initLenis to drop it, or add ?smooth=off to a URL to compare.

Fonts

Young Serif, Be Vietnam Pro (400, 500, 600), and the palette faces Gloock, Rubik 600 and Epilogue 700, latin subsets, self-hosted as WOFF2 in assets/fonts/ under the SIL Open Font License (assets/fonts/OFL.txt). The display face and the regular body weight are preloaded on every page.

Teardown

All animation lives in one gsap.context (window.gsapContext). Calling window.gsapContext.revert() removes every tween, ScrollTrigger, Draggable and listener the script added, and destroys the Lenis instance it created.