// ────────────────────────────────────────────────────────────────── // Auth + Onboarding screens. // Welcome, Login, SignUpOptions, Onboarding 1/2/3, RoleSelection. // // Voice: terse, mat-ready, confident. System-style metadata // (build codes, timestamps) as decorative scaffolding. // ────────────────────────────────────────────────────────────────── // ── Rotating word — cycles through a list with a quick fade. ──────────── const ROTATING_WHO = ["ATHLETES", "COACHES", "GYMS", "FANS", "PARENTS"]; const RotatingWord = ({ words = ROTATING_WHO, interval = 5000, brackets = false }) => { const [idx, setIdx] = React.useState(0); const [visible, setVisible] = React.useState(true); React.useEffect(() => { const id = setInterval(() => { setVisible(false); setTimeout(() => { setIdx((i) => (i + 1) % words.length); setVisible(true); }, 220); }, interval); return () => clearInterval(id); }, [interval, words.length]); return ( {brackets ? `[${words[idx]}]` : words[idx]} ); }; // ── Welcome ────────────────────────────────────────────────────── const WelcomeScreen = ({ onSignIn, onStart, photo = "athlete" }) => { return (
{/* Full-bleed athletic photo placeholder */} {/* Dim scrim from bottom for legibility */}
{/* Subtle T-monogram watermark off to one side */} {/* Top - wordmark only */}
TAKEDOWN
{/* Bottom - headline + CTAs */}
COMBAT SPORT LIVES HERE.
HOMEBASE
FOR
.

Gear, training content, rankings, events, and sponsorships.

); }; // ── Login ──────────────────────────────────────────────────────── const LoginScreen = ({ onBack, onLogin, onForgot, onSignup }) => { const [email, setEmail] = React.useState("alex@dojo.gg"); const [pw, setPw] = React.useState("•••••••••"); return (
} />
STEP 01 · SIGN IN

Welcome back.

Pick up where your last build left off. Drafts and orders are synced.

); }; // ── SocialRow (Apple / Google / X / Meta) ──────────────────────── const SocialRow = ({ onProvider }) => { const items = [ { key: "apple", bg: "var(--text-primary)", fg: "var(--bg-primary)", icon: ( ), }, { key: "google", bg: "var(--text-primary)", fg: "var(--bg-primary)", icon: ( ), }, { key: "x", bg: "var(--text-primary)", fg: "var(--bg-primary)", icon: ( ), }, ]; return (
{items.map((s) => ( ))}
); }; // ── SignUp options ─────────────────────────────────────────────── const SignUpOptionsScreen = ({ onBack, onEmail, onSignIn }) => (
} />
JOIN THOUSANDS OF ATHLETES

Get on the mat.

Build a kit, track your record, get in front of scouts. Free to join - pay only when you order.

OR

By continuing you agree to Takedown's Terms and Privacy Policy. We're a small team in a sweaty gym; we don't sell your data.

Already on the team?
); // ── Onboarding 3-step ──────────────────────────────────────────── const ONBOARDING_STEPS = [ { code: "01 · YOUR MAT PRESENCE", title: "One profile.", body: "Log bouts, build a record, follow your room. Coaches and scouts see the same profile you do - no fragmented inbox.", photo: "mat", feature: "match log · roster · scout dm", }, { code: "02 · BUILD YOUR KIT", title: "Custom apparel.", body: "Singlets, fight shorts, rashguards on a live canvas. Pick zones, drop your logo, ship in 14 days. No minimum order.", photo: "canvas", feature: "custom designer · 7 fabric zones · made in USA", }, { code: "03 · FOR PROS", title: "On every mat that matters.", body: "Same platform RAF, PFL, and NHSCA athletes use. Get noticed by recruiters, hear about open mats, score the latest drops first.", photo: "gym", feature: "scout flags · room invites · early drops", }, ]; const OnboardingScreen = ({ step = 0, onNext, onSkip, onBack }) => { const s = ONBOARDING_STEPS[step]; const last = step === ONBOARDING_STEPS.length - 1; return (
{/* Top - skip + step indicator */}
{ONBOARDING_STEPS.map((_, i) => (
))}
{/* Photo half */}
{/* Corner crosshair marks - tactical */} {[ [16, 120, "TL"], [null, 120, "TR"], [16, null, "BL"], [null, null, "BR"], ].map(([l, t, k], i) => ( ))} {/* feature label, anchored bottom-left of photo */}
{s.feature}
{/* Copy half */}
{s.code}

{s.title}

{s.body}

{step > 0 && (
); }; const CornerMark = ({ corner = "TL", color = "rgba(255,255,255,0.5)" }) => { const size = 16; const stroke = 1.5; const offset = 14; const pos = { TL: { top: offset, left: offset }, TR: { top: offset, right: offset }, BL: { bottom: offset, left: offset }, BR: { bottom: offset, right: offset }, }[corner]; const lineH = { background: color, position: "absolute", height: stroke }; const lineV = { background: color, position: "absolute", width: stroke }; return (
); }; // ── Role selection ──────────────────────────────────────────────── const ROLES = [ { key: "athlete", code: "A · 01", title: "WRESTLER", body: "You step on the mat. Track record, study technique, get scouted. Singlets, sweats, and shoes.", moduleKey: "athlete", }, { key: "builder", code: "B · 02", title: "TEAM DESIGNER", body: "You design for your room. Manage drafts, approvals, bulk team orders. Wholesale unlocked at 12+.", moduleKey: "builder", }, { key: "coach", code: "C · 03", title: "COACH / ROOM", body: "You run a wrestling room or gym. Build a roster, post matches, scout talent.", moduleKey: "dojo", }, ]; const RoleSelectionScreen = ({ onContinue, onBack }) => { const [picked, setPicked] = React.useState("athlete"); return (
} />
STEP · ROLE

Where do you stand?

You can be more than one. Pick your primary; we'll set the rest up later.

{ROLES.map((r) => { const sel = picked === r.key; return ( ); })}
); }; Object.assign(window, { WelcomeScreen, LoginScreen, SignUpOptionsScreen, OnboardingScreen, RoleSelectionScreen, SocialRow, CornerMark, ONBOARDING_STEPS, RotatingWord, });