Cleaning Service Homepage Template

A bright, friendly cleaning service homepage built with Bootstrap 6 for a fictional company called Tidywell. It includes a quick price check, packages, a room checklist, booking with a live estimate, reviews and an FAQ.

How it works

Everything sits inside .tdw-page, which pins data-bs-theme="light" and maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-control-checked-bg, --bs-focus-ring) to the brand mint so buttons, checks and ranges match.

• Navbar: a floating pill navbar lg:navbar-expand. Below 1024px the toggler opens <dialog class="drawer drawer-end">; the script syncs aria-expanded from the shown.bs.drawer / hidden.bs.drawer events. "Services" opens a .menu.
• Hero: headline with the .tdw-mark highlighter, the .tdw-quick price check (bedrooms and cleaning type) and an arch-shaped photo. The "Next available" card is computed from today in script.js. Submitting it prefills the booking form.
• Packages: a btn-group of btn-check radios (name="tdw-freq") switches between one-time, every 2 weeks and weekly. Each .tdw-price-amount reads its data-tdw-base price and applies the discount.
• Checklist: nav-pills tabs with three .tab-pane panels, each with a photo and a task list.
• How it works: a stepper md:stepper-horizontal inside .contains-inline.
• Booking: service radios, two Bootstrap 6 Range sliders, a Combobox for home type, a Datepicker limited to tomorrow through 60 days ahead, arrival windows and add-on .check boxes. .tdw-summary recalculates the total on every change; submit shows a spinner and then a Toast.
• Reviews and FAQ: quote cards, stat tiles and an exclusive <details name="tdw-faq"> accordion.

Customization

• Change --tdw-mint, --tdw-lemon and --tdw-ink on .tdw-page in style.css to rebrand; the --bs-primary-* overrides beside them carry the color into Bootstrap components.
• Edit TDW_PRICING at the top of script.js to set base prices, per-room surcharges and frequency discounts; keep data-tdw-base on the package cards in sync.
• Change TDW_BOOKING_DAYS to allow bookings further ahead.
• Add an add-on by copying a .check row and setting its data-tdw-extra price.
• Replace the setTimeout in the booking submit handler with fetch() to your booking endpoint.
• Remove .tdw-plan-featured from the Deep card to make all packages look equal.
• Delete sections such as #tdw-checklist or #tdw-how (and their navbar links).
• The photos come from Unsplash; replace them with photos of your own team and customers' homes.

Accessibility

A skip link jumps to #tdw-main. Tabs use role="tab" and aria-selected, radio groups have role="radiogroup" with a label, range values are mirrored in <output> elements, and the estimate and frequency status are announced through aria-live. Focus outlines are visible on all controls, and smooth scrolling and transitions are disabled under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1, so alpha APIs can still change. BS5 developers will notice btn-solid theme-primary replaces btn btn-primary, the navbar collapses into a Drawer instead of navbar-collapse, Dropdown is now Menu, the accordion is native <details>, form-control styles the <select>, and validation uses data-bs-validate. New components used here: Range, Combobox, Datepicker and Stepper. The script imports Drawer and Toast from the bundle as an ES module.