/* kit.jsx — "Take it off the screen" offer page. Two-track monetization that respects the free-course ethic: • START NOW (zero inventory): a name-your-price PDF guide, a pre-order printed book, and a parts list with affiliate links to real retailers. Earns commission + builds an email list from day one. • COMING SOON (waitlist): the assembled Beacon kit + a classroom pack. The course itself never goes behind a paywall. Shared globals come from shared.jsx; keep all names kit*-prefixed. ── TO GO LIVE: swap these placeholders for your real links ────────────── STORE.pdf / STORE.print → your Gumroad / Lulu / Stripe product URLs. RETAILERS[].url → your affiliate-tagged deep links. Leave a URL as "" to route that action through the email modal instead. */ const { useState, useEffect } = React; const STORE = { pdf: "", // e.g. "https://yourname.gumroad.com/l/field-guide" — empty = email-capture flow print: "", // e.g. "https://www.lulu.com/..." — empty = pre-order email flow }; const RETAILERS = [ { name: "Adafruit", note: "Curated and beginner-friendly. Their Parts Pal covers most of this list.", url: "https://www.adafruit.com" }, { name: "SparkFun", note: "Famous for plain-English tutorials alongside the parts.", url: "https://www.sparkfun.com" }, { name: "DigiKey", note: "Every exact component, shipped worldwide. Best for precise values.", url: "https://www.digikey.com" }, { name: "Amazon", note: "Fastest option — a single breadboard starter kit covers nearly everything.", url: "https://www.amazon.com/s?k=electronics+breadboard+starter+kit" }, ]; /* exploded line-art of the finished Beacon — drawn from styles.css tokens only */ function KitBeaconArt() { return (
The Beacon · what you build
{/* breadboard slab */} {Array.from({ length: 17 }).map((_, i) => ( ))} {/* three LEDs up top, glowing */} {[150, 210, 270].map((x, i) => ( ))} {/* 555 timer chip */} 555 {/* transistor */} Q {/* resistor */} {/* capacitor */} C {/* 9V battery */} 9V FLASHING SIGNAL BEACON · ~14 mA · RUNS ALL NIGHT
); } const KIT_BOM = [ { q: "×1", n: "Solderless breadboard", d: "400 tie-points" }, { q: "×3", n: "Red LEDs", d: "5 mm, 2 V drop" }, { q: "×1", n: "555 timer IC", d: "the blink engine" }, { q: "×1", n: "NPN transistor", d: "2N3904 switch" }, { q: "×1", n: "Signal diode", d: "1N4148" }, { q: "×20", n: "Resistor assortment", d: "120 Ω – 10 kΩ, ¼ W" }, { q: "×4", n: "Capacitors", d: "0.1 µF & 10 µF" }, { q: "×2", n: "Pushbuttons", d: "tactile, for switch logic" }, { q: "×1", n: "9 V battery + clip", d: "powers it all" }, { q: "×1", n: "Jumper wire pack", d: "pre-cut, tidy" }, { q: "×1", n: "Light sensor (LDR)", d: "auto-on at dusk" }, { q: "×1", n: "Quick-start card", d: "links back to the course" }, ]; /* one modal, three jobs: email me the PDF / pre-order the book / join a waitlist. `kind` drives the copy; nothing is stored until the user hits send. */ const MODAL_COPY = { pdf: { kick: "Get the guide", cta: "Email me the guide", done: (e) => <>We’ll email a copy to {e} too. It’s ready to read right now — open it below, then hit ⌘P to save your own PDF. Name-your-price, so it’s yours even at $0. }, preorder: { kick: "Pre-order", cta: "Notify me at launch", done: (e) => <>You're first in line. We'll email {e} the moment the printed guide is ready to order. }, waitlist: { kick: "Reserve", cta: "Notify me", done: (e) => <>You're on the list. We'll email {e} when it ships. Until then, every circuit is yours to design on screen — free. }, }; function KitWaitlist({ open, onClose }) { const [email, setEmail] = useState(""); const [done, setDone] = useState(false); useEffect(() => { if (open) { setDone(false); setEmail(""); } }, [open]); if (!open) return null; const c = MODAL_COPY[open.kind] || MODAL_COPY.waitlist; const submit = () => { if (email.trim()) setDone(true); }; return (
e.stopPropagation()}> {!done ? ( <>
{c.kick} · {open.flag}

{open.title}

{open.blurb}{open.kind === "waitlist" ? " Drop an email and we’ll tell you the moment it ships — no account, no spam, one message." : " No account, no spam — one email."}

setEmail(e.target.value)} onKeyDown={(e) => e.key === "Enter" && submit()} autoFocus />

We store nothing until you hit send. The course stays 100% free either way.

) : ( <>
✓

{open.kind === "pdf" ? "On its way." : "You’re in."}

{c.done(email)}

{open.kind === "pdf" ? ( <>
Level 1 · The Water Rules → Level 2 · The Parts Catalog → Level 3 · The Build →
or the complete edition (all three in one) →
) : ( )} )}
); } function KitApp() { const [t, setTweak] = useTweaks({ theme: "paper", audience: "adult" }); useCrossChapterPersistence(t, setTweak); useEffect(() => { document.body.setAttribute("data-theme", t.theme); }, [t.theme]); const kids = t.audience === "kids"; const [modal, setModal] = useState(null); // open the email modal, OR follow a real store link if one is configured const act = (offer) => { if (offer.link) { window.open(offer.link, "_blank", "noopener"); return; } setModal(offer); }; const guides = [ { kicker: "Read it anywhere", title: <>The Field Guide PDFs, sub: kids ? "Three little books — one for each level. Read just the one you're on, on any screen." : "Three per-level volumes — the Water Rules, the Parts Catalog, and the Build. Each a focused, beautifully typeset PDF, yours to keep and print.", price: "Free", per: "name your price · 3 volumes", items: ["One slim PDF per level", "Read just the level you're on", "Reads on phone, tablet, desktop", { t: "Pay $0 — or tip if it helped", muted: false }], cta: "Get the PDFs", foot: "Instant · name-your-price", flag: "Field Guide PDFs", kind: "pdf", link: STORE.pdf, blurb: kids ? "Three little books, one per level." : "Three per-level volumes — yours to keep.", }, { kicker: "Read it on paper", title: <>The Printed Field Guide, sub: kids ? "A real book you can flip through and scribble in, with all the pictures on nice paper." : "A ~180-page printed book with margins built for notes. The PDF is included the day it ships.", price: "35", per: "ships worldwide · PDF included", items: ["Lay-flat softcover", "Every diagram, print-resolution", "Notes margins on each spread", { t: "PDF bundled in", muted: false }], cta: "Pre-order the book", foot: "First print run · Q3 2026", flag: "Printed Guide", kind: "preorder", link: STORE.print, blurb: "The printed field guide — the whole course as a book.", featured: true, }, ]; const future = [ { kicker: "Build it on your desk", title: <>The Beacon Kit, sub: kids ? "A box with everything to build your very own flashing beacon for real — the lights, the chip, the battery, all of it." : "Every part you sized on screen, kitted into one box. Nothing to solder — it's all solderless. Build the exact Beacon you engineered.", price: "39", per: "kit · everything included", items: ["All 12 parts (full list below)", "Maps 1:1 onto every Level 2 build", "Quick-start card → the course", { t: "Field-guide PDF bundled in", muted: false }], cta: "Join the waitlist", foot: "First run ships Q3 2026", flag: "Beacon Kit", kind: "waitlist", blurb: "The complete Beacon kit — every part, one box.", featured: true, }, { kicker: "Teach the room", title: <>The Classroom Pack, sub: kids ? "A big set for a whole class or club — enough kits and books for everyone to build together." : "Ten kits, ten guides, and a teacher sheet that maps each chapter to a 45-minute lesson. For clubs, classrooms, and makerspaces.", price: "480", per: "10 seats · invoiced", items: ["10 Beacon kits + 10 guides", "Lesson-by-lesson teacher sheet", "Printable worksheets & answer keys", { t: "Volume pricing past 30 seats", muted: true }], cta: "Request a quote", foot: "POs welcome", flag: "Classroom Pack", kind: "waitlist", blurb: "Ten kits, ten guides, and a teacher sheet for the room.", }, ]; const OfferCard = (o) => (
{o.featured && {o.flagText || "Most popular"}}
{o.kicker}

{o.title}

{o.sub}

{/^\d/.test(o.price) ? ${o.price} : {o.price}} {o.per}
act(o)} style={{ cursor: "pointer" }}>{o.cta} {o.foot}
); return ( <> setTweak("audience", v)} />
{/* hero */}
← Course map ·Take it off the screen

