/* 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 = ``; // Cada item: slug (Simple Icons) | svg (inline) | mono (fallback). 'tone' = cor do // monograma/realce. Se um logo da CDN falhar (404), cai automaticamente 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', slug: 'redis', 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', mono: true, tone: '#1FD17B' }, { name: 'Mega API', mono: true, tone: '#00D4FF' }, { name: 'Telegram', slug: 'telegram', tone: '#26A5E4' }, { name: 'Instagram', slug: 'instagram', tone: '#E4405F' }, { name: 'Meta', slug: 'meta', tone: '#1877F2' }, { name: 'Gmail', slug: 'gmail', tone: '#EA4335' }, { name: 'Google', slug: 'google', tone: '#4285F4' }, { name: 'Google Calendar', slug: 'googlecalendar', tone: '#4285F4' }, { name: 'Vapi', mono: true, 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 && (failed || !b.slug)); return (

{b.svg ? : 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." />

{/* topo → direita */} {/* baixo → esquerda */}

); }; window.TechStack = TechStack;