SaaS Landing Page Template 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. 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
One script initialises each section inside a single gsap.context with gsap.matchMedia, 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. Activating a tab swaps a single class, updates aria-selected and the roving tabindex, then builds a fresh timeline that grows the bars from scaleY 0, wipes the meters from scaleX 0, staggers the ledger rows, and counts the KPIs from zero. No transform start state is set in CSS for any of those, so the fromTo pairs are the only thing touching transform and nothing survives between switches; the masked hero lines, which do carry a CSS transform, tween yPercent with y pinned to 0 so the parsed 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 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.