// ToInbox — Hero demo: click job → extension detects → send application const { useState, useEffect, useRef } = React; const JOBS = [ { id: 0, co: 'Northwind', title: 'Founding Product Engineer', logo: 'N', bg: '#1e3a5f', loc: 'San Francisco', match: 94, email: 'm.v@northwind.co' }, { id: 1, co: 'Lumen AI', title: 'Head of Growth', logo: 'L', bg: '#3730a3', loc: 'Delhi, India', match: 87, email: 'theo@lumen.ai' }, { id: 2, co: 'Reed Labs', title: 'Backend Engineer', logo: 'R', bg: '#7c2d12', loc: 'Remote', match: 78, email: 'sana@reedlabs.io' }, ]; const JOB_META = [ { time: '2d ago', applicants: '784 applicants' }, { time: '1w ago', applicants: '142 applicants' }, { time: '5d ago', applicants: '61 applicants' }, ]; function JPPanel({ phase, activeJob, sentToday, stats, sendBtnRef, showDash, dashStats, dashRows, replyVisible }) { if (showDash) { return (
ToInbox Dashboard
{/* Stats row — inline styles to avoid light CSS class backgrounds */}
{[ { k: 'Sent', v: dashStats.sent, color: 'rgba(255,255,255,0.85)' }, { k: 'Opened', v: dashStats.opened, color: '#60a5fa' }, { k: 'Replied', v: dashStats.replied, color: '#4ade80' }, ].map(({ k, v, color }, i, arr) => (
{v}
{k}
))}
{dashRows.map((row, i) => (
{row.job.logo}
{row.job.co}
{row.job.email}
{row.status} {row.time}
))}
{replyVisible && (
M
Marcus Webb · Northwind
2 hours ago
"This stood out from 240+ applications. Forwarding to Priya — she'll reach out this week."
Replied Interview →
)}
); } return (
{/* Header */}
ToInbox Dashboard −
{/* Credits used today */}
{sentToday} of 42 credits used today
{/* Stats row */}
{[ { k: 'ENROLLED', v: stats.enrolled }, { k: 'SENT', v: stats.sent }, { k: 'REPLIED', v: stats.replied }, ].map(({ k, v }) => (
{v}
{k}
))}
{/* Active job card */}
{activeJob ? (
{activeJob.logo}
{activeJob.title}
{activeJob.co}
) : (
Detecting active job…
)}
{/* CTA button */}
{phase === 'detecting' && (
Send Application — 1 credit
)} {phase === 'ready' && ( )} {phase === 'sending' && (
Sending…
)} {phase === 'sent' && (
✓ Application Sent
)}
Personalized email sent from your Gmail.
); } function HeroDemo() { const [phase, setPhase] = useState('detecting'); const [selectedJobIdx, setSelectedJobIdx] = useState(null); const [activeJob, setActiveJob] = useState(null); const [sentJobs, setSentJobs] = useState([]); const [sentToday, setSentToday] = useState(0); const [stats, setStats] = useState({ enrolled: 25, sent: 21, replied: 9 }); const [showDash, setShowDash] = useState(false); const [dashStats, setDashStats] = useState({ sent: 0, opened: 0, replied: 0 }); const [dashRows, setDashRows] = useState([]); const [replyVisible, setReplyVisible] = useState(false); const [cur, setCur] = useState({ x: 320, y: 28 }); const [curClick, setCurClick] = useState(false); const browserRef = useRef(null); const jobCardRefs = useRef([]); const sendBtnRef = useRef(null); const moveTo = (el, dx = 0, dy = 0) => { if (!el || !browserRef.current) return; const br = browserRef.current.getBoundingClientRect(); const tr = el.getBoundingClientRect(); setCur({ x: tr.left - br.left + tr.width / 2 + dx, y: tr.top - br.top + tr.height / 2 + dy }); }; useEffect(() => { let dead = false; const ts = []; const wait = ms => new Promise(r => { const t = setTimeout(r, ms); ts.push(t); }); const sendJob = async (idx) => { // Move cursor to job card in left panel const card = jobCardRefs.current[idx]; if (card) moveTo(card, 0, 0); await wait(750); if (dead) return; // Click job card setCurClick(true); await wait(140); setCurClick(false); setSelectedJobIdx(idx); setPhase('detecting'); setActiveJob(null); await wait(500); if (dead) return; // Extension detects the job setActiveJob(JOBS[idx]); setPhase('ready'); await wait(550); if (dead) return; // Move cursor to Send button if (sendBtnRef.current) moveTo(sendBtnRef.current); await wait(700); if (dead) return; // Click Send button setCurClick(true); await wait(140); setCurClick(false); setPhase('sending'); await wait(900); if (dead) return; setPhase('sent'); setSentJobs(prev => [...prev, idx]); setSentToday(prev => prev + 1); setStats(prev => ({ ...prev, sent: prev.sent + 1 })); await wait(1100); if (dead) return; }; const run = async () => { while (!dead) { // Reset state setPhase('detecting'); setSelectedJobIdx(null); setActiveJob(null); setSentJobs([]); setSentToday(0); setStats({ enrolled: 25, sent: 21, replied: 9 }); setShowDash(false); setDashStats({ sent: 0, opened: 0, replied: 0 }); setDashRows([]); setReplyVisible(false); setCur({ x: 320, y: 28 }); await wait(1100); if (dead) return; await sendJob(0); if (dead) return; await wait(400); await sendJob(1); if (dead) return; await wait(400); await sendJob(2); if (dead) return; await wait(700); // Transition to dashboard setShowDash(true); setDashRows([ { job: JOBS[0], status: 'sent', time: '3h ago' }, { job: JOBS[1], status: 'sent', time: '2h ago' }, { job: JOBS[2], status: 'sent', time: '1h ago' }, ]); setDashStats({ sent: 3, opened: 0, replied: 0 }); await wait(1400); if (dead) return; setDashStats(s => ({ ...s, opened: 1 })); setDashRows(prev => { const n = [...prev]; n[0] = { ...n[0], status: 'opened' }; return n; }); await wait(1200); if (dead) return; setDashStats(s => ({ ...s, replied: 1 })); setDashRows(prev => { const n = [...prev]; n[0] = { ...n[0], status: 'replied' }; return n; }); setReplyVisible(true); await wait(3600); if (dead) return; } }; run(); return () => { dead = true; ts.forEach(clearTimeout); }; }, []); const detailJob = selectedJobIdx !== null ? JOBS[selectedJobIdx] : JOBS[0]; const detailMeta = selectedJobIdx !== null ? JOB_META[selectedJobIdx] : JOB_META[0]; return (
{/* Chrome bar */}
LinkedIn
Gmail
linkedin.com/jobs/search/?keywords=founding+engineer
{/* Three-column body */}
{/* LEFT: LinkedIn job list */}
founding engineer
{['Past week', 'Remote', 'Easy Apply'].map(f => {f})}
99+ results
{JOBS.map((j, i) => (
jobCardRefs.current[i] = el} className={`lin-job-card${selectedJobIdx === i ? ' sel' : ''}${sentJobs.includes(i) ? ' applied' : ''}`} >
{j.logo}
{j.title}
{j.co} · {j.loc}
{JOB_META[i].time} · {JOB_META[i].applicants}
Easy Apply {sentJobs.includes(i) && ✓ Applied}
))}
{/* CENTER: LinkedIn job detail — updates with selected job */}
{detailJob.logo}
{detailJob.co}
Series A · 48 employees · San Francisco

{detailJob.title}

{detailJob.loc} {detailMeta.time} {detailMeta.applicants} · Promoted
✦ Top applicant — your profile matches {detailJob.match}% of the JD
About the job
{[98, 85, 72, 90, 60, 78, 68].map((w, i) => (
))}
Skills
{['TypeScript', 'Go', 'PostgreSQL', 'React'].map(s => ( {s} ))}
Meet the hiring team
M
Marcus Webb
Head of Engineering · Northwind
{/* RIGHT: ToInbox extension panel */}
{/* Cursor */}
); } window.HeroDemo = HeroDemo;