// Major sections of the Spotter landing page
const NavBar = () => {
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 40);
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
const links = [
['The leaks', '#leaks'],
['How we plug it', '#plug'],
['Why Spotter', '#why'],
['Process', '#process']];
return (
Spotter Digital
);
};
// Animated mic waveform (inspired by live-demo patterns)
const MicWave = ({ active = true }) => {
const [t, setT] = React.useState(0);
React.useEffect(() => {
let raf;
const start = performance.now();
const loop = () => {
setT((performance.now() - start) / 1000);
raf = requestAnimationFrame(loop);
};
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, []);
const bars = [
{ x: 5, base: 3.2 },
{ x: 25, base: 13.3 },
{ x: 45, base: 7.1 },
{ x: 65, base: 25.0 }, // center (listening)
{ x: 85, base: 17.9 },
{ x: 105, base: 9.4 },
{ x: 125, base: 3.2 }];
return (
{bars.map((b, i) => {
const mod = active ? Math.sin(t * 5 + i) * 0.5 + 0.5 : 0.4;
const h = b.base * (0.6 + mod * 0.9);
return (
);
};
// Live transcript that auto-types
const LiveTranscript = ({ active }) => {
const lines = React.useMemo(() => [
{ role: 'agent', text: 'Hi, this is Mia from Willow Med Spa in Katy. How can I help?' },
{ role: 'user', text: "Hey — do y'all still have HydraFacial appointments this week?" },
{ role: 'agent', text: 'Yes! We have Thursday at 2pm and Friday at 11am. Want me to text you the booking link?' },
{ role: 'user', text: 'Yes please — text Taylor.' },
{ role: 'agent', text: 'Link sent. See you Thursday, Taylor. ✨' }],
[]);
const [idx, setIdx] = React.useState(0);
const [sub, setSub] = React.useState('');
React.useEffect(() => {
if (!active) return;
if (idx >= lines.length) return;
const line = lines[idx];
if (sub.length < line.text.length) {
const to = setTimeout(() => setSub(line.text.slice(0, sub.length + 1)), 22);
return () => clearTimeout(to);
} else {
const to = setTimeout(() => {setIdx(idx + 1);setSub('');}, 900);
return () => clearTimeout(to);
}
}, [sub, idx, active, lines]);
const shown = lines.slice(0, idx);
const scrollRef = React.useRef(null);
React.useEffect(() => {
if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}, [sub, idx]);
return (
{shown.map((l, i) =>
);
};
const TranscriptLine = ({ role, text, cursor }) =>
{role === 'agent' ? 'Mia · AI Receptionist' : 'Caller'}
{text}{cursor && ▍ }
;
const Hero = () => {
const [active, setActive] = React.useState(true);
const [timer, setTimer] = React.useState(0);
React.useEffect(() => {
if (!active) return;
const id = setInterval(() => setTimer((t) => t + 1), 1000);
return () => clearInterval(id);
}, [active]);
const mm = String(Math.floor(timer / 60)).padStart(2, '0');
const ss = String(timer % 60).padStart(2, '0');
return (
{/* Top eyebrow */}
{/* Headline */}
You don't have a marketing problem. You have a leak problem.
The average local business loses $10k+ a year to missed calls, dead reviews, and a slipping Google profile. Spotter plugs every leak — 24/7, on autopilot.
Book a call
Talk to our AI agent live
{/* Live demo card */}
{/* Top bar */}
Live transcript
00:{mm}:{ss}
{/* Main demo body */}
{/* Left: mic + CTA */}
Hearing is believing
setActive((a) => !a)}
style={{
display: 'inline-flex', alignItems: 'center', gap: 8,
background: active ? '#171717' : '#003837',
color: '#faf3ec', padding: '14px 20px',
fontSize: 14, fontFamily: 'Inter, sans-serif', fontWeight: 500,
letterSpacing: '-0.01em', borderRadius: 999,
border: 'none', cursor: 'pointer'
}}>
{active ?
<>
{active ? 'End call' : 'Start talking'}
Works across: med spa · dental · home services · legal · auto · more
{/* Right: transcript */}
{/* Bottom stats strip */}
{[
{ k: 'Ring 1', v: 'Always picks up' },
{ k: '$527', v: 'Avg new-customer value' },
{ k: '$82k/yr', v: 'Leak from 3 missed calls/wk' },
{ k: '7 days', v: 'From call to live' }].
map((s, i) =>
)}
);
};
// --- THE THREE LEAKS — redesigned as a live "leak meter" ---
// Live-counting revenue ticker
const LeakCounter = () => {
const [cents, setCents] = React.useState(0);
const startRef = React.useRef(null);
const frameRef = React.useRef(null);
React.useEffect(() => {
// $82,000/year from 3 missed calls a week -> roughly $2.60/sec
// We use a believable $1.80/sec to feel bleedy, not cartoonish
const ratePerMs = 0.0018; // dollars per ms
const tick = (t) => {
if (!startRef.current) startRef.current = t;
const elapsed = t - startRef.current;
setCents(Math.floor(elapsed * ratePerMs * 100));
frameRef.current = requestAnimationFrame(tick);
};
frameRef.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(frameRef.current);
}, []);
const dollars = Math.floor(cents / 100);
const c = (cents % 100).toString().padStart(2, '0');
return (
$
{dollars.toLocaleString()}
.{c}
);
};
// Leak column with custom visual
const LeakColumn = ({ n, title, stat, statLabel, body, visual }) =>
Leak {n.toString().padStart(2, '0')}
{title}
{body}
;
// Visual 1 — phone ringing / voicemail silence
const VisualPhoneSilence = () => {
const [ring, setRing] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => setRing((r) => (r + 1) % 4), 700);
return () => clearInterval(id);
}, []);
return (
{[0, 1, 2].map((i) =>
i ? 0 : 0.9 - i * 0.25,
transition: 'opacity .4s ease',
transform: 'scale(' + (ring > i ? 1.4 : 1) + ')',
transitionProperty: 'opacity, transform',
transitionDuration: '.4s'
}}>
)}
→ Voicemail · No callback
{[
{ name: 'Jessica R.', stars: 5, body: 'Great service, super easy and friendly!', reply: null, ago: '2d' },
{ name: 'Marcus T.', stars: 4, body: 'Quality work, but front desk was slow.', reply: null, ago: '9d' },
{ name: 'Elena G.', stars: 5, body: 'Amber was amazing — highly recommend.', reply: null, ago: '18d' }].
map((r, i) =>
{r.name}
{'★'.repeat(r.stars)}{'☆'.repeat(5 - r.stars)}
{r.ago}
{r.body}
— No reply —
)}
Map pack · "[Your service] near you"
YOU · #11
{/* Competitor: climbing up */}
COMPETITOR · #2
;
const LeaksSection = () => {
return (
{/* Faint drip of leak lines behind the counter */}
{/* Headline + live counter */}
Most local businesses don't lose customers to price, location, or service.
They lose them to three silent leaks that never show up on a P&L — and are bleeding revenue in real-time, right now, while you read this.
Based on an average local business in a 250k-household metro.
{/* Three leak columns */}
);
};
Object.assign(window, { NavBar, Hero, LeaksSection });