// Hero v6, Full light/dark adaptive, time-based metrics, award-winning canvas design const { useState: useHeroState, useEffect: useHeroEffect, useRef: useHeroRef } = React; // ─── Agent network data (module-level, never recreated) ────────────────────── const H_NODES = [ { x: 0.38, y: 0.50, r: 6, c: [0,217,160], label: 'TRIGGER' }, { x: 0.55, y: 0.50, r: 13, c: [0,217,160], label: 'ORCHESTRATOR', hub: true }, { x: 0.67, y: 0.27, r: 7, c: [139,92,246], label: 'CLASSIFIER' }, { x: 0.67, y: 0.50, r: 7, c: [139,92,246], label: 'MEMORY' }, { x: 0.67, y: 0.73, r: 7, c: [139,92,246], label: 'TOOL CALLER' }, { x: 0.80, y: 0.21, r: 5, c: [245,158,11], label: 'CRM' }, { x: 0.80, y: 0.43, r: 5, c: [245,158,11], label: 'CALENDAR' }, { x: 0.80, y: 0.65, r: 5, c: [245,158,11], label: 'EMAIL/SMS' }, { x: 0.72, y: 0.83, r: 6, c: [0,217,160], label: 'VALIDATOR' }, { x: 0.54, y: 0.82, r: 6, c: [0,217,160], label: 'RESPONSE' }, ]; const H_EDGES = [ { f:0, t:1, c:[0,217,160] }, { f:1, t:2, c:[0,217,160] }, { f:1, t:3, c:[0,217,160] }, { f:1, t:4, c:[0,217,160] }, { f:2, t:5, c:[139,92,246] }, { f:3, t:6, c:[139,92,246] }, { f:4, t:7, c:[139,92,246] }, { f:5, t:8, c:[245,158,11] }, { f:6, t:8, c:[245,158,11] }, { f:7, t:8, c:[245,158,11] }, { f:8, t:9, c:[0,217,160] }, { f:9, t:1, c:[0,217,160], feedback: true }, ]; const H_PKTS = [ { e:0, spd:0.18, off:0.00 }, { e:0, spd:0.18, off:0.55 }, { e:1, spd:0.22, off:0.10 }, { e:2, spd:0.20, off:0.42 }, { e:3, spd:0.16, off:0.72 }, { e:4, spd:0.25, off:0.20 }, { e:5, spd:0.23, off:0.50 }, { e:6, spd:0.21, off:0.80 }, { e:7, spd:0.28, off:0.15 }, { e:8, spd:0.27, off:0.46 }, { e:9, spd:0.26, off:0.75 }, { e:10, spd:0.19, off:0.30 }, { e:11, spd:0.11, off:0.08 }, ]; // Rotating last word in headline, speaks to every vertical const H_WORDS = ['business.', 'pipeline.', 'clinic.', 'firm.', 'brokerage.', 'practice.', 'brand.']; const H_ACTS = [ [ { t:'trigger', m:'Lead signal via API webhook' }, { t:'process', m:'Intent enrichment, 5 data sources' }, { t:'process', m:'Email crafted · persona: VP Sales' }, { t:'success', m:'CRM updated · reply routed to AE ✓' }, ], [ { t:'trigger', m:'Booking request · Med Spa client' }, { t:'process', m:'Calendar availability synced' }, { t:'process', m:'Confirmation: SMS + email dispatched' }, { t:'success', m:'Intake form pre-filled · delivered ✓' }, ], [ { t:'trigger', m:'Invoice 30+ days overdue flagged' }, { t:'process', m:'Payment reminder sequence started' }, { t:'process', m:'Link opened · 3 min after send' }, { t:'success', m:'Payment received · QuickBooks synced ✓'}, ], [ { t:'trigger', m:'New job order · staffing client' }, { t:'process', m:'Candidate scoring pipeline running' }, { t:'process', m:'Top 3 matched · Calendly links sent' }, { t:'success', m:'Interview confirmed · 0 human touch ✓'}, ], ]; // ─── Theme tokens (pure function, no React deps) ───────────────────────────── function heroTheme(isDark) { const d = isDark; return { sectionBg: d ? '#0C0E14' : '#F5F5FA', bloomBg: d ? 'radial-gradient(ellipse 55% 70% at 68% 47%, rgba(0,217,160,0.06) 0%, rgba(139,92,246,0.04) 45%, transparent 70%)' : 'radial-gradient(ellipse 55% 70% at 68% 47%, rgba(0,140,110,0.06) 0%, rgba(99,61,200,0.04) 45%, transparent 70%)', leftFade: d ? 'linear-gradient(to right, #0C0E14 0%, #0C0E14 22%, rgba(12,14,20,0.75) 48%, transparent 68%)' : 'linear-gradient(to right, #F5F5FA 0%, #F5F5FA 22%, rgba(245,245,250,0.78) 48%, transparent 68%)', // Badge badgeBg: d ? 'rgba(0,217,160,0.09)' : 'rgba(0,130,100,0.08)', badgeBdr: d ? 'rgba(0,217,160,0.28)' : 'rgba(0,130,100,0.32)', badgeTxt: d ? '#00D9A0' : '#007A5A', // Headline h1Txt: d ? '#F0F2F5' : '#0A0A12', gradTxt: d ? 'linear-gradient(120deg, #00D9A0 0%, #6BFFD0 50%, #00D9A0 100%)' : 'linear-gradient(120deg, #007A5A 0%, #00A077 50%, #007A5A 100%)', subTxt: d ? 'rgba(240,242,245,0.58)' : 'rgba(10,10,18,0.6)', subStrong: d ? 'rgba(240,242,245,0.88)' : '#0A0A12', // Ghost CTA ctaGhostBg: d ? 'rgba(255,255,255,0.05)' : 'rgba(10,10,18,0.04)', ctaGhostTxt: d ? 'rgba(240,242,245,0.78)' : 'rgba(10,10,18,0.75)', ctaGhostBdr: d ? 'rgba(255,255,255,0.12)' : 'rgba(10,10,18,0.2)', ctaGhostHover:d ? 'rgba(255,255,255,0.1)' : 'rgba(10,10,18,0.08)', ctaBdrHover: d ? 'rgba(0,217,160,0.4)' : 'rgba(0,130,100,0.45)', // Stats statMint: d ? '#00D9A0' : '#007A5A', statViolet: d ? '#8B5CF6' : '#4828CC', statAmber: d ? '#F59E0B' : '#B45309', statLbl: d ? 'rgba(240,242,245,0.33)' : 'rgba(10,10,18,0.5)', statDivBg: d ? 'rgba(255,255,255,0.09)' : 'rgba(10,10,18,0.14)', // Activity card cardBg: d ? 'rgba(14,16,24,0.86)' : 'rgba(255,255,255,0.88)', cardBdr: d ? 'rgba(255,255,255,0.09)' : 'rgba(10,10,18,0.1)', cardShadow: d ? '0 32px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.05)' : '0 24px 60px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.8), inset 0 1px 0 rgba(255,255,255,0.9)', cardHdrBg: d ? 'rgba(255,255,255,0.025)' : 'rgba(10,10,18,0.03)', cardHdrBdr: d ? 'rgba(255,255,255,0.07)' : 'rgba(10,10,18,0.08)', cardMonoTxt: d ? 'rgba(255,255,255,0.28)' : 'rgba(10,10,18,0.45)', cardSecTxt: d ? 'rgba(255,255,255,0.22)' : 'rgba(10,10,18,0.4)', cardLbl: d ? 'rgba(255,255,255,0.2)' : 'rgba(10,10,18,0.42)', cardDivider: d ? 'rgba(255,255,255,0.06)' : 'rgba(10,10,18,0.08)', processTxt: d ? 'rgba(240,242,245,0.55)' : 'rgba(10,10,18,0.7)', successTxt: d ? '#00D9A0' : '#007A5A', trigTxt: d ? '#8B5CF6' : '#4828CC', // Ticker tickerBg: d ? 'rgba(12,14,20,0.88)' : 'rgba(245,245,250,0.94)', tickerBdr: d ? 'rgba(255,255,255,0.07)' : 'rgba(10,10,18,0.1)', tickerTxt: d ? 'rgba(255,255,255,0.28)' : 'rgba(10,10,18,0.45)', tickerDot: d ? '#00D9A0' : '#007A5A', tickerDotOp: d ? 0.38 : 0.5, // Canvas-specific params canvas: { gridRGB: d ? [255,255,255] : [0,0,20], gridLineA: d ? (x,W) => 0.013 + (x/W)*0.018 : (x,W) => 0.038 + (x/W)*0.042, gridHLineA: d ? 0.013 : 0.028, dotA: d ? (x,W) => 0.035 + (x/W)*0.065 : (x,W) => 0.055 + (x/W)*0.1, edgeCore: d ? 0.22 : 0.30, edgeGlow: d ? 0.055 : 0.075, pktHalo: d ? 0.12 : 0.15, hubBloom: d ? 0.16 : 0.12, nodeLbl: d ? 'rgba(255,255,255,0.22)' : 'rgba(0,0,20,0.42)', spotlightAlpha: d ? 0.10 : 0.08, }, }; } // ─── Canvas helpers ─────────────────────────────────────────────────────────── function heroBez(t, ax, ay, bx, by, cx, cy) { const u = 1 - t; return { x: u*u*ax + 2*u*t*bx + t*t*cx, y: u*u*ay + 2*u*t*by + t*t*cy }; } function drawHeroCanvas(ctx, W, H, sec, cv, mouse) { ctx.clearRect(0, 0, W, H); const [gr, gg, gb] = cv.gridRGB; const G = 72; // Cursor-following ambient mint spotlight, award-winning touch if (mouse && mouse.active) { const cx = mouse.x * W, cy = mouse.y * H; const r1 = 320; const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, r1); grad.addColorStop(0, `rgba(0,217,160,${cv.spotlightAlpha})`); grad.addColorStop(0.45, `rgba(139,92,246,${cv.spotlightAlpha * 0.4})`); grad.addColorStop(1, 'rgba(0,217,160,0)'); ctx.fillStyle = grad; ctx.fillRect(cx - r1, cy - r1, r1 * 2, r1 * 2); } // ── Grid lines ──────────────────────────────────────────────────────────── ctx.lineWidth = 0.55; for (let x = 0; x <= W; x += G) { const a = cv.gridLineA(x, W); ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.strokeStyle = `rgba(${gr},${gg},${gb},${a})`; ctx.stroke(); } for (let y = 0; y <= H; y += G) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.strokeStyle = `rgba(${gr},${gg},${gb},${cv.gridHLineA})`; ctx.stroke(); } // Grid intersection dots for (let x = 0; x <= W; x += G) { for (let y = 0; y <= H; y += G) { const a = cv.dotA(x, W); ctx.beginPath(); ctx.arc(x, y, 1, 0, Math.PI * 2); ctx.fillStyle = `rgba(${gr},${gg},${gb},${a})`; ctx.fill(); } } // ── Edges ───────────────────────────────────────────────────────────────── H_EDGES.forEach(edge => { const fn = H_NODES[edge.f], tn = H_NODES[edge.t]; const [r, g, b] = edge.c; const fx = fn.x*W, fy = fn.y*H, tx = tn.x*W, ty = tn.y*H; const cpx = edge.feedback ? (fx+tx)/2 : (fx+tx)/2 - (ty-fy)*0.15; const cpy = edge.feedback ? Math.max(fy,ty) + H*0.13 : (fy+ty)/2 + (tx-fx)*0.15; // Glow pass ctx.beginPath(); ctx.moveTo(fx,fy); ctx.quadraticCurveTo(cpx,cpy,tx,ty); ctx.strokeStyle = `rgba(${r},${g},${b},${cv.edgeGlow})`; ctx.lineWidth = 4; ctx.stroke(); // Core line ctx.beginPath(); ctx.moveTo(fx,fy); ctx.quadraticCurveTo(cpx,cpy,tx,ty); ctx.strokeStyle = `rgba(${r},${g},${b},${cv.edgeCore})`; ctx.lineWidth = 0.8; ctx.stroke(); }); // ── Data packets ────────────────────────────────────────────────────────── H_PKTS.forEach(pkt => { const edge = H_EDGES[pkt.e]; const fn = H_NODES[edge.f], tn = H_NODES[edge.t]; const [r, g, b] = edge.c; const fx = fn.x*W, fy = fn.y*H, tx = tn.x*W, ty = tn.y*H; const cpx = edge.feedback ? (fx+tx)/2 : (fx+tx)/2 - (ty-fy)*0.15; const cpy = edge.feedback ? Math.max(fy,ty) + H*0.13 : (fy+ty)/2 + (tx-fx)*0.15; const progress = (sec * pkt.spd + pkt.off) % 1; const { x: px, y: py } = heroBez(progress, fx, fy, cpx, cpy, tx, ty); ctx.beginPath(); ctx.arc(px, py, 6, 0, Math.PI*2); ctx.fillStyle = `rgba(${r},${g},${b},${cv.pktHalo})`; ctx.fill(); ctx.beginPath(); ctx.arc(px, py, 2.2, 0, Math.PI*2); ctx.fillStyle = `rgba(${r},${g},${b},0.9)`; ctx.fill(); }); // ── Nodes ───────────────────────────────────────────────────────────────── H_NODES.forEach((node, i) => { const nx = node.x*W, ny = node.y*H; const [r, g, b] = node.c; const pulse = Math.sin(sec * 1.25 + i * 0.88) * 0.5 + 0.5; if (node.hub) { const grd = ctx.createRadialGradient(nx, ny, 0, nx, ny, node.r * 7); grd.addColorStop(0, `rgba(${r},${g},${b},${cv.hubBloom})`); grd.addColorStop(1, `rgba(${r},${g},${b},0)`); ctx.fillStyle = grd; ctx.beginPath(); ctx.arc(nx, ny, node.r*7, 0, Math.PI*2); ctx.fill(); } // Outer pulsing ring ctx.beginPath(); ctx.arc(nx, ny, node.r + 5 + pulse * 4.5, 0, Math.PI*2); ctx.strokeStyle = `rgba(${r},${g},${b},${0.07 + pulse * 0.07})`; ctx.lineWidth = 0.7; ctx.stroke(); // Node border ctx.beginPath(); ctx.arc(nx, ny, node.r, 0, Math.PI*2); ctx.strokeStyle = `rgba(${r},${g},${b},${0.48 + pulse * 0.28})`; ctx.lineWidth = 1.4; ctx.stroke(); // Node fill ctx.beginPath(); ctx.arc(nx, ny, node.r - 1, 0, Math.PI*2); ctx.fillStyle = `rgba(${r},${g},${b},${0.06 + pulse * 0.05})`; ctx.fill(); // Label ctx.font = '500 8px "JetBrains Mono", monospace'; ctx.fillStyle = cv.nodeLbl; ctx.textAlign = 'center'; ctx.fillText(node.label, nx, ny + node.r + 14); }); } // ─── Time-based task count ──────────────────────────────────────────────────── // S-curve: 7am = 0 tasks, peaks around 9pm = 312 tasks function calcTasksToday() { const now = new Date(); const h = now.getHours() + now.getMinutes() / 60; const t = Math.max(0, Math.min(1, (h - 7) / 14)); // 7am → 9pm window const s = t * t * (3 - 2 * t); // smoothstep S-curve return Math.floor(s * 312); } // ─── Hero Component ─────────────────────────────────────────────────────────── function Hero({ theme }) { const isDark = theme !== 'light'; const T = heroTheme(isDark); const isMobile = typeof window !== 'undefined' && window.innerWidth <= 768; const canvasRef = useHeroRef(null); const rafRef = useHeroRef(null); const cvRef = useHeroRef(T.canvas); // updated via effect when theme changes const mouseRef = useHeroRef({ x: 0.5, y: 0.5, active: false, tx: 0.5, ty: 0.5 }); const [visible, setVisible] = useHeroState(false); const [actIdx, setActIdx] = useHeroState(0); const [logStep, setLogStep] = useHeroState(0); const [tasksToday, setTasksToday] = useHeroState(() => calcTasksToday()); const [wordIdx, setWordIdx] = useHeroState(0); const [mobileWidth, setMobileWidth] = useHeroState(() => typeof window !== 'undefined' ? window.innerWidth : 1024); // Track viewport width for responsive switching useHeroEffect(() => { const handleResize = () => setMobileWidth(window.innerWidth); window.addEventListener('resize', handleResize, { passive: true }); return () => window.removeEventListener('resize', handleResize); }, []); const isSmallScreen = mobileWidth <= 768; // Keep canvas theme ref in sync with light/dark toggle useHeroEffect(() => { cvRef.current = heroTheme(isDark).canvas; }, [isDark]); // Entrance fade-in useHeroEffect(() => { const id = setTimeout(() => setVisible(true), 100); return () => clearTimeout(id); }, []); // Tasks today, refresh every 60 s so number tracks real time useHeroEffect(() => { const id = setInterval(() => setTasksToday(calcTasksToday()), 60000); return () => clearInterval(id); }, []); // Rotating word in headline, every 2.4s useHeroEffect(() => { if (!visible) return; const id = setInterval(() => setWordIdx(i => (i + 1) % H_WORDS.length), 2400); return () => clearInterval(id); }, [visible]); // Canvas RAF loop — DISABLED on mobile for performance useHeroEffect(() => { if (isSmallScreen) return; // Skip canvas entirely on mobile const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); const dpr = window.devicePixelRatio || 1; const resize = () => { canvas.width = canvas.offsetWidth * dpr; canvas.height = canvas.offsetHeight * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }; resize(); const section = canvas.closest('section'); const onMove = (e) => { const r = canvas.getBoundingClientRect(); mouseRef.current.tx = (e.clientX - r.left) / r.width; mouseRef.current.ty = (e.clientY - r.top) / r.height; mouseRef.current.active = true; }; const onLeave = () => { mouseRef.current.active = false; }; if (section) { section.addEventListener('mousemove', onMove); section.addEventListener('mouseleave', onLeave); } const loop = ts => { const m = mouseRef.current; m.x += (m.tx - m.x) * 0.08; m.y += (m.ty - m.y) * 0.08; drawHeroCanvas(ctx, canvas.offsetWidth, canvas.offsetHeight, ts / 1000, cvRef.current, m); rafRef.current = requestAnimationFrame(loop); }; rafRef.current = requestAnimationFrame(loop); window.addEventListener('resize', resize); return () => { cancelAnimationFrame(rafRef.current); window.removeEventListener('resize', resize); if (section) { section.removeEventListener('mousemove', onMove); section.removeEventListener('mouseleave', onLeave); } }; }, [isSmallScreen]); // Activity log cycling through 4 workflow demos useHeroEffect(() => { if (!visible) return; const cur = H_ACTS[actIdx]; const id = setInterval(() => { setLogStep(s => { if (s >= cur.length - 1) { setActIdx(a => (a + 1) % H_ACTS.length); return 0; } return s + 1; }); }, 1800); return () => clearInterval(id); }, [visible, actIdx]); const act = H_ACTS[actIdx]; const tStyle = { trigger: T.trigTxt, process: T.processTxt, success: T.successTxt }; const tIcon = { trigger: '◈', process: '›', success: '✓' }; // MOBILE LAYOUT — Clean, centered, no canvas, no activity card if (isSmallScreen) { return (
{/* Subtle gradient bloom only */}
{/* Badge */}
AI AUTOMATION · B2B
{/* Headline */}

