SaaS Startup Homepage Template

A dark, complete SaaS startup homepage built with Bootstrap 6 for a fictional analytics product called Signalbase, with pricing, testimonials, an FAQ and a trial signup.

How it works

The whole page lives in .sb-page, which carries data-bs-theme="dark" and re-maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast and friends) to the brand teal so every btn-solid theme-primary and badge picks up the brand color.

• Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end">. Below 1024px the toggler opens the drawer; wider, the drawer turns into the inline link row. "Product" opens a .menu with menu-item-icon and menu-item-description. The script closes the drawer after an in-page link is chosen.
• Hero: headline with the gradient .sb-grad span, two calls to action, an avatar-stack for social proof and .sb-mock, a dashboard drawn with plain HTML and an inline SVG chart. "Watch 2-min demo" opens #sb-demo, a <dialog class="dialog dialog-lg"> with a poster placeholder.
• Product tour: nav nav-pills tabs (data-bs-toggle="tab") switch three .tab-pane panels with CSS-only visuals.
• Pricing: a btn-group of btn-check radio labels. On change the script reads data-sb-monthly or data-sb-yearly from each .sb-price-amount and announces the switch in a polite live region.
• Customers and FAQ: stat tiles, three quote cards with Unsplash portraits, and an exclusive accordion of <details name="sb-faq"> items.
• Signup: <form data-bs-validate novalidate> shows Bootstrap 6's CSS-only validation. On submit the script flags invalid fields with .is-invalid, otherwise shows a spinner, simulates the request and opens #sb-toast with Toast.getOrCreateInstance().

Customization

• Change --sb-teal and --sb-violet in .sb-page (style.css) to rebrand; update the --bs-primary-* overrides beside them so buttons and badges follow.
• Edit data-sb-monthly / data-sb-yearly on each .sb-price-amount to set your prices.
• Replace the setTimeout in the submit handler of script.js with fetch() to your signup endpoint.
• Swap the .sb-video poster in #sb-demo for a YouTube or Vimeo embed.
• Remove .sb-plan-featured from the Growth card to make all plans look equal.
• Delete <section> blocks such as .sb-tour (and their navbar links) for a shorter page.
• The portraits come from Unsplash; replace them with photos of your own customers.

Accessibility

A skip link jumps to #sb-main. The toggler has aria-controls and aria-label, tabs use role="tab" with aria-selected, and the dashboard mockup is one role="img" with a descriptive label. Price changes are announced through aria-live, the toast uses role="status", and focus is visible on every control. Motion is disabled under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). BS5 developers will notice: btn-solid theme-primary replaces the old per-color button classes, the navbar uses lg:navbar-expand with a Drawer instead of navbar-collapse, Dropdown is now Menu, Modal is now Dialog, the accordion is native <details>, and validation uses data-bs-validate instead of needs-validation. The script imports Drawer and Toast from the bundle as an ES module.