// Hero — pill nav + giant headline + product preview // Passes pattern: floating pill nav top-center, eyebrow + huge headline w/ gradient accent, // subhead, dual CTA (white pill + ghost), then a hero product visual function PillNav() { const [scrolled, setScrolled] = React.useState(false); const [compact, setCompact] = React.useState(() => typeof window !== 'undefined' && window.innerWidth < 760); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); const onResize = () => setCompact(window.innerWidth < 760); window.addEventListener('scroll', onScroll); window.addEventListener('resize', onResize); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); }; }, []); return ( ); } function NavItem({ label, href }) { return ( {label} ); } // Hero product preview — agent inbox card w/ live email reply being typed function HeroPreview() { const [typed, setTyped] = React.useState(''); const [compact, setCompact] = React.useState(() => typeof window !== 'undefined' && window.innerWidth < 720); const fullText = "Hi Marcus — circling on Maya Okafor's Brooklyn Steel show on Oct 18. We still need (1) hotel block confirmation for 4 rooms Oct 17–19, (2) the signed rider, and (3) the timetable. Deposit cleared yesterday. Can you have these to me by Friday?"; React.useEffect(() => { const onResize = () => setCompact(window.innerWidth < 720); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); React.useEffect(() => { let i = 0; const id = setInterval(() => { i += 1; setTyped(fullText.slice(0, i)); if (i >= fullText.length) clearInterval(id); }, 22); return () => clearInterval(id); }, []); return (
{/* App chrome */}
rellay.app/shows/maya-okafor-brooklyn-steel
{!compact && Agent active}
{/* Two pane layout */}
{/* Sidebar */} {!compact &&
Active shows
{[ { name: 'Maya — Brooklyn Steel', role: 'Oct 18 · 78% ready', unread: 3, active: true }, { name: 'Junot — Fonda LA', role: 'Oct 22 · 92% ready', unread: 0 }, { name: 'Verandas — Pickathon', role: 'Oct 25 · at risk', unread: 2 }, { name: 'Sable — Berghain', role: 'Nov 02 · 64% ready', unread: 1 }, { name: 'Lior — Primavera', role: 'Jun 06 · advancing', unread: 0 }]. map((a, i) =>
n[0]).join('').slice(0, 2)} color={a.active ? 'var(--accent-deep)' : '#1f2937'} size={28} />
{a.name}
{a.role}
{a.unread > 0 &&
{a.unread}
}
)}
} {/* Main */}
{/* Email being replied to */}
Marcus Bell · Bowery / Brooklyn Steel
9 days to show · last reply 6 days ago
{!compact &&
thread · 14 msgs
}
Last from Marcus: “Working on the hotel — should have it locked by EOW. Will send rider once production confirms the spec.” Outstanding: hotel block, signed rider, timetable.
{/* Agent reply being typed */}
Agent follow-up draft · awaiting approval
cited 4 prior threads + show packet · risk: hotel
3 actions queued
{typed}
{/* Action chips */}
); } function ActionChip({ icon, label }) { return (
{label}
); } function Hero() { return (
{/* Ambient cyan glow behind hero */}
NEW Now in private beta with 12 agencies

The AI Agent
for agencies.

Connect Gmail and your active shows. The agent chases missing logistics, updates every show packet, drafts promoter follow-ups, prepares travel options, and generates artist itineraries — across every tool the agency already uses.

{/* Trust bar */}
Trusted at {['Wasserman', 'WME', 'CAA', 'Paradigm', 'UTA', 'Primary Talent'].map((n) => {n} )}
); } Object.assign(window, { PillNav, Hero });