We build the{' '} AI systems{' '} that run your{' '} {H_WORDS[wordIdx]}

{/* Subline */}

Custom AI agents & automation for med spas, law firms, real estate teams, and B2B operators.{' '} Production-grade, not prototype.

{/* CTA buttons */}
Book a discovery call → See our work →
{/* Stats strip */}
{[ { val: '$1.2M', sub: 'saved in 6mo', c: T.statMint }, { val: '6 wks', sub: 'to deployed', c: T.statViolet }, { val: '99.97%', sub: 'uptime', c: T.statAmber }, ].map((s, i) => (
{s.val}
{s.sub}
))}
{/* Bottom ticker */}
{[...Array(6)].map((_, rep) => ['Production AI','Fixed Price','Code You Own','No Lock-in','6-Week Delivery','99.97% Uptime'].map((v, i) => ( {v} + )) )}
); } // DESKTOP LAYOUT return (
{/* Canvas: grid + agent network */} {/* Depth bloom */}
{/* Left-edge fade */}
{/* Content grid */}
{/* ── LEFT: copy ──────────────────────────────────────────────── */}
{/* Badge pill */}
AI AUTOMATION · B2B
{/* Headline, last line word rotates every 2.4s */}

We build the{' '} AI systems {' '} that run your{' '} {H_WORDS[wordIdx]}

