SaaS Landing Page Template
A hard-edged Swiss landing page for a B2B software product, built around an interactive product mockup: switching feature tabs redraws the mini-UI inside the app window, so visitors drive the console instead of looking at a screenshot of it.
About This Template
A complete B2B software landing page that avoids the two things every SaaS template does wrong: a static screenshot standing in for the product, and an art direction assembled from purple gradients and rounded glass. The ground is a pale cool blue-white, the only chroma is a single cobalt, and the whole page is built on hairline rules and dense spec-style small type, so it reads as an operations tool rather than a launch announcement.
Read the full template overview
The signature is a product mockup you can actually drive. Three feature tabs each own a view of a dock scheduling console, and switching between them rebuilds the mini-UI inside the app window: a bar chart redraws from the baseline, utilisation meters wipe across, ledger rows stagger in, and the KPIs above them count to their figures.
It is a real ARIA tablist with arrow key, Home and End support, and without JavaScript the tab strip disappears and all three views stack into one readable document.
What's Included
- Complete deployable SaaS site: nav, product hero, logo proof row, feature console, rollout steps, metrics band, three-tier pricing, FAQ, closing CTA, footer
- Signature interactive product mockup: feature tabs rebuild the mini-UI inside the app window, with a bar chart redraw, wiping utilisation meters, staggered ledger rows, and counting KPIs
- Two designed app windows drawn entirely in CSS, a dock schedule board and the console, so the template ships with no screenshots and nothing to replace before launch
- Proper ARIA tablist: roving tabindex, arrow keys, Home and End, and a static stacked document when JavaScript is off
- The console window tweens to each panel's own height as you switch, so views never jolt and never leave dead space, and edited panels need no re-measuring
- Art-directed placeholder wordmarks, each with its own type treatment, instead of grey logo boxes
- Coherent fictional brand with copy, pricing, and figures written to read like a real operations product
- Native details and summary FAQ that needs no JavaScript at all
- Reskins from one token block: a ground, a near-black, and a single accent
- Lenis smooth scrolling wired in and fully optional
- Accessible: AA contrast on every cobalt surface, reduced motion gets a complete static page, and the whole page reads without JavaScript
Perfect For
- B2B software and SaaS product marketing sites
- Internal tools, dashboards, and operations products that need a public page
- Developer tools and API products where the interface is the pitch
- Pre-launch and waitlist pages that need a credible product mockup before the product ships
- Learning how to build an accessible tab interface that drives a data visualisation
How It Works
The tabbed console
One script initialises each section with a single setup and teardown path and one motion branch, skipping any section it cannot find so buyers can delete freely. The console pairs each tab with its panel by name rather than by index, so removing a pair cannot shift the rest out of step.
Switching tabs
Activating a tab swaps a single class, updates aria-selected and the roving tabindex, then builds a fresh timeline that grows the bars, wipes the meters, staggers the ledger rows, and counts the KPIs from zero. None of those carry a transform start state in CSS, so the animation is the only thing touching transform and nothing survives between switches; the masked hero lines, which do carry one, are animated so that a stale pixel offset cannot strand them. Every number ships its final value as text and is only ever counted up from zero, which means reduced motion, a failed CDN, and no JavaScript all show the correct figure.
The console height
The window sits at auto height between switches. Activating a tab reads the outgoing height, clears the inline value to measure the incoming panel's natural height, then tweens between the two and hands the box back to normal layout, so views never jolt, never leave dead space, and nothing has to be kept in sync on resize.
:root.
Try them in the preview above.
Questions about this template
Do I need screenshots of my product?
No, and that is the main reason to pick this one. Two app windows, a dock schedule board and the console, are drawn entirely in CSS, so the page ships with nothing to replace before launch. It works as a pre-launch or waitlist page for a product that does not exist yet.
What does the feature console actually do?
Switching a feature tab rebuilds the mini-UI inside the app window: the bar chart redraws, utilisation meters wipe, ledger rows stagger in and KPIs count up. Visitors drive the product rather than looking at a static screenshot of it, which is the pitch the section is making.
Are the tabs accessible to keyboard and screen-reader users?
Yes, properly. It is a real ARIA tablist with roving tabindex, arrow keys, Home and End. With JavaScript off it degrades to a stacked document showing every panel, so no feature is trapped behind a control that never initialises.
The pricing and figures are made up. Do I have to rewrite everything?
You rewrite the words, not the structure. The fictional brand exists so the page reads like a real operations product rather than lorem ipsum, which makes it much easier to judge whether your own copy fits. Three pricing tiers, the metrics band and the FAQ are all plain HTML.
Does the console jump around when panels are different lengths?
No. The window tweens to each panel's own height as you switch, so views never jolt and never leave dead space below. It measures at switch time, which means panels you edit or add need no re-measuring on your part.
