Electronics Store Homepage Template

A dark electronics store homepage built with Bootstrap 6 for a fictional retailer called Kilowatt. It has a bento deals hero, a filterable product grid with a cart drawer, a trade-in estimator, reviews and a newsletter signup.

How it works

Everything sits inside .kw-page, which carries data-bs-theme="dark" and maps the Bootstrap 6 primary role (--bs-primary-bg and related tokens) to an electric blue.

Promo bar and navbar: the yellow .kw-promo bar shows a flash-sale timer. It counts down to the next local midnight, so it never goes stale. The navbar lg:navbar-expand collapses into a <dialog class="drawer">. "Shop" opens a .menu, and search uses form-adorn with a form-ghost input.
Hero: .kw-bento is a CSS grid with three tiles. .kw-tile-main holds the headline product, .kw-tile-deal a deal of the day with a progress bar, and .kw-tile-watch a small promo. The .kw-cats links below jump to the grid and apply a filter.
Products: each .kw-card has a data-kw-cat value. Bootstrap 6 .chip buttons with data-kw-filter hide cards that don't match and announce the result count.
Cart: any button with data-kw-add, data-kw-name and data-kw-price adds a line to an in-memory cart. The #kw-cart Drawer lists the lines and subtotal, and Toast.getOrCreateInstance() confirms each addition.
Trade-in: a select.form-control, a btn-check radio group and the Bootstrap 6 Range component (.form-range wrapping .form-range-input) feed a live estimate in an <output>.
Reviews and signup: a rating summary with progress bars and three quote cards. The newsletter form uses data-bs-validate and a .switch, and a simulated submit shows the toast.

Customization

To rebrand, change --kw-blue and --kw-yellow on .kw-page in style.css. The --bs-primary-* overrides read from --kw-blue.
To change the trade-in values, edit the value of each <option> in [data-kw-device] (base credit in dollars) or the radio values in name="kw-cond" (condition multiplier).
To add a product, copy a .kw-card and set data-kw-cat to audio, computing, mobile or play, plus data-kw-name and data-kw-price on its add button.
To use your own cart, replace the cart Map in script.js with calls to your cart API.
To send signups somewhere, replace the setTimeout in the newsletter submit handler with fetch() to your endpoint.
The product photos come from Unsplash; replace them with your own.

Accessibility

A skip link jumps to #kw-main. Icon-only add buttons have an aria-label that names the product, and filter chips expose aria-pressed. The filter count, trade-in estimate and toast are announced through live regions. The script syncs aria-expanded on the navbar toggler, and focus outlines use the yellow accent. Motion is off under prefers-reduced-motion.

Bootstrap 6 notes

This page is built on Bootstrap 6.0.0-alpha.1, so alpha APIs can still change. btn-solid theme-primary replaces btn btn-primary. The navbar collapses into a Drawer instead of navbar-collapse, and the cart is a Drawer where Bootstrap 5 used Offcanvas. Menu replaces Dropdown, .chip and .form-range are new components, and form-control now styles the <select>. The script imports Drawer and Toast from the bundle as an ES module.