// Animated / imagery card visuals for homepage sections // Uses GSAP where available, falls back to CSS where not. // Industry card background — abstract layered geometry per-sector function IndustryBg({ kind, dark }) { const base = dark ? 'rgba(244,243,241,0.08)' : 'rgba(11,11,14,0.06)'; const accent = 'var(--crimson)'; if (kind === 'fintech') { // Stacked bars/ledger lines return ( {[...Array(14)].map((_, i) => ( ))} ); } if (kind === 'saude') { // Heart-rate waveform + concentric rings return ( ); } if (kind === 'varejo') { // Grid of squares (inventory / SKUs) return ( {[...Array(5)].map((_, r) => ( [...Array(4)].map((__, c) => { const on = (r*4+c) % 7 === 3 || (r===2&&c===2); return ; }) ))} ); } // energia — grid lines + bolt return ( {[0,1,2,3,4,5].map(i => )} {[0,1,2,3,4,5,6].map(i => )} ); } const svgBgStyle = { position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.85, pointerEvents: 'none' }; // ======================================================== // Case visuals (homepage "O que sai da bigorna") — animated // ======================================================== function CaseVisual({ kind }) { // Kind: 'fintech' | 'saude' | 'varejo' if (kind === 'fintech') return ; if (kind === 'saude') return ; return ; } // 1) Fintech — 42 services migrating, orbiting nodes around a core function CaseFintech() { const ref = React.useRef(null); React.useEffect(() => { if (!window.gsap || !ref.current) return; const ctx = gsap.context(() => { gsap.to('.cf-orbit', { rotate: 360, transformOrigin: '50% 50%', duration: 22, repeat: -1, ease: 'none' }); gsap.to('.cf-orbit-b', { rotate: -360, transformOrigin: '50% 50%', duration: 30, repeat: -1, ease: 'none' }); gsap.to('.cf-node', { scale: 1.4, duration: 1.2, repeat: -1, yoyo: true, ease: 'sine.inOut', stagger: { each: 0.08, from: 'random' } }); gsap.fromTo('.cf-pulse', { opacity: 0.6, scale: 0.3 }, { opacity: 0, scale: 1, duration: 2.4, repeat: -1, ease: 'power2.out', stagger: 0.8 }); }, ref); return () => ctx.revert(); }, []); return (
{/* Pulse rings */} {[0,1,2].map(i => ( ))} {/* Inner orbit */} {[0,1,2,3,4,5].map(i => { const a = (i / 6) * Math.PI * 2; return ; })} {/* Outer orbit */} {[0,1,2,3,4,5,6,7].map(i => { const a = (i / 8) * Math.PI * 2 + 0.2; return ; })} {/* Core */}
42 serviços · 0 downtime
); } // 2) Saúde — EKG waveform + listening pulse function CaseSaude() { const ref = React.useRef(null); React.useEffect(() => { if (!window.gsap || !ref.current) return; const ctx = gsap.context(() => { const path = ref.current.querySelector('.cs-wave'); if (path) { const len = path.getTotalLength(); gsap.set(path, { strokeDasharray: len, strokeDashoffset: len }); gsap.to(path, { strokeDashoffset: 0, duration: 3.2, repeat: -1, ease: 'none' }); } gsap.to('.cs-bar', { scaleY: () => 0.3 + Math.random() * 1.8, transformOrigin: '50% 50%', duration: 0.5, repeat: -1, yoyo: true, ease: 'sine.inOut', stagger: { each: 0.06, from: 'center' } }); gsap.to('.cs-ring', { scale: 1.15, opacity: 0.2, duration: 1.6, repeat: -1, yoyo: true, ease: 'sine.inOut', transformOrigin: '50% 50%' }); }, ref); return () => ctx.revert(); }, []); return (
{/* Listening rings (top-left) */} {/* EKG trace */} {/* Spectrum bars (bottom) */} {[...Array(16)].map((_, i) => ( ))}
120 clínicas · triagem ao vivo
); } // 3) Varejo — checkout funnel / speed bars + shrinking abandonment function CaseVarejo() { const ref = React.useRef(null); React.useEffect(() => { if (!window.gsap || !ref.current) return; const ctx = gsap.context(() => { gsap.fromTo('.cv-progress', { scaleX: 0 }, { scaleX: 1, duration: 2.2, ease: 'power3.inOut', repeat: -1, yoyo: true, transformOrigin: '0 50%' }); gsap.fromTo('.cv-drop', { y: -30, opacity: 0 }, { y: 120, opacity: 1, duration: 2.4, repeat: -1, ease: 'power2.in', stagger: { each: 0.35, repeat: -1 } }); gsap.to('.cv-num', { innerText: 22, duration: 2, ease: 'power2.out', snap: { innerText: 1 }, repeat: -1, yoyo: true }); }, ref); return () => ctx.revert(); }, []); return (
{/* Funnel shape */} {/* Dropping items */} {[0,1,2,3,4].map(i => ( ))} {/* Progress bars (3 tracks, "3× faster") */} {[0,1,2].map(i => ( ))}
checkout 3× · −22% abandono
); } const caseStage = { position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', overflow: 'hidden' }; const svgFill = { width: '82%', height: '82%', overflow: 'visible' }; const caseLabel = { position: 'absolute', bottom: 16, left: 18, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', opacity: 0.55 }; // ======================================================== // Insights card visuals — three distinct "thumbnails" (by kind) // ======================================================== function InsightVisual({ kind }) { if (kind === 'ensaio') return ; if (kind === 'pesquisa') return ; return ; } // ======================================================== // Insights card visuals by CATEGORY — one per theme // ======================================================== function InsightVisualByCat({ cat }) { if (cat === 'Arquitetura') return ; if (cat === 'IA') return ; if (cat === 'Design') return ; if (cat === 'Fintech') return ; if (cat === 'Cloud') return ; if (cat === 'Saúde') return ; return ; } // Arquitetura — layered stack blocks + animated data flow arrows function InsightCatArquitetura() { const ref = React.useRef(null); React.useEffect(() => { if (!window.gsap || !ref.current) return; const ctx = gsap.context(() => { gsap.to('.ia-arrow', { y: 12, opacity: 0, duration: 1.1, repeat: -1, ease: 'power2.in', stagger: 0.22 }); gsap.to('.ia-layer', { boxShadow: '0 0 0 1px var(--crimson)', duration: 1.4, repeat: -1, yoyo: true, ease: 'sine.inOut', stagger: 0.3 }); gsap.fromTo('.ia-dot', { x: 0 }, { x: 160, duration: 2.2, repeat: -1, ease: 'none', stagger: 0.55 }); }, ref); return () => ctx.revert(); }, []); const layers = ['UI / Frontend', 'API Gateway', 'Serviços', 'Banco de Dados']; const colors = ['var(--crimson)', 'rgba(244,243,241,0.55)', 'rgba(244,243,241,0.35)', 'rgba(244,243,241,0.2)']; return (
{layers.map((l, i) => ( {l} {i < 3 && ( <> )} ))}
); } // IA — neural network nodes + pulsing connections function InsightCatIA() { const ref = React.useRef(null); React.useEffect(() => { if (!window.gsap || !ref.current) return; const ctx = gsap.context(() => { gsap.to('.ii-node', { scale: 1.5, duration: () => 0.8 + Math.random(), repeat: -1, yoyo: true, ease: 'sine.inOut', transformOrigin: '50% 50%', stagger: { each: 0.15, from: 'random' } }); gsap.to('.ii-edge', { opacity: () => 0.1 + Math.random() * 0.7, duration: () => 0.6 + Math.random() * 0.8, repeat: -1, yoyo: true, ease: 'sine.inOut', stagger: { each: 0.1, from: 'random' } }); gsap.fromTo('.ii-signal', { strokeDashoffset: 80 }, { strokeDashoffset: 0, duration: 1.8, repeat: -1, ease: 'none', stagger: 0.4 }); }, ref); return () => ctx.revert(); }, []); const layers = [[30], [70, 110], [30, 70, 110, 150], [70, 110], [90]]; const ys = [20, 55, 90, 125, 155]; const nodes = layers.flatMap((xs, li) => xs.map(x => ({ x, y: ys[li], li }))); const edges = []; for (let li = 0; li < layers.length - 1; li++) { layers[li].forEach(x1 => layers[li + 1].forEach(x2 => edges.push({ x1, y1: ys[li], x2, y2: ys[li + 1] }))); } return (
{edges.map((e, i) => ( ))} {edges.slice(0, 4).map((e, i) => ( ))} {nodes.map((n, i) => ( ))}
); } // Design — animated wireframe grid + color palette function InsightCatDesign() { const ref = React.useRef(null); React.useEffect(() => { if (!window.gsap || !ref.current) return; const ctx = gsap.context(() => { gsap.to('.id-cursor', { x: 28, y: 18, duration: 2.4, repeat: -1, yoyo: true, ease: 'power2.inOut' }); gsap.to('.id-swatch', { scale: 1.2, duration: 0.8, repeat: -1, yoyo: true, ease: 'sine.inOut', transformOrigin: '50% 50%', stagger: 0.18 }); gsap.fromTo('.id-block', { opacity: 0.2 }, { opacity: 0.9, duration: 1.2, repeat: -1, yoyo: true, ease: 'power2.inOut', stagger: { amount: 1.5, from: 'start' } }); }, ref); return () => ctx.revert(); }, []); return (
{/* Wireframe layout */} {[0,1,2,3].map(i => )} {/* Color palette */} {['var(--crimson)', '#B01128', 'rgba(244,243,241,0.8)', 'rgba(244,243,241,0.4)', '#2A2A30'].map((c, i) => ( ))} {/* Cursor */} {/* Grid dots */} {[0,1,2,3,4].map(r => [0,1,2,3,4,5].map(c => ( )))}
); } // Fintech — candlestick chart with animated price action function InsightCatFintech() { const ref = React.useRef(null); React.useEffect(() => { if (!window.gsap || !ref.current) return; const ctx = gsap.context(() => { gsap.fromTo('.if-candle', { scaleY: 0.4 }, { scaleY: 1, duration: 1.4, repeat: -1, yoyo: true, ease: 'power2.inOut', transformOrigin: '50% 100%', stagger: { each: 0.12, from: 'random' } }); gsap.to('.if-line', { strokeDashoffset: -200, duration: 4, repeat: -1, ease: 'none' }); gsap.to('.if-price', { y: -6, duration: 1.8, repeat: -1, yoyo: true, ease: 'sine.inOut' }); }, ref); return () => ctx.revert(); }, []); const candles = [ { x: 24, open: 90, close: 60, high: 55, low: 100, bull: true }, { x: 48, open: 72, close: 95, high: 65, low: 100, bull: false }, { x: 72, open: 84, close: 70, high: 65, low: 100, bull: true }, { x: 96, open: 65, close: 50, high: 42, low: 70, bull: true }, { x: 120, open: 62, close: 80, high: 55, low: 85, bull: false }, { x: 144, open: 75, close: 58, high: 50, low: 80, bull: true }, { x: 168, open: 52, close: 38, high: 30, low: 58, bull: true }, { x: 192, open: 40, close: 55, high: 32, low: 60, bull: false }, ]; return (
{[30, 60, 90].map(y => )} {candles.map((c, i) => ( ))} +12.4%
); } // Cloud — topology mesh with animated packet flow function InsightCatCloud() { const ref = React.useRef(null); React.useEffect(() => { if (!window.gsap || !ref.current) return; const ctx = gsap.context(() => { gsap.to('.ic-node', { scale: 1.3, duration: () => 1 + Math.random(), repeat: -1, yoyo: true, ease: 'sine.inOut', transformOrigin: '50% 50%', stagger: { each: 0.2, from: 'random' } }); gsap.fromTo('.ic-packet', { strokeDashoffset: 100 }, { strokeDashoffset: 0, duration: 2, repeat: -1, ease: 'none', stagger: 0.35 }); gsap.to('.ic-ring', { scale: 2, opacity: 0, duration: 2.2, repeat: -1, ease: 'power2.out', transformOrigin: '50% 50%', stagger: 0.7 }); }, ref); return () => ctx.revert(); }, []); const nodes = [ { x: 120, y: 75, r: 10, main: true }, { x: 50, y: 30, r: 6 }, { x: 190, y: 30, r: 6 }, { x: 30, y: 100, r: 6 }, { x: 200, y: 110, r: 6 }, { x: 80, y: 140, r: 6 }, { x: 160, y: 140, r: 6 }, ]; const edges = [[0,1],[0,2],[0,3],[0,4],[0,5],[0,6],[1,2],[3,5],[4,6]]; return (
{edges.map(([a, b], i) => ( ))} {edges.slice(0, 5).map(([a, b], i) => ( ))} {nodes.map((n, i) => ( {n.main && } ))}
); } // Saúde — ECG waveform + animated DNA helix function InsightCatSaude() { const ref = React.useRef(null); React.useEffect(() => { if (!window.gsap || !ref.current) return; const ctx = gsap.context(() => { const path = ref.current.querySelector('.is-wave'); if (path) { const len = path.getTotalLength(); gsap.set(path, { strokeDasharray: len, strokeDashoffset: len }); gsap.to(path, { strokeDashoffset: 0, duration: 2.8, repeat: -1, ease: 'none' }); } gsap.to('.is-dna-a', { y: 14, duration: 1.2, repeat: -1, yoyo: true, ease: 'sine.inOut', stagger: 0.1 }); gsap.to('.is-dna-b', { y: -14, duration: 1.2, repeat: -1, yoyo: true, ease: 'sine.inOut', stagger: 0.1 }); gsap.to('.is-cross', { opacity: 0.4, scale: 0.8, duration: 1.6, repeat: -1, yoyo: true, ease: 'sine.inOut', transformOrigin: '50% 50%' }); }, ref); return () => ctx.revert(); }, []); return (
{/* ECG */} {/* DNA helix */} {[0,1,2,3,4,5,6].map(i => ( ))} {/* Medical cross */}
); } // Essay — dissolving microservice grid → monolith shape function InsightEssay() { const ref = React.useRef(null); React.useEffect(() => { if (!window.gsap || !ref.current) return; const ctx = gsap.context(() => { gsap.to('.ie-cell', { opacity: () => 0.2 + Math.random() * 0.8, duration: 1.2, repeat: -1, yoyo: true, ease: 'sine.inOut', stagger: { amount: 1.6, from: 'random' } }); gsap.to('.ie-line', { x: 40, duration: 4, repeat: -1, ease: 'none' }); }, ref); return () => ctx.revert(); }, []); return (
{[0,1,2,3,4,5].map(r => ( [0,1,2,3,4,5,6,7,8].map(c => ( )) ))}
); } // Research — stacked chart / bars growing function InsightResearch() { const ref = React.useRef(null); React.useEffect(() => { if (!window.gsap || !ref.current) return; const ctx = gsap.context(() => { gsap.fromTo('.ir-bar', { scaleY: 0 }, { scaleY: 1, duration: 1.6, ease: 'power3.out', stagger: 0.08, transformOrigin: '50% 100%', repeat: -1, yoyo: true, repeatDelay: 0.8 }); gsap.to('.ir-dot', { cy: '-=8', duration: 1.4, repeat: -1, yoyo: true, ease: 'sine.inOut', stagger: 0.1 }); }, ref); return () => ctx.revert(); }, []); return (
{/* Baseline */} {/* Bars */} {[40, 70, 55, 90, 110, 75, 100, 128, 88].map((h, i) => ( ))} {/* Trend line dots */} {[31,53,75,97,119,141,163,185,207].map((x, i) => ( ))}
); } // Interview — waveform + two overlapping circles (conversation) function InsightInterview() { const ref = React.useRef(null); React.useEffect(() => { if (!window.gsap || !ref.current) return; const ctx = gsap.context(() => { gsap.to('.ii-bar', { scaleY: () => 0.2 + Math.random() * 2, transformOrigin: '50% 50%', duration: 0.4, repeat: -1, yoyo: true, ease: 'sine.inOut', stagger: { each: 0.04 } }); gsap.to('.ii-circle-a', { x: 8, duration: 2.6, repeat: -1, yoyo: true, ease: 'sine.inOut' }); gsap.to('.ii-circle-b', { x: -8, duration: 2.6, repeat: -1, yoyo: true, ease: 'sine.inOut' }); }, ref); return () => ctx.revert(); }, []); return (
{/* Overlapping circles */} {/* Center waveform */} {[...Array(28)].map((_, i) => { const x = (i - 14) * 6; return ; })}
); } const insightStage = { position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', overflow: 'hidden' }; Object.assign(window, { IndustryBg, CaseVisual, InsightVisual, InsightVisualByCat });