// cache-bust: 1779468723-8d9735 // ========================================================= // landing-2.jsx — remaining landing sections // Lesson preview / projects / comparison / build log / // pricing / FAQ / email capture / footer // ========================================================= const D2 = window.BL_DATA; const { useState: useState2 } = React; // ──────────────────────────────────────────────────────────────── // Lesson preview — "what a session looks like" // Mock of the interactive guided session (no video). Beat-by-beat // narration, pinned prompt, inline Claude Q&A. // ──────────────────────────────────────────────────────────────── function LessonPreview() { return (

How a lesson plays

Step through the build.
Ask Claude anything.

Each episode is a guided session — not a video. Read the beat, copy the pinned prompt, run the patch. Stuck? Ask Claude inline. It already has the lesson's context loaded.

); } function SessionMock() { return (

{ window.location.hash = '#ep/1.0'; }} className="bl-card" style={{ overflow: 'hidden', boxShadow: '0 30px 80px -30px rgba(26,22,18,.2)', cursor: 'pointer', transition: 'transform .2s, box-shadow .2s', }}> {/* Header — episode + current beat title + nav */}

EPISODE 1.0 · BEAT 03 / 08 Scaffold the design canvas

{/* Beat progress bar */}

{[0,1,2,3,4,5,6,7].map((i) => ( ))}

{/* Two-column body — narration + pinned prompt */}

{/* narration */}

NARRATION

Open Claude Desktop and start a fresh project. Attach two references — the live reloadin5.com home page and a Stripe pricing page you like.

Now paste the prompt on the right. The designer scaffolds the whole landing page in HTML — hero, modules, pricing — on one canvas. You're not coding yet. You're locking the shape.

2 min · read at your pace

{/* pinned prompt */}

PINNED PROMPT

{`You are a premium product designer
working on the Build Lab landing page.
Tone: engineer-built, not marketing.
Warm coral on cream paper.

Use design_canvas. Lay out:
  - desktop landing (1440)
  - mobile landing (390)

Expose tweaks for:
  accent color, density, lock-state.`}

{/* Inline Claude Q&A */}

ASK CLAUDE · INLINE

{'> '}you{' '} where do I find the Tweaks panel after the canvas loads?

{'> '}claude{' '} Top-right of the canvas — slider icon. Tweaks are scoped to whichever artboard is selected, so click the desktop frame first.

{'>'} ask a follow-up about this beat… ⏎

fig 03 · a beat in motion. read it. copy the prompt. ask anything that snags.

); } function SessionSidecar() { const beats = [ { n: '01', name: 'Set up a fresh Claude project', done: true, active: false }, { n: '02', name: 'Attach reference screenshots', done: true, active: false }, { n: '03', name: 'Scaffold the design canvas', done: false, active: true }, { n: '04', name: 'Iterate live with Tweaks', done: false, active: false }, { n: '05', name: 'Add mobile + TikTok artboards', done: false, active: false }, { n: '06', name: 'Comment-driven single-element fix', done: false, active: false }, { n: '07', name: 'Export HTML as your blueprint', done: false, active: false }, { n: '08', name: 'Translate to Vite for the real build', done: false, active: false }, ]; return (

EPISODE 1.0 · BEATS

Design the whole site in Claude — before you write code

8 BEATS · ~12 MIN · INTERACTIVE

{beats.map((b, i) => (

{b.done ? '✓' : b.n} {b.name}

))}

PINNED IN THIS SESSION

{[ ['design-prompt.txt', '684 B'], ['canvas-export.html', '14.2 KB'], ['vite-blueprint-checklist.md', '1.1 KB'], ].map((f, i) => (

📎 {f[0]} {f[1]}

))}

); } // ──────────────────────────────────────────────────────────────── // What you'll build // ──────────────────────────────────────────────────────────────── function WhatYouBuild() { return (

What you'll build

Eight working things.
Yours to keep.

Each project is a working tool, not a tutorial. You finish the lab with code that runs and a deploy URL.

{D2.projects.map((p, i) => (

{p.emoji}

PROJECT 0{i + 1}

{p.title}

{p.tag}

))}

); } // ──────────────────────────────────────────────────────────────── // Comparison table // ──────────────────────────────────────────────────────────────── function Comparison() { const { cols, rows } = D2.comparison; const cell = (v) => { if (v === true) return ●; if (v === false) return —; if (v === 'partial' || v === 'sometimes' || v === 'maybe') { return {v}; } return {v}; }; return (

How it compares

Why this and not the rest.

{/* header row */}

FEATURE

{cols.map((c, i) => (

{c}

{i === 0 && (

← THIS PAGE

)}

))}

