// ============================================================
// STACK / FLUXO — diagrama amplo end-to-end com ícones
// ============================================================
// ─── ÍCONES SVG INLINE ─────────────────────────────────────
const FlowIcon = {
google: () => (
),
meta: () => (
),
site: () => (
),
whatsapp: () => (
),
gmn: () => (
// Google Meu Negócio — store
),
sparkles: () => (
// IA spark
),
kommo: () => (
Kommo
),
user: () => (
),
star: () => (
),
chart: () => (
),
};
// ─── NÓ DO FLUXOGRAMA ────────────────────────────────────────
function FlowNode({ icon, iconBg, label, name, sub, accent }) {
return (
{icon}
{label}
{name}
{sub && {sub} }
);
}
// ─── FLUXOGRAMA PRINCIPAL ─────────────────────────────────────
function Fluxograma() {
return (
{/* Stage labels (top) */}
01 Atração
02 Conversão
03 Inteligência
04 Atendimento
05 Fidelização
{/* COL 1 — Atração */}
}
label="anúncio busca"
name="Google Ads"
sub="cupom R$1.200"
/>
}
label="rede social"
name="Meta Ads"
sub="IG + Facebook"
/>
{/* COL 2 — Conversão */}
}
label="ponto de entrada"
name="Landing page"
sub="otimizada p/ conversão"
/>
}
label="canal direto"
name="WhatsApp"
sub="API oficial"
/>
}
label="busca local"
name="Google Meu Negócio"
sub="ficha + reviews"
/>
{/* COL 3 — NÚCLEO */}
núcleo · 24/7
A Apta orquestra tudo
qualifica intenção · roteia · responde
+ lê histórico do cliente
+ entende grau de interesse
+ distribui pro vendedor certo
+ dispara follow-up se demorar
workflow n8n
automação contínua
{/* COL 4 — Atendimento */}
}
label="CRM"
name="Kommo"
sub="funil organizado"
/>
}
label="seu vendedor"
name="Atendimento instantâneo"
sub="0 lead sem resposta"
/>
{/* COL 5 — Fidelização */}
}
label="pós-venda"
name="Pede review"
sub="automático no GMN"
/>
}
label="toda segunda 9h"
name="Dashboard"
sub="WhatsApp + Sheets"
/>
{/* SVG: linhas conectando + dots animados */}
{/* Col 1 → Col 3 (núcleo) */}
{/* Col 2 → Col 3 */}
{/* Col 3 → Col 4 */}
{/* Col 4 → Col 5 */}
{/* Loop volta col 5 → col 3 (review alimenta IA) */}
{/* Dots */}
{[
{ p: 'fp1', d: 3.8, b: '0s', f: '#DCAF3A' },
{ p: 'fp2', d: 3.8, b: '1.5s', f: '#A45EFF' },
{ p: 'fp3', d: 3.8, b: '0.8s', f: '#4285F4' },
{ p: 'fp4', d: 3.4, b: '2.0s', f: '#25D366' },
{ p: 'fp5', d: 3.8, b: '2.8s', f: '#34A853' },
{ p: 'fp6', d: 3.4, b: '3.2s', f: '#0E14EE' },
{ p: 'fp7', d: 3.4, b: '3.6s', f: '#7E9573' },
{ p: 'fp8', d: 2.4, b: '4.4s', f: '#FCBF49' },
{ p: 'fp9', d: 2.4, b: '4.8s', f: '#FCBF49' },
].map((dot, i) => (
))}
{/* Stats footer */}
clientes ativos
12
lead sem atendimento
0
setups disponíveis
3 níveis
operação
24/7
);
}
// ─── SEÇÃO INTEIRA ────────────────────────────────────────────
function Stack() {
return (
05 · o fluxo · end-to-end
Do clique do anúncio até o review no Google.
Cada peça da operação conectada num fluxo só. Nada de planilha solta, lead perdido em conversa,
ou vendedor esquecendo de retornar. A Apta orquestra o caminho inteiro com automação + IA aplicada.
);
}
Object.assign(window, { Stack, Fluxograma, FlowIcon });