Startup Coming Soon Homepage Template

A dark, high-contrast coming soon homepage for a startup in private beta, built with Bootstrap 6. The fictional product Hushbox collects sign-ups with a waitlist form, counts down to launch and lets invited users redeem a code.

How it works

The page lives in .hb-page, which pins data-bs-theme="dark" and maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast, --bs-focus-ring) to the brand lime.

• Navbar: navbar md:navbar-expand with a <dialog class="drawer drawer-start"> on phones. "Have an invite?" opens #hb-invite; the script closes the drawer first and keeps aria-expanded in sync.
• Hero: a centred headline, the .hb-waitlist form, an avatar-stack with the waitlist count and .hb-countdown. The launch date is computed relative to today (LAUNCH_IN_DAYS), written into [data-hb-launch-label] and ticks every second, so the page never shows a stale date.
• Waitlist forms: both forms use data-bs-validate and an .input-group. Because Bootstrap 6 does not show feedback inside input groups, the script toggles .is-invalid on .hb-input too. A valid submit simulates the request and shows .hb-joined: the queue position and a referral link with a copy button (it selects the text when the clipboard is blocked).
• Beta seats: a striped progress bar shows how many seats are claimed.
• Features: .hb-bento, a CSS grid of .hb-tile cards with one lime .hb-tile-accent stat.
• How it works: three .hb-steps cards and integration voting with Bootstrap 6 .chip buttons that toggle .active and aria-pressed.
• Testimonials, FAQ, CTA: .hb-quotes, an exclusive <details name="hb-faq"> accordion with accordion-gap, and a lime call-to-action band with a second waitlist form.
• Invite dialog: a <dialog class="dialog"> holding a Bootstrap 6 OtpInput (.otp with data-bs-otp, data-bs-type="alphanumeric"). On complete.bs.otpInput the code is accepted and [data-hb-redeem] is enabled.

Customization

• Change --hb-lime, --hb-lilac and --hb-bg on .hb-page in style.css to rebrand; update the --bs-primary-* overrides beside them.
• Set LAUNCH_IN_DAYS in script.js, or replace the computed launch date with your real launch timestamp.
• Edit waiting (starting count) in script.js and the width of .hb-bar in style.css to reflect real numbers.
• Replace the setTimeout in the waitlist submit handler with fetch() to your mailing list or database.
• Add or remove .hb-chip buttons to change the integrations visitors can vote for.
• Validate invite codes against your API inside the complete.bs.otpInput listener.
• The beta tester portraits come from Unsplash; replace them with your own images.

Use cases

• Startups in private beta: a waitlist form returns a queue position and a referral link
• Launch announcements: a countdown ticks toward the launch date
• Beta scarcity: a striped progress bar shows how many seats are claimed
• Invited users: an invite code dialog with one-time-code style input, plus vote chips for integrations

Accessibility

A skip link targets #hb-main. The countdown has role="timer" and a label, sign-up results and vote counts use role="status" or aria-live, chips expose aria-pressed, and the dialog is labelled by its title. Focus rings are visible in lime, and the pulse animation and smooth scrolling stop under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Instead of Bootstrap 5's Modal and Offcanvas it uses native <dialog> based Dialog and Drawer, btn-solid theme-primary replaces btn-primary, md:navbar-expand replaces navbar-expand-md, and badges use badge-outline theme-primary. OtpInput and Chips are new in Bootstrap 6.