Launchpad — Free SaaS / App Landing Page Template
Launchpad is built around a real product story instead of a generic hero: a "release cockpit" UI rendered in pure HTML/CSS, a working monthly/annual pricing toggle, and a mission-control palette of midnight ink, cool porcelain, and mission-teal. It is Bootstrap 5, vanilla JavaScript, and hand-drawn inline SVG icons throughout — no jQuery, no icon fonts, no build step to fight.
Features
- Product "cockpit" hero built in real DOM — KPI tiles, staged-rollout bars, spark line, and a floating status toast (no stock screenshot)
- Working monthly/annual pricing toggle in vanilla JS with a three-tier layout and a highlighted plan
- Six-card feature grid with bespoke inline SVG icons and a dual teal/amber accent rhythm
- Three-step "how it works" section with a code chip and rollout-stage illustration
- Ten-tile integrations grid plus an image-backed context panel
- Animated stat counters driven by IntersectionObserver (respect reduced motion)
- Accessible FAQ accordion (single-open, keyboard friendly, aria-expanded wired)
- Slide-in mobile navigation with scrim, focus-visible styles, and a skip-to-content link
- Scroll-reveal, sticky-on-scroll header, and an email-capture form with front-end validation
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1
- Responsive: Yes
- Style: Mission-control SaaS — midnight ink + cool porcelain with teal/amber signals
How to use it
Download the ZIP, unzip it, and open index.html — there is no build step and no dependencies to install. Replace the demo text and images with your own, point any forms at your backend or a form service, and deploy the folder to any static host. Colours, fonts, and spacing live in css/style.css; the interactions are in js/main.js. Bootstrap 5 is bundled locally, so it works offline and on strict-CSP hosts.
FAQ
Is Launchpad really free to use commercially?
Yes. Use it for personal and commercial projects. A credit link back to uiCookies is appreciated but not required.
Does it use jQuery or any icon font?
No. Every interaction is vanilla JavaScript in `js/main.js`, and every icon is hand-written inline SVG, so the template deploys cleanly on strict-CSP hosts.
How do I change the pricing or currency?
Each price sits in a `[data-price]` element with `data-monthly` and `data-annual` values. Edit those numbers (and the `$` currency span) in `index.html`; the toggle swaps them automatically.
Can I swap the images?
Yes. All images live in `img/` and are referenced by relative path. Replace them with your own product screenshots and team photos at similar aspect ratios.
