// ============================================ // RACEFORM — Single-file React app // Tech / startup aesthetic // ============================================ const { useState, useEffect, useRef } = React; const Logo = ({ size = 20, color = "var(--ink)" }) => (
Raceform
); const useReveal = () => { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }), { threshold: 0.1 }); io.observe(el); return () => io.disconnect(); }, []); return ref; }; // ── NAV ───────────────────────────────── const Nav = () => { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); }; // ── HERO ──────────────────────────────── const Hero = () => (
NEW Garmin live tracking is here →

The training app
that fits your life.

Connect your watch. Tell us your week. Get an adaptive plan that learns from your data, your feedback, and the days you'd rather skip.

Start free for 14 days → See how it works
No credit card · Cancel anytime
); const ProductHero = () => { const ref = useReveal(); return (
{["#FF5F57","#FEBC2E","#28C840"].map(c =>
)}
app.raceform.app/today
TUE · APR 28
Good morning, Anders.
Apple Watch synced
{[ { l: "Readiness", v: "87", t: "+12 vs avg", up: true }, { l: "Resting HR", v: "52", t: "−2 bpm", up: true }, { l: "Sleep", v: "7h 24m", t: "Quality 84%" }, { l: "Load (7d)", v: "412", t: "Productive" }, ].map(s => (
{s.l.toUpperCase()}
{s.v}
{s.up && "↑ "}{s.t}
))}
TODAY · 52 MIN
Threshold intervals
5 × 4min @ 4:30/km · 2min recovery
{["WU","1","R","2","R","3","R","4","R","5","CD"].map((s, i) => (
{s}
))}
); }; // ── MARQUEE ───────────────────────────── const Marquee = () => { const items = ["Apple Watch","Apple Fitness","Apple Health","Garmin","Polar"]; return (

WORKS WITH EVERY DEVICE YOU ALREADY OWN

{[...items, ...items].map((w, i) => ( {w} ))}
); }; // ── HOW IT WORKS ──────────────────────── const HowItWorks = () => { const steps = [ { n: "01", t: "Connect your devices", b: "Apple Watch, Garmin, Whoop, Coros — link in one tap. We pull six months of history and start learning what good looks like for you." }, { n: "02", t: "Tell us your week", b: "Travel Tuesday? Big lift Thursday? Tell Raceform what life looks like — your plan reshapes around it, not the other way around." }, { n: "03", t: "Train, recover, race", b: "A session that fits today. A weekly recap that makes you smarter. A race-day predictor that sharpens with every run." }, ]; return (
— How it works

Three steps to a plan
that actually fits.

{steps.map((s, i) => { const ref = useReveal(); return (
{s.n}

{s.t}

{s.b}

); })}
); }; // ── FEATURES ──────────────────────────── const Features = () => (
— Product

Built for the messy
middle of your week.

}/> }/> }/>
); const FCard = ({ wide, tag, t, b, v, tone = "paper" }) => { const ref = useReveal(); const styles = { paper: { background: "var(--bg)", color: "var(--ink)", border: "1px solid var(--line)" }, dark: { background: "var(--ink)", color: "white", border: "1px solid var(--ink)" }, accent: { background: "var(--accent)", color: "white", border: "1px solid var(--accent-2)" }, }[tone]; return (
{tag}

{t}

{b}

{v &&
{v}
}
); }; const AdaptiveVis = () => (
WEEK 6 · ADAPTED ● live
{[{h:30,c:"var(--bg-3)"},{h:70,c:"var(--accent)"},{h:50,c:"var(--ink)"},{h:18,c:"var(--bg-3)"},{h:60,c:"var(--accent)"},{h:95,c:"var(--ink)"},{h:8,c:"var(--bg-3)"}].map((d, i) => (
))}
↳ Thursday flight detected — long run moved to Saturday
); const ReadinessRing = () => (
82
Push it just a bit
HRV up · sleep solid
); const Predictor = () => (
MARATHON
3:24:18
↓ 4:42 since week 1
); // ── SAMPLE WEEK ───────────────────────── const SampleWeek = () => { const [active, setActive] = useState(1); const week = [ { day: "MON", date: "27", type: "Easy run", time: "32 min", detail: "Z2 · keep it boring", c: "muted" }, { day: "TUE", date: "28", type: "Threshold", time: "52 min", detail: "5 × 4min @ 4:30/km", c: "accent", today: true }, { day: "WED", date: "29", type: "Strength", time: "48 min", detail: "Squat · pull · accessories", c: "ink" }, { day: "THU", date: "30", type: "Recovery", time: "20 min", detail: "Mobility + walk", c: "muted", note: "Lower readiness — kept light." }, { day: "FRI", date: "01", type: "Hill repeats", time: "44 min", detail: "8 × 60s @ 5k effort", c: "accent" }, { day: "SAT", date: "02", type: "Long run", time: "1h 38m", detail: "20km · last 5 @ MP", c: "ink" }, { day: "SUN", date: "03", type: "Rest", time: "—", detail: "Earned. Take it.", c: "muted" }, ]; const colors = { accent: { bg: "var(--accent)", fg: "white" }, ink: { bg: "var(--ink)", fg: "white" }, muted: { bg: "var(--bg-2)", fg: "var(--ink-3)" } }; const a = week[active]; return (
— Sample week

A real week,
planned for you.

Hybrid · Marathon · Wk 6/14
{week.map((d, i) => { const isActive = i === active; const c = colors[d.c]; return ( ); })}
{a.day} · APR {a.date} {a.note && ADAPTED}

