/* =====================================================================
Services — bento grid of build types + AI overlay.
===================================================================== */
const { useEffect: useEffectSv, useRef: useRefSv, useState: useStateSv } = React;
function Services() {
const ref = useRefSv(null);
useReveal(ref);
return (
From a simple website everything you need .}
kicker="Every site is built by hand by our team — no AI slop, no templates. Lawn care, hydraulics, a food truck, a salon, whatever you do, we build the site that brings in business."
/>
);
}
function ServicesGrid() {
const builds = [
{ icon: '▭', name: 'Simple website', ex: [
'Lawn care · plumbers · contractors',
'Auto · body shops · detailers',
'Salons · barbers · spas',
'Food trucks · caterers · cafés',
'Personal trainers · coaches',
], budget: 'from $2k', weeks: '3 days', ai: '+chat' },
{ icon: '▦', name: 'Listings site', ex: [
'Real estate · agents · brokers',
'Used cars · dealerships',
'Short-term rentals',
'Farm equipment · RV lots',
'Commercial property',
], budget: 'from $6k', weeks: '2 wks', ai: '+search' },
{ icon: '▣', name: 'Full website', ex: [
'Multi-page · blog · gallery',
'Law firms · medical practices',
'Churches · nonprofits',
'Construction · HVAC · roofing',
'Consulting firms · agencies',
], budget: 'from $6k', weeks: '3 wks', ai: '+helper' },
{ icon: '▰', name: 'Online store', ex: [
'Sell products · take orders · ship',
'Boutique apparel · goods',
'Local food · farm direct',
'Custom merch · print on demand',
'Digital downloads · subscriptions',
], budget: 'from $9k', weeks: '4–6 wks', ai: '+support' },
{ icon: '★', name: 'Google presence', ex: [
'Local SEO · Google Business',
'Review management',
'Maps ranking · citations',
'Content · blog posts',
'Competitor monitoring',
], budget: 'from $1k', weeks: 'ongoing', ai: 'add-on' },
{ icon: '◫', name: 'Custom builds', ex: [
'Internal tools · dashboards',
'Client portals · logins',
'Data pipelines · integrations',
'Platforms · marketplaces',
'AI agents · automations',
], budget: 'custom', weeks: '6+ wks', ai: 'any AI' },
];
return (
{/* Spectrum cell (wide) */}
{/* AI banner */}
{builds.map((b, i) => (
))}
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
padding: 20, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 20,
background: 'var(--bg-elev-1)', border: '1px solid var(--border-strong)',
borderColor: hover ? 'var(--accent)' : 'var(--border-strong)',
transform: hover ? 'translateY(-2px)' : 'none',
transition: 'transform .25s var(--ease-out), border-color .25s',
cursor: 'pointer', position: 'relative', overflow: 'hidden',
}}>
{hover &&
}
{name}
{examples.map((e, i) => (
{e}
))}
{examples.length > 1 && (
{examples.map((_, i) => (
))}
)}
{
const r = e.currentTarget.getBoundingClientRect();
setPos(Math.max(4, Math.min(96, ((e.clientX - r.left) / r.width) * 100)));
}}
style={{ height: '100%', padding: 24, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', cursor: 'crosshair',
background: 'var(--accent)', color: 'var(--accent-ink)', border: '1px solid var(--accent-strong)', minHeight: 200 }}>
— COMPLEXITY SPECTRUM
↔ HOVER TO EXPLORE
{hovered.label}
— {hovered.note}
◆ ALL PLANS INCLUDE HOSTING
|
MONTHLY PLANS AVAILABLE · FROM $79/MO
|
NO LONG-TERM CONTRACT REQUIRED
— AI FOR YOUR CUSTOMERS
LIVE
We build by hand.AI works for you.
Real people design and code your site. Then — if you want — we plug in a smart helper that answers questions, books jobs, and fills out forms for your customers 24/7. Optional add-on from $400/mo.
{/* Chat window — taller, bigger text, multi-conversation */}
{/* Chat header */}
SMART ASSISTANT · ONLINE
{/* Messages */}
{msgs.map((m, i) => (
{m.t}
))}
{/* typing indicator when waiting for bot reply */}
{step < conversations[convIdx].length && conversations[convIdx][step]?.r === 'bot' && (
)}
{/* Conversation index dots */}
{conversations.map((_, i) => (
))}
);
}
function OKCMap() {
return (
{[...Array(10)].map((_, i) => (
— HEADQUARTERS
Oklahoma City
35.4676°N · 97.5164°W
METRO + BEYOND
);
}
function ProcessCell() {
const steps = [
{ n: '01', t: 'Consult', d: '30 min · free' },
{ n: '02', t: 'Scope', d: '1–3 day write-up' },
{ n: '03', t: 'Build', d: '2–12 weeks' },
{ n: '04', t: 'Ship', d: 'deploy + handoff' },
];
return (
);
}
/* =====================================================================
SEO INTELLIGENCE — full-width cell with an animated OKC metro heat map.
Real geography: Oklahoma County + Canadian + Cleveland + Logan county
outlines, major interstates (I-35, I-40, I-44, I-240), the North
Canadian & Canadian rivers, plotted from true lon/lat with a linear
equirectangular projection centered on OKC.
===================================================================== */
function SEOIntelligenceCell() {
const wrapRef = useRefSv(null);
const canvasRef = useRefSv(null);
const scrollRef = useRefSv(0);
/* ===== Geographic data — real lon/lat pairs (WGS84-ish).
Outlines are simplified polylines traced from USGS county/highway
references. Precision is coarse on purpose — we want the map to
READ as OKC metro, not survey it. */
// Bounding window for the projection (lon min/max, lat min/max)
const BOUNDS = { lonMin: -98.15, lonMax: -96.95, latMin: 34.95, latMax: 35.90 };
// County outlines — each polygon is an array of [lon, lat] pairs.
const COUNTIES = [
// Oklahoma County (central, contains OKC downtown/Edmond/Midwest City/Del City)
{ name: 'Oklahoma', ring: [
[-97.670, 35.663], [-97.140, 35.663], [-97.140, 35.400],
[-97.670, 35.400], [-97.670, 35.663],
]},
// Canadian County (west — Yukon, El Reno, Mustang partial)
{ name: 'Canadian', ring: [
[-98.100, 35.663], [-97.670, 35.663], [-97.670, 35.400],
[-98.100, 35.400], [-98.100, 35.663],
]},
// Cleveland County (south — Norman, Moore, partial Midwest City)
{ name: 'Cleveland', ring: [
[-97.670, 35.400], [-97.140, 35.400], [-97.140, 35.050],
[-97.670, 35.050], [-97.670, 35.400],
]},
// Logan County (north — Guthrie, Arcadia edge)
{ name: 'Logan', ring: [
[-97.670, 35.840], [-97.140, 35.840], [-97.140, 35.663],
[-97.670, 35.663], [-97.670, 35.840],
]},
// Pottawatomie (east — Shawnee/McLoud)
{ name: 'Pottawatomie', ring: [
[-97.140, 35.500], [-96.950, 35.500], [-96.950, 35.100],
[-97.140, 35.100], [-97.140, 35.500],
]},
// Grady (southwest corner — Tuttle/Chickasha edge)
{ name: 'Grady', ring: [
[-98.100, 35.400], [-97.670, 35.400], [-97.670, 35.050],
[-98.100, 35.050], [-98.100, 35.400],
]},
];
// Interstates — each is a polyline. Paths follow the real corridors.
const HIGHWAYS = [
{ name: 'I-35', line: [
[-97.460, 35.870], [-97.475, 35.750], [-97.480, 35.670],
[-97.485, 35.580], [-97.490, 35.480], [-97.490, 35.380],
[-97.460, 35.260], [-97.445, 35.180], [-97.420, 35.060],
]},
{ name: 'I-40', line: [
[-98.050, 35.520], [-97.950, 35.510], [-97.760, 35.490],
[-97.600, 35.470], [-97.520, 35.465], [-97.440, 35.465],
[-97.300, 35.475], [-97.200, 35.490], [-97.080, 35.490],
[-96.950, 35.450],
]},
{ name: 'I-44', line: [
[-98.100, 35.260], [-97.950, 35.350], [-97.800, 35.420],
[-97.650, 35.460], [-97.550, 35.480], [-97.480, 35.495],
[-97.440, 35.520], [-97.380, 35.580], [-97.300, 35.670],
[-97.200, 35.750], [-97.080, 35.820],
]},
{ name: 'I-240', line: [
[-97.640, 35.385], [-97.540, 35.380], [-97.440, 35.385],
[-97.340, 35.395], [-97.250, 35.410],
]},
];
// Rivers — North Canadian cuts east-west through OKC, Canadian river south
const RIVERS = [
{ name: 'North Canadian', line: [
[-98.080, 35.470], [-97.950, 35.495], [-97.800, 35.510],
[-97.650, 35.500], [-97.530, 35.475], [-97.430, 35.445],
[-97.320, 35.410], [-97.200, 35.380], [-97.080, 35.360],
[-96.980, 35.330],
]},
{ name: 'Canadian', line: [
[-98.100, 35.140], [-97.950, 35.170], [-97.800, 35.200],
[-97.660, 35.210], [-97.500, 35.215], [-97.360, 35.220],
[-97.200, 35.230], [-97.080, 35.235],
]},
];
// City heat points — [lon, lat, weight, label]
const points = useRefSv([
{ lon: -97.517, lat: 35.468, w: 1.00, t: 'Oklahoma City' },
{ lon: -97.478, lat: 35.653, w: 0.82, t: 'Edmond' },
{ lon: -97.397, lat: 35.449, w: 0.68, t: 'Midwest City' },
{ lon: -97.412, lat: 35.505, w: 0.54, t: 'Del City' },
{ lon: -97.488, lat: 35.339, w: 0.72, t: 'Moore' },
{ lon: -97.442, lat: 35.222, w: 0.78, t: 'Norman' },
{ lon: -97.762, lat: 35.506, w: 0.56, t: 'Yukon' },
{ lon: -97.836, lat: 35.620, w: 0.40, t: 'Piedmont' },
{ lon: -97.740, lat: 35.345, w: 0.48, t: 'Mustang' },
{ lon: -97.955, lat: 35.532, w: 0.42, t: 'El Reno' },
{ lon: -97.267, lat: 35.461, w: 0.46, t: 'Choctaw' },
{ lon: -97.093, lat: 35.349, w: 0.40, t: 'McLoud' },
{ lon: -97.325, lat: 35.712, w: 0.52, t: 'Arcadia' },
{ lon: -97.564, lat: 35.560, w: 0.44, t: 'The Village' },
{ lon: -97.670, lat: 35.290, w: 0.36, t: 'Tuttle' },
]).current;
useEffectSv(() => {
const wrap = wrapRef.current;
if (!wrap) return;
const onScroll = () => {
const r = wrap.getBoundingClientRect();
const vh = window.innerHeight || 1;
const span = r.height + vh;
const traveled = vh - r.top;
scrollRef.current = Math.max(0, Math.min(1, traveled / span));
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
return () => {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onScroll);
};
}, []);
useEffectSv(() => {
const canvas = canvasRef.current;
const wrap = wrapRef.current;
if (!canvas || !wrap) return;
const ctx = canvas.getContext('2d');
let raf, running = true, t0 = performance.now();
const resize = () => {
const dpr = Math.min(window.devicePixelRatio || 1, 2);
const r = wrap.getBoundingClientRect();
canvas.width = Math.max(1, Math.floor(r.width * dpr));
canvas.height = Math.max(1, Math.floor(r.height * dpr));
canvas.style.width = r.width + 'px';
canvas.style.height = r.height + 'px';
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
};
resize();
const ro = new ResizeObserver(resize); ro.observe(wrap);
const getAccent = () => {
const cs = getComputedStyle(document.documentElement);
return (cs.getPropertyValue('--accent').trim() || '#14b8a6');
};
const getFg = (v) => {
const cs = getComputedStyle(document.documentElement);
return (cs.getPropertyValue(v).trim() || '#aaa');
};
const draw = () => {
if (!running) return;
const r = wrap.getBoundingClientRect();
const W = r.width, H = r.height;
const t = (performance.now() - t0) * 0.001;
const depth = scrollRef.current;
ctx.clearRect(0, 0, W, H);
const accent = getAccent();
const fg3 = getFg('--fg-3');
const fg4 = getFg('--fg-4');
const border = getFg('--border-strong');
// Compute a map viewport that preserves aspect ratio of the lon/lat
// bounds while fitting the right 60% of the cell.
const mapPadL = W * 0.38, mapPadT = H * 0.08;
const availW = W * 0.60, availH = H * 0.84;
const lonSpan = BOUNDS.lonMax - BOUNDS.lonMin;
const latSpan = BOUNDS.latMax - BOUNDS.latMin;
// Adjust for latitude compression (cos of mid-lat)
const midLat = (BOUNDS.latMin + BOUNDS.latMax) / 2;
const kx = Math.cos(midLat * Math.PI / 180);
const geoW = lonSpan * kx;
const geoH = latSpan;
const scale = Math.min(availW / geoW, availH / geoH);
const mapW = geoW * scale, mapH = geoH * scale;
const mapLeft = mapPadL + (availW - mapW) / 2;
const mapTop = mapPadT + (availH - mapH) / 2;
const project = (lon, lat) => {
const x = mapLeft + ((lon - BOUNDS.lonMin) * kx / geoW) * mapW;
const y = mapTop + ((BOUNDS.latMax - lat) / geoH) * mapH;
return [x, y];
};
// === Map frame / territory fill ===
ctx.fillStyle = `color-mix(in oklab, ${accent} ${3 + depth * 4}%, transparent)`;
ctx.fillRect(mapLeft, mapTop, mapW, mapH);
ctx.strokeStyle = border;
ctx.lineWidth = 1;
ctx.globalAlpha = 0.5;
ctx.strokeRect(mapLeft, mapTop, mapW, mapH);
ctx.globalAlpha = 1;
// Subtle lat/lon graticule
ctx.strokeStyle = fg4;
ctx.lineWidth = 0.5;
ctx.globalAlpha = 0.12 + depth * 0.1;
ctx.setLineDash([2, 4]);
for (let lat = Math.ceil(BOUNDS.latMin * 4) / 4; lat < BOUNDS.latMax; lat += 0.25) {
const [, y] = project(BOUNDS.lonMin, lat);
ctx.beginPath(); ctx.moveTo(mapLeft, y); ctx.lineTo(mapLeft + mapW, y); ctx.stroke();
}
for (let lon = Math.ceil(BOUNDS.lonMin * 4) / 4; lon < BOUNDS.lonMax; lon += 0.25) {
const [x] = project(lon, BOUNDS.latMin);
ctx.beginPath(); ctx.moveTo(x, mapTop); ctx.lineTo(x, mapTop + mapH); ctx.stroke();
}
ctx.setLineDash([]);
ctx.globalAlpha = 1;
// === County outlines ===
ctx.save();
ctx.beginPath();
ctx.rect(mapLeft, mapTop, mapW, mapH);
ctx.clip();
COUNTIES.forEach((cty) => {
ctx.beginPath();
cty.ring.forEach(([lon, lat], i) => {
const [x, y] = project(lon, lat);
if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
});
ctx.closePath();
ctx.strokeStyle = fg3;
ctx.lineWidth = 1;
ctx.globalAlpha = 0.35 + depth * 0.25;
ctx.stroke();
});
// County labels
ctx.globalAlpha = 0.35 + depth * 0.3;
ctx.fillStyle = fg4;
ctx.font = '9px ui-monospace, SFMono-Regular, Menlo, monospace';
ctx.textAlign = 'left';
const labelFor = {
Oklahoma: [-97.500, 35.580],
Canadian: [-97.900, 35.580],
Cleveland: [-97.450, 35.280],
Logan: [-97.400, 35.760],
Pottawatomie: [-97.050, 35.310],
Grady: [-97.900, 35.200],
};
COUNTIES.forEach(c => {
const pos = labelFor[c.name];
if (!pos) return;
const [x, y] = project(pos[0], pos[1]);
ctx.fillText(c.name.toUpperCase() + ' CO.', x, y);
});
ctx.globalAlpha = 1;
// === Rivers ===
RIVERS.forEach((riv) => {
ctx.beginPath();
riv.line.forEach(([lon, lat], i) => {
const [x, y] = project(lon, lat);
if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
});
ctx.strokeStyle = fg4;
ctx.globalAlpha = 0.45;
ctx.lineWidth = 1.2;
ctx.stroke();
});
ctx.globalAlpha = 1;
// === Highways ===
HIGHWAYS.forEach((hw) => {
ctx.beginPath();
hw.line.forEach(([lon, lat], i) => {
const [x, y] = project(lon, lat);
if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
});
ctx.strokeStyle = fg3;
ctx.globalAlpha = 0.55 + depth * 0.25;
ctx.lineWidth = 1.4;
ctx.stroke();
// Highway shield label at midpoint of first long segment
const mid = hw.line[Math.floor(hw.line.length / 2)];
if (mid) {
const [x, y] = project(mid[0], mid[1]);
ctx.fillStyle = 'var(--bg)';
ctx.globalAlpha = 1;
// badge
const badgeW = 26, badgeH = 12;
ctx.fillStyle = getFg('--bg');
ctx.fillRect(x - badgeW / 2, y - badgeH / 2, badgeW, badgeH);
ctx.strokeStyle = fg3;
ctx.lineWidth = 0.8;
ctx.strokeRect(x - badgeW / 2, y - badgeH / 2, badgeW, badgeH);
ctx.fillStyle = fg3;
ctx.font = 'bold 8px ui-monospace, SFMono-Regular, Menlo, monospace';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(hw.name, x, y + 0.5);
ctx.textBaseline = 'alphabetic';
ctx.textAlign = 'left';
}
});
ctx.globalAlpha = 1;
// === Heat-point connection mesh (only at depth) ===
if (depth > 0.08) {
ctx.strokeStyle = accent;
ctx.lineWidth = 0.6;
for (let i = 0; i < points.length; i++) {
for (let j = i + 1; j < points.length; j++) {
const a = points[i], b = points[j];
const [ax, ay] = project(a.lon, a.lat);
const [bx, by] = project(b.lon, b.lat);
const d = Math.hypot(ax - bx, ay - by);
if (d < mapW * 0.18) {
const pulse = 0.5 + 0.5 * Math.sin(t * 0.8 + (i + j));
ctx.globalAlpha = Math.min(0.4, depth * 0.55) * pulse * (a.w + b.w) * 0.5;
ctx.beginPath();
ctx.moveTo(ax, ay); ctx.lineTo(bx, by);
ctx.stroke();
}
}
}
ctx.globalAlpha = 1;
}
// === Heat blobs ===
points.forEach((p, i) => {
const [cx, cy] = project(p.lon, p.lat);
const pulse = 0.55 + 0.45 * Math.sin(t * (1.1 + i * 0.17) + i);
const intensity = p.w * (0.3 + depth * 0.8) * pulse;
const rad = (16 + p.w * 32) * (0.6 + depth * 0.9);
const g = ctx.createRadialGradient(cx, cy, 0, cx, cy, rad);
g.addColorStop(0, `color-mix(in oklab, ${accent} ${60 * intensity}%, transparent)`);
g.addColorStop(0.45, `color-mix(in oklab, ${accent} ${25 * intensity}%, transparent)`);
g.addColorStop(1, 'transparent');
ctx.fillStyle = g;
ctx.beginPath(); ctx.arc(cx, cy, rad, 0, Math.PI * 2); ctx.fill();
// core dot
ctx.fillStyle = accent;
ctx.globalAlpha = 0.65 + 0.35 * pulse;
ctx.beginPath(); ctx.arc(cx, cy, 2 + p.w * 2, 0, Math.PI * 2); ctx.fill();
ctx.globalAlpha = 1;
// Ping rings on major cities
if (p.w > 0.65) {
const ringT = (t * 0.8 + i * 0.3) % 2;
if (ringT < 1) {
ctx.strokeStyle = accent;
ctx.globalAlpha = (1 - ringT) * (0.45 + depth * 0.4);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(cx, cy, 5 + ringT * 22, 0, Math.PI * 2);
ctx.stroke();
ctx.globalAlpha = 1;
}
}
// City labels — only top-weight cities, labels fade in with depth
if (p.w > 0.5 && depth > 0.15) {
ctx.fillStyle = fg3;
ctx.globalAlpha = Math.min(1, (depth - 0.15) * 2);
ctx.font = '10px ui-monospace, SFMono-Regular, Menlo, monospace';
ctx.textAlign = 'left';
ctx.fillText(p.t.toUpperCase(), cx + 8, cy + 3);
ctx.globalAlpha = 1;
}
});
ctx.restore();
// === Compass rose (top-right of map) ===
const compX = mapLeft + mapW - 18, compY = mapTop + 18;
ctx.strokeStyle = fg4;
ctx.lineWidth = 0.8;
ctx.globalAlpha = 0.6;
ctx.beginPath();
ctx.moveTo(compX, compY - 8); ctx.lineTo(compX, compY + 8);
ctx.moveTo(compX - 8, compY); ctx.lineTo(compX + 8, compY);
ctx.stroke();
ctx.fillStyle = fg3;
ctx.font = '8px ui-monospace, monospace';
ctx.textAlign = 'center';
ctx.fillText('N', compX, compY - 10);
ctx.globalAlpha = 1;
ctx.textAlign = 'left';
raf = requestAnimationFrame(draw);
};
draw();
return () => { running = false; cancelAnimationFrame(raf); ro.disconnect(); };
}, []);
return (
{/* Canvas fills the cell, text sits on top-left */}
{/* Left: copy */}
— SEO INTELLIGENCE
LIVE · 15 NODES
Ranked whereyour customers search.
We layer local intelligence over Google Business — matching searcher profiles, intent, and geography to the queries your neighborhood is actually typing. The map resolves deeper as you scroll: a live read on how people find you across the OKC metro.
{[
{ k: 'Queries / mo', v: '24.8K' },
{ k: 'Top-3 rank', v: '78%' },
{ k: 'Metros covered', v: '15' },
].map(s => (
))}
{/* Right: map surface (canvas draws here; this column holds labels) */}
OKC Metro · 35.47°N 97.52°W