Vibe landing v1: flow
Single-file React build (index.html), hash-routed. Open it at /prototypes/vibe-landing/v1/ (with or without trailing slash).
Routing strategy
- Hash routes (for example
#/search/events), because the server has no catch-all. The hash never reaches the server. - The URL is the source of truth: the router
Qv()parseslocation.hashon first load and on everyhashchange;Oc()builds a hash from a route. - Navigation pushes a history entry (real
<a href="#/…">links). Refinements replace (search text and filters, debounced 250 ms). Redirects replace (empty hash to#/, signed-out#/hubto#/signin?next=…, sign-in return tonext). - Tabs and wizard steps live in the query inside the hash (
?tab=,?step=) and push. Open dialogs add?modal=<slug>and push, so Back closes them. - Unknown routes, unknown record ids and unknown hub sections show a "Page not found" view (heading, link home). They no longer redirect silently.
- The demo session is kept in
sessionStorage(vibe.session.v1), never in the URL. Any email works; the code is314159. Usepractitioner@…for the practitioner role. - Per navigation:
document.titlenames the view, focus moves to the view's<h1>, scroll goes to top on a new view and is restored on Back/Forward,aria-currentfollows the active nav item.
Routes
| URL | Screen | State read from the URL | Exit links |
|---|---|---|---|
#/ |
Home | none | modalities, practitioners, events, Let's AI, sign in, info/legal pages |
#/lets-ai |
Let's AI chat | none | nav, hub (signed in) |
#/search/modalities …/practitioners …/events |
Discover | tab (path); q text, loc, pd (practitioner place, delivery), et, el, ed, em (event type, place, delivery, modalities), cat, md, bn (modality category, delivery, benefit), filters=open |
cards to detail pages |
#/modality/<name> |
Modality detail | tab = expect or history |
practitioners, events, related modalities |
#/practitioner/<slug> |
Practitioner profile | tab = education |
events, sign in / register, Let's AI |
#/event/<id> |
Event detail | tab = location, attendees, conversations, posts, settings (when available) |
host profile, modality |
#/legal/privacy #/legal/terms |
Legal | path | home |
#/info/about faq contact seekers practitioners employers gws |
Info pages | path | calls to action |
#/signin |
Sign in (email, then code) | next (a same-app route to return to) |
home |
#/join |
Seeker registration, 7 steps | step = verify photo intro areas connect review |
sign in, home |
#/practitioner-setup |
Practitioner registration, 8 steps | step = verify about address credentials education services review |
home |
#/practitioner-invite |
Practitioner invitation request | none | home |
#/hub then #/hub/<section> |
Wellness hub (signed in) | section: today feed journal ai practitioners events communities conversations wallet; optional third segment: community id (communities/c1) or conversation id (conversations/co-c1) |
account, explore, sign out |
#/account |
Account settings (signed in) | none | hub |
| anything else | Page not found | the bad hash is kept in the address bar | home, modalities |
Signed-out visits to #/hub… and #/account are replaced with #/signin?next=%2Fhub…; after sign-in the sign-in entry is replaced by the requested route.
Dialogs (?modal=<slug>): sign-up gate on Follow/Book (join-let-s-vibe), invite-practitioner, compose post, add credential/degree, create event, personalise, vibration confirmation. The first-visit wellness-guidance notice is a consent gate: it has no URL, Esc triggers "Leave".
Deep links to paste
- Home:
/prototypes/vibe-landing/v1/#/ - Search with filters:
#/search/practitioners?q=reiki - Modality tab:
#/modality/Emotional%20Wellness%20Coaching?tab=history - Practitioner:
#/practitioner/cobananda - Event:
#/event/413d753e - Registration step:
#/join?step=intro,#/practitioner-setup?step=credentials - Sign in then return:
#/signin?next=%2Fhub%2Fjournal - Signed-in seeker:
#/hub/feed,#/hub/communities/c1,#/hub/conversations/co-c1,#/account(sign in with any email, code 314159) - Signed-in practitioner: sign in as
practitioner@123.com, then#/hub/events,#/practitioner/maya-soluz
Prose flow
Visitors land on Home, browse modalities, practitioners and events (cards open detail pages), read info pages, or chat with Let's AI. Following or booking prompts a sign-up dialog. Sign in (email, then code) opens the hub (or the route in next). The hub holds today's vibration, feed, journal, Let's AI, followed practitioners, events, communities and conversations. Registration (#/join, #/practitioner-setup) is a stepper whose steps are URLs.
Faked vs real
| Thing | Status |
|---|---|
| Practitioners, events, modalities, communities, messages, wallet benefit | Faked: bundled sample data |
Sign-in, one-time code (314159), registration, invitations, RSVPs, follows, posts |
Faked: nothing is sent or stored on a server |
| Demo session | Real, but only in sessionStorage for the tab |
| Let's AI replies | Real network call to the Anthropic Messages API from the browser; without a key it fails and a canned reply is shown |
| Photos | Remote Unsplash images over brand gradients (not needed for function; blocked images leave gradients) |
| Routing, history, titles, focus | Real |
Known limits
- Cold-loading a dialog URL (
?modal=…) lands on the parent view with the dialog closed (dialogs depend on in-memory drafts); the stale param is removed by replace. - Wizard steps deep-link to the step with empty answers (data is not kept in the URL).
- No dark theme exists in this build;
prefers-color-scheme: darkrenders the light design (AA contrast verified for it). Reduced motion is honoured.