// product_shell.jsx — faithful replica of the TalentScreen product chrome // (dark left sidebar + breadcrumb bar + page header). Used by all four // product animations so they read as real screenshots. // ── Sidebar icon set ─────────────────────────────────────────────────── function PSIcon({ kind, size = 18, stroke = 'currentColor' }) { const p = { fill: 'none', stroke, strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' }; const s = size; if (kind === 'menu') return ; if (kind === 'grid') return ; if (kind === 'pin') return ; if (kind === 'bolt') return ; if (kind === 'shield') return ; if (kind === 'video') return ; if (kind === 'gear') return ; if (kind === 'bell') return ; if (kind === 'chat') return ; if (kind === 'swap') return ; if (kind === 'home') return ; // submenu icons if (kind === 'overview') return ; if (kind === 'template') return ; if (kind === 'rubric') return ; if (kind === 'sessions') return ; if (kind === 'assignments') return ; if (kind === 'reports') return ; if (kind === 'management') return ; return null; } // ── Left sidebar (dark, icon-only) + submenu panel ────────────────────── function PSSidebar({ section = 'Overview' }) { const icons = ['menu', 'grid', 'pin', 'bolt', 'shield', 'video', 'swap']; const activeIdx = 5; // video (TalentScreen) return (
{icons.map((k, i) => (
{i === activeIdx &&
}
))}
); } // ── Top breadcrumb bar ────────────────────────────────────────────────── function PSTopBar({ breadcrumb = ['Select', 'TalentScreen', 'Screen', 'Video Interview'] }) { return (
{breadcrumb.map((b, i) => ( › {b} ))}
{/* Org pill */}
The Talent People
UN
); } // ── Page header (purple icon + title + eyebrow) ───────────────────────── function PSPageHeader({ title, eyebrow, icon = 'template' }) { return (
{title}
{eyebrow}
); } // ── Submenu (second-level left nav card) ──────────────────────────────── function PSSubmenu({ active = 'Overview', items = ['Overview', 'Templates', 'Rubrics', 'Sessions', 'Assignments', 'Reports', 'Management'] }) { const iconMap = { 'Overview':'overview','Templates':'template','Rubrics':'rubric','Sessions':'sessions','Assignments':'assignments','Reports':'reports','Management':'management' }; return (
{items.map((item, i) => { const isActive = item === active; return (
{item}
); })}
); } // ── Footer that mimics real product footer ────────────────────────────── function PSFooter() { return (
Privacy Policy Terms of Use Legal & Compliance Platform Status Help & Support
ISO 27001
ISO 9001
Cyber Essentials Plus
© 2025 The Talent Hub | The Talent People
); } // ── Product shell wrapper (drops all chrome) ─────────────────────────── function PSShell({ children, breadcrumb, title, eyebrow, icon }) { return ( <> {/* base canvas bg */}
{children} ); } // ── Callout person with speech bubble ─────────────────────────────────── // `appear` = seconds after which to show; bubble slides in after a beat. function PSCallout({ src, side = 'right', heightPx = 720, bubble, bubbleTop = 120, appear = 2.5, bubbleDelay = 0.8, translateOut = 180, }) { const t = useTime(); const personT = Easing.easeOutCubic(clamp((t - appear) / 1.0, 0, 1)); const bubbleT = Easing.easeOutBack(clamp((t - appear - bubbleDelay) / 0.8, 0, 1)); // person slides in from outside the frame const slideX = (1 - personT) * translateOut * (side === 'right' ? 1 : -1); return ( <> {bubble && (
{/* bubble tail */}
{bubble.label}
{bubble.text}
{bubble.meta && (
{bubble.meta}
)}
)} ); } Object.assign(window, { PSIcon, PSSidebar, PSTopBar, PSPageHeader, PSSubmenu, PSFooter, PSShell, PSCallout, });