{/* rows */} {rows.map((r, i) => (

{r[0]}

{[1, 2, 3, 4].map((j) => (

{cell(r[j])}

))}

); } // ──────────────────────────────────────────────────────────────── // Build log — commit-style feed // ──────────────────────────────────────────────────────────────── function BuildLog() { const tagColor = { episode: 'var(--accent)', short: 'var(--lavender)', commit: 'var(--sage)', feature: 'var(--amber)', docs: 'var(--blue)', }; return (

Recently shipped

What I built
this week.

The lab is alive. New episodes ship constantly. This is the actual commit log — pulled from the repo that powers reloadin5.com, filtered to what affects the curriculum.

git log --pretty=oneline --since=1.week ● syncing

{D2.build_log.map((e, i) => (

{e.when} {e.tag} {e.msg}

))}

); } // ──────────────────────────────────────────────────────────────── // Pricing // ──────────────────────────────────────────────────────────────── function Pricing() { return (

Pricing

Four ways in.
One that pays for itself.

The lifetime price goes up with every new module. Today there are five. The roadmap has nine.

{D2.pricing.map((p) => ( ))}

all prices in USD · stripe checkout · invoice / vat / vendor TIN available

); } function PriceCard({ p }) { const isFeatured = p.featured; const isDark = p.id === 'lifetime'; const bg = isFeatured ? 'var(--accent-tint)' : isDark ? 'var(--dark)' : 'var(--surface-1)'; const text = isFeatured ? 'var(--dark)' : isDark ? 'var(--bone)' : 'var(--ink)'; const muted = isFeatured ? 'var(--ink-dim)' : isDark ? 'var(--bone-mute)' : 'var(--ink-dim)'; const border = isFeatured ? 'var(--accent)' : isDark ? 'var(--dark)' : 'var(--line-paper)'; let btnClass = 'bl-btn-ghost'; if (p.ctaKind === 'accent') btnClass = 'bl-btn-accent'; if (p.ctaKind === 'ghost-dark') btnClass = 'bl-btn-dark'; const _pc_auth = window.useBLAuth ? window.useBLAuth() : null; const [_pc_loading, _pc_setLoading] = React.useState(false); const [_pc_error, _pc_setError] = React.useState(''); async function _pc_onClick() { _pc_setError(''); // Free preview tier → scroll to curriculum if (p.id === 'preview') { const target = document.getElementById('curriculum'); if (target) target.scrollIntoView({ behavior: 'smooth' }); return; } // Paid tiers — login required first if (!_pc_auth || !_pc_auth.isLoggedIn) { if (_pc_auth) _pc_auth.openLogin(); return; } _pc_setLoading(true); try { const res = await fetch('/api/build/checkout', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + _pc_auth.token }, body: JSON.stringify({ tier: p.id }), }); if (!res.ok) { const data = await res.json().catch(() => ({})); throw new Error((data && data.error) || 'Checkout failed (HTTP ' + res.status + ')'); } const data = await res.json(); if (data && data.url) { window.location.href = data.url; } else { throw new Error('No checkout URL returned'); } } catch (err) { _pc_setError((err && err.message) || 'Something went wrong'); _pc_setLoading(false); } } return (

{isFeatured && (

Real questions.
Real answers.

Got one I haven't covered? Send it to the email at the bottom. Real human reply, usually same day.

{D2.faq.map((q, i) => (

setOpen(open === i ? -1 : i)} style={{ borderTop: '1px solid var(--line-paper-2)', borderBottom: i === D2.faq.length - 1 ? '1px solid var(--line-paper-2)' : 'none', padding: '20px 0', cursor: 'pointer', }}>

{String(i + 1).padStart(2, '0')} {q.q} +

{open === i && (

{q.a}

)}

))}

); } // ──────────────────────────────────────────────────────────────── // Email capture + footer // ──────────────────────────────────────────────────────────────── function EmailCapture() { const [emailVal, setEmailVal] = React.useState(''); const [status, setStatus] = React.useState(null); // null | 'sending' | 'sent' | 'error' const [errorMsg, setErrorMsg] = React.useState(''); async function submitEmail() { const e = emailVal.trim(); if (!e || !e.includes('@')) { setErrorMsg('Enter a valid email'); setStatus('error'); return; } setStatus('sending'); setErrorMsg(''); try { const res = await fetch('/api/build/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: e, source: 'landing' }), }); const data = await res.json().catch(() => ({})); if (res.ok && data.ok) { setStatus('sent'); } else { setErrorMsg(data.error || 'Something went wrong'); setStatus('error'); } } catch (err) { setErrorMsg('Connection error — try again'); setStatus('error'); } } return ( ); } function Footer() { return ( ); } Object.assign(window, { LandingLessonPreview: LessonPreview, LandingProjects: WhatYouBuild, LandingComparison: Comparison, LandingBuildLog: BuildLog, LandingPricing: Pricing, LandingFAQ: FAQ, LandingEmailCapture: EmailCapture, LandingFooter: Footer, });

Step through the build. Ask Claude anything.

Eight working things. Yours to keep.

Why this and not the rest.

What I built this week.

Four ways in. One that pays for itself.

Real questions.Real answers.

Get the free episode and the patch script in your inbox.

Step through the build.
Ask Claude anything.

Eight working things.
Yours to keep.

What I built
this week.

Four ways in.
One that pays for itself.

Real questions.
Real answers.

Get the free episode
and the patch script in your inbox.