// screens-onboarding.jsx β€” Onboarding flow: pace / distance / level / neighborhood const APP_VERSION = 'v1.0.5'; const ONBOARD_STEPS = [ { id: 'welcome', title: 'Small local runs,\nmatched by pace.', sub: `Create or join 2–8 person runs near you. Verified hosts and meeting points you can trust. ${APP_VERSION}` }, { id: 'phone', title: 'Verify your phone', sub: 'Used to confirm who you are. Never shown to other runners.' }, { id: 'profile', title: 'About you', sub: 'Just the basics. You can keep your last name private.' }, { id: 'pace', title: 'Your usual pace', sub: 'We\u2019ll match you to runs in your range so nobody gets dropped.' }, { id: 'distance', title: 'Preferred distance', sub: 'We\u2019ll highlight runs that match what you like.' }, { id: 'area', title: 'Where do you like to run?', sub: 'We\u2019ll show runs starting nearby first.' }, ]; function ProgressDots({ idx, total }) { return (
{Array.from({ length: total }).map((_, i) => (
))}
); } function PaceStep({ pace, setPace, onSkip }) { // pace stored as tick index 0..14 (8:00 β†’ 4:30, 15s steps) const TICKS = [ '8:00','7:45','7:30','7:15','7:00', '6:45','6:30','6:15','6:00','5:45', '5:30','5:15','5:00','4:45','4:30', ]; const MAJOR = [0, 2, 4, 6, 8, 10, 12, 14]; const LABEL = [0, 4, 8, 12, 14]; const idx = typeof pace === 'number' ? pace : 8; const setIdx = (v) => setPace(v); const value = TICKS[idx]; const pct = (idx / (TICKS.length - 1)) * 100; return (
{/* Big pace readout */}
{value}
MIN / KM
5K in ~{Math.round((parseInt(value.split(':')[0]) * 60 + parseInt(value.split(':')[1])) * 5 / 60)} min
{/* Slider card */}
setIdx(parseInt(e.target.value))} style={{ position: 'absolute', inset: 0, width: '100%', height: 36, opacity: 0, cursor: 'pointer', appearance: 'none', }}/>
{LABEL.map(i => ( {TICKS[i]} ))}
{/* Skip link */}
); } function PhoneStep({ onNext }) { const [phone, setPhone] = React.useState('7700 900 184'); return (
Phone number
πŸ‡¬πŸ‡§ +44
setPhone(e.target.value)} placeholder="7700 900 184" inputMode="tel" style={{ flex: 1, background: 'transparent', border: 'none', color: PACER.text, fontFamily: PACER.mono, fontSize: 17, fontWeight: 500, outline: 'none', letterSpacing: 1, padding: 0, }} />
Your number is used for verification only. Never shared with other runners.
); } function OtpStep({ onNext }) { const code = ['7', '3', '9', '', '', '']; return (
{code.map((d, i) => { const empty = !d; const isCursor = i === 3; return (
{d} {isCursor && (
)}
); })}
Didn't get it? Resend in 0:24
); } function ProfileStep({ name, setName, gender, setGender, age, setAge, area, setArea }) { const ageBuckets = ['18–24', '25–34', '35–44', '45–54', '55+']; const genders = ['Woman', 'Man', 'Non-binary', 'Prefer not to say']; return (
Must be your face so others can recognise you when you show up.
{/* Name */}
First name
setName(e.target.value)} style={{ width: '100%', boxSizing: 'border-box', height: 48, background: PACER.inset, border: `1px solid ${PACER.border}`, borderRadius: 14, padding: '0 16px', color: PACER.text, fontFamily: PACER.font, fontSize: 16, outline: 'none', }}/>
{/* Gender */}
Gender
Used for women-only runs
{genders.map(g => { const sel = gender === g; return ( ); })}
{/* Age */}
Age
{ageBuckets.map(a => { const sel = age === a; return ( ); })}
Only your first name and an age range show on runs.
); } function DistanceStep({ dist, setDist }) { return (
Preferred distance
); } function AreaStep({ area, setArea }) { const areas = ['Bristol', 'Bath', 'Other']; return (
Search neighborhoods…
{areas.map(a => { const sel = a === area; return ( ); })}
); } function WelcomeStep() { return (
How Run Crew works
{[ ['Browse runs near you β€” or create your own', 'pace'], ['Request to join, or approve who joins yours', 'check'], ['Meeting point + group chat unlocks', 'unlock'], ['Show up and run together', 'run'], ].map(([t, icon], i) => (
{i + 1}
{t}
))}
Safety first
Phone verified Β· public meeting points Β· group chat per run Β· women-only runs supported.
); } function OnboardingScreen({ onDone, initialStep = 0, __initialPhoneSubStep = 'phone' }) { const [step, setStep] = React.useState(initialStep); const [phoneSubStep, setPhoneSubStep] = React.useState(__initialPhoneSubStep); const [signingIn, setSigningIn] = React.useState(false); const [pace, setPace] = React.useState(8); // tick index 0..14 (8 = 6:00) const [name, setName] = React.useState('Sam'); const [gender, setGender] = React.useState('Prefer not to say'); const [age, setAge] = React.useState('25–34'); const [dist, setDist] = React.useState('5K'); const [level, setLevel] = React.useState('Beginner'); const [area, setArea] = React.useState('Bristol'); const s = ONBOARD_STEPS[step]; const isLast = step === ONBOARD_STEPS.length; // 6 -> welcome screen const TOTAL = ONBOARD_STEPS.length + 1; // Sign-in overlay if (signingIn) { return setSigningIn(false)} onSignedIn={onDone}/>; } // Step 0 β€” Variation A: full-bleed video, centered "How it works" card, pinned CTA if (step === 0) { const howItWorks = [ ['Browse runs near you β€” or create your own', 'pace'], ['Request to join, or approve who joins yours', 'check'], ['Meeting point + group chat unlocks', 'unlock'], ['Show up and run together', 'run'], ]; return (