Scout is searching 2.4b+ profiles to find you candidates in with skills, who have } label="Email" />

{done ? ( 1,025 · <15s ) : ( Searching… )}

); } // ---------- Filter rail --------------------------------------------------- function ScoutFilterRail({ compact, onReset }) { const filters = [ { label: 'Job requirements', count: 4, icon: Icon.briefcase({ size: 14, color: SCOUT_TOKENS.ink }), active: true }, { label: 'Pay expectations', sub: 'From $140,000 p.a.', icon: $ }, { label: 'Location & work', count: 2, icon: Icon.pin({ size: 14, color: SCOUT_TOKENS.ink }) }, { label: 'Contact preferences', count: 1, icon: Icon.users({ size: 14, color: SCOUT_TOKENS.ink }) }, { label: 'Date filters', sub: 'Last week', icon: Icon.calendar({ size: 14, color: SCOUT_TOKENS.ink }) }, ]; return (

{/* nav arrows */}

{Icon.search({ size: 13 })} {Icon.chevR({ size: 13 })}

{/* stat summary rows */}

1,025 results

2 keywords

1 smart

{/* progress */}

78%

{/* filter items */}

{filters.slice(0, compact ? 3 : 5).map((f) => (

{f.icon}

{f.label}{f.count ? ` (${f.count})` : ''}

{f.sub &&

{f.sub}

}

))}

{/* reset */}

); } // ---------- Candidate card ------------------------------------------------ function ScoutCandidateCard({ c, visible, delay, compact, unlocked, onAdvance }) { const tone = unlocked ? 'gold' : 'blue'; const handleClick = (e) => { if (unlocked) return; const rect = e.currentTarget.getBoundingClientRect(); onAdvance(c.name, rect.left + rect.width / 2, rect.top + rect.height / 2); }; return (

{/* avatar + name + location */}

{c.name}

New Zealand, Auckland

{/* company squircle + role + company */}

{c.role}

{c.company}

{/* chips */}

{!compact && }

{/* Advance */}

); } // ---------- Main demo ----------------------------------------------------- // `bare` strips the outer panel chrome (bg / shadow / border / padding / ambient glow) // and keeps the body collapsed until the search completes, so the pill appears to // "drop down" the rest of the UI. Used on the /scout hero. function ScoutDemo({ autoplay = true, compact = false, bare = false }) { const [phase, setPhase] = React.useState('idle'); // idle | typing | searching | done const [typed, setTyped] = React.useState(''); const [unlocked, setUnlocked] = React.useState(() => new Set()); const fullQuery = 'Find me senior software engineers in Auckland with React experience'; const ref = React.useRef(null); const inView = useInView(ref, 0.15); const handleAdvance = React.useCallback((name, x, y) => { setUnlocked(prev => { if (prev.has(name)) return prev; const next = new Set(prev); next.add(name); return next; }); if (typeof window !== 'undefined' && typeof window.fireConfetti === 'function') { window.fireConfetti(x, y, { count: 90, colors: ['#FFC935', '#FFEEC3', '#B28815', '#FE833B', '#FFFFFF', '#0084FF'], }); } }, []); const handleReset = React.useCallback(() => { setUnlocked(new Set()); }, []); React.useEffect(() => { if (!autoplay || !inView) return; let t, i = 0; setTyped(''); setPhase('typing'); const type = () => { if (i <= fullQuery.length) { setTyped(fullQuery.slice(0, i)); i++; t = setTimeout(type, 22 + Math.random() * 14); } else { setPhase('searching'); t = setTimeout(() => setPhase('done'), 900); } }; t = setTimeout(type, 400); return () => clearTimeout(t); }, [autoplay, inView]); const visibleCount = phase === 'done' ? SCOUT_DEMO_CANDIDATES.length : 0; const showBody = phase !== 'idle'; const bodyRevealed = bare ? phase === 'done' : showBody; const cards = SCOUT_DEMO_CANDIDATES.slice(0, compact ? 4 : 6); return (

{/* ambient blue glow — only with chrome */} {!bare && (

)}

