Service business website with booking requests

• compare services by bike type with prices and durations
• read a service detail and start a request with it preselected
• request a booking: service → date & time from availability → details → review
• recover from validation errors, unavailable days/slots and a slot taken on re-check
• move back and forward (browser or Change links) without losing the draft
• see an honest result: request prepared, not sent, never 'confirmed'
• find the workshop: address, hours, directions, phone

• homeHero with technical drawing and sample next opening, contact strip, rate card, how booking works, mechanics, sample reviews, visit, FAQ, closing CTA
• servicesRate card filtered by bike type (URL state)
• service-detailService description, price/duration/suits spec, included and not included, mechanics, questions, request CTA
• teamMechanics and specialities
• visitAddress, schematic map, hours with today highlighted, directions, accessibility
• faqGrouped native-disclosure FAQ
• book-serviceStep 1: bike type and service
• book-timeStep 2: day and time from availability; closed/full days and booked/too-late slots; conflict message
• book-detailsStep 3: contact details with validation and error summary
• book-reviewStep 4: review with Change links and an explicit request/no-payment/not-connected explanation
• book-sentResult: request prepared — not sent (template) or received — not yet confirmed (connected adapter)
• not-found404 page with a real 404 status in preview

• Loading
• Error
• Empty
• Validation
• Unavailable
• Conflict
• Redirect incomplete step
• Not connected integration
• Not found
• Reduced motion

Commands:

1 check still pending. Pending means it hasn't been run yet, not that it passed.

• No booking system, calendar or diary: availability is deterministic SAMPLE data (src/booking/availability.ts); implement AvailabilitySource against your diary
• No submission backend: the template BookingAdapter re-checks the sample slot and returns 'not-connected' — nothing is sent; implement BookingAdapter to POST to your server
• No payments or deposits; the copy states pay on collection
• No email/SMS confirmations; the workshop confirms manually once connected
• Reviews are clearly labelled template samples; replace with real platform reviews (source, date, at least one below top score)
• No analytics, cookies or third-party requests; the booking draft lives in sessionStorage for the current tab only
• Prerendered HTML is generated at build time; hosts must serve dist/<path>/index.html and dist/404.html

Each boundary comes with instructions for adding it in docs/INTEGRATION-BOUNDARIES.md.

• Business, people, address, phone (UK drama range) and reviews are fictional samples
• Sample availability is generated from the date and does not reflect real bookings
• Booking steps render client-side (they depend on the tab's draft); they require JavaScript, and a phone number is offered instead
• Tested in Chromium only; WebKit/Firefox not yet verified
• Light theme only (no dark mode)

Use in unlimited end products incl. client/commercial; no resale/redistribution as a template, kit or dataset; no ML training. Survives cancellation for delivered versions.

Full terms: Motif template licence. Open-source parts keep their own licences (licenses.json, id lic-premium-service-booking-1-0-0).

Use Motif to activate the premium-service-booking template and download it. Then adapt it for a neighbourhood bakery: replace the content and imagery, keep the design tokens and every state in docs/STATE-MATRIX.md, and run check_design_contract before you finish.

web-site-type-local-business · web-ref-local-service-and-builder-sites · web-productized-service-business-structure · web-services-offer-list-section · web-hero-booking-and-quote-panels · web-archetype-travel-hospitality-and-booking · web-how-it-works-numbered-steps · web-inline-conversion-steps · web-form-labels-and-layout · web-inline-validation-and-error-recovery · web-faq-accordion-section-build · web-aggregate-rating-and-review-cards · web-anti-testimonial-card-row · web-anti-fake-urgency-and-dark-patterns · web-directory-and-location-grids · web-grid-line-and-dot-pattern-textures · web-flat-color-block-composition · web-cta-full-bleed-color-band · web-focus-indicators-and-keyboard · web-mobile-navigation · web-seo-semantic-structure-and-metadata · web-font-loading-without-shift · web-core-web-vitals-targets · web-semantic-color-tokens · web-contrast-wcag-and-apca · web-type-scale-and-measure · motion-reduced-motion-strategy

SHA-256 a9ca08a0c6216c9f21939eedca295f5ef1d9ef814c752b3b9da70b9f7a22c019