{/* Sub */}

Custom AI agents, integrations, and automation for med spas, law firms, real estate teams, and B2B operators.{' '} Production-grade, not prototype.

{/* CTAs */}
{ const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left - rect.width / 2; const y = e.clientY - rect.top - rect.height / 2; e.currentTarget.style.transform = `translate(${x * 0.15}px, ${y * 0.15}px)`; }} onMouseEnter={e => { e.currentTarget.style.background = '#00F0B4'; e.currentTarget.style.boxShadow = isDark ? '0 12px 36px rgba(0,217,160,0.44)' : '0 12px 28px rgba(0,150,100,0.35)'; }} onMouseLeave={e => { e.currentTarget.style.background = '#00D9A0'; e.currentTarget.style.transform = 'translate(0px, 0px)'; e.currentTarget.style.boxShadow = isDark ? '0 4px 20px rgba(0,217,160,0.3)' : '0 4px 16px rgba(0,150,100,0.25)'; }} >Book a discovery call → { e.currentTarget.style.background = T.ctaGhostHover; e.currentTarget.style.borderColor = T.ctaBdrHover; e.currentTarget.style.color = T.h1Txt; }} onMouseLeave={e => { e.currentTarget.style.background = T.ctaGhostBg; e.currentTarget.style.borderColor = T.ctaGhostBdr; e.currentTarget.style.color = T.ctaGhostTxt; }} >See our work →
{/* Stats strip */}
{[ { val: '$1.2M', sub: 'saved in 6 months', c: T.statMint }, { val: '6 wks', sub: 'discovery to deployed', c: T.statViolet }, { val: '99.97%', sub: 'production uptime', c: T.statAmber }, ].map((s, i) => (
{s.val}
{s.sub}
{i < 2 && (
)} ))}
{/* ── RIGHT: live activity card ──────────────────────────────── */}
{/* Card header */}
{['#F87171','#FBBF24','#34D399'].map((c, i) => ( ))}
// AI SYSTEM · LIVE
processing
{/* Activity log */}
ACTIVE WORKFLOW
{act.map((item, i) => { const isVis = i <= logStep; return (
{tIcon[item.t]} {item.m}
); })}
{/* Divider */}
{/* Footer metrics, time-based tasks today */}
TODAY · AUTOMATED
{tasksToday} tasks
0 human
UPTIME
99.97%
{/* ── Bottom industry ticker ─────────────────────────────────────────── */}
{[...Array(4)].map((_, rep) => ['Production AI','Code You Own','Fixed Price','No Lock-in','Spec Locked Before Code', 'Loom Demo Every Friday','6-Week Delivery','Multi-agent Systems','99.97% Uptime SLA', 'Real Users in Week 3','Full Source Handoff'].map((v, i) => ( {v} + )) )}
); } Object.assign(window, { Hero });