{cards.map((c, i) => ( i} delay={i * 80} compact={compact} unlocked={unlocked.has(c.name)} onAdvance={handleAdvance} /> ))}

); } /* ============================================================ CandidatesTable — snapshot of the All Candidates view ============================================================ */ const CANDIDATE_ROWS = [ { name: 'Georgia Bermann', role: 'Enterprise Account Executive', company: 'Salesforce', shortlisted: true, status: 'Open · Actively seeking', statusTone: 'green' }, { name: 'Marcus Ross', role: 'Senior Full Stack Developer', company: 'Atlassian', shortlisted: true, status: 'Open · Under offer', statusTone: 'blue' }, { name: 'Priya Gupta', role: 'Lead Data Scientist', company: 'Netflix', shortlisted: true, status: 'Interviewing', statusTone: 'purple' }, { name: 'Allan Haigh', role: 'Cyber Security Analyst', company: 'Canva', shortlisted: true, status: 'Open · Under offer', statusTone: 'blue' }, { name: 'Liam O’Connor', role: 'Product Marketing Manager', company: 'Spotify', shortlisted: false, status: 'Not seeking', statusTone: 'red' }, { name: 'Rachelle Beaudry',role: 'Digital Marketing Specialist', company: 'Airbnb', shortlisted: true, status: 'Open · Actively seeking', statusTone: 'green' }, { name: 'Jessica Lee', role: 'Design Analyst', company: 'Xero', shortlisted: false, status: 'Not seeking', statusTone: 'red' }, { name: 'Elias Thorne', role: 'Senior Frontend Engineer', company: 'Paypal', shortlisted: false, status: 'Not seeking', statusTone: 'red' }, ]; const STATUS_TONES = { green: { bg: '#DCFCE7', color: '#166534' }, blue: { bg: '#DBEAFE', color: '#1E40AF' }, purple: { bg: '#F3E8FF', color: '#6B21A8' }, red: { bg: '#FEE2E2', color: '#991B1B' }, }; function CandidatesTable({ rows = CANDIDATE_ROWS, showChrome = true, maxRows }) { const display = maxRows ? rows.slice(0, maxRows) : rows; return (

{showChrome && (

Candidates

)} {/* filter tabs */}

{[ { label: 'All', count: '10,000', active: true }, { label: 'Open', count: '5,529' }, { label: 'Senior React Devs', count: '106', dot: '#22C55E' }, { label: 'Product Managers', count: '1,922', dot: '#A855F7' }, { label: 'SaaS Sales', count: '338', dot: '#EF4444' }, ].map((t) => ( {t.dot && } {t.label} {t.count} ))}

{/* table header */}

Candidate name ↑↓ Title ↑↓ Shortlist Status ↑↓ Phone

{display.map((r, i) => (

{r.name} {r.shortlisted && }

{r.role}

{r.shortlisted ? '✓ Yes' : '✗ No'} {r.status} +64 22 348 3151 ♥

))}

); } /* ============================================================ ChatMock — tiny conversation snippet ============================================================ */ function ChatMock() { return (

Georgia Bermann Candidate

online

Google Meet! I've just sent the calendar invite…

); } function Bubble({ mine, text }) { return (

{text}

); } /* ============================================================ TalentPools — snapshot grid ============================================================ */ const POOLS = [ { name: 'Senior React Developers', count: 134, owner: 'Ryan', updated: '2h', color: '#2563EB' }, { name: 'Enterprise Sales Q1', count: 89, owner: 'Ryan', updated: '5m', color: '#F97316' }, { name: 'Executive Leadership', count: 27, owner: 'Sandra', updated: '1d', color: '#A855F7' }, { name: 'High Potential Finalists',count: 53, owner: 'Mike', updated: '4h', color: '#EF4444' }, { name: 'Global Tech Talent', count: 402, owner: 'Sandra', updated: '12m', color: '#0EA5E9' }, { name: 'Product Design Leads', count: 61, owner: 'Cassie', updated: '3d', color: '#EC4899' }, ]; function TalentPools() { return (

{POOLS.map((p) => (

{[0, 1, 2].map(i => ( ))}

{p.name}

{p.count} candidates

{p.owner} Updated {p.updated}

))}

); } /* ============================================================ Mobile phone frame with caliber home (used in final section) ============================================================ */ function CaliberMobile() { return (

{/* notch */}

9:41 ● ● ● ▣

{Icon.search({ size: 16, color: 'var(--cal-ink)' })} {Icon.phone({ size: 13 })}

Friday, 1 Oct

You have 3 meetings today

{/* date strip */}

{['Mon','Tue','Wed','Thu','Fri','Sat','Sun'].map((d, i) => (

{d}

{27 + i}

))}