// ConectaAI — components // All section components for the landing. Export to window at the bottom. // ── HeroGraph ───────────────────────────────────────────────────────────── // Force-directed network animation (Obsidian-like graph view). const HeroGraph = ({ accent = "oklch(0.82 0.18 125)", inkColor = "rgba(255,255,255,.92)", mutedColor = "rgba(255,255,255,.45)", bgDot = "rgba(255,255,255,.06)" }) => { const canvasRef = React.useRef(null); const wrapRef = React.useRef(null); React.useEffect(() => { const canvas = canvasRef.current; const wrap = wrapRef.current; if (!canvas || !wrap) return; const ctx = canvas.getContext('2d'); let dpr = Math.min(window.devicePixelRatio || 1, 2); let W = 0,H = 0; // Layout circular puro com 3 anéis e ~70 nós. // Hub fixo + core (8) + ring1 (16) + ring2 (24) + ring3 (24) = 73 const NODE_DEFS = []; NODE_DEFS.push({ id: 'hub', label: 'ConectaAI', kind: 'hub', r: 16 }); const CORE = [ { id: 'crm', label: 'CRM' }, { id: 'erp', label: 'ERP' }, { id: 'wpp', label: 'WhatsApp' }, { id: 'help', label: 'Helpdesk' }, { id: 'db', label: 'Database' }, { id: 'mail', label: 'E-mail' }, { id: 'voice', label: 'Voz' }, { id: 'pay', label: 'Pagamentos' }]; CORE.forEach((c) => NODE_DEFS.push({ ...c, kind: 'core', r: 7.5 })); const RING1 = [ 'HubSpot', 'Salesforce', 'Pipedrive', 'RD Station', 'SAP', 'TOTVS', 'Omie', 'Bling', 'Zendesk', 'Freshdesk', 'Intercom', 'Movidesk', 'Slack', 'Teams', 'Discord', 'Telegram']; const RING2 = [ 'Postgres', 'MySQL', 'MongoDB', 'Redis', 'Snowflake', 'BigQuery', 'Sheets', 'Airtable', 'Notion', 'Confluence', 'Jira', 'Linear', 'Stripe', 'Pagar.me', 'Mercado Pago', 'Asaas', 'Twilio', 'Vonage', 'Calendly', 'Cal.com', 'Drive', 'Dropbox', 'S3', 'GCS']; const RING3 = [ 'OpenAI', 'Anthropic', 'Mistral', 'Llama', 'Cohere', 'Groq', 'GitHub', 'GitLab', 'Bitbucket', 'Vercel', 'Webhooks', 'REST', 'GraphQL', 'SOAP', 'SFTP', 'FTPS', 'Kafka', 'RabbitMQ', 'SNS', 'SQS', 'Auth0', 'Okta', 'SSO', 'LDAP']; RING1.forEach((label, i) => NODE_DEFS.push({ id: 'r1_' + i, label, kind: 'leaf', r: 5, ring: 1 })); RING2.forEach((label, i) => NODE_DEFS.push({ id: 'r2_' + i, label, kind: 'leaf2', r: 4, ring: 2 })); RING3.forEach((label, i) => NODE_DEFS.push({ id: 'r3_' + i, label, kind: 'leaf3', r: 3.5, ring: 3 })); // Edges: hub→core, core→ring1 (cada core puxa 2 do ring1), ring1→ring2, ring2→ring3, + cross const EDGES = []; CORE.forEach((c) => EDGES.push(['hub', c.id])); // core → ring1 (cada core conecta com 2 do ring1, em ordem) for (let i = 0; i < RING1.length; i++) { const coreIdx = Math.floor(i / 2) % CORE.length; EDGES.push([CORE[coreIdx].id, 'r1_' + i]); } // ring1 → ring2 (cada ring1 puxa ~1.5 ring2) for (let i = 0; i < RING2.length; i++) { const r1Idx = Math.floor(i / 1.5) % RING1.length; EDGES.push(['r1_' + r1Idx, 'r2_' + i]); } // ring2 → ring3 for (let i = 0; i < RING3.length; i++) { const r2Idx = i % RING2.length; EDGES.push(['r2_' + r2Idx, 'r3_' + i]); } // Cross-conexões pra textura for (let i = 0; i < 14; i++) { const a = NODE_DEFS[1 + Math.floor(Math.random() * (NODE_DEFS.length - 1))]; const b = NODE_DEFS[1 + Math.floor(Math.random() * (NODE_DEFS.length - 1))]; if (a.id !== b.id) EDGES.push([a.id, b.id]); } const nodes = NODE_DEFS.map((d, i) => ({ ...d, x: 0, y: 0, vx: 0, vy: 0, fixed: d.id === 'hub', // ângulo orbital pra animação suave baseAngle: 0, orbitSpeed: 0 })); const byId = Object.fromEntries(nodes.map((n) => [n.id, n])); const edges = EDGES. filter(([a, b]) => byId[a] && byId[b]). map(([a, b]) => ({ a: byId[a], b: byId[b], pulses: [] })); function spawnPulse() { // Prefere edges saindo do hub const hubEdges = edges.filter((e) => e.a.kind === 'hub' || e.b.kind === 'hub'); const pool = Math.random() < 0.55 ? hubEdges : edges; const edge = pool[Math.floor(Math.random() * pool.length)]; if (!edge) return; const dir = Math.random() < 0.5 ? 1 : -1; edge.pulses.push({ t: 0, dir, speed: 0.006 + Math.random() * 0.012 }); } function getRadii() { const m = Math.min(W, H); return { rCore: m * 0.18, r1: m * 0.34, r2: m * 0.44, r3: m * 0.52 }; } function layout() { const cx = W / 2,cy = H / 2; byId.hub.x = cx;byId.hub.y = cy; const { rCore, r1, r2, r3 } = getRadii(); const core = nodes.filter((n) => n.kind === 'core'); const l1 = nodes.filter((n) => n.ring === 1); const l2 = nodes.filter((n) => n.ring === 2); const l3 = nodes.filter((n) => n.ring === 3); core.forEach((n, i) => { const a = i / core.length * Math.PI * 2 - Math.PI / 2; n.baseAngle = a;n.orbitSpeed = 0.00006; n.x = cx + Math.cos(a) * rCore;n.y = cy + Math.sin(a) * rCore; }); l1.forEach((n, i) => { const a = i / l1.length * Math.PI * 2; n.baseAngle = a;n.orbitSpeed = -0.00004; n.x = cx + Math.cos(a) * r1;n.y = cy + Math.sin(a) * r1; }); l2.forEach((n, i) => { const a = i / l2.length * Math.PI * 2 + 0.1; n.baseAngle = a;n.orbitSpeed = 0.00003; n.x = cx + Math.cos(a) * r2;n.y = cy + Math.sin(a) * r2; }); l3.forEach((n, i) => { const a = i / l3.length * Math.PI * 2 - 0.15; n.baseAngle = a;n.orbitSpeed = -0.00002; n.x = cx + Math.cos(a) * r3;n.y = cy + Math.sin(a) * r3; }); } function resize() { const rect = wrap.getBoundingClientRect(); W = Math.max(320, Math.min(2000, rect.width || 800)); H = Math.max(320, Math.min(900, rect.height || 600)); canvas.width = W * dpr;canvas.height = H * dpr; canvas.style.width = W + 'px';canvas.style.height = H + 'px'; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); layout(); } resize(); const ro = new ResizeObserver(resize);ro.observe(wrap); const mouse = { x: -9999, y: -9999, active: false }; const onMove = (e) => { const r = canvas.getBoundingClientRect(); mouse.x = e.clientX - r.left;mouse.y = e.clientY - r.top;mouse.active = true; }; const onLeave = () => {mouse.active = false;mouse.x = -9999;mouse.y = -9999;}; canvas.addEventListener('mousemove', onMove); canvas.addEventListener('mouseleave', onLeave); function step(ts) { const cx = W / 2,cy = H / 2; const { rCore, r1, r2, r3 } = getRadii(); // Posição base orbital + jitter suave for (const n of nodes) { if (n.fixed) {n.x = cx;n.y = cy;continue;} const radius = n.kind === 'core' ? rCore : n.ring === 1 ? r1 : n.ring === 2 ? r2 : r3; const a = n.baseAngle + ts * n.orbitSpeed; const wobble = Math.sin(ts * 0.0008 + n.baseAngle * 3) * 4; const tx = cx + Math.cos(a) * (radius + wobble); const ty = cy + Math.sin(a) * (radius + wobble); // Mouse repulsão let mx = 0,my = 0; if (mouse.active) { const dx = n.x - mouse.x,dy = n.y - mouse.y; const d2 = dx * dx + dy * dy + 0.01; if (d2 < 14000) { const d = Math.sqrt(d2); const f = 30 / Math.max(1, d / 8); mx = dx / d * f;my = dy / d * f; } } // Lerp suave pra base + offset de mouse n.x += (tx + mx - n.x) * 0.06; n.y += (ty + my - n.y) * 0.06; } // Avança pulsos for (const e of edges) { e.pulses = e.pulses.filter((p) => {p.t += p.speed;return p.t <= 1;}); } } function draw(ts) { ctx.clearRect(0, 0, W, H); // Fundo: anéis-guia muito sutis const cx = W / 2,cy = H / 2; const { rCore, r1, r2, r3 } = getRadii(); ctx.strokeStyle = 'rgba(255,255,255,.04)'; ctx.lineWidth = 1; [rCore, r1, r2, r3].forEach((r) => { ctx.beginPath();ctx.arc(cx, cy, r, 0, Math.PI * 2);ctx.stroke(); }); // Pontos no fundo const gridSize = 32; ctx.fillStyle = bgDot; for (let x = W / 2 % gridSize; x < W; x += gridSize) { for (let y = H / 2 % gridSize; y < H; y += gridSize) { ctx.fillRect(x, y, 1, 1); } } // Edges for (const e of edges) { const dx = e.b.x - e.a.x,dy = e.b.y - e.a.y; const d = Math.sqrt(dx * dx + dy * dy); if (d < 0.1) continue; const ux = dx / d,uy = dy / d; const x1 = e.a.x + ux * e.a.r,y1 = e.a.y + uy * e.a.r; const x2 = e.b.x - ux * e.b.r,y2 = e.b.y - uy * e.b.r; const isHubEdge = e.a.kind === 'hub' || e.b.kind === 'hub'; const isCoreEdge = e.a.kind === 'core' || e.b.kind === 'core'; ctx.strokeStyle = isHubEdge ? 'rgba(255,255,255,.22)' : isCoreEdge ? 'rgba(255,255,255,.11)' : 'rgba(255,255,255,.06)'; ctx.lineWidth = isHubEdge ? 1.1 : 0.7; ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.stroke(); for (const p of e.pulses) { const t = p.dir === 1 ? p.t : 1 - p.t; const px = x1 + (x2 - x1) * t,py = y1 + (y2 - y1) * t; const t0 = Math.max(0, t - 0.14); const tx = x1 + (x2 - x1) * t0,ty = y1 + (y2 - y1) * t0; const grad = ctx.createLinearGradient(tx, ty, px, py); grad.addColorStop(0, 'rgba(255,255,255,0)'); grad.addColorStop(1, accent); ctx.strokeStyle = grad;ctx.lineWidth = 1.6; ctx.beginPath();ctx.moveTo(tx, ty);ctx.lineTo(px, py);ctx.stroke(); ctx.fillStyle = accent; ctx.beginPath();ctx.arc(px, py, 2.2, 0, Math.PI * 2);ctx.fill(); } } // Nodes for (const n of nodes) { if (n.kind === 'hub') { const pulse = (Math.sin(ts * 0.0018) + 1) / 2; const haloR = n.r + 14 + pulse * 10; const grad = ctx.createRadialGradient(n.x, n.y, n.r, n.x, n.y, haloR + 22); grad.addColorStop(0, 'rgba(255,255,255,0)'); grad.addColorStop(0.45, 'rgba(217, 184, 87, 0.28)'); grad.addColorStop(1, 'rgba(255,255,255,0)'); ctx.fillStyle = grad; ctx.beginPath();ctx.arc(n.x, n.y, haloR + 22, 0, Math.PI * 2);ctx.fill(); } ctx.beginPath();ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2); if (n.kind === 'hub') { ctx.fillStyle = accent;ctx.fill(); ctx.lineWidth = 1.5;ctx.strokeStyle = 'rgba(255,255,255,.9)';ctx.stroke(); } else if (n.kind === 'core') { ctx.fillStyle = 'rgba(255,255,255,.95)';ctx.fill(); } else if (n.ring === 1) { ctx.fillStyle = 'rgba(255,255,255,.7)';ctx.fill(); } else if (n.ring === 2) { ctx.fillStyle = 'rgba(255,255,255,.5)';ctx.fill(); } else { ctx.fillStyle = 'rgba(255,255,255,.35)';ctx.fill(); } // Labels apenas em hub + core + ring1 (ring2/3 ficam só como nuvem visual) if (n.kind === 'hub' || n.kind === 'core' || n.ring === 1) { ctx.font = n.kind === 'hub' ? '600 13px ui-sans-serif, system-ui' : n.kind === 'core' ? '500 11px ui-monospace, monospace' : '400 10px ui-monospace, monospace'; ctx.fillStyle = n.kind === 'hub' ? inkColor : n.kind === 'core' ? 'rgba(255,255,255,.88)' : mutedColor; ctx.textAlign = 'center';ctx.textBaseline = 'top'; ctx.fillText(n.kind === 'hub' ? 'ConectaAI' : n.label, n.x, n.y + n.r + 5); } } } let raf = 0,lastPulse = 0; const tick = (ts) => { if (ts - lastPulse > 220) { spawnPulse(); if (Math.random() < 0.7) spawnPulse(); if (Math.random() < 0.4) spawnPulse(); lastPulse = ts; } step(ts);draw(ts); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.removeEventListener('mousemove', onMove); canvas.removeEventListener('mouseleave', onLeave); }; }, [accent, inkColor, mutedColor, bgDot]); return (
● contexto sendo puxado em tempo real 72 nós · 100+ conexões ativas
); }; const NodeMark = ({ size = 22, color = "currentColor" }) => ; const Nav = () => ; const Hero = () => { const [hasBackdrop, setHasBackdrop] = React.useState( () => (document.body.dataset.graph || 'constellation') === 'constellation' ); React.useEffect(() => { const obs = new MutationObserver(() => { setHasBackdrop((document.body.dataset.graph || 'constellation') === 'constellation'); }); obs.observe(document.body, { attributes: true, attributeFilter: ['data-graph'] }); return () => obs.disconnect(); }, []); return (
4 anos · 100+ provedores no Brasil CHAPECÓ SANTA CATARINA · 2026

Atendimento impecável.
Sem montar operação.

A gente já opera atendimento pra mais de 100 provedores há 4 anos. Agora colocamos IA na frente — pra resolver o que dá pra resolver em segundos, e deixar nosso time humano só com o que importa.

Implementação em 14 dias · LGPD · ISO 27001 em processo
{/* Card-style graph (renderiza só em variantes orbital/dataflow) */}
); }; // Backdrop: renderiza só quando graphStyle === constellation, full-bleed atrás do hero const HeroGraphBackdrop = () => { const [style, setStyle] = React.useState( () => document.body.dataset.graph || 'constellation' ); const [accent, setAccent] = React.useState( () => getComputedStyle(document.documentElement).getPropertyValue('--accent').trim() || 'oklch(0.82 0.18 125)' ); React.useEffect(() => { const obs = new MutationObserver(() => { setStyle(document.body.dataset.graph || 'constellation'); setAccent(getComputedStyle(document.documentElement).getPropertyValue('--accent').trim()); }); obs.observe(document.body, { attributes: true, attributeFilter: ['data-graph'] }); obs.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] }); return () => obs.disconnect(); }, []); if (style !== 'constellation') return null; return (
); }; // Bridge: lê body[data-graph] e reage a mudanças do tweak panel const HeroGraphPickerLive = ({ renderMode = 'auto' }) => { const [style, setStyle] = React.useState( () => document.body.dataset.graph || 'constellation' ); const [accent, setAccent] = React.useState( () => getComputedStyle(document.documentElement).getPropertyValue('--accent').trim() || 'oklch(0.82 0.18 125)' ); React.useEffect(() => { const obs = new MutationObserver(() => { setStyle(document.body.dataset.graph || 'constellation'); setAccent(getComputedStyle(document.documentElement).getPropertyValue('--accent').trim()); }); obs.observe(document.body, { attributes: true, attributeFilter: ['data-graph'] }); obs.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] }); return () => obs.disconnect(); }, []); // Card-mode hides constellation (it renders as full-bleed backdrop instead) if (renderMode === 'card' && style === 'constellation') return null; return ; }; const LogosStrip = () =>
4anos operando atendimento
100+ provedores atendidos no Brasil
24/7 turnos cobertos pela operação
PT+ES português e espanhol nativos
; const Ticker = () =>
Suporte L12ª viaReset CPE Diagnóstico de linkStatus do planoAgendamento CobrançaAcordoOnboarding Pré-vendaUpsellPesquisa CSAT TriagemRoteamentoTranscrição Suporte L12ª viaReset CPE Diagnóstico de linkStatus do planoAgendamento CobrançaAcordoPesquisa CSAT
; const WhyUs = () => { const pillars = [ { n: "01", title: <>Operamos antes de programar, body: "A gente vem de 4 anos atendendo provedor por turno, na régua, com gente. Quem desenha o software já passou a noite no console — não é teoria de SaaS.", vis: "ops", }, { n: "02", title: <>IA que defleta, humano que resolve, body: "A IA fecha o que é repetitivo em segundos. O caso que escala chega no humano com o cliente identificado, histórico carregado e proposta de solução pronta.", vis: "deflect", }, { n: "03", title: <>Mais barato porque é mais rápido, body: "Não é cortar pessoas pra economizar. É absorver volume com software pra cada minuto humano render mais. O custo por atendimento cai sem o CSAT cair junto.", vis: "cost", } ]; return (
00— Por que a gente

Software de IA todo mundo promete.
Operação rodando, é outro assunto.

Você não está contratando uma plataforma com manual de uso. Está contratando a operação inteira — IA + pessoas + processo — pra atender seu cliente como se fosse o nosso.

{pillars.map((p, i) => (
{p.n}

{p.title}

{p.body}

))}
); }; const HowItWorks = () =>
01— Como funciona

