The Map
Where a person travels, what you build in Framer, what the link does, and how Stan sits in front of the back end. One page, the whole string.
1 · The flow — what a visitor lives
Brenton's room · Instagram
The post
Case-study pictures inside the post. One link. Nothing else to click.
↓
Framer · or the shared HTML link
The case study page
Claude's design. The numbers, the workflows, what's inside. Every button on it says the same thing: Join the waitlist.
↓ taps Join the waitlist
Stan · Collect Emails page
Name + email
One small form. This is the toll booth. No email, no file.
↓ Stan sends it automatically
Their inbox
The file arrives
Stan's confirmation email delivers the test drive — the demo copy link. They tap it, they're inside the dashboard.
↓ January
Stan · broadcast to the list
Launch day
One email to everyone who joined. The $199 product is live on the same store. They buy where they signed up.
The HTML link and the Framer page are the same room with two doors. Share the link anywhere; the Framer site is where it lives permanently. Both end at the same Stan form.
2 · What you build in Framer — the frames
Design the phone frame first — the room and Instagram are all phones. Framer breakpoints: Desktop 1200 · Tablet 810 · Phone 390. One page, sections stacked in this order:
Frame · Case Study Page390 × scroll
Nav bar — wordmark left, “Join the waitlist” button right. Thin, stays out of the way.390 × 64
Hero — “You make the videos. It runs the business.” + one line + Join button + the pipeline picture.390 × ~700
The problem — five places at once + the three numbers: $0 earned · 33% · 47%.390 × ~500
What's inside — six tiles: Pipeline · Usage Engine · Contract Check · Pitch Engine · Recipes · VA Center.390 × ~800
Receipts — 60 records · 86 pitched · $900 tracked · 5 of 5 caught.390 × ~400
Price + waitlist — $199 one time, the 3 steps, the big Join button (→ Stan form).390 × ~550
FAQ + footer — five questions, then The Observatory line.390 × ~600
That's the whole Framer job: one page, seven sections. Claude already has every word and number — they're all in the case study file. Desktop is the same sections, just wider: content column maxes at 1200, tiles go two-across instead of stacked.
3 · The HTML link — what it is
The case study Claude built is already an HTML file. Hosted on Netlify, it becomes a link you can drop anywhere — the room, a DM, a caption. It carries the same Join button, pointed at the same Stan form. Framer page and HTML link are twins: same design, same job. You never design it twice.
4 · Your Stan storefront — her setup, yours
Her store is a front end of tiles: each tile is either a product (tap → Stan takes the email or the money → the back end delivers the thing) or a link (tap → her own hosted page). Yours, same skeleton:
1
Product · Collect Emails
UGC Dashboard — Test Drive
Tap → name + email → Stan emails the demo copy. This tile IS the waitlist.
2
Link block · her “Before + Afters” slot
The Case Study
Tap → your Framer/Netlify case study page. The showroom, on your turf, in your design.
3
Product · Collect Emails
Fitness OS — Join the Waitlist
Tap → email → Stan sends the Beta Copy test drive. Opens the Dec 3 list.
4
Link block
Free Tools — The Observatory
Tap → the Notion shelf: Zero to a Thousand + The Authentic Playbook.
5
Link block · later
Gear I Actually Use
Your kit, affiliate links. Lands with Gear Week (Nov 9–15).
So yes — Stan works exactly as the front end you're picturing. The storefront is the shop window; the back end (Stan's email delivery + your hosted pages) does the handing over. Dress it once: cream + blue set in Stan, every tile picture designed in Canva in your law.
5 · Build order — so nothing gets built twice
1. Stan Tile 1 (Collect Emails + demo link inside) — everything hangs off it.
2. The room post, linking the case study.
3. Framer page at Claude's pace — it only points at links that already work.
4. Tiles 3–5 as each launch comes up.