{kids ? <>You built it on screen.
Now build it for real. : <>You designed it on screen.
Now hold it in your hands.}

{kids ? <>The whole course is free, forever. When you're ready to build the Beacon for real, grab the parts today — or wait for the ready-made box. : <>Every chapter quietly engineers one device: the Beacon. The lessons stay free forever. Two ways to make it real — grab the parts and the guide today, or reserve the ready-made kit.}

{kids ? "Get the parts now →" : "Start today · get the parts →"} Read the field guide
{/* ── TRACK A · start today ── */}
● Available now

Start today — no waiting.

{kids ? "Two things you can get right now: the guide to read, and the parts to build with." : "Everything here ships (or downloads) the moment you ask. Zero back-order — read the guide and gather the parts this week."}

{guides.map(OfferCard)}
{/* direct per-level PDF strip — grab one volume without the email step */}
{[ { n: "1", t: "The Water Rules", d: kids ? "the rules of flow" : "ch 1–5 · the rules of flow", href: "field-guide-l1.html" }, { n: "2", t: "The Parts Catalog", d: kids ? "the real parts" : "ch 6–10 · the real components", href: "field-guide-l2.html" }, { n: "3", t: "The Build", d: kids ? "build it for real" : "breadboard, Beacon & projects", href: "field-guide-l3.html" }, ].map((v) => ( Level {v.n} {v.t} {v.d} Open PDF → ))}

{kids ? "Each one is free — open it, then print or save it however you like." : "Each volume is free and name-your-price. Open it in a new tab, then hit "} {!kids && ⌘P}{!kids && " to save your own PDF."}

{/* parts / affiliate */}

Source the parts yourself.

{kids ? "Here's the shopping list for the Beacon. Pick a shop below — a grown-up can help you order." : "The Beacon needs just twelve common parts (a few dollars total). Pick a retailer and gather them — each stocks everything on this list."}

{RETAILERS.map((r) => (
{r.name} {r.note} Shop {r.name} →
))}

A note on these links: some are affiliate links — buy through them and the course earns a small commission, at no extra cost to you. It's one of the ways the lessons stay free. The exact part numbers also live on the About & safety page.

{/* BOM strip */}

The shopping list

12 parts · enough for every Level 2 build
{KIT_BOM.map((b) => (
{b.q}
{b.n}
{b.d}
))}
{/* ── TRACK B · coming soon ── */}
◷ In the works

Or wait for the ready-made box.

{kids ? "Don't want to shop for parts? We're putting together a box with everything inside. Add your email and we'll tell you when it's ready." : "If you'd rather not gather parts, we're assembling a kitted box — every component counted and packed. Reserve a spot and we'll email you at launch. No charge until it ships."}

{future.map(OfferCard)}
{/* free-forever reassurance */}
Always free

The course never goes behind a paywall.

{kids ? <>Every lesson, every animation, every puzzle stays free for everyone. The guide and the kit are just for people who want to build it with their hands — you never have to buy anything to learn. : <>Every lesson, simulation, quiz, and capstone stays free for everyone, no sign-in required. The guide, parts, and kit exist for the moment you want to leave the screen — they fund the work without ever gating it. Nothing you’ve learned is locked.}

{/* closing line */}
One device, the whole way through

Learn it, design it, hold it.

Get started →
setModal(null)} /> ); } ReactDOM.createRoot(document.getElementById("root")).render();