Da chamada do cliente à pesquisa de CSAT, em uma operação só.

Não é uma ferramenta que você instala. É um fluxo end-to-end que a gente opera — IA na frente, humano no meio quando precisa, métrica no fim sempre.

~ 0s
01 / Entrada

Cliente chega

WhatsApp, voz, e-mail ou chat. Roteador identifica o cliente no seu CRM/ERP e carrega o histórico antes da primeira resposta.

WhatsAppVoz SIPE-mailChat
4–40s
02 / IA tenta resolver

Agente responde

Para 70% dos casos — 2ª via, status, agendamento, dúvida técnica L1 — a IA resolve direto, com tom da marca, dentro da política.

RAG nos seus dadosFerramentas reaisGuardrails
< 60s
03 / Humano com contexto

Operador assume

Os 30% que escalam caem no nosso operador com o caso pré-resumido, sentimento do cliente já lido, e a próxima ação sugerida.

Resumo automáticoSentimentoPróxima ação
D+0
04 / Fechamento

Mede e aprende

Pesquisa de CSAT automática, transcrição arquivada, motivos categorizados. Toda semana o agente aprende com o que humano resolveu.

CSATFCRMotivos
; const Agents = () => { const agents = [ { tag: "agent/01 · atendimento", state: "em produção", name: <>Atendimento de ponta, desc: "Responde por WhatsApp, e-mail e chat com contexto do cliente. Escala pro humano só quando precisa.", skills: ["WhatsApp", "E-mail", "CRM", "RAG"], metric: { k: "Resolução sem handoff", v: "78%" } }, { tag: "agent/02 · back office", state: "em produção", name: <>Operação silenciosa, desc: "Concilia pedidos, fecha tickets repetitivos e reconcilia dados entre sistemas durante a madrugada.", skills: ["ERP", "Planilhas", "SQL", "Cron"], metric: { k: "Horas/mês liberadas", v: "420h" } }, { tag: "agent/03 · vendas", state: "em produção", name: <>Pré-venda qualificada, desc: "Qualifica leads pelo ICP, enriquece dados e marca reunião só com quem faz sentido pro seu time.", skills: ["HubSpot", "Enriquecimento", "Calendly"], metric: { k: "SQLs / mês", v: "3,2×" } }, { tag: "agent/04 · financeiro", state: "em produção", name: <>Cobrança humana, desc: "Negocia parcelamento, emite boletos e fecha acordos dentro da sua política, sem tom robótico.", skills: ["Boleto", "Pix", "Régua"], metric: { k: "Recuperação D+30", v: "+34%" } }, { tag: "agent/05 · RH", state: "beta", name: <>Onboarding assistido, desc: "Guia novos colaboradores pelos primeiros 30 dias, responde sobre política, benefícios e processos internos.", skills: ["SSO", "Notion", "Benefícios"], metric: { k: "Tickets RH evitados", v: "61%" } }, { tag: "agent/06 · custom", state: "do seu jeito", name: <>Monte o seu, desc: "Do zero ou partindo de um dos templates acima. Integrações, prompts e regras 100% sob seu controle.", skills: ["SDK", "API", "Templates"], metric: { k: "Tempo até 1º deploy", v: "< 14d" } }]; return (
02— Agentes

Uma biblioteca viva de agentes prontos para operar.

Cada um com papel, ferramentas e métricas definidas. Use como ponto de partida ou customize do zero.

{agents.map((a, i) =>
{a.tag} {a.state}

{a.name}

{a.desc}

{a.skills.map((s) => {s})}
{a.metric.k} {a.metric.v}
)}
); }; const IntegLogo = ({ logo, name }) => { const [failed, setFailed] = React.useState(false); const [isDark, setIsDark] = React.useState(() => typeof document !== 'undefined' && document.body?.dataset.theme === 'dark' ); React.useEffect(() => { const obs = new MutationObserver(() => { setIsDark(document.body.dataset.theme === 'dark'); }); obs.observe(document.body, { attributes: true, attributeFilter: ['data-theme'] }); return () => obs.disconnect(); }, []); const buildMono = (str) => { const words = str.split(/[\s\-!]+/).filter(Boolean); if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase(); return str.slice(0, 2).replace(/^./, c => c.toUpperCase()); }; const fallbackMono = buildMono(name); const useImg = (logo.kind === "icon" || logo.kind === "file" || logo.kind === "url") && !failed; const tint = isDark ? "ffffff" : "111111"; const src = logo.kind === "icon" ? `https://cdn.simpleicons.org/${logo.slug}/${tint}` : (logo.kind === "file" || logo.kind === "url") ? (isDark && logo.srcDark ? logo.srcDark : logo.src) : null; const cls = ["integ-logo"]; if (logo.kind === "file") cls.push("integ-logo--file"); if (logo.darkInvert && isDark) cls.push("integ-logo--invert"); if (logo.lightInvert && !isDark) cls.push("integ-logo--invert"); if (logo.brand) cls.push("integ-logo--brand"); return (
{useImg ? ( {name setFailed(true)} /> ) : ( )}
); }; const Integrations = () => { // Logo strategy: // - Marcas com presença em simple-icons CDN: usamos cdn.simpleicons.org (SVG, monocromático). // - Marcas regionais/proprietárias sem CDN público: monogram (iniciais) renderizado em CSS. const integs = [ { name: "IXC Provedor", cat: "CRM", logo: { kind: "file", src: "brand/logos/ixc-provedor.png" } }, { name: "Trello", cat: "CRM", logo: { kind: "icon", slug: "trello" } }, { name: "WhatsApp Business API", cat: "Canal", logo: { kind: "url", brand: true, src: "https://cdn.simpleicons.org/whatsapp/3B5BFF", srcDark: "https://cdn.simpleicons.org/whatsapp/3B5BFF" } } }, { name: "Conecta SIP-AI", cat: "Canal", logo: { kind: "file", brand: true, src: "brand/logos/conecta-mark-accent.svg", srcDark: "brand/logos/conecta-mark-accent.svg" } }, { name: "OpenAI", cat: "AI", logo: { kind: "file", src: "brand/logos/openai.png", darkInvert: true } }, { name: "Anthropic", cat: "AI", logo: { kind: "file", src: "brand/logos/anthropic.webp", darkInvert: true } }, { name: "Opa! Suite", cat: "Helpdesk", logo: { kind: "file", src: "brand/logos/opa-suite.svg" } }, { name: "Twilio", cat: "Helpdesk", logo: { kind: "file", src: "brand/logos/twilio.png" } }, { name: "IXC Provedor", cat: "ERP", logo: { kind: "file", src: "brand/logos/ixc-provedor.png" } }, { name: "Hubsoft", cat: "ERP", logo: { kind: "file", src: "brand/logos/hubsoft.png", lightInvert: true } }, { name: "IXC ACS", cat: "TR069", logo: { kind: "file", src: "brand/logos/ixc-acs.png" } }, { name: "Postgres", cat: "Dados", logo: { kind: "icon", slug: "postgresql" } } ]; return (
03— Integrações

Tudo que sua empresa já usa, conversando entre si.

Conectores nativos, SDK aberto e webhooks para plugar qualquer sistema. Se existe, a gente conecta.

{integs.map((i, idx) =>
{i.cat} ↗
{i.name}
)}
); }; const Cases = () =>
04— Casos de uso

