{/* Header strip — Stripe-y */}

stripe

{/* Order summary */}

Order

{PROGRAM_NAME}

4-week ACL recovery program · 12 video exercises · lifetime access

{PRICE}

{/* Apple Pay express */}

or pay with card

{/* Form */}

jordan.reyes@gmail.com ↵ 4242 4242 4242 4242

12 / 28 •••

Jordan Reyes United States

{/* Pay button */}

Secured by Stripe

); } function FormField({ label, children, compact }) { return (

{label}

{children}

); } function CardLogo({ brand }) { const logos = { visa: { bg: '#1A1F71', text: 'VISA', size: 9 }, mc: { bg: '#EB001B', text: 'mc', size: 9 }, amex: { bg: '#006FCF', text: 'AMEX', size: 8 }, }; const l = logos[brand]; return (

{l.text}

); } // ───────────────────────────────────────────────────────────── // 03 · Post-purchase confirmation — "you're in" // ───────────────────────────────────────────────────────────── function ConfirmationScreen({ onNext }) { return (

{/* Checkmark */}

You're in, Jordan.

Your 4-week program is unlocked. First session is 3 exercises, ~12 minutes.

{/* Receipt strip */}

Receipt

{PROGRAM_NAME} {PRICE}.00

Sent to jordan.reyes@gmail.com #KIN-4291

{/* What's next */}

What's next

{[ 'Start with week 1, day 1 — quad set + heel slide', 'Do the work in order; each week builds on the last', 'Come back tomorrow for day 2', ].map((t, i) => (

{i + 1}

{t}

))}

We sent your login link to your email

); } // ───────────────────────────────────────────────────────────── // 03b · Phase selector — where are you in recovery? // ──────────────────────────────────────────────────────────── const PHASES = [ { n: 1, title: 'Just had surgery', sub: 'Days 0–14 post-op', week: 1 }, { n: 2, title: 'Working on motion', sub: 'Weeks 2–6, regaining ROM', week: 2 }, { n: 3, title: 'Building strength', sub: 'Weeks 6–14, loading the leg', week: 3 }, { n: 4, title: 'Past rehab, want to stay strong', sub: 'Months 4+, prevent re-injury', week: 3 }, ]; function PhaseSelectorScreen({ onNext }) { const [sel, setSel] = React.useState(1); const chosen = PHASES.find(p => p.n === sel); return (

Where are you in recovery?

We'll start you at the right week. You can always change this later.

{PHASES.map(p => { const active = p.n === sel; return ( ); })}

); } // ──────────────────────────────────────────────────────────── // 04 · Member home / program view // ──────────────────────────────────────────────────────────── const PROGRAM = [ { week: 1, name: 'Wake the quad', exercises: [ { id: 'w1d1', title: 'Quad set + heel slide', dur: '2:04', done: true }, { id: 'w1d2', title: 'Straight-leg raise', dur: '1:48', done: true }, { id: 'w1d3', title: 'Calf pump + ankle ABC', dur: '1:32', done: false }, ], }, { week: 2, name: 'Load + control', exercises: [ { id: 'w2d1', title: 'Mini squat to chair', dur: '2:21', done: false }, { id: 'w2d2', title: 'Step-up · 4 inch box', dur: '2:46', done: false }, { id: 'w2d3', title: 'Wall sit · isometric', dur: '1:58', done: false }, ], }, { week: 3, name: 'Single-leg strength', exercises: [ { id: 'w3d1', title: 'Split squat · regress', dur: '3:12', done: false }, { id: 'w3d2', title: 'Single-leg RDL', dur: '2:54', done: false }, { id: 'w3d3', title: 'Lateral step-down', dur: '2:38', done: false }, ], }, { week: 4, name: 'Stability + return', exercises: [ { id: 'w4d1', title: 'Single-leg balance + reach', dur: '2:12', done: false }, { id: 'w4d2', title: 'Forward / lateral hop · low', dur: '2:48', done: false }, { id: 'w4d3', title: 'Movement screen + retest', dur: '4:06', done: false }, ], }, ]; function MemberHomeScreen({ completed, onSelectExercise, startWeek = 1 }) { const allEx = PROGRAM.flatMap(w => w.exercises); const totalDone = allEx.filter(e => completed.has(e.id)).length; const total = allEx.length; const currentWeek = startWeek; const nextEx = allEx.find(e => !completed.has(e.id)) || allEx[allEx.length - 1]; const nextWk = PROGRAM.find(w => w.exercises.some(e => e.id === nextEx.id)); const nextDay = nextWk.exercises.findIndex(e => e.id === nextEx.id) + 1; const todayEx = nextEx; const todayLabel = totalDone > 0 ? 'Pick up where you left off' : 'Today · Thursday'; return (

