A warm, editorial furniture store homepage built with Bootstrap 6 for a fictional brand called Alder & Row. It covers collections, bestsellers, a showroom booking form and customer reviews.
How it works
The page lives in .ar-page with data-bs-theme="light". It maps the Bootstrap 6 primary role to olive (--ar-olive) and the accent role to clay (--ar-clay), and pairs the Gloock serif with Figtree.
- Navbar:
navbar lg:navbar-expandcollapses into a<dialog class="drawer drawer-start">. "Rooms" opens a.menuwith amenu-headerandmenu-divider. The script closes the drawer after an in-page link and syncsaria-expanded. - Hero: a serif headline sits next to
.ar-look, a "shop the look" photo. Each.ar-spothotspot is adata-bs-toggle="popover"button, so it opens a product popover without any init code. - Collections:
.ar-collageis a CSS grid with one tall tile and four smaller ones, with a gradient overlay behind the labels. - Bestsellers:
nav nav-underlinetabs switch two.tab-panepanels. The.ar-swatchesradio groups update the fabric name in[data-ar-color]. Each.ar-wishheart is adata-bs-toggle="button"toggle, and the script counts the active ones in the navbar badge[data-ar-saved]. - Showroom: a photo with a static SVG map, plus a booking form. It uses a Bootstrap 6 Combobox for the location, a Datepicker limited to the next 60 days (the script computes the limits from today) and
btn-checktime slots. On submit the script checks every field, marks invalid ones with.is-invalidand simulates the request. A success alert then confirms the booking. - Reviews, FAQ, CTA: a Bootstrap 6 scroll-snap carousel of quotes, an exclusive
<details name="ar-faq">accordion and a dark call-to-action band.
Customization
- To restyle the page, change
--ar-cream,--ar-oliveand--ar-clayon.ar-pageinstyle.css. The--bs-primary-*and--bs-accent-*overrides follow them. - To match your own photo, move the hotspots by editing
left/topon.ar-spot-lamp,.ar-spot-sofa,.ar-spot-tableand.ar-spot-pouf. Changedata-bs-contentfor the popover text. - To add fabric colors, create a new
.ar-sw-*class with a background color and add another radio inside.ar-swatches. - To change the booking window, edit the
+ 1and+ 60day offsets inscript.js. - To send real bookings, replace the
setTimeoutin the booking handler withfetch()to your endpoint. - For a shorter page, delete
.ar-faq-wrapor.ar-ribbon. - The photos come from Unsplash; replace them with your own product and room shots.
Accessibility
A skip link jumps to #ar-main. Hotspots and hearts have descriptive aria-labels, the hearts expose aria-pressed, and swatches are real radios with hidden labels. Tabs use role="tab", and the map is a role="img" with a label. The booking result is announced with role="status". Motion is disabled under prefers-reduced-motion.
Bootstrap 6 notes
Built on Bootstrap 6.0.0-alpha.1, so alpha APIs can still change. Drawer replaces Offcanvas in the navbar, Menu replaces Dropdown, and the FAQ uses native <details>. Combobox and Datepicker are new Bootstrap 6 components. Popovers auto-initialise, so there is no new Popover() loop. The Combobox keeps its selection after a booking.