Empresas reais, com números auditáveis.

Sem cherry-picking: cada caso mostra o antes, o depois e a metodologia. Peça o deck detalhado em PDF.

Provedor MG · 14k assinantescase-01

Da espera de 47 minutos ao atendido em segundos.

Pico de chamadas no fim da tarde derrubava a fila. Agente de Suporte L1 absorveu 2ª via, status do plano e reset de CPE direto pelo IXC, sem fila.

−87%
Tempo médio de espera
71%
Resolvido sem humano
R$ 38k
Economia / mês
Provedor SP · 38k assinantescase-02

Madrugada que não chama o técnico à toa.

Diagnóstico via IXC ACS antes de abrir chamado. Quedas reais escalam pro plantão; oscilação de Wi-Fi vira instrução guiada na hora.

−63%
Visitas técnicas
8min
Tempo médio de diagnóstico
24/7
Cobertura sem plantão presencial
Provedor PR · 9k assinantescase-03

Cobrança que não soa como cobrança.

Régua de inadimplência conversando no WhatsApp, gerando 2ª via, oferecendo acordo dentro da política. Humano só entra em exceção.

+42%
Recuperação em D+15
−2.1pp
Inadimplência mensal
3.4x
ROI no primeiro trimestre
Provedor BA · 22k assinantescase-04