{/* Header */}

Your program

{PROGRAM_NAME}

Week {currentWeek} of 4 · {totalDone} of {total} exercises complete

{/* Progress bar */}

{/* Today eyebrow */}

{/* Week sections */}

{PROGRAM.map((wk, i) => ( ))}

); } function WeekBlock({ week, active, completed, onSelectExercise }) { const done = week.exercises.filter(e => completed.has(e.id)).length; return (

{/* Week header */}

Week {week.week}{active ? ' · current' : ''}

{week.name}

{done}/{week.exercises.length}

{/* Exercise tiles */}

{week.exercises.map((ex, i) => ( onSelectExercise(ex.id)}/> ))}

); } function ExerciseTile({ ex, done, dim, onClick }) { return ( ); } // ───────────────────────────────────────────────────────────── // 05 · Single exercise view // ───────────────────────────────────────────────────────────── function ExerciseScreen({ exercise, week, onComplete, onBack }) { const day = week.exercises.findIndex(e => e.id === exercise.id) + 1; return (

{/* Video — fullscreen, top */}

{/* Back button on glass */}

{/* Scrubber */}

0:00

{exercise.dur}

{/* Info */}

Week {week.week}, day {day} · {PROGRAM_NAME}

{exercise.title}

Move slowly through the full range. Quality over quantity — the form is the work.

{/* Sets/reps prescription */}

Prescription

{[ { l: 'Sets', v: '3' }, { l: 'Reps', v: '20' }, { l: 'Rest', v: '30s' }, ].map((p, i) => (

{p.v}

{p.l}

))}

{/* Cues */}

Matt's cues

{[ 'Stop if you feel sharp pain — dull discomfort is OK', 'Control the down phase as much as the up', 'Keep breathing — don\'t hold your breath', ].map((c, i) => (

{c}

))}

{/* Sticky bottom CTA */}

); } // ───────────────────────────────────────────────────────────── // 06 · Admin / analytics (desktop) // ───────────────────────────────────────────────────────────── function AdminView() { // Scale-to-fit wrapper so the wide canvas doesn't cram text on narrow screens const NATIVE_W = 1240; const wrapRef = React.useRef(null); const [scale, setScale] = React.useState(1); React.useEffect(() => { const fit = () => { const w = wrapRef.current?.offsetWidth || NATIVE_W; setScale(Math.min(1, (w - 40) / NATIVE_W)); }; fit(); window.addEventListener('resize', fit); return () => window.removeEventListener('resize', fit); }, []); return (

{/* Browser chrome */}

