Plumber and Home Services Homepage Template

A bold, conversion-focused homepage for a plumbing and home services company, built with Bootstrap 6 for a fictional business called Rapidflow. It keeps the emergency number in sight, collects call-back requests in the hero and answers: do you cover my area, and what will it cost?

How it works

The page lives in .rf-page (data-bs-theme="light") with dark scopes on the navbar, hero and footer. The Bootstrap 6 primary role is remapped to safety orange with navy text through --bs-primary-bg and --bs-primary-contrast.

• Top bar and navbar: .rf-topbar shows a pulsing 24/7 status and the phone number. The navbar lg:navbar-expand collapses into <dialog class="drawer drawer-end"> below 1024px. "Services" opens a grouped .menu; "Emergency?" opens the #rf-emergency Dialog.
• Hero: a photo with a navy gradient, a large call button and three stats. The .rf-quote card holds a btn-check urgency group, a searchable Combobox (data-bs-search="true") and ZIP and phone fields in a <form data-bs-validate novalidate>.
• Services: .rf-card tiles plus a full-width .rf-card-wide row.
• Service areas: an inline SVG map whose .rf-zone shapes light up. The ZIP checker looks codes up in RF_ZONES and writes an alert theme-success, theme-info or theme-warning into a live region. Neighborhood .chip buttons fill in the ZIP.
• Pricing: a table-card with sm:table-stacked, so rows turn into labelled cards on narrow screens using data-cell. "Book" links preselect the Combobox option via data-rf-issue.
• Reviews and FAQ: a carousel and an exclusive <details name="rf-faq"> accordion.
• Submit: the script checks the Combobox's hidden issue input, shows a spinner, then a Toast. When "Now" is chosen it also opens the emergency Dialog with shut-off steps.

Customization

• Change --rf-orange and --rf-navy on .rf-page in style.css; update the --bs-primary-* overrides beside them so buttons follow.
• Edit RF_ZONES in script.js to list your ZIP codes, zone names and arrival times, and rename the data-rf-zone shapes in the SVG map to match.
• Edit RF_URGENCY to change the confirmation text for each urgency option.
• Add or remove rows in .rf-table, keeping a data-cell label on every cell.
• Replace the setTimeout in the quote form submit handler with fetch() to your CRM or dispatch endpoint.
• The photos come from Unsplash; replace them with pictures of your own team and vans.

Accessibility

A skip link jumps to #rf-main. The map is a single role="img" with a text label, ZIP results are announced through role="status", the urgency group has an accessible label, and invalid fields get visible messages and focus. Carousel buttons have hidden text labels, the Dialog has aria-labelledby, and animations stop under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Coming from Bootstrap 5: btn-solid theme-primary replaces btn-primary, the mobile menu is a Drawer instead of navbar-collapse, Dropdown is now Menu, Modal is now Dialog, alerts use alert theme-*, and responsive tables use sm:table-stacked. New components used: Combobox, Chips and Dialog. The script imports Drawer, Dialog and Toast as an ES module.