Retenção que liga antes do cliente cancelar.

Sinais do CRM (queda de uso, ticket recorrente, pedido de cancelamento) viram ação. Agente de retenção propõe upgrade ou aciona o humano certo.

−38%
Churn voluntário
+18%
Upsell na retenção
14d
Do setup ao primeiro turno
; const Pricing = () =>
05— Planos

Comece pequeno. Escale sem reescrever nada.

Cobrança por turno resolvido, não por usuário. Se o agente não entregou, você não paga.

Início · piloto

Conecta Start

R$ 926,80 / mês
  • 1 agente em produção
  • Até 100 turnos resolvidos
  • 3 conectores prontos
  • Painel de métricas essenciais
  • SLA dedicado
  • Ambiente isolado
Operação

Conecta Core

R$ 8.9k / mês
  • Até 5 agentes simultâneos
  • Até 1.000 turnos resolvidos
  • Conectores ilimitados
  • Auditoria completa + logs
  • SLA 99.9% com suporte
  • Ambiente isolado na sua nuvem
Grupo · enterprise

Conecta Scale

sob medida
  • Agentes e turnos ilimitados
  • On-prem ou VPC dedicada
  • Modelos dedicados / fine-tune
  • Certificações customizadas
  • Squad de implementação
  • Contrato anual com POC paga