app.builtback.com / admin

); } function AdminDashboard() { return (

{/* Top strip */}

{PROGRAM_NAME} · admin

Overview

{['Last 30d', 'Last 7d', 'All time'].map((t, i) => ( ))}

{/* 4 big numbers */}

{/* Two-column lower */}

{/* Recent signups */}

Recent signups

4 in the last 7 days

{RECENT_SIGNUPS.map((s, i) => (

{s.initials}

{s.name}

{s.email}

{s.when}

Week {s.week} · {s.progress}

+$99

))}

{/* Per-exercise completion mini-chart */}

Completion by exercise

Where people drop off

{EXERCISE_COMPLETION.map((e, i) => (

W{e.w}D{e.d} {e.name} {e.pct}%

= 70 ? 'var(--sage)' : e.pct >= 50 ? 'var(--amber)' : 'var(--clay)', }}/>

))}

); } function MetricCard({ label, value, sub, delta, deltaColor }) { const colors = { sage: 'var(--sage-2)', amber: '#8B5E1A', muted: 'var(--muted)', }; return (

{label}

{value}

{sub}

{delta}

); } const RECENT_SIGNUPS = [ { initials: 'JR', name: 'Jordan Reyes', email: 'jordan.reyes@gmail.com', when: '3h ago', week: 1, progress: '0 / 3' }, { initials: 'SK', name: 'Sara Kostas', email: 'skostas@yahoo.com', when: 'yesterday', week: 1, progress: '2 / 3' }, { initials: 'DT', name: 'Diego Torres', email: 'dieg.t@icloud.com', when: '2 days', week: 1, progress: '3 / 3' }, { initials: 'AM', name: 'Aisha Mahmoud', email: 'aishaprm@gmail.com', when: '3 days', week: 2, progress: '5 / 6' }, { initials: 'LO', name: 'Lila Ortiz', email: 'lila.ortiz@hotmail.com', when: '4 days', week: 2, progress: '4 / 6' }, { initials: 'MC', name: 'Marcus Chen', email: 'm.chen.fit@gmail.com', when: '5 days', week: 2, progress: '6 / 6' }, ]; const EXERCISE_COMPLETION = [ { w: 1, d: 1, name: 'Quad set + heel slide', pct: 94 }, { w: 1, d: 2, name: 'Straight-leg raise', pct: 88 }, { w: 1, d: 3, name: 'Calf pump + ankle ABC', pct: 82 }, { w: 2, d: 1, name: 'Mini squat to chair', pct: 76 }, { w: 2, d: 2, name: 'Step-up · 4 inch box', pct: 68 }, { w: 2, d: 3, name: 'Wall sit · isometric', pct: 61 }, { w: 3, d: 1, name: 'Split squat · regress', pct: 49 }, { w: 3, d: 2, name: 'Single-leg RDL', pct: 42 }, { w: 3, d: 3, name: 'Lateral step-down', pct: 38 }, { w: 4, d: 1, name: 'Single-leg balance + reach', pct: 28 }, { w: 4, d: 2, name: 'Forward / lateral hop · low', pct: 21 }, { w: 4, d: 3, name: 'Movement screen + retest', pct: 16 }, ]; // ───────────────────────────────────────────────────────────── // Canvas wrapper // ───────────────────────────────────────────────────────────── function ViewToggle({ view, onChange }) { const opts = [ { id: 'flow', label: 'Interactive' }, { id: 'all', label: 'All screens' }, ]; return (

{opts.map(o => ( ))}

); } function PilotCanvas() { const isPrint = typeof window !== 'undefined' && window.__BB_PRINT__; const [view, setView] = React.useState(isPrint ? 'all' : 'flow'); const [screen, setScreen] = React.useState('landing'); const [completed, setCompleted] = React.useState(() => new Set(['w1d1', 'w1d2'])); const [selectedExId, setSelectedExId] = React.useState('w1d3'); const [startWeek, setStartWeek] = React.useState(1); const allEx = PROGRAM.flatMap(w => w.exercises); const selectedEx = allEx.find(e => e.id === selectedExId) || allEx[0]; const selectedWk = PROGRAM.find(w => w.exercises.some(e => e.id === selectedExId)) || PROGRAM[0]; const goExercise = (id) => { setSelectedExId(id); setScreen('exercise'); }; const markComplete = () => { setCompleted(prev => new Set([...prev, selectedExId])); setScreen('home'); }; const screenEl = (() => { switch (screen) { case 'landing': return setScreen('checkout')}/>; case 'checkout': return setScreen('confirm')} onBack={() => setScreen('landing')}/>; case 'confirm': return setScreen('phase')}/>; case 'phase': return { setStartWeek(w); setScreen('home'); }}/>; case 'home': return ; case 'exercise': return setScreen('home')}/>; default: return null; } })(); const noop = () => {}; const snapshotCompleted = new Set(['w1d1', 'w1d2']); const snapshotEx = allEx.find(e => e.id === 'w1d3'); const snapshotWk = PROGRAM.find(w => w.exercises.some(e => e.id === 'w1d3')); return (

Built Back · Mockups

{view === 'flow' ? (

{screenEl}

) : (

)}

); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render();

{PROGRAM_NAME}.

A 4-week ACL recovery program you can run yourself.

You're in, Jordan.

Where are you in recovery?

{PROGRAM_NAME}

{exercise.title}