/* TechStack.jsx — technologies & integrations marquee, real brand logos */ const TechStack = () => { // Logos reais via Simple Icons (cor original da marca por padrão). // Marcas escuras (GitHub, OpenAI, Notion) recebem override claro p/ contraste no fundo escuro. // SVGs inline para marcas indisponíveis na CDN (sem dependência externa). const OPENAI_SVG = ``; const SLACK_SVG = ``; // "Claude Code" — terminal-prompt mark na cor da marca Claude. const CLAUDECODE_SVG = ``; // VS Code (slug removido da CDN) — marca em SVG inline. const VSCODE_SVG = ``; // --- Marcas multicoloridas / niche: SVG oficial inline (a CDN mono achatava a cor). --- // Google — "G" oficial de 4 cores (a CDN entregava um "G" chapado azul). const GOOGLE_SVG = ``; // Gmail — envelope oficial de 4 cores. const GMAIL_SVG = ``; // Google Calendar — ícone oficial multicolor. const GCAL_SVG = ``; // Instagram — glifo da câmera com o gradiente oficial (a CDN entregava rosa chapado). const INSTAGRAM_SVG = ``; // Meta — símbolo do infinito com o gradiente azul oficial. const META_SVG = ``; // Redis — cubo clássico multicolor (a CDN entregava só um borrão vermelho). const REDIS_SVG = ``; // Evolution API — símbolo verde oficial extraído do logotipo. const EVOLUTION_SVG = ``; // Vapi — ícone oficial (quadrado escuro + onda sonora). const VAPI_SVG = ``; // Asaas — símbolo oficial (novo branding), embutido como PNG. const ASAAS_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADhElEQVR42tVaPU/bUBQ9fo5AjUBCYmgNVH38hGbKhrPCVJaOSUQ3lkpdOiAlkfgLbCCcP1CpQ7LidGkm6N6hroC6SEWNRBQKJXEH1yF+frGfPxLwXcDgOPfce+659+ZFAs/yJgUGRftCUgFLxfTN+P9TB6wWIOtoKwZ7k+R1/lQFyBEenxkANLSXa+MB5H8cPVC0w5iG9nLZuSApcx4ASsifH7oB5E/VlDg/AuKsdE+h/LmF9JkBkAJxkKTQKHBHCSCtIbVG1jIAhLlf2siGz7PZh358MyEAkpqxUyGQL0XGi2cyqm/mI4EobP+CYfYTBmBRKUwBU0VGcT0bGcTq5kXiOZCx8q4qenOna6F1cgsAUHOzod5oYZ6AKjI+fvqTLIniSChVZFAlM7xeeznjmx3D7KO820m0JqQke8DR3qIrM1qjB6rIrr/pxzcobF8mp0NJPUjNzXpoVTu4Qu2gG3jfowBQ2ZpzXVf3r4YSylLmcGfhcQEobWS50XesvNvx1E6UnjIxAJUtd+GyDhtmH1qj5/uaBwNQ2ZoHVWRfZ9mMOFlIgkqxAFDF25nZ6LMSyhb0KPipA2AjyCtY9v+j4wRV5NhUigyAL5vdwHGCpVJcWSXRue+WTa3RE+qwbJbsLMxNFwBPNuvNa+GhLsnmRqIqT5To+9VKVEUiUaLPKgdPIp0ZaJzSJNXcQg9z1uclz8hQb/ZQXM9Czc34UsFRIK3RQ+vkFsX1Jy6no+wMoQAc7ix4omSY/dhaztJxXC+JRaFxKU7S+SjNLRO1aQXRxDDvhr87i4+IY05zE82CEIXU3CyO9hYDVOXWU8x+e3VQvRS2L4WUTQgAu2mNFrCI00HR5lFTdHMLXOpLG1m8fT3nocmr979Rb/Zi8b3TtYZLPhsgqmTw/WcfX77+jZeBbx+eeri7unmR+Gc8PJqKyCoJM+s73Ez+AyqbMtX9Ky7FIgNgZ/2wI0NYqze9z+d1fiEAPNkM02CiGG/pCcoCEW1ak3bebyX1m1aJSPTH7bmTMt5wOG5nyACSzh4v1ZvXrvl+krwXpdIYEdUl5M8rAKpIp2kEGLSQWrNaBMgYuD8VT5e1VzRiH99btfR5PyjYo4Rj9uFxKR3OSzraSwVGRkktHcV877w7A8NMnJUAqQLBw79pqiswKKP9XHdPozzLmxToq/YZskQf8GsIBgDNLthlbp3+A9D+o2+GWWPAAAAAAElFTkSuQmCC'; // Mega API — "m" oficial em bolha verde, embutido como PNG. const MEGAAPI_IMG = 'data:image/png;base64,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'; // Cada item: slug (Simple Icons) | svg (inline) | img (data URI) | mono (fallback). // 'tone' = cor do monograma/realce. Se um logo da CDN falhar (404), cai p/ monograma. const rowA = [ { name: 'Claude', slug: 'claude', tone: '#D97757' }, { name: 'Claude Code', svg: CLAUDECODE_SVG, tone: '#D97757' }, { name: 'Anthropic', slug: 'anthropic', color: 'FFFFFF', tone: '#D97757' }, { name: 'OpenAI', svg: OPENAI_SVG, tone: '#10A37F' }, { name: 'Gemini', slug: 'googlegemini', tone: '#8E75B2' }, { name: 'Mistral AI', slug: 'mistralai', tone: '#FA520F' }, { name: 'Groq', mono: true, tone: '#F55036' }, { name: 'Hugging Face', slug: 'huggingface', tone: '#FFD21E' }, { name: 'MCP', slug: 'modelcontextprotocol', color: 'FFFFFF', tone: '#00D4FF' }, { name: 'Cursor', slug: 'cursor', color: 'FFFFFF', tone: '#7CB0FF' }, { name: 'VS Code', svg: VSCODE_SVG, tone: '#007ACC' }, { name: 'GitHub', slug: 'github', color: 'FFFFFF', tone: '#FFFFFF' }, { name: 'Supabase', slug: 'supabase', tone: '#3ECF8E' }, { name: 'PostgreSQL', slug: 'postgresql', tone: '#4169E1' }, { name: 'Redis', svg: REDIS_SVG, tone: '#FF4438' }, { name: 'n8n', slug: 'n8n', tone: '#EA4B71' }, { name: 'Make', slug: 'make', tone: '#6D00CC' }, { name: 'Zapier', slug: 'zapier', tone: '#FF4F00' }, { name: 'Hostinger', slug: 'hostinger', tone: '#673DE6' }, ]; const rowB = [ { name: 'WhatsApp', slug: 'whatsapp', tone: '#25D366' }, { name: 'Evolution API', svg: EVOLUTION_SVG, tone: '#00CC88' }, { name: 'Mega API', img: MEGAAPI_IMG, tone: '#00BF9C' }, { name: 'Telegram', slug: 'telegram', tone: '#26A5E4' }, { name: 'Instagram', svg: INSTAGRAM_SVG, tone: '#E4405F' }, { name: 'Meta', svg: META_SVG, tone: '#0081FB' }, { name: 'Gmail', svg: GMAIL_SVG, tone: '#EA4335' }, { name: 'Google', svg: GOOGLE_SVG, tone: '#4285F4' }, { name: 'Google Calendar', svg: GCAL_SVG, tone: '#4285F4' }, { name: 'Vapi', svg: VAPI_SVG, tone: '#1FD17B' }, { name: 'Slack', svg: SLACK_SVG, tone: '#E01E5A' }, { name: 'Notion', slug: 'notion', color: 'FFFFFF', tone: '#FFFFFF' }, { name: 'HubSpot', slug: 'hubspot', tone: '#FF7A59' }, { name: 'ClickUp', slug: 'clickup', tone: '#7B68EE' }, { name: 'CRM', mono: true, tone: '#7CB0FF' }, { name: 'Stripe', slug: 'stripe', tone: '#635BFF' }, { name: 'Mercado Pago', slug: 'mercadopago', tone: '#00B1EA' }, { name: 'Asaas', mono: true, tone: '#1A8CFF' }, ]; const iconSrc = (b) => `https://cdn.simpleicons.org/${b.slug}` + (b.color ? `/${b.color}` : ''); const initials = (n) => { const w = n.replace(/\bAPI\b/i, '').trim().split(/\s+/).filter(Boolean); if (w.length >= 2) return (w[0][0] + w[1][0]).toUpperCase(); return n.slice(0, 2).toUpperCase(); }; const Mono = ({ b }) => ( {initials(b.name)} ); const Pill = ({ b }) => { const [failed, setFailed] = React.useState(false); const useMono = b.mono || (!b.svg && !b.img && (failed || !b.slug)); return (

{b.svg ? : b.img ?

: useMono ? :

setFailed(true)} style={{ width: 22, height: 22, objectFit: 'contain', flexShrink: 0, display: 'block' }} />} {b.name}

); }; // dir > 0 → desliza para a DIREITA; dir < 0 → para a ESQUERDA. // Animação em JS (rAF) para garantir movimento contínuo e independente do CSS. const Track = ({ items, dir }) => { const ref = React.useRef(null); const pausedRef = React.useRef(false); React.useEffect(() => { const el = ref.current; if (!el) return; const speed = 46; // px/segundo — velocidade adequada let half = el.scrollWidth / 2; let offset = dir > 0 ? -half : 0; let last = performance.now(); let raf; const measure = () => { half = el.scrollWidth / 2; }; window.addEventListener('resize', measure); const step = (now) => { const dt = Math.min((now - last) / 1000, 0.05); last = now; if (!pausedRef.current && half > 0) { offset += dir * speed * dt; if (offset <= -half) offset += half; if (offset >= 0) offset -= half; el.style.transform = `translateX(${offset}px)`; } raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', measure); }; }, [dir]); return (

{ pausedRef.current = true; }} onMouseLeave={() => { pausedRef.current = false; }}>

{[...items, ...items].map((b, i) => )}

); }; return (

Construído com as ferramentas certas para cada projeto} sub="Trabalhamos com tecnologias modernas de IA, automação e dados — e integramos com as ferramentas que sua empresa já usa." subMobile="IA, automação e integração com as ferramentas que você já usa." />

IA · Desenvolvimento · Infraestrutura

Canais · Comunicação · Sistemas integrados

); }; window.TechStack = TechStack;