/* global React, Ic, Logo, Pill, Btn, LandingMvp5, Mvp5Sec, useState, useEffect */ /* Proben MVP 6 — mature marketing site: floating nav, mega-menus, blog, changelog, footer. */ const Sun = (p) => ; const Moon = (p) => ; const RESOURCES = [ ['Blog', 'Practical guides on meeting readiness, stakeholder communication, and business context.', , 'blog'], ['Changelog', 'New features, product improvements, integrations, and experiments.', , 'changelog'], ['API Docs', 'Create readiness checks, reports, and practice sessions from your own product.', , 'api'], ['Docs / Help Center', 'Upload context, connect sources, and understand readiness scoring.', , 'faq'], ['Security & Privacy', 'How Proben handles uploaded context, documents, and integrations.', , 'policy'], ['Terms', 'Rules and responsibilities for using Proben.', , 'terms'], ]; const USECASES = [ ['Product managers', 'Defend roadmap decisions and handle stakeholder pushback.', ], ['Tech leads / engineers', 'Explain technical trade-offs without losing business stakeholders.', ], ['Analysts / data', 'Turn numbers into a clear recommendation.', ], ['Managers / leads', 'Handle alignment, conflict, and performance conversations.', ], ['Job seekers', 'Prepare stronger interview answers and follow-up responses.', ], ['Founders / executives', 'Pressure-test board updates, investor talks, and strategic decisions.', ], ]; const BLOG_CATS = ['All', 'Meeting Readiness', 'Stakeholder Communication', 'Product Decisions', 'AI for Product Teams', 'Context Engineering', 'Interview Readiness']; const BLOG = [ { t: 'Why most meetings fail before people start talking', cat: 'Meeting Readiness', sum: 'The real failure point isn’t delivery — it’s missing business context nobody surfaced in prep.', read: '6 min', date: 'Jun 2, 2026', feat: true }, { t: 'The 5 signals of meeting readiness', cat: 'Meeting Readiness', sum: 'Goal clarity, strategic context, evidence, stakeholder risk, and decision ask — and how to score each.', read: '5 min', date: 'May 28, 2026' }, { t: 'How to prepare for stakeholder pushback in 10 minutes', cat: 'Stakeholder Communication', sum: 'A fast routine for predicting the hard question and rehearsing the one answer that matters.', read: '7 min', date: 'May 21, 2026' }, { t: 'Why AI meeting prep fails without business context', cat: 'AI for Product Teams', sum: 'Generic AI advice sounds smart and lands flat. The fix is grounding prompts in company context.', read: '8 min', date: 'May 14, 2026' }, { t: 'How to turn messy notes into a clear decision ask', cat: 'Product Decisions', sum: 'From a wall of notes to a scoped, approvable request with a success threshold.', read: '5 min', date: 'May 7, 2026' }, { t: 'Readiness score vs confidence: why they are not the same', cat: 'Context Engineering', sum: 'A high score with low confidence means the inputs were thin. Here’s how to read both.', read: '4 min', date: 'Apr 30, 2026' }, { t: 'Business English for high-stakes work conversations', cat: 'Interview Readiness', sum: 'Phrasing that stays calm, specific, and non-defensive under executive pressure.', read: '6 min', date: 'Apr 23, 2026' }, ]; const CL_CATS = { 'New feature': 'var(--lime-deep)', 'Improvement': 'var(--ai)', 'Integration': 'var(--ai)', 'Experiment': 'var(--amber)', 'Coming soon': 'var(--muted)' }; const CHANGELOG = [ { cat: 'New feature', t: 'Chat practice mode for stakeholder objections', sum: 'Role-play the hardest objection in writing — Proben replies as the stakeholder and scores each reply.', date: 'Jun 2, 2026', pill: 'New' }, { cat: 'Improvement', t: 'Readiness report separates strategic context from evidence', sum: 'The five signals now distinguish “does this connect to strategy?” from “do you have proof?”.', date: 'May 27, 2026' }, { cat: 'New feature', t: 'Upload PDFs, slides, screenshots, audio notes, and markdown briefs', sum: 'Bring real materials into the context check, not just typed text.', date: 'May 20, 2026', pill: 'New' }, { cat: 'Experiment', t: 'Context gap finder before readiness scoring', sum: 'Proben now surfaces up to three missing pieces of context before it scores you.', date: 'May 12, 2026' }, { cat: 'Improvement', t: 'Softer readiness verdicts and clearer top 3 fixes', sum: 'Every fix now ships with a copy-ready line, a likely objection, and a score impact.', date: 'May 5, 2026' }, { cat: 'Coming soon', t: 'Google Drive and Notion context sources', sum: 'Pull briefs, decks, and strategy docs straight from the tools you already use.', date: 'Soon' }, ]; function Toggle({ theme, onToggle }) { return ; } /* settings menu — theme + Show mascot toggle */ function SettingsMenu({ theme, onToggle, go }) { const { enabled, toggle: toggleMascot } = useMascot(); const [open, setOpen] = useState(false); const t = React.useRef(null); return (
{ clearTimeout(t.current); setOpen(true); }} onMouseLeave={() => { t.current = setTimeout(() => setOpen(false), 160); }}> {open && (
SETTINGS
: } />
)}
); } function SettingRow({ label, value, onClick, icon, on, switchEl }) { return ( ); } /* /mascot-preview — design QA route. Safe to remove before production. */ function MascotPreview({ theme, onToggleTheme }) { const STATES = ['idle', 'scanning', 'gap', 'practicing', 'ready', 'celebrate']; const SIZES = [24, 40, 64]; return (
DESIGN QA · REMOVE BEFORE PRODUCTION

Stacky — mascot states

{STATES.map((s) => (
{s.toUpperCase()}
{SIZES.map((sz) => (
{sz}px
))}
))}

Toggle the theme above to verify both palettes. Use the Settings menu (top-right) → “Show mascot” to disable globally; the choice persists across reloads. Animations respect prefers-reduced-motion.

); } function MegaCard({ cols, items, highlight }) { return (
{items.map((it, i) => ( ))}
{highlight && ( )}
); } function Nav6({ go, scrollTo, onStart, theme, onToggle }) { const [menu, setMenu] = useState(null); // 'resources' | 'uses' const t = useRef(null); const open = (k) => { clearTimeout(t.current); setMenu(k); }; const close = () => { clearTimeout(t.current); t.current = setTimeout(() => setMenu(null), 160); }; useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') setMenu(null); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); const navBtn = (on) => ({ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'none', border: 'none', color: 'var(--header-ink)', fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 500, opacity: on ? 1 : 0.8, cursor: 'pointer', padding: '8px 13px', borderRadius: 999 }); const Caret = ({ on }) => ; const link = (label, id) => ; const drop = (label, key, card) => (
open(key)} onMouseLeave={close}> {menu === key && (
open(key)} onMouseLeave={close} style={{ position: 'absolute', top: '100%', left: '50%', transform: 'translateX(-50%)', paddingTop: 12, zIndex: 60 }}>{card}
)}
); return (
} onClick={onStart} style={{ padding: '11px 16px', fontSize: 14 }}>Run readiness check
); } /* shared section wrapper for MVP6-added sections */ function S6({ eyebrow, title, sub, children, tint, id, head }) { return (
{(eyebrow || title) && (
{eyebrow &&
{eyebrow}
} {title &&

{title}

} {sub &&

{sub}

}
{head}
)} {children}
); } function BlogCard({ p, onClick, big }) { return ( ); } function ChangeRow({ c }) { const col = CL_CATS[c.cat] || 'var(--muted)'; return (
{c.date}
{c.cat.toUpperCase()}
{c.t} {c.pill && {c.pill}}
{c.sum}
); } /* home-only extra section — FAQ. Blog & changelog live on their own pages via Resources. */ function HomeExtras({ go }) { return ; } function Footer6({ go, scrollTo, onStart }) { const col = (title, links) => (
{title}
{links.map((l, i) => )}
); return (

Context readiness before important meetings. Know what to fix before the meeting starts.

{col('PRODUCT', [['Run readiness check', () => onStart()], ['Sample report', () => scrollTo('sample')], ['How it works', () => scrollTo('how')], ['Checks', () => scrollTo('checks')], ['Pricing', () => scrollTo('pricing')]])} {col('RESOURCES', [['Blog', () => go('blog')], ['Changelog', () => go('changelog')], ['API Docs', () => go('api')], ['Docs / Help Center', () => go('faq')], ['FAQ', () => scrollTo('faq')]])} {col('LEGAL', [['Privacy & Security', () => go('policy')], ['Terms of Use', () => go('terms')], ['Contact', () => go('home')]])}
Check your context before the room does.
} onClick={onStart}>Run readiness check
© 2026 Proben · proben.io Not a personality scorePaste only what you’re comfortable sharing
); } /* ===== full pages ===== */ function PageHeader({ eyebrow, title, sub }) { return (
{eyebrow}

{title}

{sub}

); } function BlogPage({ go }) { const [cat, setCat] = useState('All'); const list = cat === 'All' ? BLOG : BLOG.filter((p) => p.cat === cat); return (
{BLOG_CATS.map((c) => ( ))}
{list.map((p, i) => go('post')} />)}
); } function BlogPost({ go }) { const p = BLOG[0]; const paras = [ 'Most teams treat meeting prep as a delivery problem: rehearse the talk track, tighten the slides, calm the nerves. But the meetings that go sideways rarely fail on delivery. They fail because a piece of business context never made it into the room.', 'The speaker knew the roadmap, but not the number that would make the ask land. They knew their recommendation, but not the objection the VP would raise first. The argument was reasonable — it just wasn’t connected to what the room actually cared about.', 'That gap is invisible during prep because the context lives somewhere else: in an OKR doc, a metrics dashboard, a Slack thread, a stakeholder’s last decision. Preparation that doesn’t pull those threads together produces confidence without readiness.', ]; const pts = ['Name the business outcome the decision protects.', 'Predict the single hardest objection — and answer it in one line.', 'Define the threshold that makes your ask easy to approve.']; return (
{p.cat}

{p.t}

{p.date}{p.read} read
{paras.map((t, i) =>

{t}

)}

What readiness actually checks

{pts.map((t, i) =>
{t}
)}
See your own readiness in 3 minutes.
} onClick={() => go('home')} style={{ margin: '0 auto' }}>Check my readiness
); } function ChangelogPage() { const [cat, setCat] = useState('All'); const cats = ['All', ...Object.keys(CL_CATS)]; const list = cat === 'All' ? CHANGELOG : CHANGELOG.filter((c) => c.cat === cat); return (
{cats.map((c) => ( ))}
{list.map((c, i) => )}
); } function AppMvp6() { const [route, setRoute] = useState('home'); const [theme, setTheme] = useState(() => localStorage.getItem('proben-mvp6-theme') || 'light'); useEffect(() => { document.documentElement.setAttribute('data-theme', theme); localStorage.setItem('proben-mvp6-theme', theme); }, [theme]); const toggle = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark')); const [flow, setFlow] = useState('input'); const go = (r) => { window.scrollTo(0, 0); setRoute(r); }; const startApp = () => { window.scrollTo(0, 0); setFlow('input'); setRoute('app'); }; const fgo = (s) => { window.scrollTo(0, 0); setFlow(s); }; const scrollTo = (id) => { if (route !== 'home') { setRoute('home'); setTimeout(() => doScroll(id), 80); return; } doScroll(id); }; const doScroll = (id) => { if (id === 'top') { window.scrollTo({ top: 0, behavior: 'smooth' }); return; } const el = document.getElementById(id); if (!el) return; const top = el.getBoundingClientRect().top + window.scrollY - 96; try { window.scrollTo({ top, behavior: 'smooth' }); } catch (e) { window.scrollTo(0, top); } setTimeout(() => { if (Math.abs(window.scrollY - top) > 8) window.scrollTo(0, top); }, 60); }; // product readiness flow (full-screen, no marketing chrome) if (route === 'app') { let v; if (flow === 'gaps') v = fgo('input')} onContinue={() => fgo('analyzing')} />; else if (flow === 'analyzing') v = fgo('report')} />; else if (flow === 'report') v = fgo('input')} onChat={() => fgo('chat')} onVoice={() => fgo('practice')} onUpload={() => fgo('upload')} />; else if (flow === 'chat') v = fgo('report')} onVoice={() => fgo('practice')} onUpload={() => fgo('upload')} onResults={() => fgo('updated')} />; else if (flow === 'practice') v = fgo('report')} onResults={() => fgo('updated')} />; else if (flow === 'upload') v = fgo('report')} onChat={() => fgo('chat')} onVoice={() => fgo('practice')} onResults={() => fgo('updated')} />; else if (flow === 'updated') v = fgo('report')} onPractice={() => fgo('practice')} onChat={() => fgo('chat')} onDialogue={() => fgo('dialogue')} />; else if (flow === 'dialogue') v = fgo('updated')} onPractice={() => fgo('practice')} onContinue={() => fgo('practice')} onReport={() => fgo('report')} />; else v = go('home')} onAnalyze={() => fgo('gaps')} />; return
{v}
; } let page; if (route === 'blog') page = ; else if (route === 'post') page = ; else if (route === 'changelog') page = ; else if (route === 'api') page = ; else if (route === 'policy') page = ; else if (route === 'terms') page = ; else if (route === 'mascot-preview') page = ; else if (route === 'faq') page = (
); else page = (
scrollTo('sample')} />
); const PAGE_TITLE = { home: 'Landing page', blog: 'Blog', post: 'Blog article', changelog: 'Changelog', api: 'API docs', policy: 'Privacy & Security', terms: 'Terms of Use', faq: 'Help Center' }; return (
{page}
); } ReactDOM.createRoot(document.getElementById('root')).render();