Freeframe
Business10 pages · 2 downloads · Free

Compass

A warm, editorial site for a leadership coach or consultant, with a booking flow, a self-assessment quiz and client results.

Stack
v1.0.1 changelog
DocsLive demo Download .zip199 KB

About this template

Compass is a complete website for Bearing, the fictional Pittsburgh coaching practice of Nadia Whitcombe, who coaches new managers, founders and senior leaders. It pairs serif editorial typography, an ivory, dusk-indigo and marigold palette and cut-paper SVG illustrations with a four-step booking flow (call type, accessible calendar, time slots in the visitor's time zone, details and confirmation), a leadership self-check quiz that recommends a program, filterable client stories with before-and-after metrics, programs with a comparison table and FAQ, an interactive method diagram and a lead-magnet sign-up.

Features

  • Four-step booking flow: call type, keyboard-accessible calendar, time slots generated from availability rules and shown in the visitor's time zone, validated details and a confirmation with a downloadable .ics hold
  • Six-question leadership self-check with four result types, next steps and a recommended program, saved in localStorage with a retake button
  • "Recommended for you" badge on the programs page, driven by the saved self-check result
  • Programs page with 1:1 packages, a group cohort, team workshops, a comparison table and an FAQ accordion
  • Interactive method diagram: an SVG compass whose needle turns to the selected step, with accessible tabs
  • Client stories filterable by client type, with before-and-after metrics and shareable ?type= URLs
  • Resource library with topic filters, a sample long-form article and a podcast section
  • Accessible testimonial carousel, count-up outcome stats and fictional press wordmarks
  • Free guide sign-up and contact forms with inline validation and success states
  • Cut-paper SVG portrait, studio and guide-cover illustrations, accessible mobile menu, scroll reveals and back-to-top button

Pages included

Quick start

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

Changelog

  1. v1.0.1

    Fixed

    • The First 90 Days cohort dates ("Next cohort starts January 13, 2027", "Winter 2027 cohort", "Next cohort after this: April 2027") are now rolling demo dates: the next second Wednesday of January, April, July or October at least six weeks away (COHORT_DATES = null), so the demo never advertises a cohort that has started.

  2. v1.0.0

    Added

    • Ten pages: home, programs, method, results, about, resources, a sample article, book a call, contact and a 404 page.
    • Booking flow with call types, an accessible month calendar, time slots generated from weekly availability rules and shown in the visitor's time zone, a validated details form and a confirmation summary with a .ics download (demo only, nothing is booked).
    • Leadership self-check quiz with four result types and a recommended program, saved in localStorage (validated on read) with a retake button, plus a "Recommended for you" badge on the programs page.
    • Programs page with 1:1 packages, the First 90 Days cohort, team workshops, a comparison table and an FAQ accordion.
    • Interactive Bearing Method compass diagram with accessible tabs, session structure and an engagement timeline.
    • Client stories filterable by client type with before-and-after metrics and shareable URLs; resource library with topic filters; testimonial carousel; count-up stats; fictional press wordmarks.
    • Guide sign-up and contact forms with inline validation and success states.
    • Cut-paper SVG portrait, studio, guide cover and podcast artwork, SVG favicon and a PNG social image (SVG source included), scroll reveals, accessible mobile menu and a back-to-top button. Full documentation in DOCS.md.

More templates