// ── Navbar + Hero + Stats + Marquee ─────────────────────────────── // Depends on: site-primitives.jsx function Navbar({ bookingUrl, onAbout, onHome, currentView }) { const [activeSection, setActiveSection] = React.useState(''); const [mobileOpen, setMobileOpen] = React.useState(false); const { width } = useWindowSize(); const isMobile = width <= 768; const linksContainerRef = React.useRef(null); const linkRefs = React.useRef([]); const [pillStyle, setPillStyle] = React.useState({ left: 0, width: 0, top: 0, height: 0, opacity: 0 }); const [scrollProgress, setScrollProgress] = React.useState({ current: 0, next: 0, t: 0 }); // Active section tracking via scroll — whichever section center is closest // to the viewport center wins. Also computes progress (0-1) through each // section so the pill can interpolate between adjacent nav links. React.useEffect(() => { if (currentView !== 'home') return; const ids = ['problem', 'solution', 'process', 'proof', 'pricing']; let rafId; const update = () => { const viewportCenter = window.scrollY + window.innerHeight / 2; let bestId = ''; let bestDist = Infinity; let bestProgress = 0; let bestIdx = -1; ids.forEach((id, idx) => { const el = document.getElementById(id); if (!el) return; const rect = el.getBoundingClientRect(); const elTop = window.scrollY + rect.top; const elBottom = elTop + rect.height; const elCenter = elTop + rect.height / 2; const dist = Math.abs(elCenter - viewportCenter); if (dist < bestDist) { bestDist = dist; bestId = id; bestIdx = idx; // 0 = top of section at viewport center, 1 = bottom at viewport center bestProgress = Math.min(1, Math.max(0, (viewportCenter - elTop) / rect.height)); } }); if (bestId) { setActiveSection(bestId); // Interpolate pill between current section link and next section link // based on scroll progress (>= 0.5 starts shifting toward next) setScrollProgress({ current: bestIdx, next: bestIdx + 1 < ids.length ? bestIdx + 1 : bestIdx, t: Math.max(0, (bestProgress - 0.5) * 2) }); } }; const onScroll = () => { if (rafId) cancelAnimationFrame(rafId); rafId = requestAnimationFrame(update); }; window.addEventListener('scroll', onScroll, { passive: true }); update(); // initial return () => { window.removeEventListener('scroll', onScroll); if (rafId) cancelAnimationFrame(rafId); }; }, [currentView]); const links = [ { label: 'Problem', href: '#problem' }, { label: 'Solution', href: '#solution' }, { label: 'Process', href: '#process' }, { label: 'Proof', href: '#proof' }, { label: 'Pricing', href: '#pricing' }, { label: 'About', onClick: onAbout }, ]; const logoClick = () => { if (currentView === 'about') onHome(); else window.scrollTo({ top: 0, behavior: 'smooth' }); }; // Handle nav link clicks — if on About, switch to Home first, then scroll const handleNavClick = (e, href) => { if (currentView === 'about') { e.preventDefault(); onHome(); // Allow React to re-render Home, then scroll to section requestAnimationFrame(() => { setTimeout(() => { const id = href.replace('#', ''); const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth' }); }, 80); }); } }; // Sliding pill indicator behind active nav link // Interpolates between current and next section links based on scroll progress React.useEffect(() => { if (isMobile) { setPillStyle(s => ({ ...s, opacity: 0 })); return; } const updatePill = () => { const container = linksContainerRef.current; if (!container) return; let activeIdx = -1; if (currentView === 'about') { activeIdx = links.findIndex(l => l.label === 'About'); } else if (activeSection) { activeIdx = links.findIndex(l => l.label.toLowerCase() === activeSection); } const activeEl = activeIdx >= 0 ? linkRefs.current[activeIdx] : null; if (!activeEl) { setPillStyle(s => ({ ...s, opacity: 0 })); return; } const containerRect = container.getBoundingClientRect(); const activeRect = activeEl.getBoundingClientRect(); // If we're in the second half of a section, interpolate toward next link let targetLeft = activeRect.left - containerRect.left; let targetWidth = activeRect.width; if (currentView !== 'about' && scrollProgress.t > 0) { const nextEl = linkRefs.current[scrollProgress.next]; if (nextEl) { const nextRect = nextEl.getBoundingClientRect(); const t = scrollProgress.t; targetLeft = activeRect.left + (nextRect.left - activeRect.left) * t - containerRect.left; targetWidth = activeRect.width + (nextRect.width - activeRect.width) * t; } } setPillStyle({ left: targetLeft, width: targetWidth, top: activeRect.top - containerRect.top, height: activeRect.height, opacity: 1, }); }; const raf = requestAnimationFrame(() => { const t = setTimeout(updatePill, 50); return () => clearTimeout(t); }); return () => cancelAnimationFrame(raf); }, [activeSection, currentView, isMobile, width, scrollProgress.t]); return (
); } // ── Hero ────────────────────────────────────────────────────────── function Hero({ bookingUrl }) { const { width } = useWindowSize(); const isMobile = width <= 768; const [text, setText] = React.useState(''); const [mIdx, setMIdx] = React.useState(0); const [cIdx, setCIdx] = React.useState(0); const [scrollY, setScrollY] = React.useState(0); const [mouse, setMouse] = React.useState({ x: 0, y: 0 }); const cardRef = React.useRef(null); const sectionRef = React.useRef(null); const reduced = usePrefersReducedMotion(); // Scroll tracking for badge parallax React.useEffect(() => { const h = () => setScrollY(window.scrollY); window.addEventListener('scroll', h, { passive: true }); return () => window.removeEventListener('scroll', h); }, []); // Mouse parallax tracking (rAF-throttled) React.useEffect(() => { if (reduced || isMobile) return; let raf; let pending = null; const h = (e) => { pending = e; if (raf) return; raf = requestAnimationFrame(() => { raf = null; if (!pending) return; const rect = sectionRef.current?.getBoundingClientRect(); if (!rect) return; const x = ((pending.clientX - rect.left) / rect.width - 0.5) * 2; const y = ((pending.clientY - rect.top) / rect.height - 0.5) * 2; setMouse({ x, y }); pending = null; }); }; window.addEventListener('mousemove', h); return () => { window.removeEventListener('mousemove', h); cancelAnimationFrame(raf); }; }, [reduced, isMobile]); const msgs = ['Drafting follow-up for Acme Corp...', 'Logging call notes, Sarah Chen...', 'Scheduling proposal review...', 'Pipeline updated - 3 deals advanced...']; React.useEffect(() => { if (reduced) { setText(msgs[0]); return; } const msg = msgs[mIdx]; if (cIdx <= msg.length) { const t = setTimeout(() => { setText(msg.slice(0, cIdx)); setCIdx(c => c + 1); }, cIdx === 0 ? 600 : 38); return () => clearTimeout(t); } else { const t = setTimeout(() => { setMIdx(m => (m + 1) % msgs.length); setCIdx(0); }, 1800); return () => clearTimeout(t); } }, [cIdx, mIdx, reduced]); // Parallax values const cardTiltX = reduced ? 0 : mouse.y * -6; const cardTiltY = reduced ? 0 : mouse.x * 8; const badgeDrift = reduced ? 0 : Math.min(scrollY * 0.12, 24); return (
{/* Radial orange glow behind content */}
{/* Left: copy — entrance stagger via CSS animation */}
2 Founding Partner Spots - May 2026

