Yoga Studio Homepage Template

A warm, light yoga studio homepage built with Bootstrap 6 for a fictional studio called Stillwater Yoga. It has an arched photo hero, a filterable 7-day class schedule with a booking dialog, teacher profiles, intro pricing and a newsletter signup.

How it works

The page root .sy-page has data-bs-theme="light" and maps the Bootstrap 6 primary role to sage green and the accent role to terracotta. All btn-solid theme-primary buttons, chips and the switch use the studio palette.

• Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-start"> for mobile. The drawer closes after an in-page link is chosen.
• Hero: headline, an intro offer .chip, an avatar-stack rating, and .sy-hero-art, which combines an arched photo (.sy-arch) with a circular inset (.sy-circle). The .sy-next card shows the next class still to come, worked out from the schedule data.
• Class styles: four arch-topped cards (.sy-style) with badge-subtle mood labels.
• Schedule: the script builds day buttons for the next seven days from today, so dates never go stale. It lists classes from the SY_WEEK object and hides classes that have already started today. Style .chip buttons with aria-pressed filter the list.
• Booking: each "Book" button opens #sy-book, a native <dialog class="dialog">, through data-bs-toggle="dialog". A click listener first copies the class name and time into the dialog. The form validates, fakes the request, closes with Dialog.getOrCreateInstance().hide() and shows #sy-toast.
• Teachers, pricing, quotes: arched portraits with Collapse bios, three price cards with a highlighted .sy-price-featured intro offer, and quotes.
• Newsletter, FAQ, visit: an input-group email form, an accordion-flush of <details name="sy-faq">, and an inline SVG map placeholder (.sy-map).

Customization

• Change --sy-sage, --sy-clay and --sy-cream in .sy-page (style.css) to rebrand. Update the --bs-primary-* overrides next to them.
• Edit SY_WEEK in script.js to set your timetable. Each entry is time, name, style key, teacher, minutes and mats left.
• Add a style key to SY_WEEK and a matching data-sy-filter chip to create a new filter.
• Replace the setTimeout in the booking submit handler, and the newsletter handler, with fetch() calls to your backend.
• Replace .sy-map with your own map image or a static map embed.
• All photos come from Unsplash. Replace them with photos of your own studio and teachers.

Accessibility

The page has a skip link and a labelled drawer and dialog. Day and filter buttons expose aria-pressed, and the schedule list is an aria-live region. Visually hidden text names the class on each "Book" button. After booking, focus returns to the button that opened the dialog. Bio toggles use aria-expanded/aria-controls. Hover motion stops under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1, so alpha APIs may still change. Here is how Bootstrap 5 patterns map:

• <dialog class="dialog"> replaces Modal.
• Drawer replaces Offcanvas and navbar-collapse.
• .chip gives selectable pills.
• .switch replaces form-switch.
• data-bs-validate replaces needs-validation.

The script imports Dialog, Drawer and Toast from the bundle as an ES module.