// Per-service decorative scenes — each a unique SVG illustration // 600 x 220 viewBox, white bg, navy + gold palette function SceneLegal({ t }) { return ( {/* grid bg */} {[...Array(8)].map((_, i) => ( ))} {/* Gavel */} {/* Strike plate */} {/* Document */} {/* Seal */} M {/* Signature */} ); } function SceneConstitucion({ t }) { return ( {/* Ground */} {/* Building 1 — classical */} {[0, 1, 2, 3, 4].map((i) => ( ))} {/* Building 2 — modern */} {[...Array(8)].map((_, i) => [...Array(4)].map((_, j) => ( )) )} {/* Building 3 */} {/* Arrow connecting — growth */} {/* Stamp */} S.L. ); } function SceneInversiones({ t }) { const bars = [40, 65, 50, 80, 60, 95, 75, 110, 90, 130]; return ( {[40, 80, 120, 160].map((y) => ( ))} {/* Bars */} {bars.map((h, i) => { const wave = Math.sin(t + i * 0.4) * 6; const H = h + wave; return ( ); })} {/* Trend line */} `${i === 0 ? "M" : "L"} ${71 + i * 36} ${180 - h - Math.sin(t + i * 0.4) * 6}`).join(" ")} stroke="#C9A84C" strokeWidth="1.8" fill="none" opacity="0.6" /> {/* Arrow up */} {/* € floating */} € € ); } function SceneDigitalizacion({ t }) { return ( {/* Paper stack on left */} {[0, 1, 2].map((i) => ( ))} {[0,1,2,3,4].map(i => ( ))} {/* Arrow with "scan" pulse */} DIGITALIZAR {/* Screen/laptop on right */} {/* UI rows */} {/* Cards */} {[0, 1, 2].map((i) => ( ))} {/* base */} ); } function SceneAutomatizacion({ t }) { const nodes = [ { x: 90, y: 60, l: "CRM" }, { x: 90, y: 160, l: "ERP" }, { x: 300, y: 110, l: "MEDLA", big: true }, { x: 510, y: 60, l: "Banco" }, { x: 510, y: 160, l: "BI" }, ]; const edges = [[0,2],[1,2],[2,3],[2,4]]; return ( {/* Gears bg */} {/* Edges with animated flow */} {edges.map(([a, b], i) => { const A = nodes[a], B = nodes[b]; const prog = (t * 0.5 + i * 0.25) % 1; const px = A.x + (B.x - A.x) * prog; const py = A.y + (B.y - A.y) * prog; return ( ); })} {/* Nodes */} {nodes.map((n, i) => ( {n.big && } {n.l} ))} ); } function SceneIA({ t }) { return ( {/* Neural net */} {[0,1,2,3,4].map(i => ( [0,1,2,3].map(j => { const cx = 100 + i * 100; const cy = 40 + j * 50; return [0,1,2,3].map(k => { if (i === 4) return null; const x2 = cx + 100; const y2 = 40 + k * 50; return ; }); }) ))} {/* Nodes */} {[0,1,2,3,4].map(i => ( [0,1,2,3].map(j => { const cx = 100 + i * 100; const cy = 40 + j * 50; const active = Math.sin(t * 1.5 + i * 0.7 + j * 0.5) > 0.4; return ( {active && } ); }) ))} {/* Input/output labels */} INPUT OUTPUT {/* Brain pulse circle */} ); } function SceneSocial({ t }) { return ( {/* Phone */} {/* Profile header */} {/* Post img */} {/* Engagement */} 12.4K 847 {/* Copy */} {/* Floating engagement bubbles */} {[ { x: 240, y: 60, r: 18, label: "♥", ts: 0 }, { x: 320, y: 40, r: 14, label: "↗", ts: 0.5 }, { x: 280, y: 110, r: 22, label: "✦", ts: 1 }, { x: 380, y: 140, r: 16, label: "♥", ts: 1.5 }, { x: 340, y: 90, r: 12, label: "+", ts: 2 }, ].map((b, i) => { const pulse = Math.sin(t + b.ts) * 2; return ( {b.label} ); })} {/* Audience graph bars */} AUDIENCE {[30, 50, 75, 95, 130].map((h, i) => ( ))} ); } const Scenes = { legal: SceneLegal, constitucion: SceneConstitucion, inversiones: SceneInversiones, digitalizacion: SceneDigitalizacion, automatizacion: SceneAutomatizacion, ia: SceneIA, social: SceneSocial, }; window.Scenes = Scenes;