const Tech = () => { const tc = L('tech'); const techIcons = ['meta','qr','lock','bolt']; const techItems = tc.items.map((it, i) => ({ ...it, icon: techIcons[i] })); return (
{tc.eyebrow}

{tc.h2a}
{tc.h2b}

{parseInline(tc.sub).map((seg, i) => { if (typeof seg === 'string' && seg.startsWith('|') && seg.endsWith('|')) { return {seg.slice(1,-1)}; } return {seg}; })}

{techItems.map((it, i) => (
{it.label}
{it.sub}
))}
); }; const TechDiagram = () => { // central animated diagram showing data flow return (
{/* connection lines */} {[ [80, 90, 230, 230], // wpp [380, 90, 230, 230], // insta [80, 370, 230, 230], // crm [380, 370, 230, 230], // calendar ].map(([x1,y1,x2,y2], i) => ( ))} {/* core */} ZapFlux Core {L('tech').coreSub} {/* corner nodes */}
live
); }; const Node = ({ style, icon, label, sub }) => (
{label}
{sub}
); window.Tech = Tech;