40% of your team's week isn't selling, building, or thinking. It's admin.

Not because they're lazy. Because admin owns their calendar.

International Data Corporation (IDC): 40% of the week is mechanical work. Stanford-Carnegie: hybrid human–artificial intelligence teams outperform pure-human teams by 24.3%. Artificial intelligence operations reclaims those hours and redirects them to revenue. Same headcount. Higher revenue per employee.

Book a Free Call → See How It Works
{/* Right: Architecture card with mouse parallax */} {!isMobile && (
{/* Live feed */}
LIVE FEED, ARTIFICIAL INTELLIGENCE VOICE LAYER
▶{text}
{/* Floating RPE badge — drifts up on scroll */}
2× Revenue Per Employee
Same headcount. Higher output.
)}
); } // ── Stats ───────────────────────────────────────────────────────── function StatsSection() { const reduced = usePrefersReducedMotion(); const { width } = useWindowSize(); const isMobile = width <= 768; const [vals, setVals] = React.useState([0, 0]); const ref = React.useRef(null); const targets = [10, 2]; React.useEffect(() => { if (reduced) { setVals(targets); return; } const obs = new IntersectionObserver(([e]) => { if (!e.isIntersecting) return; obs.disconnect(); targets.forEach((target, idx) => { const dur = 1400 + idx * 200; const t0 = performance.now(); const tick = (now) => { const p = Math.min((now - t0) / dur, 1); const eased = 1 - Math.pow(1 - p, 3); setVals(prev => { const n = [...prev]; n[idx] = Math.round(target * eased); return n; }); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); }); }, { threshold: 0.4 }); if (ref.current) obs.observe(ref.current); return () => obs.disconnect(); }, [reduced]); const stats = [ { val: vals[0], unit: '+ hrs', label: 'Reclaimed per person, every week', sub: 'International Data Corporation (IDC): 40% of the week is mechanical. Stanford-Carnegie: artificial intelligence-augmented teams outperform by 24.3%.' }, { val: vals[1], unit: '× Revenue Per Employee', label: 'Same headcount, higher revenue', sub: 'National Bureau of Economic Research (NBER): artificial intelligence automates 1.4–34% of tasks per occupation. Sales roles average ~12 hrs/week.' }, ]; return (
{stats.map((s, i) => (
{s.val} {s.unit}
{s.label}
{s.sub}
))}
); } // ── Logo Marquee ────────────────────────────────────────────────── function LogoMarquee() { const logos = [ { name: 'Notion', src: 'logos/notion.svg' }, { name: 'Claude', src: 'logos/claude-icon.png' }, { name: 'Ollama', src: 'logos/ollama.png' }, { name: 'Gmail', src: 'logos/gmail.svg' }, { name: 'Calendar', src: 'logos/calendar.svg' }, { name: 'n8n', src: 'logos/n8n.svg' }, { name: 'Slack', src: 'logos/slack.svg' }, { name: 'Apify', src: 'logos/apify-icon.png' } ]; const { width } = useWindowSize(); const isMobile = width <= 768; const trackLen = isMobile ? 15 : 100; const track = Array.from({ length: trackLen }, () => logos).flat(); const trackRef = React.useRef(null); // RAF-driven marquee — impervious to CSS animation suppression React.useEffect(() => { const el = trackRef.current; if (!el) return; let raf; let x = 0; // Compute speed so one loop takes ~300s on mobile, ~2000s on desktop const computeSpeed = () => { const halfW = el.scrollWidth / 2; const targetSec = isMobile ? 300 : 2000; return halfW / (targetSec * 60); // px per frame at 60fps }; let speed = computeSpeed(); const step = () => { x -= speed; const halfW = el.scrollWidth / 2; if (Math.abs(x) >= halfW) x = 0; el.style.transform = `translateX(${x}px)`; raf = requestAnimationFrame(step); }; // Recompute speed after first paint when scrollWidth is accurate const init = () => { speed = computeSpeed(); raf = requestAnimationFrame(step); }; const to = setTimeout(init, 0); return () => { clearTimeout(to); cancelAnimationFrame(raf); }; }, [isMobile]); return (
Built on tools you already own
{track.map((logo, i) => (
{ e.currentTarget.style.transform = 'scale(1.15)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; }} > {logo.name}
))}
); } Object.assign(window, { Navbar, Hero, StatsSection, LogoMarquee });