// Practivo landing page components — all-in-one (small enough to keep in one file) const { useState, useEffect, useRef } = React; /* ---------- Icons (Feather-style, inline SVG) ---------- */ const Icon = { ArrowRight: (p) => (), ArrowDown: (p) => (), Play: (p) => (), Repeat: (p) => (), Users: (p) => (), BarChart: (p) => (), Clock: (p) => (), MessageSquare: (p) => (), FileText: (p) => (), Briefcase: (p) => (), Building: (p) => (), UserCheck: (p) => (), LinkedIn: (p) => (), Menu: (p) => (), X: (p) => (), Check: (p) => (), Sparkle: (p) => (), }; /* ---------- Practivo logotype ---------- */ const PractivoLogo = ({ light = false }) => (
Practivo logo practivo
); /* ---------- Header ---------- */ const Header = ({ onCta }) => { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener('scroll', onScroll); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); // Lock body scroll when mobile menu is open useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [open]); const links = [ ['Problem', '#problem'], ['Solution', '#solution'], ['How it works', '#how'], ['Who it\'s for', '#who'], ['Demo', '#demo'], ]; const close = () => setOpen(false); return (
{ e.preventDefault(); close(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} style={{ textDecoration: 'none' }}>
{/* Hamburger — visible only on mobile via CSS */}
{/* Mobile dropdown panel */}
); }; /* ---------- Hero — full-bleed video background ---------- */ const Hero = ({ onCta, onSeeHow, variant = 'video' }) => { return (
{/* Background video */} {variant === 'video' && (
); }; const HeroFloatingCard = () => (
Session report
Complete
7.8 / 10 +1.4 vs. last
{[ ['Active listening', 0.82], ['Objection handling', 0.74], ['Closing', 0.65], ].map(([label, v]) => (
{label}{Math.round(v*100)}%
))}
); Object.assign(window, { Icon, PractivoLogo, Header, Hero });