Partner Program v1: flow

Public marketing page for the Let's Vibe Partner Program (insurance brokers, PEO brokers, PEOs, HCM consultants). One HTML file, index.html, served at /prototypes/partners/v1/. There is no sign-in and no roles.

Routing strategy (and why)

Hash routes in a single page (#/commission, #/modalities/reiki?tab=we).

The server has no catch-all, and a hash never reaches the server, so every route works on cold load, reload and pasted links.
The URL is the source of truth: the view is rendered from location.hash on first load and on every hashchange.
Navigation is real <a href="#/..."> links (copy link, new tab and middle-click work). Buttons are used only for actions.
Push a history entry: moving to a section, opening a modality, changing detail tab, going to a catalog page, submitting the form, opening the schedule dialog.
Replace the current entry: catalog search text, filters and delivery (debounced), the "See all benefits" toggle, FAQ open/close, redirects (#top, #difference style legacy hashes), URL canonicalisation, closing the dialog when it was cold-loaded.
Each history entry stores its scroll position (history.state.y). Back, Forward and Reload restore it. A new navigation scrolls to the target section (smooth, instant under reduced motion) and moves focus to that view's heading.
Dialog state is in the URL, so Back closes the "Schedule a call" dialog.
Not in the URL: menu open/closed, filter panel open/closed (it opens by itself when a filter is active), hover/focus, typed-but-unsent form input, validation messages.

Routes

URL (hash)	Screen	State read from the URL	Exits
`#/` (or no hash)	Landing, top (hero, the page `h1`)	none	all nav links
`#/difference`	Landing, "Why Let's Vibe" section	none	nav
`#/why`	Landing, "Why partners place it"	none	nav
`#/modalities`	Catalog list	`q` search text, `delivery` (`in`, `on`, `both`), `benefits` (comma list of benefit slugs), `page`	modality cards, pagination, nav
`#/modalities/<slug>`	Modality detail (e.g. `reiki`), Overview tab	`tab` (`we` What to Expect, `hi` History), `benefits=all` shows every benefit	back link to the list (keeps filters), tabs
`#/audience`	Landing, audience section	none	nav
`#/commission`	Landing, commission section (dark band)	none	`#/apply`
`#/how`	Landing, "How it works"	none	nav
`#/apply`	Landing, application form	none	submit goes to `#/apply/received`
`#/apply/received`	Form card shows the "Application received" state	none	`#/apply`, nav
`#/apply/received?dialog=schedule`	Thank-you plus "Schedule a call" dialog	`dialog=schedule`	Esc, close, "Maybe later" (Back), external Calendly link
`#/faq`	Landing, FAQ section, all answers closed	none	nav
`#/faq/<slug>`	FAQ with one answer open. Slugs: `who-earns-10`, `who-earns-2-5`, `commission-basis-pepm`, `peos-and-referring-brokers`, `final-commercial-terms`	slug	toggling replaces the URL
anything else, unknown modality or FAQ slug	"We can't find that page" view (own `<title>`, `h1`, link home or to the catalog)	none	home link

Document title, aria-current="page" on the active nav item, and keyboard focus (heading, or the question button for FAQ, or the dialog) update on every navigation. Unknown or malformed query values fall back to defaults and the URL is corrected by replace.

Short flow

A partner lands on the hero, reads the difference, the "why", browses the modality catalog (search, filter by benefit and delivery, page through, open a modality and read Overview, What to Expect, History), reads audience, the 10% / 2.5% commission explanation and the six steps, applies with the form (inline validation), then sees the thank-you and a dialog to book an intro call. FAQ answers are linkable.

Ready-to-paste deep links

Path prefix: /prototypes/partners/v1/

Commission terms: #/commission
Catalog, search: #/modalities?q=reiki
Catalog, online only, page 2: #/modalities?delivery=on&page=2
Catalog, one benefit: #/modalities?benefits=accelerates-achievement-of-goals
Modality: #/modalities/reiki and #/modalities/reiki?tab=we
Application: #/apply
After submitting: #/apply/received and #/apply/received?dialog=schedule
FAQ answer: #/faq/who-earns-10
Not found: #/nope

Faked vs real

Piece	Status
Modality catalog (names, descriptions, benefits, delivery)	Faked: static mirror of the staging catalog inside a `MOCK DATA BOUNDARY` block. Controlled substances excluded.
Application form submit	Faked: validates, then shows the thank-you. Nothing is sent (`TODO` in `submitApp`).
"Schedule a call" link	Placeholder Calendly URL (`CALENDAR_URL`).
Menu, privacy and terms links	Point to production URLs that must be confirmed before launch (`LINKS`).
Commission rates (10%, 2.5%) and program copy	Real copy from the reviewed design; the signed Partner Agreement controls.
Routing, history, scroll restore, validation, dialog	Real behavior.
Sign-in, roles	None. The page is public.

Notes

Scroll position is not tracked into the URL: if someone scrolls by hand, the URL stays on the last route they navigated to.
The success state at #/apply/received is rendered from the URL alone, so a pasted link shows the thank-you without a submitted form (acceptable for a prototype).
Light and dark follow prefers-color-scheme; motion follows prefers-reduced-motion.