AI Tool Homepage Template

A dark Bootstrap 6 homepage template for a fictional AI writing tool, Wordloom, with an interactive tone-rewrite demo in the hero, use-case tabs, pricing with a yearly switch and a signup form with a password strength meter.

How it works

The page lives in .wl-page, which pins data-bs-theme="dark" and re-maps the Bootstrap 6 primary role to the brand lime. Every btn-solid theme-primary, badge, switch and check follow it.

Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end wl-panel"> for mobile. "Product" opens a .menu with menu-item-icon and menu-item-description. The script syncs aria-expanded on .wl-toggler and closes the drawer after an in-page link.
Hero: a large headline, CTAs and .wl-editor, The tone buttons are Bootstrap 6 chip elements with aria-pressed. On click, the script swaps [data-wl-output] with the matching entry from WL_REWRITES and updates [data-wl-meta].
Logos and features: a wordmark strip and a grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 of numbered feature tiles separated by 1px gaps.
Use cases: nav nav-tabs with data-bs-toggle="tab" switches four .tab-pane panels.
Pricing: a Bootstrap 6 .switch (#wl-yearly). On change the script reads data-wl-monthly or data-wl-yearly from each .wl-amount and announces the change in a polite live region.
Reviews and FAQ: stat columns, three quotes with Unsplash portraits and a flush accordion of <details name="wl-faq">.
Signup: <form data-bs-validate novalidate> with an email field, a password with the BS6 Strength meter (data-bs-strength) and a terms check. Invalid fields get .is-invalid. Valid submits show a spinner, then .wl-toast.

Customization

Change --wl-lime, --wl-bg and --wl-surface on .wl-page in style.css to rebrand, and keep the --bs-primary-* overrides beside them in sync.
Edit WL_REWRITES in script.js to change the demo texts, or replace the setTimeout in the chip handler with a fetch() to your AI endpoint.
Set prices with data-wl-monthly / data-wl-yearly on each .wl-amount.
Remove .wl-plan-pop from the Pro card to make all plans look equal.
Replace the setTimeout in the signup handler with fetch() to your registration endpoint.
Swap the .wl-logos wordmarks for real customer logos as SVG or images.
The portraits come from Unsplash; replace them with photos of your own customers.

Accessibility

A skip link jumps to #wl-main. Tone chips sit in a labelled role="group" and expose aria-pressed, and the rewrite area is an aria-live region. Tabs use role="tab" with aria-selected. Price changes are announced, and the toast uses role="status". Focus outlines are visible in lime, and transitions are disabled under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). For Bootstrap 5 developers: btn-solid theme-primary replaces the old per-color button classes, Dropdown becomes Menu (data-bs-toggle="menu"), Offcanvas becomes a Drawer inside the navbar, and form-switch becomes .switch with the native switch attribute. Chips and the Strength meter are new components, the accordion is native <details>, and validation uses data-bs-validate. The script imports Drawer and Toast from the bundle as an ES module.