Freeframe
Health & Fitness9 pages · 1 download · Free

Fade

A bold, vintage-modern barbershop website with live wait times, online booking, a product shop and gift cards.

Stack
v1.0.2 changelog

About this template

Fade is a complete site for Fade Bros. Barber Co., a fictional two-shop barbershop in Chicago. Condensed display type, barber-pole stripes and SVG-drawn portraits set the tone; underneath are an illustrative walk-in wait board for each shop, a five-step booking flow that builds time slots from each barber's schedule and the length of the chosen services, filterable services and barbers, and a grooming shop with a saved bag and a gift card builder.

Features

  • Five-step booking flow: shop, services, barber or first available, accessible calendar and time slots, details
  • Time slots built from each barber's schedule at each shop and the total length of the chosen services
  • Downloadable .ics calendar file for the requested appointment
  • Illustrative walk-in wait board per shop with a typical-wait chart for today
  • Live open-now status in Chicago time, with today's hours highlighted
  • Product shop with a saved bag, quantities, pickup or shipping and a free-shipping meter (localStorage, validated)
  • Gift card builder with amounts, three designs, scheduled delivery and a live preview that adds to the bag
  • Service filter, barber filters by shop and speciality, and each barber's next free time
  • SVG-drawn barber portraits, products, storefront and map: no photos to license
  • Accessible mobile menu, skip link, FAQ accordion, back-to-top button and scroll reveals

Pages included

Quick start

unzip fade.zip && cd fadeopen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build
Read the Fade documentation →

Changelog

  1. v1.0.2

    Fixed

    • The footer copyright year is now this year in the browser; it was fixed at 2026.
  2. v1.0.1

    Fixed

    • The bag now works when the browser blocks localStorage (in a sandboxed iframe, like the freeframe.dev demo, or with strict privacy settings): the state is kept in memory for the page view. Before, adding a product left the bag empty.
  3. v1.0.0

    Added

    • Initial release: a nine-page site for Fade Bros. Barber Co., a fictional barbershop with two shops in Chicago: Home, Services & prices, Barbers, Book a chair, Shop & gift cards, Locations & hours, About & careers, Contact and a 404 page.
    • Five-step booking flow (shop, services, barber or first available, date and time, details) with time slots worked out from each barber's schedule at each shop and the total length of the chosen services, a keyboard-friendly month calendar, a running summary, a confirmation and an .ics calendar file. ?location=, ?service= and ?barber= preselect choices. Demo only: nothing is booked.
    • Illustrative "current wait" board for both shops, estimated from opening hours, who is working and a typical traffic curve, with a chart of today's typical wait. ?at= previews any shop-local time.
    • Open-now badges in Chicago time and today's row highlighted in the opening hours tables.
    • Product shop with category filter and a bag saved in localStorage (validated on read): quantities, pickup at either shop or shipping with a free-shipping meter, and a demo checkout. The header shows the bag count on every page.
    • Gift card builder with preset or custom amounts ($20–$300), three designs, a message counter, scheduled delivery and a live preview; gift cards are added to the bag.
    • Services category filter, barber filters by shop and speciality with each barber's next free time, FAQ accordion, validated contact and newsletter forms.
    • SVG artwork: six barber portraits, product packaging, storefront, map, stamp badge, favicon and social image.
    • Accessible mobile menu, skip link, back-to-top button and scroll reveals that respect reduced motion.

More templates

Bloom website template preview

Bloom

Health & Fitness

A calm, elegant website for a hair salon and day spa, with online booking and gift cards.

HTML + TailwindNext.jsAstroWordPress

9 pages · 154 KB

Documentation