; const ContactForm = () => { // ⚠️ Substitua por seu endpoint Formspree real: // 1. Crie conta grátis em formspree.io com comercial@speedgrowthisp.com.br // 2. Crie um formulário "ConectaAI" // 3. Cole abaixo o endpoint (formato: https://formspree.io/f/XXXXXXX) const FORMSPREE_ENDPOINT = "https://formspree.io/f/xvzlzrzk"; const [status, setStatus] = React.useState("idle"); // idle | sending | ok | err const [msg, setMsg] = React.useState(""); async function handleSubmit(e) { e.preventDefault(); const form = e.currentTarget; const data = new FormData(form); // Validação manual (form usa noValidate pra UX customizada) const nome = String(data.get("nome") || "").trim(); const email = String(data.get("email") || "").trim(); const consent = data.get("consent"); if (!nome) { setStatus("err"); setMsg("Informe seu nome."); return; } if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setStatus("err"); setMsg("Email inválido."); return; } if (!consent) { setStatus("err"); setMsg("Aceite a política de privacidade pra continuar."); return; } setStatus("sending"); setMsg(""); try { const res = await fetch(FORMSPREE_ENDPOINT, { method: "POST", headers: { Accept: "application/json" }, body: data, }); if (res.ok) { setStatus("ok"); setMsg("Recebido. Retornamos em até 1 dia útil."); form.reset(); return; } let detail = ""; try { const j = await res.json(); detail = (j.errors && j.errors[0] && j.errors[0].message) || ""; } catch (_) {} setStatus("err"); setMsg(detail ? `Erro: ${detail}. Tente comercial@speedgrowthisp.com.br` : "Não foi possível enviar. Tente comercial@speedgrowthisp.com.br"); } catch (err) { setStatus("err"); setMsg("Falha de conexão. Tente novamente ou escreva pra comercial@speedgrowthisp.com.br"); } } return (