Beauty Salon Homepage Template

A dark, editorial Bootstrap 6 homepage template for a beauty salon called Maison Velour: arched photo hero, tabbed price list with a service basket, artists, review carousel, online booking with an inline calendar, and gift cards.

How it works

The page root .mv-page carries data-bs-theme="dark" and re-maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast, --bs-control-checked-bg) to blush pink.

Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end"> on mobile. The script syncs aria-expanded and closes it after a link.
Hero: a large serif headline, three arched .mv-arch photos and a rotating .mv-seal badge. [data-mv-open] shows today's status, worked out from the HOURS array in script.js.
Services & prices: nav nav-underline tabs switch four .tab-pane price lists. Each .mv-row has a round .mv-add toggle with aria-pressed, data-mv-name and data-mv-price. .mv-basket shows the count and total.
Reviews: a Bootstrap 6 carousel of quotes.
Booking: the chosen services appear as dismissible chip elements. The day comes from an inline Datepicker created in script with new Datepicker(calEl, { inline: true, ... }). It allows the next 90 days and disables closed weekdays via vcpOptions.disableWeekdays. A Combobox picks the artist and btn-check radios pick the time. Submit validates everything, simulates the request and shows #mv-toast.
Gift cards: a .form-range with a $ value bubble updates the .mv-card-preview. "Send as a gift" opens #mv-gift-dialog, a <dialog class="dialog"> with its own validated form.

Customization

Change --mv-blush, --mv-gold and --mv-bg on .mv-page in style.css, together with the --bs-primary-* overrides beside them.
Edit HOURS in script.js. Days set to null are shown as closed and disabled in the calendar.
Add services as new .mv-row items. Each .mv-add needs data-mv-name and data-mv-price. Remove aria-pressed="true" from "Cut & finish" if the basket should start empty.
Restyle the calendar with the --bs-datepicker-* variables on #mv-calendar. Bootstrap replaces the element's classes, so target the id.
Replace the setTimeout in the booking handler with fetch() calls to your backend.
The photos come from Unsplash. Replace them with your own salon, team and client images.

Accessibility

A skip link jumps to #mv-main. Tabs use role="tab" with aria-selected, and each .mv-add has a descriptive aria-label. The basket total is announced through aria-live, and time slots sit in a fieldset with a legend. The dialog has aria-labelledby, and focus is shown with a gold outline. The marquee ribbon and the rotating seal stop under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). btn-solid theme-primary replaces btn-primary, the navbar opens a Drawer instead of navbar-collapse, and Modal is now the native <dialog class="dialog">. Datepicker, Combobox, Range and Chips are new in Bootstrap 6. The carousel now uses CSS scroll-snap with carousel-icon-prev/-next, and data-bs-validate replaces needs-validation. The selected artist stays after the form resets, because Combobox has no reset method yet.