/* global React, Button, Pill, Eyebrow, Icon */ const { useState: useSecState, useEffect: useSecEffect, useRef: useSecRef } = React; /* Mobile breakpoint used for responsive calendar crop values */ const BM_MOBILE_BREAKPOINT = 760; /* Keyframes + a11y-safe reduced-motion gate. Injected once. */ (function injectHeroAnims() { if (document.getElementById("bm-hero-anim-style")) return; const s = document.createElement("style"); s.id = "bm-hero-anim-style"; s.textContent = ` @keyframes bm-ring { 0% { transform: scale(0.92); opacity: 0.55; } 70% { opacity: 0; } 100% { transform: scale(1.8); opacity: 0; } } @keyframes bm-bar { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } } /* Subtle idle breathing — small amplitude so bars feel alive before audio. */ @keyframes bm-bar-idle { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(0.78); } } @keyframes bm-line-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes bm-dot { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .bm-ring, .bm-bar, .bm-dot, .bm-orbit, .bm-shimmer, .bm-halo { animation: none !important; } .bm-bar-idle, .bm-ring-idle { animation: none !important; } } /* Futuristic avatar animations */ @keyframes bm-orbit { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes bm-shimmer { 0%, 100% { transform: translate(-30%, -30%) scale(1); opacity: 0.65; } 50% { transform: translate(-28%, -28%) scale(1.08); opacity: 0.9; } } @keyframes bm-halo { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.04); } } /* Neon metric glow — two variants so Ruben can compare */ .bm-neon-blue { color: #B3C6FF !important; text-shadow: 0 0 6px rgba(109,145,242,0.85), 0 0 14px rgba(109,145,242,0.65), 0 0 28px rgba(109,145,242,0.45), 0 0 56px rgba(109,145,242,0.28); } .bm-neon-white { color: #FFFFFF !important; text-shadow: 0 0 6px rgba(255,255,255,0.9), 0 0 14px rgba(255,255,255,0.6), 0 0 28px rgba(255,255,255,0.35), 0 0 56px rgba(179,198,255,0.25); } /* Modal */ @keyframes bm-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes bm-pop-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Redesign — hero signature moment */ @keyframes bm-shader-drift { 0% { transform: translate(-4%, -2%) scale(1.05); } 50% { transform: translate(4%, 3%) scale(1.16); } 100% { transform: translate(-4%, -2%) scale(1.05); } } @keyframes bm-draw { from { stroke-dashoffset: 640; } to { stroke-dashoffset: 0; } } @keyframes bm-area-in { from { opacity: 0; } to { opacity: 1; } } /* Testimonials marquee — seamless loop (track holds 2 copies, shifts -50%). */ @keyframes bm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .bm-marquee-track { animation: bm-marquee 48s linear infinite; } .bm-marquee:hover .bm-marquee-track { animation-play-state: paused; } /* === Imported design (BeaverMind Sections.dc.html) — micro-visual + vertical-marquee keyframes === */ @keyframes bmBar{0%,100%{transform:scaleY(0.28)}50%{transform:scaleY(1)}} @keyframes bmPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.09);opacity:0.82}} @keyframes bmRing{0%{transform:scale(0.55);opacity:0.7}100%{transform:scale(1.7);opacity:0}} @keyframes bmDots{0%,60%,100%{opacity:0.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}} @keyframes bmDraw{0%{stroke-dashoffset:var(--len)}68%,100%{stroke-dashoffset:0}} @keyframes bmFill{0%{width:0}68%,100%{width:var(--w)}} @keyframes bmFade{0%{opacity:0}68%,100%{opacity:0.9}} @keyframes bmTick{0%,28%{opacity:0;transform:scale(0.4)}48%,100%{opacity:1;transform:scale(1)}} @keyframes bmTickBar{0%{width:0}48%,100%{width:100%}} @keyframes bmShimmer{0%,100%{opacity:0.3}50%{opacity:0.9}} @keyframes bmUp{0%{transform:translateY(0)}100%{transform:translateY(-50%)}} @keyframes bmDown{0%{transform:translateY(-50%)}100%{transform:translateY(0)}} @keyframes bmRevive{0%,18%{background:rgba(109,145,242,0.18)}55%,100%{background:#6D91F2}} @keyframes bmPop{0%,12%{opacity:0;transform:scale(0.4)}45%,100%{opacity:1;transform:scale(1)}} @keyframes bmGrowY{0%{transform:scaleY(0.12)}60%,100%{transform:scaleY(1)}} .bm-marq:hover .bm-marq-track{animation-play-state:paused;} @media (prefers-reduced-motion: reduce) { .bm-shader { animation: none !important; } .bm-marquee { overflow-x: auto !important; } .bm-marquee-track { animation: none !important; } .bm-marq-track { animation: none !important; } } /* Horizontal card rail — scroll-snap carousel (What we build, proof) */ .bm-rail { scrollbar-width: thin; scrollbar-color: rgba(109,145,242,0.45) transparent; } .bm-rail::-webkit-scrollbar { height: 6px; } .bm-rail::-webkit-scrollbar-track { background: transparent; } .bm-rail::-webkit-scrollbar-thumb { background: rgba(109,145,242,0.35); border-radius: 999px; } .bm-rail::-webkit-scrollbar-thumb:hover { background: rgba(109,145,242,0.6); } /* Auto-scroll case rail — scrollbar hidden (controlled by drift + arrows) */ .bm-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .bm-no-scrollbar::-webkit-scrollbar { display: none; } `; document.head.appendChild(s); })(); /* ------------------------------------------------------------------ Shared config + helpers ------------------------------------------------------------------ */ const CANVAS_MAX = 1200; /* GHL calendar: "Discovery Call With Ruben (Founder & CEO)" */ const GHL_CAL_ID = "u1ZRJUGOmDQknNvuHoKv"; const GHL_CAL_EMBED_URL = `https://api.leadconnectorhq.com/widget/booking/${GHL_CAL_ID}`; /* Stable id in the GHL pattern "_" — computed once so the iframe isn't remounted on re-render. form_embed.js uses this id to postMessage height updates back into the iframe. */ const GHL_IFRAME_ID = `${GHL_CAL_ID}_${Date.now()}`; /* Scroll directly to the calendar embed. Prefer the calendar iframe container itself over the enclosing "Let's Talk" section so users land on the booking widget, not the intro copy. Falls back sensibly for pages that host only one of them. */ function scrollToTalk() { const target = document.getElementById("calendar") || // homepage document.getElementById("cs-calendar") || // case-study subpages document.getElementById("talk"); // fallback if (target) target.scrollIntoView({ behavior: "smooth", block: "start" }); else if (window.location.pathname !== "/") window.location.href = "/#calendar"; } /* Open the "agent coming soon" modal — pub/sub via CustomEvent */ function openAgentModal() { window.dispatchEvent(new CustomEvent("bm:open-agent-modal")); } const eyebrowStyle = { fontSize: 11, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--bm-accent)", lineHeight: 1, }; const displayXL = { fontFamily: "var(--bm-font-display)", fontSize: "clamp(48px, 6.6vw, 88px)", fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.02, color: "var(--bm-text)", margin: 0, }; const displayL = { fontFamily: "var(--bm-font-display)", fontSize: "clamp(36px, 4.4vw, 56px)", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.06, color: "var(--bm-text)", margin: 0, }; const displayM = { fontFamily: "var(--bm-font-display)", fontSize: "clamp(26px, 2.8vw, 36px)", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.12, color: "var(--bm-text)", margin: 0, }; const bodyL = { fontSize: 19, lineHeight: 1.55, color: "var(--bm-text-muted)", fontWeight: 400, margin: 0, }; const bodyM = { fontSize: 16, lineHeight: 1.6, color: "var(--bm-text-muted)", fontWeight: 400, margin: 0, }; /* Signature radial glow, bottom-left */ function BottomLeftGlow() { return (
); } /* ------------------------------------------------------------------ Motion utilities — count-up, in-view, blueprint, shader, reveal init. All respect prefers-reduced-motion and degrade safely without JS. ------------------------------------------------------------------ */ const bmReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches; /* Split a transcript into short, caption-sized lines (YouTube-style). No per-word timing data — captions advance proportionally to playback. Greedy word-wrap (no regex lookbehind, for older Safari) + a natural break after sentence-ending punctuation. */ function bmCaptionChunks(text) { if (!text) return []; const MAX = 34; const words = String(text).trim().split(/\s+/); const out = []; let line = ""; for (let i = 0; i < words.length; i++) { const w = words[i]; const cand = line ? line + " " + w : w; if (cand.length > MAX && line) { out.push(line); line = w; } else { line = cand; } if (/[.?!\u2026]$/.test(w) && line.length >= 18) { out.push(line); line = ""; } } if (line) out.push(line); return out; } /* Fire once when `ref` first enters the viewport. */ function useInViewOnce(ref, threshold) { const [seen, setSeen] = useSecState(false); useSecEffect(() => { if (seen) return; const el = ref.current; if (!el || typeof IntersectionObserver === "undefined") { setSeen(true); return; } const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }); }, { threshold: threshold || 0.4 }); io.observe(el); return () => io.disconnect(); }, [seen]); return seen; } /* Count-up with tabular figures. Animates 0 → `to` on first scroll-in. Reduced-motion / no rAF jumps straight to the final value. */ function CountUp({ to, decimals = 0, prefix = "", suffix = "", durationMs = 1100, style, className }) { const ref = useSecRef(null); const inView = useInViewOnce(ref, 0.5); const [val, setVal] = useSecState(0); useSecEffect(() => { if (!inView) return; if (bmReducedMotion() || typeof requestAnimationFrame === "undefined") { setVal(to); return; } let raf, start = null; const ease = (t) => 1 - Math.pow(1 - t, 3); const step = (ts) => { if (start === null) start = ts; const p = Math.min(1, (ts - start) / durationMs); setVal(to * ease(p)); if (p < 1) raf = requestAnimationFrame(step); else setVal(to); }; raf = requestAnimationFrame(step); return () => { if (raf) cancelAnimationFrame(raf); }; }, [inView, to]); const formatted = Number(val).toLocaleString("en-US", { minimumFractionDigits: decimals, maximumFractionDigits: decimals, }); return ( {prefix}{formatted}{suffix} ); } /* Blueprint grid overlay — 1px lines at 24px, low opacity, masked to fade. */ function BlueprintGrid({ tone = "ink", style }) { const line = tone === "paper" ? "var(--bm-grid-paper)" : "var(--bm-grid-ink)"; const mask = "radial-gradient(ellipse 95% 85% at 50% 25%, #000 35%, transparent 82%)"; return (
); } /* Hero shader — one slow low-contrast accent gradient that drifts. CSS disables the drift under reduced-motion (static fallback). */ function HeroShader() { return (
); } /* Faint grain over flat dark fills. */ function Grain({ opacity = 0.05 }) { const raw = "" + "" + ""; const uri = "data:image/svg+xml," + encodeURIComponent(raw); return (
); } /* Signature — drifting "neural constellation": brand-blue nodes joined by proximity links, with a subtle cursor parallax. The living version of the blueprint grid; ties to the voice/AI product. Canvas + rAF, pauses when offscreen or the tab is hidden, renders a single static frame under prefers-reduced-motion. pointer-events: none, aria-hidden. */ function NeuralField() { const wrapRef = useSecRef(null); const canvasRef = useSecRef(null); useSecEffect(() => { const wrap = wrapRef.current, canvas = canvasRef.current; if (!wrap || !canvas || typeof window === "undefined") return; const ctx = canvas.getContext && canvas.getContext("2d"); if (!ctx) return; const reduce = bmReducedMotion(); const dpr = Math.min(window.devicePixelRatio || 1, 2); let w = 0, h = 0, nodes = [], raf = null, inView = true; let tx = 0.5, ty = 0.42, cx = 0.5, cy = 0.42; // parallax target / smoothed const LINK = 130; function build() { const r = wrap.getBoundingClientRect(); w = Math.max(1, r.width); h = Math.max(1, r.height); canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr); canvas.style.width = w + "px"; canvas.style.height = h + "px"; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const n = Math.max(20, Math.min(44, Math.round(w / 36))); nodes = []; for (let i = 0; i < n; i++) { nodes.push({ x: Math.random() * w, y: Math.random() * h, vx: (Math.random() - 0.5) * 0.16, vy: (Math.random() - 0.5) * 0.16, r: 1 + Math.random() * 1.5, }); } } function frame(move) { cx += (tx - cx) * 0.045; cy += (ty - cy) * 0.045; const ox = (cx - 0.5) * 26, oy = (cy - 0.42) * 18; if (move) for (const p of nodes) { p.x += p.vx; p.y += p.vy; if (p.x < -20) p.x = w + 20; else if (p.x > w + 20) p.x = -20; if (p.y < -20) p.y = h + 20; else if (p.y > h + 20) p.y = -20; } ctx.clearRect(0, 0, w, h); for (let i = 0; i < nodes.length; i++) { for (let j = i + 1; j < nodes.length; j++) { const a = nodes[i], b = nodes[j]; const dx = a.x - b.x, dy = a.y - b.y, d2 = dx * dx + dy * dy; if (d2 < LINK * LINK) { const al = (1 - Math.sqrt(d2) / LINK) * 0.16; ctx.strokeStyle = "rgba(109,145,242," + al.toFixed(3) + ")"; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(a.x + ox, a.y + oy); ctx.lineTo(b.x + ox, b.y + oy); ctx.stroke(); } } } ctx.fillStyle = "rgba(137,166,245,0.5)"; for (const p of nodes) { ctx.beginPath(); ctx.arc(p.x + ox, p.y + oy, p.r, 0, 6.2832); ctx.fill(); } } function loop() { frame(true); raf = requestAnimationFrame(loop); } function start() { if (raf == null && !reduce) loop(); } function stop() { if (raf != null) { cancelAnimationFrame(raf); raf = null; } } build(); if (reduce) frame(false); else loop(); // Re-measure after the first layout pass — the canvas can mount before the // hero section has resolved its final width. if (typeof requestAnimationFrame !== "undefined") { requestAnimationFrame(() => { build(); if (reduce) frame(false); }); } const onMove = (e) => { tx = e.clientX / window.innerWidth; ty = e.clientY / window.innerHeight; }; const onResize = () => { build(); if (reduce) frame(false); }; const onVis = () => { if (document.hidden) stop(); else if (inView) start(); }; if (!reduce) window.addEventListener("mousemove", onMove, { passive: true }); window.addEventListener("resize", onResize); document.addEventListener("visibilitychange", onVis); let ro = null; if (typeof ResizeObserver !== "undefined") { ro = new ResizeObserver(onResize); ro.observe(wrap); } let io = null; if (typeof IntersectionObserver !== "undefined") { io = new IntersectionObserver(([e]) => { inView = e.isIntersecting; if (!reduce) { if (inView) start(); else stop(); } }, { threshold: 0 }); io.observe(wrap); } return () => { stop(); window.removeEventListener("mousemove", onMove); window.removeEventListener("resize", onResize); document.removeEventListener("visibilitychange", onVis); if (ro) ro.disconnect(); if (io) io.disconnect(); }; // eslint-disable-next-line }, []); return (
); } /* Arm scroll-reveal: hide .bm-reveal then play on intersect. Progressive enhancement — without this running, elements stay visible. */ function bmArmReveals() { try { if (bmReducedMotion() || typeof IntersectionObserver === "undefined") return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("is-in"); io.unobserve(e.target); } }); }, { threshold: 0.15, rootMargin: "0px 0px -6% 0px" }); document.querySelectorAll(".bm-reveal").forEach((el) => { el.classList.add("bm-armed"); io.observe(el); }); } catch (_) {} } /* ------------------------------------------------------------------ 1. Navigation ------------------------------------------------------------------ */ function SiteNav() { const [scrolled, setScrolled] = useSecState(false); const [menuOpen, setMenuOpen] = useSecState(false); useSecEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); /* Arm scroll-reveal once the React tree has painted (App renders in one go). */ useSecEffect(() => { const id = requestAnimationFrame(bmArmReveals); return () => cancelAnimationFrame(id); }, []); /* Lock body scroll while mobile menu open */ useSecEffect(() => { if (!menuOpen) return; const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; }, [menuOpen]); const linkStyle = { color: "var(--bm-text-muted)", fontSize: 14, fontWeight: 500, textDecoration: "none", transition: "color 120ms var(--bm-ease-standard)", }; const goTalk = () => { setMenuOpen(false); const target = document.getElementById("calendar") || document.getElementById("cs-calendar"); if (target) { target.scrollIntoView({ behavior: "smooth", block: "start" }); } else { window.location.href = "/#calendar"; } }; return (
setMenuOpen(false)}> BeaverMind.ai {/* Desktop nav — hidden on tablet/mobile via mobile.css */} {/* Hamburger — shown on tablet/mobile via mobile.css */}
{/* Mobile menu overlay — full-screen, fully opaque navy. Scroll is on the OUTER overlay (not an inner flex child) because iOS Safari is flaky with nested overflow inside a fixed element while body scroll is locked. Uses 100dvh so the Safari URL bar doesn't clip the CTA. */} {menuOpen && (
{/* Local top bar inside overlay — sticky so the close X stays reachable while the user scrolls the link list. */}
setMenuOpen(false)} style={{ display: "flex", alignItems: "center" }}> BeaverMind.ai
{/* Link list + CTA — plain block flow, no flex:1 + overflow nesting */}
)}
); } /* ------------------------------------------------------------------ 2. Hero ------------------------------------------------------------------ */ function Hero2() { return (
For 7–8 figure coaches & consultants

A business that runs without you.

We build and run the AI behind your sales, delivery, and operations — done-for-you, on your stack, so revenue keeps coming whether you show up or not.

Here's one of those systems — a real outbound call, no human on the line.

Hit the KPIs we set in 90 days — or your money back
); } /* Signature moment 1 — abstract "leak → recovered" proof. A revenue-recovery curve draws in, three figures count up to a real result ($457 → $6,800 · 14.9x). Data-like, not illustrative. */ function HeroProof() { return (
Dead-lead reactivation 15 days
} /> } /> } />
); } function ProofStat({ label, node, tone }) { const color = tone === "good" ? "var(--bm-good)" : "var(--bm-text)"; return (
{label} {node}
); } /* Hero secondary visual: live call + extraction panel. Picked up from the UI kit, tightened. Earns its space by showing what a voice agent actually does. */ function HeroLiveCall({ embedded }) { /* Real recorded "Emma" closed-deal calls (Ruben's public YouTube). Two selectable calls; play-on-demand, full audio, with the timestamped transcript scrolling in sync. Audio + transcript JSON both lazy-load — the click that starts playback is the iOS audio-unlock gesture. */ const CALLS = { "2k": { audio: "/assets/audio/emma-real-2k.mp3", data: "/assets/call-2k.json", amount: "$2,000", tab: "$2K deal" }, "4800": { audio: "/assets/audio/emma-real-4800.mp3", data: "/assets/call-4800.json", amount: "$4,800", tab: "$4.8K deal" }, }; const [callKey, setCallKey] = useSecState("2k"); const [turnsByKey, setTurnsByKey] = useSecState({}); const [playing, setPlaying] = useSecState(false); const [cur, setCur] = useSecState(0); const audioRef = useSecRef(null); const listRef = useSecRef(null); const panelRef = useSecRef(null); const turns = turnsByKey[callKey] || null; const loadTurns = (key) => { if (turnsByKey[key]) return; fetch(CALLS[key].data).then((r) => r.json()) .then((d) => setTurnsByKey((prev) => ({ ...prev, [key]: d }))) .catch(() => {}); }; /* One audio element; mirror its events into state. */ useSecEffect(() => { if (typeof Audio === "undefined") return; const a = new Audio(); a.preload = "none"; a.src = CALLS["2k"].audio; audioRef.current = a; const onTime = () => setCur(a.currentTime || 0); const onPlay = () => setPlaying(true); const onPause = () => setPlaying(false); const onEnd = () => { setPlaying(false); setCur(0); }; a.addEventListener("timeupdate", onTime); a.addEventListener("play", onPlay); a.addEventListener("pause", onPause); a.addEventListener("ended", onEnd); return () => { try { a.pause(); } catch (_) {} a.removeEventListener("timeupdate", onTime); a.removeEventListener("play", onPlay); a.removeEventListener("pause", onPause); a.removeEventListener("ended", onEnd); }; // eslint-disable-next-line }, []); /* Load the default transcript up front so the panel reads as a real call before playback; pause audio when the panel scrolls offscreen. */ useSecEffect(() => { loadTurns("2k"); /* eslint-disable-next-line */ }, []); useSecEffect(() => { if (!panelRef.current || typeof IntersectionObserver === "undefined") return; const io = new IntersectionObserver(([e]) => { if (!e.isIntersecting) { try { audioRef.current && audioRef.current.pause(); } catch (_) {} } }, { threshold: 0 }); io.observe(panelRef.current); return () => io.disconnect(); }, []); const selectCall = (key) => { if (key === callKey) return; const a = audioRef.current; try { a && a.pause(); } catch (_) {} if (a) a.src = CALLS[key].audio; setCallKey(key); setCur(0); setPlaying(false); loadTurns(key); }; const togglePlay = () => { const a = audioRef.current; if (!a) return; if (!a.paused) { a.pause(); return; } const full = new URL(CALLS[callKey].audio, window.location.href).href; if (a.src !== full) a.src = CALLS[callKey].audio; loadTurns(callKey); const p = a.play(); if (p && p.catch) p.catch(() => {}); }; let activeIdx = -1; if (turns) { for (let i = 0; i < turns.length; i++) { if (turns[i].t <= cur + 0.2) activeIdx = i; else break; } } const speaking = playing && activeIdx >= 0 && turns && turns[activeIdx] && turns[activeIdx].w === "a"; /* Keep the active line centered — manual scrollTop so the page never jumps. */ useSecEffect(() => { const c = listRef.current; if (!c || activeIdx < 0) return; const el = c.querySelector(`[data-turn="${activeIdx}"]`); if (el) c.scrollTop = el.offsetTop - c.clientHeight / 2 + el.clientHeight / 2; }, [activeIdx]); const mmss = (s) => `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(Math.floor(s % 60)).padStart(2, "0")}`; return (
{/* Real-call badge */}
Real call
{/* Agent + playback controls */}
Emma
AI Voice Agent
Appointment setter
{playing ? "Live" : "Ready"} · {mmss(cur)}
{/* Transcript + call selector — synced to the real audio. */}
Unedited transcript
{["2k", "4800"].map((k) => { const sel = k === callKey; return ( ); })}
No one on your team was on this call. Emma reactivated a cold lead, qualified it, and booked it — a human closer took it from there. Closed at {CALLS[callKey].amount}.
{turns ? turns.map((tn, i) => { const isAgent = tn.w === "a"; const active = i === activeIdx; return (
{isAgent ? "Emma · AI" : "Prospect"}
{tn.x}
); }) : (
Loading transcript…
)}
Watch the full case study
); } function VoiceAvatar({ speaking, avatarSrc, idle }) { /* Emma's canonical avatar — holographic-professional portrait with animated pulse rings, ambient halo, and rim glow. `speaking` = full motion; `idle` = subtle always-on motion (slower rings + gentle halo) so she draws attention before the call plays. */ return (
{/* Ambient halo — always-on soft glow, pulses while speaking */} {/* Pulsing expansion rings — only while speaking */} {[0, 1, 2].map((i) => ( ))} {/* Portrait disc — real rendered Emma, clipped to circle */}
AI agent {/* Subtle top-left specular wash for a holographic shine feel */}
); } function SoundWave({ active, idle }) { const bars = 14; return (
{Array.from({ length: bars }).map((_, i) => { const mid = (bars - 1) / 2; const falloff = 1 - Math.abs(i - mid) / (mid + 1); const h = 6 + Math.round(falloff * 20); const delay = (i * 70) % 700; return ( ); })}
); } function TypingDots() { return (
Lead {[0, 1, 2].map((i) => ( ))}
); } /* ------------------------------------------------------------------ 3. The Contrarian Truth / why we disqualify (paper) ------------------------------------------------------------------ */ function ContrarianTruth() { return (
Why we disqualify

Most AI projects don't fail on the technology. They fail on the foundation.

Your pipeline leaks somewhere you can't measure — dead leads, slow speed-to-lead, no-shows. But AI only amplifies what's already there. If your process doesn't work with humans, we won't take it on — we say no more often than we say yes.

); } function FoundationCard({ tone, icon, stat, statLabel, body }) { const accent = tone === "warn" ? "var(--bm-warn)" : "var(--bm-good)"; const tint = tone === "warn" ? "rgba(242,196,109,0.16)" : "rgba(95,226,176,0.16)"; const iconColor = tone === "warn" ? "#8A6A1F" : "#157A57"; return (
{stat} {statLabel}

{body}

); } /* ------------------------------------------------------------------ 3. Proof bar (slim) — social proof immediately under the hero. Three count-up metrics + a "proven first" line + client names (text). ------------------------------------------------------------------ */ function ProofBar() { const metrics = [ { node: , label: "ROI on a dead-lead list" }, { node: , label: "cost per outbound call" }, { node: , label: "email open rate" }, ]; return (
Proven in production
{metrics.map((m, i) => (
{m.node} {m.label}
))}
Every system proven inside a $3M+ business before it ships to yours. MovesMethod · Five50 Advisory · Dr Andrea Grandi
); } /* ------------------------------------------------------------------ 4. What We Build ------------------------------------------------------------------ */ /* Animated micro-visuals ported from the Claude Design file (BeaverMind Sections.dc.html). Each returns a small React tree. */ function bmViz(type) { const h = React.createElement; const A = "#6D91F2"; const FAINT = "rgba(109,145,242,0.18)"; if (type === "face") { const n = 28, bars = []; for (let i = 0; i < n; i++) { const mid = (n - 1) / 2; const env = 1 - Math.abs(i - mid) / (mid + 1); const bh = 4 + Math.round(env * env * 22) + ((i % 3) * 2); bars.push(h("span", { key: i, style: { width: 2, height: bh, borderRadius: 2, background: "rgba(109,145,242,0.55)", transformOrigin: "center", animation: `bmBar ${0.8 + (i % 5) * 0.1}s ease-in-out ${(i % 7) * 0.06}s infinite` } })); } return h("div", { style: { width: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 14, padding: "10px 0" } }, h("div", { key: "av", style: { width: 116, height: 116, borderRadius: "50%", backgroundImage: "url('/assets/emma-avatar.png?v=2')", backgroundSize: "cover", backgroundPosition: "center top", border: "2px solid rgba(109,145,242,0.55)", boxShadow: "0 0 0 6px rgba(0,3,34,0.55), 0 0 46px -6px rgba(109,145,242,0.6)" } }), h("div", { key: "name", style: { fontFamily: "'SF Pro Display'", fontWeight: 700, fontSize: 26, letterSpacing: "-0.02em", color: "#F5F9FF", lineHeight: 1, marginTop: 4 } }, "Emma"), h("div", { key: "role", style: { fontSize: 12, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6D91F2" } }, "AI Voice Agent"), h("div", { key: "wave", style: { display: "flex", alignItems: "center", gap: 2, height: 30, marginTop: 4 } }, bars), h("div", { key: "live", style: { display: "flex", alignItems: "center", gap: 9, fontSize: 12, fontWeight: 600, letterSpacing: "0.16em", color: "#8A94B4", marginTop: 2 } }, h("span", { style: { width: 9, height: 9, borderRadius: "50%", background: "#34D399", boxShadow: "0 0 0 3px rgba(52,211,153,0.2)" } }), h("span", null, "LIVE · 00:21")) ); } if (type === "wave") { const bars = []; for (let i = 0; i < 20; i++) bars.push(h("span", { key: i, style: { flex: 1, height: "100%", borderRadius: 2, background: i % 3 === 0 ? A : "rgba(109,145,242,0.4)", transformOrigin: "center", animation: `bmBar ${0.7 + (i % 5) * 0.12}s ease-in-out ${i * 0.05}s infinite` } })); return h("div", { style: { display: "flex", gap: 3, alignItems: "center", height: 40, width: "100%" } }, bars); } if (type === "ring") { const r = 34, c = 2 * Math.PI * r; return h("div", { style: { position: "relative", width: 100, height: 100, display: "flex", alignItems: "center", justifyContent: "center" } }, h("svg", { key: "s", width: 100, height: 100, viewBox: "0 0 100 100", style: { transform: "rotate(-90deg)" } }, h("circle", { cx: 50, cy: 50, r: r, fill: "none", stroke: "rgba(109,145,242,0.16)", strokeWidth: 6 }), h("circle", { cx: 50, cy: 50, r: r, fill: "none", stroke: A, strokeWidth: 6, strokeLinecap: "round", strokeDasharray: `${c * 0.92} ${c}`, style: { "--len": c + "px", strokeDashoffset: 0, animation: "bmDraw 3.4s ease-out infinite" } })), h("div", { key: "t", style: { position: "absolute", fontFamily: "'SF Pro Display'", fontWeight: 700, fontSize: 26, color: "#F5F9FF", letterSpacing: "-0.02em" } }, "92")); } if (type === "chat") { const dot = (d) => h("span", { key: d, style: { width: 7, height: 7, borderRadius: "50%", background: A, display: "inline-block", animation: `bmDots 1.4s ease-in-out ${d * 0.18}s infinite` } }); return h("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 12, justifyContent: "center" } }, h("div", { key: "q", style: { alignSelf: "flex-start", maxWidth: "88%", background: "#001161", border: "1px solid rgba(109,145,242,0.14)", borderRadius: "14px 14px 14px 4px", padding: "12px 14px", fontSize: 13.5, lineHeight: 1.4, color: "#F5F9FF" } }, "How should I adjust my deload week?"), h("div", { key: "a", style: { alignSelf: "flex-end", background: "rgba(109,145,242,0.16)", border: "1px solid rgba(109,145,242,0.32)", borderRadius: "14px 14px 4px 14px", padding: "15px 17px", display: "flex", gap: 6, alignItems: "center" } }, dot(0), dot(1), dot(2))); } if (type === "spark") { const LINE = "M0,92 L36,72 L72,84 L108,52 L150,62 L192,30 L232,42 L280,18"; const AREA = LINE + " L280,120 L0,120 Z"; return h("div", { style: { width: "100%" } }, h("svg", { viewBox: "0 0 280 120", width: "100%", height: 150, preserveAspectRatio: "none" }, h("defs", null, h("linearGradient", { id: "bmsg", x1: 0, y1: 0, x2: 0, y2: 1 }, h("stop", { offset: "0%", stopColor: "rgba(109,145,242,0.38)" }), h("stop", { offset: "100%", stopColor: "rgba(109,145,242,0)" }))), h("path", { d: AREA, fill: "url(#bmsg)", style: { animation: "bmFade 3.4s ease-out infinite" } }), h("path", { d: LINE, fill: "none", stroke: A, strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", pathLength: 100, strokeDasharray: 100, style: { "--len": 100, strokeDashoffset: 0, animation: "bmDraw 3.4s ease-out infinite" } }), h("circle", { r: 4, fill: A, cx: 280, cy: 18, style: { animation: "bmPulse 2s ease-in-out infinite" } }))); } if (type === "revive") { const row = (d) => h("div", { key: d, style: { display: "flex", alignItems: "center", gap: 8, width: 148 } }, h("span", { style: { flex: "none", width: 9, height: 9, borderRadius: "50%", background: FAINT, animation: `bmRevive 3s ease-out ${d}s infinite` } }), h("span", { style: { flex: 1, height: 4, borderRadius: 3, background: FAINT } })); return h("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 6 } }, row(0), row(0.5), row(1)); } if (type === "calendar") { const cells = []; for (let i = 0; i < 8; i++) { const hit = i === 5; cells.push(h("span", { key: i, style: { width: 14, height: 11, borderRadius: 3, background: hit ? A : "rgba(0,3,34,0.4)", border: hit ? "none" : "1px solid rgba(109,145,242,0.25)", display: "flex", alignItems: "center", justifyContent: "center", animation: hit ? "bmPop 3s ease-out infinite" : "none" } }, hit ? h("svg", { width: 8, height: 8, viewBox: "0 0 12 12", fill: "none" }, h("path", { d: "M2.5 6.5 L5 9 L9.5 3.5", stroke: "#000322", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })) : null)); } return h("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" } }, h("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 14px)", gap: 4 } }, cells)); } if (type === "inbound") { return h("div", { style: { position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" } }, h("div", { key: "r1", style: { position: "absolute", width: 34, height: 34, borderRadius: "50%", border: "1px solid rgba(109,145,242,0.4)", animation: "bmRing 2.4s ease-out infinite" } }), h("div", { key: "r2", style: { position: "absolute", width: 34, height: 34, borderRadius: "50%", border: "1px solid rgba(109,145,242,0.3)", animation: "bmRing 2.4s ease-out 1.2s infinite" } }), h("div", { key: "c", style: { position: "relative", width: 27, height: 27, borderRadius: "50%", background: "rgba(109,145,242,0.16)", border: "1px solid rgba(109,145,242,0.5)", display: "flex", alignItems: "center", justifyContent: "center", animation: "bmPulse 2s ease-in-out infinite" } }, h("svg", { width: 13, height: 13, viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M6.5 4 C5 4 4 5 4 6.5 C4 14 10 20 17.5 20 C19 20 20 19 20 17.5 L20 15 L15.5 13.5 L14 15.5 C12 14.5 9.5 12 8.5 10 L10.5 8.5 L9 4 Z", fill: A })))); } if (type === "funnel") { const dotRow = (n, lit, d) => { const arr = []; for (let i = 0; i < n; i++) arr.push(h("span", { key: i, style: { width: 7, height: 7, borderRadius: "50%", background: lit ? A : FAINT, animation: lit ? `bmPop 3s ease-out ${d}s infinite` : "none" } })); return h("div", { key: n, style: { display: "flex", gap: 5 } }, arr); }; return h("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 5 } }, dotRow(5, false, 0), dotRow(3, false, 0), dotRow(1, true, 0.4)); } if (type === "warm") { return h("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", gap: 11 } }, h("div", { style: { position: "relative", width: 14, height: 38 } }, h("div", { key: "trk", style: { position: "absolute", top: 0, bottom: 8, left: "50%", transform: "translateX(-50%)", width: 8, borderRadius: 999, background: FAINT } }), h("div", { key: "fill", style: { position: "absolute", top: 4, bottom: 8, left: "50%", transform: "translateX(-50%) scaleY(1)", transformOrigin: "bottom", width: 8, borderRadius: 999, background: "linear-gradient(180deg,#6D91F2,#557CE8)", animation: "bmGrowY 3s ease-out infinite" } }), h("div", { key: "bulb", style: { position: "absolute", bottom: 0, left: "50%", transform: "translateX(-50%)", width: 14, height: 14, borderRadius: "50%", background: A } })), h("div", { style: { display: "flex", flexDirection: "column", gap: 4 } }, h("span", { key: "a", style: { width: 24, height: 4, borderRadius: 3, background: FAINT } }), h("span", { key: "b", style: { width: 16, height: 4, borderRadius: 3, background: FAINT } }), h("span", { key: "c", style: { width: 28, height: 4, borderRadius: 3, background: A } }))); } if (type === "loop") { return h("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" } }, h("svg", { width: 120, height: 40, viewBox: "0 0 120 40" }, h("rect", { key: "b1", x: 6, y: 7, width: 34, height: 18, rx: 6, fill: "rgba(109,145,242,0.16)", stroke: "rgba(109,145,242,0.4)", strokeWidth: 1 }), h("rect", { key: "b2", x: 80, y: 7, width: 34, height: 18, rx: 6, fill: A }), h("path", { key: "arc", d: "M40 27 C54 39 66 39 80 27", fill: "none", stroke: A, strokeWidth: 1.6, strokeLinecap: "round", pathLength: 100, strokeDasharray: 100, style: { "--len": 100, animation: "bmDraw 3s ease-out infinite" } }), h("path", { key: "ah", d: "M80 27 L73 26 M80 27 L78 34", fill: "none", stroke: A, strokeWidth: 1.6, strokeLinecap: "round" }))); } if (type === "draft") { const line = (w, d) => h("div", { key: w, style: { width: w, height: 4, borderRadius: 2, background: "rgba(109,145,242,0.18)", position: "relative", overflow: "hidden" } }, h("div", { style: { position: "absolute", inset: 0, width: 0, "--w": "100%", background: A, animation: `bmFill 3s ease-out ${d}s infinite` } })); return h("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", gap: 12 } }, h("div", { style: { width: 34, height: 40, borderRadius: 5, background: "rgba(0,3,34,0.5)", border: "1px solid rgba(109,145,242,0.28)", padding: 6, display: "flex", flexDirection: "column", gap: 4, boxSizing: "border-box", justifyContent: "center" } }, line("100%", 0), line("78%", 0.25), line("90%", 0.5)), h("div", { style: { width: 20, height: 20, borderRadius: "50%", background: A, display: "flex", alignItems: "center", justifyContent: "center", animation: "bmTick 3s ease-out 0.8s infinite" } }, h("svg", { width: 11, height: 11, viewBox: "0 0 12 12", fill: "none" }, h("path", { d: "M2.5 6.5 L5 9 L9.5 3.5", stroke: "#000322", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })))); } if (type === "program") { const heights = [2, 3, 1, 3, 2]; const cols = heights.map((n, ci) => { const cells = []; for (let i = 0; i < n; i++) cells.push(h("span", { key: i, style: { width: 11, height: 7, borderRadius: 2, background: i === 0 ? A : FAINT, animation: `bmPop 3s ease-out ${ci * 0.18 + i * 0.1}s infinite` } })); return h("div", { key: ci, style: { display: "flex", flexDirection: "column-reverse", gap: 3 } }, cells); }); return h("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "flex-end", justifyContent: "center", gap: 5 } }, cols); } if (type === "qc") { const bars = [0, 1, 2, 3].map((i) => h("div", { key: i, style: { width: 9, height: 30, borderRadius: 3, background: A, transformOrigin: "bottom", animation: `bmGrowY 2.6s ease-in-out ${i * 0.12}s infinite` } })); return h("div", { style: { position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "flex-end", justifyContent: "center", gap: 7, paddingBottom: 5 } }, bars, h("div", { key: "ln", style: { position: "absolute", left: "50%", top: "calc(50% - 13px)", transform: "translateX(-50%)", width: 62, borderTop: "1px dashed rgba(109,145,242,0.6)" } })); } if (type === "fanout") { const ty = [3, 13, 23, 33]; const lines = ty.map((y, i) => h("path", { key: "l" + i, d: `M30 20 C70 20 80 ${y + 3} 108 ${y + 3}`, fill: "none", stroke: "rgba(109,145,242,0.4)", strokeWidth: 1.2, pathLength: 100, strokeDasharray: 100, style: { "--len": 100, animation: `bmDraw 3s ease-out ${i * 0.15}s infinite` } })); const tiles = ty.map((y, i) => h("rect", { key: "t" + i, x: 108, y: y, width: 28, height: 6, rx: 2, fill: A, style: { transformBox: "fill-box", transformOrigin: "center", animation: `bmPop 3s ease-out ${0.3 + i * 0.15}s infinite` } })); return h("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" } }, h("svg", { width: 144, height: 40, viewBox: "0 0 144 40" }, lines, h("circle", { key: "n1", cx: 22, cy: 20, r: 8, fill: "rgba(109,145,242,0.16)", stroke: A, strokeWidth: 1.5 }), h("circle", { key: "n2", cx: 22, cy: 20, r: 3, fill: A, style: { animation: "bmPulse 2s ease-in-out infinite" } }), tiles)); } if (type === "pipeline") { const env = (x) => h("g", { key: x }, h("rect", { x: x, y: 5, width: 24, height: 16, rx: 3, fill: "rgba(109,145,242,0.14)", stroke: "rgba(109,145,242,0.45)", strokeWidth: 1 }), h("path", { d: `M${x + 1} 7 L${x + 12} 15 L${x + 23} 7`, fill: "none", stroke: "rgba(109,145,242,0.65)", strokeWidth: 1 })); return h("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" } }, h("svg", { width: 132, height: 40, viewBox: "0 0 132 40" }, env(6), env(54), env(102), h("line", { key: "trk", x1: 8, y1: 33, x2: 124, y2: 33, stroke: "rgba(109,145,242,0.25)", strokeWidth: 1.5, strokeLinecap: "round" }), h("circle", { key: "dot", cx: 10, cy: 33, r: 3.5, fill: A }, h("animate", { attributeName: "cx", values: "12;120", dur: "2.4s", repeatCount: "indefinite" })))); } if (type === "dashboard") { const bars = [14, 22, 18, 28, 24].map((bh, i) => h("div", { key: i, style: { width: 6, height: bh, borderRadius: 2, background: i === 3 ? A : FAINT, transformOrigin: "bottom", animation: `bmGrowY 2.8s ease-in-out ${i * 0.1}s infinite` } })); return h("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", gap: 13 } }, h("div", { style: { display: "flex", flexDirection: "column", gap: 5, alignItems: "flex-start" } }, h("div", { key: "n", style: { fontFamily: "'SF Pro Display'", fontWeight: 700, fontSize: 18, color: "#F5F9FF", letterSpacing: "-0.02em", lineHeight: 1 } }, "94%"), h("div", { key: "u", style: { width: 32, height: 4, borderRadius: 3, background: FAINT } })), h("div", { style: { display: "flex", alignItems: "flex-end", gap: 4, height: 30 } }, bars)); } return null; } /* Playable Emma demo — reuses the existing live-call audio. One demo, plays in place (no "see it work → calendar"). */ function VoicePlayer() { const lines = [ "/assets/audio/01-emma.mp3?v=8", "/assets/audio/02-john.mp3?v=8", "/assets/audio/03-emma.mp3?v=8", "/assets/audio/04-john.mp3?v=8", "/assets/audio/05-emma.mp3?v=8", "/assets/audio/06-john.mp3?v=8", "/assets/audio/07-emma.mp3?v=8", ]; const audioRef = useSecRef(null); const idxRef = useSecRef(0); const [playing, setPlaying] = useSecState(false); useSecEffect(() => { if (typeof Audio === "undefined") return; const a = new Audio(); a.preload = "auto"; audioRef.current = a; return () => { try { a.pause(); } catch (_) {} }; }, []); const playFrom = (i) => { const a = audioRef.current; if (!a) return; if (i >= lines.length) { idxRef.current = 0; setPlaying(false); return; } idxRef.current = i; a.src = lines[i]; a.currentTime = 0; a.onended = () => playFrom(idxRef.current + 1); const p = a.play(); if (p && p.catch) p.catch(() => {}); }; const toggle = () => { const a = audioRef.current; if (!a) return; if (playing) { try { a.pause(); } catch (_) {} a.onended = null; setPlaying(false); } else { setPlaying(true); playFrom(idxRef.current >= lines.length ? 0 : idxRef.current); } }; return (
Emma
AI Voice Agent
); } function LeadTile({ title, body, vizType, demo }) { return ( ); } function SupportCard({ title, body, vizType }) { const [hover, setHover] = useSecState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ border: `1px solid ${hover ? "var(--bm-hairline-strong)" : "var(--bm-hairline)"}`, borderRadius: 18, background: hover ? "#001161" : "#000B45", padding: 22, display: "flex", flexDirection: "column", gap: 14, transform: hover ? "translateY(-2px)" : "none", transition: "transform 200ms var(--bm-ease), border-color 200ms var(--bm-ease), background 200ms var(--bm-ease)", }} >
{bmViz(vizType)}
{title}
{body}
); } /* Closer testimonial — a human closer on human vs AI setters. Lazy YouTube facade (poster + click-to-load) so the iframe never loads on first paint. Sits right after the hero: "here's the agent → here's the human vouching." */ function CloserProof() { const [playing, setPlaying] = useSecState(false); const VID = "aM8PIHUxNYo"; return (
From the closer's chair

We asked the closer if an AI setter made his job harder. Watch his answer.

Not our words. The closer who worked these booked calls — human setters vs the AI, unscripted.

{playing ? (