/* global React, Ic, Logo, Pill, Btn, ScoreRing, ScoreBar, RadarHero5, SIG5, CHECKS5, tcol, TOP_RISKS, TOP_FIXES, FOLLOWUPS */ const Sun = (p) => ; const Moon = (p) => ; function Toggle({ theme, onToggle }) { return ; } function scrollToId(id) { const el = document.getElementById(id); if (!el) return; const top = el.getBoundingClientRect().top + window.scrollY - 90; try { window.scrollTo({ top, behavior: 'smooth' }); } catch (e) { window.scrollTo(0, top); } // guaranteed fallback if smooth is a no-op in the host setTimeout(() => { if (Math.abs(window.scrollY - top) > 8) window.scrollTo(0, top); }, 60); } function NavLink({ label, onClick }) { return ( ); } function Nav5({ onStart, onSample, theme, onToggle }) { const links = [['Sample report', 'sample'], ['How it works', 'how'], ['What it checks', 'checks'], ['Pricing', 'pricing']]; return (
} onClick={onStart} style={{ padding: '11px 17px', fontSize: 14 }}>Run readiness check
); } function Sec({ eyebrow, title, sub, children, tint, id }) { return (
{(eyebrow || title) &&
{eyebrow &&
{eyebrow}
}{title &&

{title}

}{sub &&

{sub}

}
} {children}
); } const STRIP = [['readiness score', ], ['missing context', ], ['top 3 fixes', ], ['likely questions', ?], ['one practice moment', ]]; /* concrete hero product-demo card — replaces the abstract radar */ const HERO_CHECKS = [ ['Goal clarity', '8.0', 'good'], ['Strategic context', '5.8', 'risk'], ['Evidence', '6.0', 'amber'], ['Stakeholder risk', '5.5', 'risk'], ['Decision ask', '5.2', 'risk'], ]; const HERO_GAPS = ['Business impact unclear', 'Decision threshold missing', 'Stakeholder pushback likely']; /* hero — single readiness report preview, no decorative chips */ function HeroShowcase() { return (
); } function HeroDemo() { const col = (t) => t === 'good' ? 'var(--c-good)' : t === 'amber' ? 'var(--c-warn)' : 'var(--c-bad)'; return (
{/* window chrome */}
proben.io / readiness-brief
{/* input row */}
YOUR CONTEXT
Strategy review · roadmap pivot
ANALYZED
{/* score + verdict */}
6.2 /10
Partly ready
3 context gaps found
{/* 5 checks */}
5 CHECKS
{HERO_CHECKS.map((c, i) => (
{c[0]} {c[1]}
))}
{/* gaps */}
3 CONTEXT GAPS FOUND
{HERO_GAPS.map((g, i) => (
{i + 1}{g}
))}
{/* top fix + practice */}
TOP FIX
Add a business-impact number
PRACTICE MOMENT
“Why now?”
); } /* ---- inline icons for the context-source set ---- */ const IcChart = (p) => ; const IcCode = (p) => ; const IcUsers = (p) => ; const IcSlides = (p) => ; /* the 8 context sources */ const CTX_SOURCES = [ ['Strategy / OKRs', ], ['PRD / RFC / ADR', ], ['Notes / Slides', ], ['Metrics / Dashboards', ], ['Markdown files', MD], ['AI outputs', ], ['GitHub / GitLab', ], ['Stakeholder input', ], ]; const CG_SYMPTOMS = ['Missing context', 'Outdated info', 'Hidden objections', 'Unclear ask', 'Cross-team misalignment']; const CG_ACTIONS = [ ['Missing context', ], ['Top risks', ], ['Top fixes', ], ['Likely questions', ?], ['One practice moment', ], ]; const CG_CHECKS = [ ['Goal clarity', 8.0, 'good'], ['Strategic context', 5.8, 'risk'], ['Evidence', 6.0, 'amber'], ['Stakeholder risk', 5.5, 'risk'], ['Decision ask', 5.2, 'risk'], ]; const cgCol = (t) => t === 'good' ? 'var(--c-good)' : t === 'amber' ? 'var(--c-warn)' : 'var(--c-bad)'; /* one column of the diagram */ function CGColumn({ tone, step, title, sub, children }) { const col = tone === 'risk' ? 'var(--c-bad)' : 'var(--lime-deep)'; return (
{ e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.borderColor = 'color-mix(in srgb, ' + col + ' 60%, var(--bp-line))'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.borderColor = 'color-mix(in srgb, ' + col + ' 35%, var(--bp-line))'; }}>
{step} {title}
{sub}
{children}
); } function CGStatus({ tone, children }) { const col = tone === 'risk' ? 'var(--c-bad)' : 'var(--lime-deep)'; return (
{tone === 'risk' ? : } {children}
); } function CGChip({ icon, label }) { return ( e.currentTarget.style.borderColor = 'var(--bp)'} onMouseLeave={(e) => e.currentTarget.style.borderColor = 'var(--line-strong)'}> {icon}{label} ); } /* green flow arrow that sits in a grid track between two steps */ function ZoneHead({ tone, step, title, sub }) { const col = tone === 'risk' ? 'var(--c-bad)' : 'var(--lime-deep)'; return (
{step} {title}
{sub}
); } function CGArrow() { return (
); } /* compact source row (left of step 1) */ function CGSource({ icon, label }) { return (
e.currentTarget.style.borderColor = 'var(--bp)'} onMouseLeave={(e) => e.currentTarget.style.borderColor = 'var(--line-strong)'}> {icon}{label}
); } /* scattered sources --(red dashed fan)--> symptoms */ function CGScatter() { // [sourceY, symptomY] in the 0..120 viewBox — intentionally crossed const links = [[6, 12], [21, 34], [36, 12], [51, 56], [66, 34], [81, 78], [96, 100], [111, 78]]; return (
{links.map(([sy, dy], i) => ( ))}
{CTX_SOURCES.map((s, i) =>
)}
{CG_SYMPTOMS.map((s, i) => (
{s}
))}
); } const CG_W = 1200, CG_H = 600; const pcx = (px) => (px / CG_W * 100) + '%'; const pcy = (px) => (px / CG_H * 100) + '%'; /* [sourceY, symptomY] on the 600-tall canvas — intentionally crossed for a fragmented feel */ const RED_LINKS = [[132, 206], [176, 150], [220, 318], [264, 206], [308, 150], [352, 374], [396, 262], [440, 318]]; function CGLabel({ x, y, tone, step, title, sub }) { const col = tone === 'risk' ? 'var(--c-bad)' : 'var(--lime-deep)'; return (
{step} {title}
{sub}
); } function CGBanner({ x, y, w, tone, children }) { const col = tone === 'risk' ? 'var(--c-bad)' : 'var(--lime-deep)'; return (
{tone === 'risk' ? : } {children}
); } function ContextGapSection() { return (
{/* header + badge */}
CONTEXT GAP

Most meetings fail before people start talking.

From 1:1s to cross-functional reviews, the problem is the same: context is scattered, readiness is unclear, and weak spots only surface in the room. Proben collects context, checks readiness, and shows what to fix before the meeting starts.

WORKS FOR ANY MEETING SIZE
1:1s to 100+ people
{/* ONE connected diagram — absolute canvas, shared SVG connector layer */}
{/* shared SVG connector layer (behind nodes) */} {/* zone labels */} {/* sources (far left) */} {CTX_SOURCES.map((s, i) => (
))} {/* symptoms */} {CG_SYMPTOMS.map((s, i) => (
{s}
))} {/* central engine */}
{['Collects from all sources', 'Connects the full picture', 'Checks readiness'].map((b, i) => (
{b}
))}
{/* readiness brief */}
READINESS BRIEF 6.2/10
YOU GET
{CG_ACTIONS.map((a, i) => (
{a[1]}{a[0]}
))}
5 CHECKS
{CG_CHECKS.map((c, i) => (
{c[0]} {c[1].toFixed(1)}
))}
{/* status banners */} Fragmented, partial, and not ready for the room. Same flow for any meeting size. Clearer context. Better readiness. Better conversations.
{/* bottom callout */}
Understand readiness before the meeting.
{['Surface weak spots early', 'Identify what’s missing', 'Focus on what matters', 'Make better decisions'].map((t, i) => ( {i > 0 && ·}{t} ))}
); } function LandingMvp5({ onStart, onSample, theme, onToggle, embedded }) { return (
{!embedded && }
CONTEXT READINESS BEFORE IMPORTANT MEETINGS

Know what to fix before the meeting starts.

Paste rough meeting context. Proben checks your goal, strategy, evidence, stakeholder risk, and decision ask — then shows what to fix before the room does.

} onClick={onStart}>Run readiness check} onClick={onSample}>See sample report
No account required · Use rough notes · Not a personality score
IN 3 MINUTES YOU GET {STRIP.map((s, i) => {s[1]}{s[0]})}
{[['01', 'Paste context', 'Agenda, notes, slide summary, draft answer, or a plain-English summary.', ], ['02', 'Find missing context', 'Proben shows the business logic, evidence, or stakeholder concern you left out.', ], ['03', 'Readiness report', 'Score, top risks, top fixes, and the questions you’ll be asked.', ], ['04', 'Practice one moment', 'Rehearse the single answer most likely to decide the meeting.', ]].map((s, i) => (
{s[3]} {s[0]}
{s[1]}
{s[2]}
))}
SIGNAL WHAT IT ASKS STATUS SCORE
{CHECKS5.map((s, i) => { const tone = SIG5[i].tone, c = tcol(tone); const word = tone === 'good' ? 'Strong' : tone === 'amber' ? 'Medium' : 'Weak'; return (
{s[0]} {s[1]} {word} {SIG5[i].v.toFixed(1)}
); })}
VERDICT: PARTLY READY
{SIG5.map((s, i) => )}
Top 3 fixes
{TOP_FIXES.map((r, i) =>
{r.t}
{r.d}
)}
Likely questions
{FOLLOWUPS.map((q, i) => “{q}”)}
{[[, 'Product Manager', 'Defend roadmap decisions and handle stakeholder pushback.'], [, 'Tech Lead / Engineer', 'Explain technical trade-offs without losing business stakeholders.'], [, 'Analyst / Data', 'Turn numbers into a clear recommendation.'], [, 'Manager / Lead', 'Handle performance, conflict, and alignment conversations.'], [, 'Job Seeker', 'Prepare stronger interview answers and follow-up responses.'], [, 'Founder / Executive', 'Prepare board updates, investor talks, and strategic decisions.']].map((r, i) => (
{ e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.borderColor = 'var(--bp)'; e.currentTarget.style.background = 'var(--hover)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.borderColor = 'var(--bp-line)'; e.currentTarget.style.background = ''; }}> {r[0]}
{r[1]}
{r[2]}
))}
MEETING TYPES
{['Strategy review', 'Board update', 'Client call', 'Data presentation', 'Design review', 'Promotion panel', 'Performance review', 'Conflict conversation', 'Job interview', 'Executive update'].map((u, i) => {u})}
{[ { name: 'Free', price: '€0', tag: 'For your next meeting', feats: ['One readiness check', 'Sample report', 'Limited practice'], cta: 'Start free', kind: 'ghost' }, { name: 'Pro', price: '€12', sub: '/ mo', tag: 'For regular high-stakes meetings', feats: ['Unlimited readiness reports', 'Voice practice', 'Saved meeting briefs', 'Source uploads'], cta: 'Start free', kind: 'lime', featured: true }, { name: 'Team', price: 'Custom', tag: 'For teams that present together', feats: ['Shared briefs', 'Team templates', 'Workspace integrations', 'Admin controls'], cta: 'Contact us', kind: 'ghost' }, ].map((p, i) => (
{p.name} {p.featured && POPULAR}
{p.price}{p.sub && {p.sub}}
{p.tag}
{p.feats.map((f, k) =>
{f}
)}
{p.cta}
))}
You control what you upload.
Proben can work from a plain-English summary. You don’t need to share sensitive documents.
 {!embedded && (

Check your context before the room does.

A fast pre-meeting check: are you ready, what’s missing, and what to practice — in 3 minutes.

} onClick={onStart} style={{ margin: '0 auto' }}>Run readiness check
)} {!embedded &&
}
); } Object.assign(window, { LandingMvp5, Mvp5Sec: Sec });