{a.type}

{a.detail}

{a.note && (
Today — {a.note} Tomorrow we pick volume back up.
)}
{[["Duration", a.time], ["Type", a.type], ["RPE", a.c === "accent" ? "8/10" : a.c === "ink" ? "7/10" : "4/10"]].map(([l, v]) => (
{l}
{v}
))}
SESSION PACING
{[ { l: "Warm-up", p: "10min · 6:10/km", w: 30 }, { l: "Work × 5", p: "4min · 4:30/km", w: 95, hot: true }, { l: "Recover × 4", p: "2min · 6:00/km", w: 22 }, { l: "Cool-down", p: "10min · 6:30/km", w: 30 }, ].map((p, i) => (
{p.l} {p.p}
))}
); }; // ── PHONE DEMO ────────────────────────── const PhoneDemo = () => { const [screen, setScreen] = useState("home"); return (
— Try it

Tap around.
It's the real product.

Same flows our beta athletes wake up to every morning.

{[ { id: "home", l: "Today" }, { id: "plan", l: "Choose your sport" }, { id: "workout", l: "Live workout" }, ].map((s, i) => ( ))}
{screen === "home" && ( Raceform AI training plan screen )} {screen === "plan" && ( Raceform choose your sport onboarding screen )} {screen === "workout" && (
9:41● ▮
)}
); }; const LiveWorkout = () => { const [running, setRunning] = useState(false); const [t, setT] = useState(0); useEffect(() => { if (!running) return; const id = setInterval(() => setT(x => x + 1), 1000); return () => clearInterval(id); }, [running]); const m = String(Math.floor(t / 60)).padStart(2, "0"); const s = String(t % 60).padStart(2, "0"); return (
INTERVAL 2 OF 5
{m}:{s}
4:30/km · stay smooth
{[["HR", "168"], ["PACE", "4:28"], ["DIST", "2.4"]].map(([l, v]) => (
{l}
{v}
))}
); }; // ── TESTIMONIALS ──────────────────────── const Testimonials = () => { const data = [ { q: "I went from spreadsheet hell to actually showing up. Hit a 7-min marathon PR while still squatting twice a week.", n: "Sara M.", r: "Hyrox · Marathon 3:18" }, { q: "First app where the strength and run sides talk to each other. The adaptive plan saved my hamstrings.", n: "Daniel K.", r: "Hybrid athlete" }, { q: "I've tried six coaching apps. Raceform is the only one I haven't quit after week three.", n: "Maja T.", r: "First-time runner" }, ]; return (
— Athletes

Built by athletes.
Loved by athletes.

{data.map((t, i) => (

"{t.q}"

{t.n[0]}
{t.n}
{t.r}
))}
{[ { v: "2,847", l: "Active athletes" }, { v: "94%", l: "Stick with their plan" }, { v: "4.9/5", l: "App Store rating" }, { v: "12 min", l: "Avg PR drop in 12 wks" }, ].map(s => (
{s.v}
{s.l.toUpperCase()}
))}
); }; // ── FAQ ───────────────────────────────── const FAQ = () => { const items = [ { q: "Do I need a smartwatch?", a: "Strongly recommended. Apple Watch, Garmin, Coros, Whoop and Polar all work natively. You can use the iPhone alone, but readiness gets less precise without HRV/sleep data." }, { q: "Is this just ChatGPT in a tracksuit?", a: "No. Our adaptive engine is a custom training model built on years of coaching IP, not a wrapped LLM. The optional human coach is, well, a real human." }, { q: "I'm new to running. Is this too advanced?", a: "Raceform meets you where you are. Tell us your goal — finish a 5k, run without stopping, lose weight — and we'll build from there." }, { q: "Can I keep lifting?", a: "Yes — that's the whole point. Hybrid is our default mode. We balance strength and run volume so neither side suffers." }, { q: "What if I miss a workout?", a: "We rebalance the week. No catch-up doom-runs, no shame. Move on." }, { q: "How much does it cost?", a: "$14/month or $120/year after a 14-day free trial. Add a human coach for $40/month." }, ]; return (
— FAQ

Asked
and answered.

{items.map((it, i) => (
{it.q} +

{it.a}

))}
); }; // ── CTA ───────────────────────────────── const CTA = () => { const [submitted, setSubmitted] = useState(false); return (
— Get started

Train like
it's yours.

Join the Raceform early access list. Enter your email and confirm it from your inbox to complete signup.

{submitted ? (
CHECK YOUR EMAIL
Almost there.

We’ve sent a verification email to confirm your spot on the Raceform early access list.

Click the confirmation link to complete signup — and check your spam or promotions folder if you don’t see it.

) : ( <>
{ setTimeout(() => setSubmitted(true), 900); }} >
EMAIL
Two-step email verification · no spam
)}
); }; // ── FOOTER ────────────────────────────── const Footer = () => (

Adaptive training for hybrid athletes. Made by runners and lifters in Copenhagen.

{[ { t: "Product", links: ["Features", "Sample week", "Pricing", "Changelog"] }, { t: "Company", links: ["About", "Coaches", "Press kit", "Careers"] }, { t: "Resources", links: ["Help", "Privacy", "Terms", "Contact"] }, ].map(col => (
{col.t}
{col.links.map(l => ( {l} ))}
))}
© 2026 Raceform ApS · Copenhagen v 2.4.1
); // ── APP ───────────────────────────────── const App = () => ( <>