/* Hero v3 — editorial hero with: • Background: internet & call waves (concentric sonar ripples + audio waveform) • Right side: a single unified product DASHBOARD with tabbed sub-brands (Code · Voice · Hub · Addons). No more 3 floating cards. • Brand naming: Grippy Code (Websites) is the mother; Grippy Voice = Receptionist, Grippy Hub = CRM, Addons = plugins. */ const Hero = () => { const sectionRef = React.useRef(null); const progress = useScrollProgress(sectionRef); return (
{/* Background: call/internet waves only — B148, Mike: constellation dots removed, waves carry the signal story on their own */} {/* Bottom fade only — keeps the wave bg from clashing with next section */}
{/* Top meta row */}
GRP / 00 · live build · v0.5
Code · Voice · Hub · Addons
{/* Headline + dashboard */}
{/* LEFT: Headline */}

{splitWords("Your shop")}
{splitWords("never misses")}
{splitWords("a call.")}

One agency, four products. Grippy Code ships the website that closes, Grippy Voice answers the phone 24/7, Grippy Hub runs the CRM, and Addons plug it into the rest of your stack — built for towing, HVAC, plumbing, and trades that can't afford to ring out.

{/* RIGHT: Unified product dashboard */}
{/* Trust strip / stats */}
{[ ['24/7', 'answer rate', 'Never a missed ring'], ['<2s', 'pickup time', 'Faster than a human'], ['+38%', 'booked jobs', 'After 30 days live'], ['100', 'lighthouse', 'Sites that rank & load'], ].map(([n, l, sub]) => (
{n}
{l}
{sub}
))}
{/* Scroll cue */}
SCROLL
); }; /* ───────────────────────── Background: call / internet waves ───────────────────────── */ const WaveBackground = ({ progress }) => { const canvasRef = React.useRef(null); // Audio waveform on canvas — flowing horizontal call signal React.useEffect(() => { const c = canvasRef.current; if (!c) return; const ctx = c.getContext('2d'); const dpr = Math.min(window.devicePixelRatio || 1, 2); let raf; const resize = () => { c.width = c.clientWidth * dpr; c.height = c.clientHeight * dpr; ctx.scale(dpr, dpr); }; resize(); window.addEventListener('resize', resize); const draw = (t) => { t *= 0.001; const w = c.clientWidth, h = c.clientHeight; ctx.clearRect(0, 0, w, h); // 3 stacked waves at different speeds and amplitudes const waves = [ { amp: 14, freq: 0.011, speed: 1.0, color: 'rgba(255, 87, 54, 0.55)', width: 1.4 }, { amp: 8, freq: 0.020, speed: 0.55, color: 'rgba(255,137, 97, 0.32)', width: 1.1 }, { amp: 4, freq: 0.035, speed: 1.6, color: 'rgba(255,255,255,0.10)', width: 0.8 }, ]; waves.forEach((wv, idx) => { ctx.beginPath(); for (let x = 0; x <= w; x += 4) { const envelope = Math.sin((x / w) * Math.PI); // taper edges const y = h * 0.5 + Math.sin(x * wv.freq + t * wv.speed) * wv.amp * envelope + Math.cos(x * wv.freq * 0.4 + t * (wv.speed * 0.6 + idx*0.3)) * wv.amp * 0.5 * envelope; if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.strokeStyle = wv.color; ctx.lineWidth = wv.width; ctx.stroke(); }); }; const tick = (t) => { draw(t); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); }; }, []); return (
{/* Concentric sonar rings — left side transmitter */} {/* Center waveform canvas */} {/* Vertical comm signal — subtle data ticks streaming across */} {/* Very subtle vignette so headline reads cleanly */}
); }; const SonarRings = ({ cx, cy, maxR = 500, count = 4, delay = 0 }) => (
{Array.from({length: count}).map((_, i) => ( ))} {/* Transmitter core */}
); const SignalTicks = () => (
{Array.from({length: 22}).map((_, i) => ( ))}
); /* ───────────────────────── Right-side product console (premium tier) ───────────────────────── */ const ProductDashboard = () => { const tabs = [ { id: 'code', label: 'Code', sub: 'Websites', icon: 'globe', accent: '#FF5736' }, { id: 'voice', label: 'Voice', sub: 'AI Receptionist', icon: 'phone', accent: '#FF7E54' }, { id: 'hub', label: 'Hub', sub: 'CRM', icon: 'hub', accent: '#FF5736' }, { id: 'addons', label: 'Addons', sub: 'Integrations', icon: 'plug', accent: '#FFB37A' }, ]; const [active, setActive] = React.useState(1); const [paused, setPaused] = React.useState(false); const [time, setTime] = React.useState(() => new Date()); React.useEffect(() => { const tt = setInterval(() => setTime(new Date()), 1000); return () => clearInterval(tt); }, []); React.useEffect(() => { if (paused) return; const id = setInterval(() => setActive(i => (i + 1) % tabs.length), 5800); return () => clearInterval(id); }, [paused]); const clock = time.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }); return (
setPaused(true)} onMouseLeave={() => setPaused(false)} > {/* Top-edge highlight (premium specular line) */} {/* TOOLBAR */}
Grippy Code
CRM Pro · {tabs[active].sub}
{/* Center: command-bar style address */}
crm.grippycode.com / {tabs[active].sub.toLowerCase().replace(' ', '-')} ⌘ K
{/* Right: live + clock + window */}
●{clock} US-EAST
{/* SUB-TOOLBAR — segmented tabs + breadcrumb */}
{tabs.map((t, i) => ( ))}
Workspace/Acme Towing/{tabs[active].sub} Live
{/* PANEL CONTENT — left rail + panel */}
{/* Left rail — vertical product context */}
{tabs.map((t, i) => ( ))}
{/* Panel */}
{active === 0 && } {active === 1 && } {active === 2 && } {active === 3 && }
{/* FOOTER STATUS */}
99.9 % uptime Encrypted · TLS 1.3 99 ms · p95
Workspace · Acme Towing v 1.0.0
); }; const DashIcon = ({ name, active }) => ; /* ──────────────────────────── PANELS — premium tier ──────────────────────────── */ /* ── Panel · Grippy Code ─────────────────────────────────────────────── */ const PanelCode = () => { // Sparkline path — conversion rate over 14 days, lightly noisy uptrend const points = [38, 41, 39, 44, 47, 45, 50, 52, 49, 55, 58, 60, 62, 67]; const max = Math.max(...points), min = Math.min(...points); const path = points.map((p, i) => { const x = (i / (points.length - 1)) * 100; const y = 100 - ((p - min) / (max - min)) * 90 - 5; return `${i === 0 ? 'M' : 'L'} ${x} ${y}`; }).join(' '); const area = `${path} L 100 100 L 0 100 Z`; return (
{/* Mini browser preview — Under-Control, a real Grippy build */}
underc.grippycode.com SSL
A clinical nutrition platform
Real food.
Real results. Real change.

A personalized approach to nutrition that supports your lifestyle and health goals.

Book Your Consultation Explore Nutrition Plans
{/* KPI stack with sparkline */}
Conv. rate ↑ 12.4 %
12.4% vs 8.9% prev
{/* Deploy strip */}
Deploy · main a3f81 · 47s
78% Healthy
); }; /* ── Panel · Grippy Voice (refined) ──────────────────────────────────── */ const PanelVoice = () => { const lines = [ { who: 'Caller', t: "Hey, I need a tow off the 405..." }, { who: 'Grippy', t: "On it. Pulling your location — truck #4 is 6 minutes out." }, { who: 'Caller', t: "Can you text my wife the ETA?" }, { who: 'Grippy', t: "Done. Confirmed at 7:42 PM. Anything else?" }, ]; const [idx, setIdx] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setIdx(i => (i + 1) % lines.length), 2800); return () => clearInterval(id); }, []); // B148 — real voice sample (Mike's curated Sarah recording, served by the platform) const [playing, setPlaying] = React.useState(false); const audioRef = React.useRef(null); const toggleSample = () => { if (!audioRef.current) { audioRef.current = new Audio('https://crm.grippycode.com/persona-sample/nova'); audioRef.current.addEventListener('ended', () => setPlaying(false)); } if (playing) { audioRef.current.pause(); audioRef.current.currentTime = 0; setPlaying(false); } else { audioRef.current.play().catch(() => {}); setPlaying(true); } }; React.useEffect(() => () => { if (audioRef.current) audioRef.current.pause(); }, []); return (
{/* Caller card */}
M
Sarah · The Professional en-US SR · 94 %
Inbound · live call · 00:47
{/* Transcript */}
Live transcript
Intent · Roadside assist Auto-saved
{lines.slice(0, idx + 1).map((l, i) => (
{l.who} {l.t}
))}
00:47
{Array.from({length: 64}).map((_,i) => ( ))}
01:12
{/* Outcome chips — the real post-call automations the platform runs */}
); }; /* ── Panel · Grippy Hub — replica of the REAL Command Center dashboard (B148, Mike: "our Dashboard looks like this") ─────────────────────── */ const PanelHub = () => { const agents = [ { ini: 'SJ', name: 'Sarah Johnson', role: 'Manager', pipe: '$0', deals: 0, tasks: 0, won: 0, c: '#38bdf8' }, { ini: 'MC', name: 'Mike Chen', role: 'SDR', pipe: '$12,990', deals: 3, tasks: 2, won: 0, c: '#FF5736' }, { ini: 'EW', name: 'Emma Wilson', role: 'SDR', pipe: '$2,680', deals: 1, tasks: 1, won: 1, c: '#fbbf24' }, ]; return (
{/* Command Center hero strip */}
Command Center
Welcome back, Acme Towing
Your pipeline, team performance, and action items — all in one place.
$12,990
Total pipeline
{/* KPI tiles — same four as the real dashboard */}
{/* Agent Performance — per-team-member cards, like the real thing */}
Agent performance All agents
{agents.map(a => (
{a.ini}
{a.name}
{a.role}
{a.pipe}pipeline
{a.deals} deals {a.tasks} tasks {a.won} won
))}
); }; /* ── Panel · Addons ──────────────────────────────────────────────────── */ const PanelAddons = () => { const addons = [ { n: 'Stripe', d: 'Payments & invoicing', on: true, cat: 'Billing', color: '#635BFF' }, { n: 'Gmail / Outlook', d: 'Two-way email inbox', on: true, cat: 'Email', color: '#EA4335' }, { n: 'Calendar', d: 'Booking & dispatch', on: true, cat: 'Schedule', color: '#4285F4' }, { n: 'CSV Import', d: 'Migrate from any CRM', on: true, cat: 'Data', color: '#34A853' }, { n: 'WhatsApp', d: 'Business messaging', on: false, cat: 'Messaging', color: '#25D366' }, { n: 'Instagram DM', d: 'Social inbox', on: false, cat: 'Messaging', color: '#E1306C' }, ]; return (
Addon marketplace
Plug in the rest of your stack
4 active 6 available
{addons.map(a => (
{a.n} {a.cat}
{a.d}
{a.on ? '● ON' : '+ ADD'}
))}
); }; /* ──────────────────────────── ATOMS ──────────────────────────── */ const KpiTile = ({ label, value, sub, flame }) => (
{label}
{value}
{sub}
); const ActionPill = ({ label, detail, icon }) => (
{icon === 'check' && } {icon === 'msg' && } {icon === 'cal' && } {label}
{detail}
); const PillarIcon = ({ name, muted }) => { const stroke = muted ? "#8a8a8a" : "#FF8961"; if (name === 'globe') return ( ); if (name === 'phone') return ( ); if (name === 'hub') return ( ); return ( ); }; window.Hero = Hero;