// Practivo — middle sections: Problem, Solution, How It Works, Who It's For const { useState: useState2, useEffect: useEffect2 } = React; /* ---------- Section shell ---------- */ const Section = ({ id, dark, light, children, style }) => (
{children}
); const SectionHeader = ({ eyebrow, title, lead, align = 'left', dark }) => (
{eyebrow && {eyebrow}}

{title}

{lead &&

{lead}

}
); /* ---------- Problem ---------- */ const ProblemSection = () => (
{[ { icon: , title: 'AI handles repetition. You handle people.', body: 'Practicing a scenario 10 times with a human trainer is expensive and exhausting for both sides. AI does the repetitive work. You do what AI cannot — read the room, challenge assumptions, build confidence in a real human being.', }, { icon: , title: 'Workshops end before the skill is formed', body: 'One or two days is not enough to build a lasting skill. Without structured practice between sessions, most of what you taught is gone within a week.', }, { icon: , title: 'Clients want proof, not impressions', body: '"The session went well" is not enough anymore. Buyers want data. Who improved? By how much? What still needs work?', }, ].map((c, i) => (
{React.cloneElement(c.icon, { width: 40, height: 40 })}

{c.title}

{c.body}

))}
Practivo handles the practice and the measurement. You stay focused on the work only a trainer can do.
); /* ---------- Solution ---------- */ const SolutionSection = () => (
{[ { n: '01', icon: , title: 'AI takes over the repetitive part', body: 'Between your sessions, participants practice real conversations with an AI avatar. Same quality every time, available whenever they need it, no extra cost per session.', }, { n: '02', icon: , title: 'Skills get formed, not just introduced', body: 'Learners repeat scenarios until they stick. You set up the practice environment once — around your content, isolated per client. They keep practicing on their own.', }, { n: '03', icon: , title: 'You walk into every client meeting with data', body: 'Practivo generates structured evaluation reports after each practice phase. Progress over time, skill gaps, what improved. Evidence your client can read and trust.', }, ].map((c, i) => (
{c.n}
{React.cloneElement(c.icon, { width: 40, height: 40 })}

{c.title}

{c.body}

))}
{/* Report mock */}
{/* Pull-quote — full width, outside the grid so it stays prominent on mobile */}

You bring the human expertise. Practivo brings the scale and the proof.

); const ReportMock = () => (
Evaluation report
Difficult Conversations — Cohort 7
Weeks 1–4 · 12 participants
Ready
{[ ['Avg. improvement', '+28%', 'var(--pv-accent-2-600)'], ['Sessions logged', '147', '#0B1220'], ['Completion', '92%', '#0B1220'], ].map(([l, v, c], i) => (
{l}
{v}
))}
Skill progression
{[ ['Empathic framing', 0.45, 0.82], ['Redirecting objections', 0.32, 0.71], ['Closing with clarity', 0.28, 0.58], ].map(([label, start, end], i) => (
{label} +{Math.round((end - start) * 100)}%
))}
Generated by Practivo · practivo.app
{/* stacked paper */}
); /* ---------- How It Works — cycle ---------- */ const HowItWorksSection = ({ shape = 'cycle' }) => { const [active, setActive] = useState2(0); const phases = [ { label: 'Phase 1', title: 'You run the workshop', body: 'Deliver your training as you always have. Set up the AI scenarios in Practivo that match what you covered.', trainer: true, icon: , }, { label: 'Phase 2', title: 'Participants practice with AI', body: 'Learners get access to their practice environment. They repeat conversations with the AI avatar at their own pace — as many times as they need.', trainer: false, icon: , }, { label: 'Phase 3', title: 'AI evaluation report', body: "Practivo generates a report on each participant's performance. You review it before your next touchpoint and know exactly where to focus.", trainer: false, accent: 'amber', icon: , }, { label: 'Phase 4', title: 'Coaching and more practice', body: 'You meet with participants — in a group or 1-on-1 — to unblock specific challenges. Another round of AI practice follows.', trainer: true, icon: , }, ]; return (
{/* Cycle diagram */} {/* Active phase panel */}
{phases.map((p, i) => { const accentVar = phases[i].accent === 'amber' ? 'var(--pv-accent-2)' : 'var(--pv-accent)'; return ( ); })}
{(() => { const isAmber = phases[active].accent === 'amber'; const accentVar = isAmber ? 'var(--pv-accent-2)' : 'var(--pv-accent)'; const onAccentInk = isAmber ? '#0B1220' : '#0B1220'; return ( <>
{React.cloneElement(phases[active].icon, { width: 24, height: 24 })}
{phases[active].trainer && ( Trainer-led )} {!phases[active].trainer && ( Practivo-automated )}

{phases[active].title}

{phases[active].body}

); })()}
{/* Final report callout */}
Closing deliverable

Final evaluation report

Documents skill development across the full engagement. This is the evidence you hand to your client.

); }; const CycleDiagram = ({ phases, active, setActive }) => { const size = 480; const cx = size / 2, cy = size / 2; const r = 180; return (
{/* outer ring */} {phases.map((_, i) => { const a0 = (i / phases.length) * 2 * Math.PI - Math.PI / 2 + 0.1; const a1 = ((i + 1) / phases.length) * 2 * Math.PI - Math.PI / 2 - 0.1; const x0 = cx + r * Math.cos(a0), y0 = cy + r * Math.sin(a0); const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1); const large = a1 - a0 > Math.PI ? 1 : 0; return ( ); })} {/* Center disc with trainer */}
Trainer
stays present
{/* Phase nodes */} {phases.map((p, i) => { const angle = (i / phases.length) * 2 * Math.PI - Math.PI / 2; const x = cx + r * Math.cos(angle); const y = cy + r * Math.sin(angle); const isActive = i === active; return ( ); })}
); }; /* ---------- Who It's For ---------- */ const WhoForSection = () => (
{[ { icon: , tag: 'Primary', title: 'Freelance trainers', body: 'Add a practice and evaluation layer to your existing programs. Differentiate your offer, extend your engagements, and give clients something no standard workshop delivers.', bullets: ['Plug into your existing curriculum', 'Scenarios authored per client', 'Reports ready for your client meetings'], }, { icon: , tag: 'Primary', title: 'Training companies', body: 'Deploy AI practice across multiple clients from one platform. Each client sees only their own content. Your IP stays protected.', bullets: ['Multi-client workspaces', 'Content isolated per tenant', 'Roll-up reporting across programs'], }, { icon: , tag: 'Secondary', title: 'HR and L&D teams', body: 'If you run training in-house, Practivo works without an external trainer. Set up scenarios for your team and track progress directly.', bullets: ['No external trainer required', 'Self-serve scenario authoring', 'Progress dashboards per team'], }, ].map((p, i) => (
{React.cloneElement(p.icon, { width: 32, height: 32 })}

{p.title}

{p.body}

    {p.bullets.map((b, j) => (
  • {b}
  • ))}
))}
); Object.assign(window, { Section, SectionHeader, ProblemSection, SolutionSection, HowItWorksSection, WhoForSection });