// service-visuals.jsx — animated SVG visuals per service.
// Each visual is keyed by the service id in data.js → serviceGroups[*].items[*].id.
const SV_DEFS = (
);
// ─── Individual visuals — each gets a 320×220 canvas ──────────────────────
function VLeadGen() {
return (
);
}
function VVoice() {
return (
);
}
function VContent() {
return (
);
}
function V360() {
return (
);
}
function VChat() {
return (
);
}
function VLoop() {
return (
);
}
function VFlow() {
return (
);
}
function VNode() {
return (
);
}
function VFunnel() {
return (
);
}
function VStack() {
return (
);
}
function VMeta() {
return (
);
}
function VGoogle() {
return (
);
}
function VPin() {
return (
);
}
function VChart() {
const bars = [40, 60, 50, 85, 70, 110, 95, 130];
return (
);
}
function VSearch() {
return (
);
}
function VShare() {
return (
);
}
function VShape() {
return (
);
}
function VPlay() {
return (
);
}
// Map by service id (from data.js)
const SERVICE_VISUALS = {
"lead-gen": VLeadGen,
"voice": VVoice,
"content": VContent,
"360": V360,
"whatsapp-bot": VChat,
"whatsapp-auto": VLoop,
"crm": VFlow,
"workflows": VNode,
"ghl": VFunnel,
"hubspot": VStack,
"meta": VMeta,
"google": VGoogle,
"pinterest": VPin,
"perf": VChart,
"ai-seo": VSearch,
"social": VShare,
"design": VShape,
"video": VPlay,
};
function ServiceVisual({ id }) {
const V = SERVICE_VISUALS[id] || V360;
return
;
}
Object.assign(window, { ServiceVisual });