add_filter( 'wpcode_snippet_output_html', 'do_shortcode' );
import { useState, useEffect, useRef } from "react";
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, AreaChart, Area, Cell } from "recharts";
import { Building2, Target, Layers, DollarSign, Map, Cpu, ChevronRight, ChevronDown, ArrowRight, TrendingUp, Clock, Shield, Users, FileText, Briefcase, Radio, Wrench, BarChart3, Brain, Eye, Bot, Mic, Search as SearchIcon, Zap, Database, Globe, Award, AlertTriangle } from "lucide-react";
// ═══════ PALETTE ═══════
const C = {
navy: "#0A1929", navyMid: "#13263D", navyLight: "#1E3A5F",
steel: "#5A7A9C", steelLight: "#8FA9C4",
copper: "#D97706", copperLt: "#F59E0B", gold: "#FBBF24",
white: "#FFFFFF", offWhite: "#F1F5F9", muted: "#94A3B8",
text: "#1E293B", success: "#10B981", danger: "#EF4444",
bg: "#060E1A",
};
// ═══════ ANIMATED COUNTER ═══════
function Counter({ end, suffix = "", prefix = "", duration = 2000, decimals = 0 }) {
const [val, setVal] = useState(0);
const ref = useRef(null);
const [started, setStarted] = useState(false);
useEffect(() => {
const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setStarted(true); }, { threshold: 0.3 });
if (ref.current) obs.observe(ref.current);
return () => obs.disconnect();
}, []);
useEffect(() => {
if (!started) return;
let start = 0; const step = end / (duration / 16);
const timer = setInterval(() => {
start += step;
if (start >= end) { setVal(end); clearInterval(timer); }
else setVal(start);
}, 16);
return () => clearInterval(timer);
}, [started, end, duration]);
return {prefix}{val.toFixed(decimals).replace(".", ",")}{suffix};
}
// ═══════ NAV ITEMS ═══════
const NAV = [
{ id: "dashboard", label: "Dashboard", icon: BarChart3 },
{ id: "mapa", label: "Mapa do Projeto", icon: Map },
{ id: "roadmap", label: "Roadmap", icon: Layers },
{ id: "estrategia", label: "Mapa Estratégico", icon: Target },
{ id: "tech", label: "Tecnologias", icon: Cpu },
];
// ═══════ DATA ═══════
const PILARES = [
{ nome: "Orçamentos & Licitações", min: 2.5, max: 3.5, cor: C.copper },
{ nome: "Obras & Projetos", min: 1.0, max: 1.5, cor: C.copperLt },
{ nome: "Engenharia & Construção", min: 0.8, max: 1.2, cor: C.gold },
{ nome: "Planej., Financ., DP & Com.", min: 0.7, max: 1.0, cor: C.steelLight },
];
const chartData = PILARES.map(p => ({ name: p.nome.split(" ")[0], min: p.min, max: p.max - p.min }));
const curvaS = [
{ ano: "2020", pct: 3 },{ ano: "2021", pct: 6 },{ ano: "2022", pct: 10 },{ ano: "2023", pct: 15 },
{ ano: "2024", pct: 24 },{ ano: "2025", pct: 38 },{ ano: "2026", pct: 55 },{ ano: "2027", pct: 72 },
{ ano: "2028", pct: 84 },{ ano: "2029", pct: 91 },{ ano: "2030", pct: 95 },
];
const DEPS = [
{ id: "prosp", nome: "Prospecção e Licitações", icon: SearchIcon, impacto: "R$ 1,2M–1,8M",
apps: ["Radar automático em portais públicos e privados", "Análise de editais de 300–500 páginas em minutos", "Mapeamento de riscos, exigências e marcos legislativos", "Cruzamento automático com NBRs", "Alertas de prazo e oportunidade"],
bench: "Bechtel economizou US$25M+ com IA em projetos" },
{ id: "orc", nome: "Orçamentos", icon: FileText, impacto: "R$ 1,3M–1,7M",
apps: ["Composição de custos com memória histórica de 48 anos", "Orçamento-base gerado em horas usando obras similares", "Detecção de erros de margem", "Calibração com SINAPI"],
bench: "MRV investe R$ 100M/ano em IA e reduziu quadro em 20%" },
{ id: "eng", nome: "Engenharia e Construção", icon: Building2, impacto: "R$ 800K–1,2M",
apps: ["Detecção de interferências BIM entre disciplinas", "Cronogramas preditivos cruzando clima e produtividade", "Conversão PDF/DWG → BIM com 90% de economia", "Estudos de viabilidade generativos"],
bench: "Vinci: meta de 5.200 horas/ano economizadas" },
{ id: "obras", nome: "Obras e Projetos", icon: Wrench, impacto: "R$ 1,0M–1,5M",
apps: ["RDO por voz e imagem", "Segurança por visão computacional (EPI, zonas de risco)", "Sincronização escritório central ↔ canteiro em tempo real", "Assistente de campo via WhatsApp corporativo"],
bench: "Bouygues: -22% em acidentes com IA" },
{ id: "plan", nome: "Planejamento e Controle", icon: Briefcase, impacto: "R$ 400K–600K",
apps: ["Gestão contratual e orçamentária automatizada", "Liberação de verba por medição com 100% compromissado", "Previsão de fluxo de caixa por obra", "Alertas de desvio em tempo real"],
bench: "Skanska: 3.000+ funcionários usando IA diariamente" },
{ id: "fin", nome: "Financeiro", icon: DollarSign, impacto: "R$ 300K–500K",
apps: ["Conciliação medições × NF automática", "Encontro de contas inteligente", "Análise preditiva de inadimplência", "Fechamento contábil acelerado"],
bench: "MRV: conversão de leads 20% → 70% com IA" },
{ id: "dp", nome: "DP e RH", icon: Users, impacto: "R$ 150K–200K",
apps: ["Processos seletivos e recrutamento assistidos por IA", "Onboarding com agente treinado no manual", "Análise preditiva de turnover", "Compliance trabalhista automatizado"],
bench: "Tenda: agentes digitais para jurídico e RH" },
{ id: "com", nome: "Comunicação Escritório Central ↔ Obra", icon: Radio, impacto: "R$ 150K–200K",
apps: ["Sincronização de projetos, revisões e fotos", "Notificações automáticas de atualização", "Assistente de consulta em campo", "Histórico pesquisável de decisões"],
bench: "Deloitte: 11,5h/semana buscando dados na construção" },
];
const FASES = [
{ n: 1, titulo: "Diagnóstico e Fundação", periodo: "Meses 1–3", desc: "Mapeamento de dados, sistemas e processos. Definição da arquitetura-alvo. Quick wins identificáveis. Nenhum sistema trocado.", resultado: "Investimento contido", cor: C.steelLight },
{ n: 2, titulo: "Pilar 1 em Produção", periodo: "Meses 4–9", desc: "Plataforma para Orçamentos + Licitações entrega valor mensurável. Radar de oportunidades ativo. Orçamentos em horas, não dias.", resultado: "R$ 2,5M–3,5M/ano", cor: C.copperLt },
{ n: 3, titulo: "Expansão por Ondas", periodo: "Meses 10–18", desc: "Obras e canteiros, depois engenharia, depois retaguarda. Cada onda paga a próxima. Plataforma corporativa consolidada.", resultado: "R$ 5M–7,2M/ano", cor: C.copper },
];
const TECHS = [
{ nome: "LLMs", sub: "Modelos de Linguagem", icon: Brain, desc: "Leitura e síntese de editais, contratos e NBRs; geração de relatórios; assistentes por voz e texto" },
{ nome: "RAG", sub: "Retrieval-Augmented Generation", icon: Database, desc: "Conecta IA à base proprietária da SIAN — orçamentos históricos, composições, especificações" },
{ nome: "Visão Computacional", sub: "Computer Vision", icon: Eye, desc: "Segurança em canteiros; progresso por drone; inspeção automatizada de qualidade" },
{ nome: "RPA", sub: "Automação de Processos", icon: Zap, desc: "Cadastro no ERP; conciliação medições × NF; preenchimento de documentação repetitiva" },
{ nome: "BIM + IA", sub: "Building Information Modeling", icon: Building2, desc: "Detecção de interferências; conversão PDF/DWG → BIM 3D; viabilidade generativa" },
{ nome: "IoT + Analytics", sub: "Internet das Coisas", icon: Radio, desc: "Sensores para monitoramento em tempo real; previsão de manutenção; controle de consumo" },
{ nome: "OCR Inteligente", sub: "Reconhecimento Óptico", icon: SearchIcon, desc: "Digitalização de documentos legados; extração de dados de NFs e contratos em papel" },
{ nome: "Speech-to-Text", sub: "Voz para Texto", icon: Mic, desc: "RDO por voz; atas de reunião automáticas; registro de decisões em campo" },
{ nome: "Analytics Preditivo", sub: "Machine Learning", icon: TrendingUp, desc: "Previsão de estouro de prazo e custo; risco de inadimplência; sequenciamento construtivo" },
{ nome: "Agentes Autônomos", sub: "AI Agents", icon: Bot, desc: "Monitorar portais de licitação, gerar alertas, preparar resumos, atualizar dashboards" },
];
const BSC = [
{ persp: "Financeira", obj: "Liberar R$ 5M–7,2M/ano em caixa", kpi: "Caixa liberado; margem operacional", cor: C.copper },
{ persp: "Clientes e Mercado", obj: "Mais licitações ganhas; menor tempo de resposta", kpi: "Taxa de conversão; NPS interno", cor: C.copperLt },
{ persp: "Processos Internos", obj: "Automatizar fluxo pós-contrato; eliminar gargalos", kpi: "% processos com IA; desvio custo", cor: C.gold },
{ persp: "Aprendizado", obj: "Capacitar equipes; estruturar base de dados", kpi: "% treinados; dados estruturados", cor: C.steelLight },
];
// ═══════ COMPONENTS ═══════
function KPICard({ label, value, suffix, prefix, sub, delay = 0 }) {
return (
);
}
function PageMapa() {
const [open, setOpen] = useState(null);
return (
);
}
function PageRoadmap() {
const [active, setActive] = useState(0);
return (
);
}
function PageEstrategia() {
const [tab, setTab] = useState("bsc");
const tabs = [
{ id: "bsc", label: "Kaplan & Norton" },
{ id: "stp", label: "Kotler STP" },
{ id: "5a", label: "Kotler 5A's" },
{ id: "org", label: "Organograma" },
];
return (
{i < 3 &&
))}
)}
{tab === "stp" && (
))}
)}
{tab === "5a" && (
))}
)}
{tab === "org" && (
)}
);
}
function PageTech() {
const [open, setOpen] = useState(null);
return (
);
}
// ═══════ MAIN APP ═══════
export default function App() {
const [page, setPage] = useState("dashboard");
const [sidebarOpen, setSidebarOpen] = useState(true);
const pages = { dashboard: PageDashboard, mapa: PageMapa, roadmap: PageRoadmap, estrategia: PageEstrategia, tech: PageTech };
const Page = pages[page];
return (
{label}
{sub}
{dep.nome}
{dep.impacto}/ano
Exemplos de aplicabilidade
{dep.apps.map((a, i) => (
{a}
Dashboard Executivo
A Arquitetura da Inteligência
SIAN Engenharia — Visão consolidada do projeto de transformação digital
Empilhamento Financeiro (R$ Milhões/ano)
Curva de adoção — IA na construção civil BR (%)
2026: estamos no "joelho da curva"
Engenharia de
{[
{ t: "Vanguarda", d: "Primeira construtora do Nordeste com plataforma corporativa de IA" },
{ t: "Tecnologia", d: "Ferramentas certas, integradas, sem dependência de fornecedor" },
{ t: "Aplicações", d: "IA em cada departamento — do edital ao canteiro" },
{ t: "Competitividade", d: "48 anos de dados em vantagem inimitável" },
].map((item, i) => (
))}
{item.t}
{item.d}
Mapa do Projeto
8 frentes que geram ou consomem caixa
Clique em cada departamento para explorar as aplicações de IA e o impacto estimado.
{DEPS.map(dep => (
setOpen(open === dep.id ? null : dep.id)} />
))}
As aplicações listadas são exemplos — elas se multiplicam conforme o projeto avança e os dados alimentam a plataforma.
Roadmap
A transformação em ondas que se pagam
Cada fase entrega retorno antes de comprometer capital na próxima.
{FASES.map((f, i) => (
{i < 2 &&
))}
FASE {FASES[active].n} • {FASES[active].periodo}
{FASES[active].titulo}
{FASES[active].desc}
{FASES[active].resultado}
{FASES.map((f, i) => (
))}
{f.resultado}
{f.titulo}
Mapa Estratégico
Frameworks que sustentam o projeto
{tabs.map(t => (
))}
{tab === "bsc" && (
Kaplan & Norton (2004): toda estratégia se descreve por relações de causa e efeito entre quatro perspectivas. De baixo para cima, cada uma alimenta a próxima.
{[...BSC].reverse().map((b, i) => ({b.persp}
{b.obj}
KPI: {b.kpi}
↑
}
"Não se pode gerenciar o que não se pode medir." — Kaplan & Norton
Kotler define STP como a espinha dorsal de qualquer estratégia eficaz. Aplicado à adoção de IA na SIAN:
{[ { t: "Segmentação", d: "Os 'clientes' internos são os departamentos. Cada um tem maturidade digital, dor e receptividade diferentes.", a: "Mapear por: intensidade da dor, volume de dados, receptividade à mudança" }, { t: "Targeting", d: "Priorizar segmentos de maior ROI e menor resistência. Orçamentos & Licitações é o alvo primário.", a: "Fase 1 → Orçamentos; Fase 2 → Obras; Fase 3 → Retaguarda" }, { t: "Posicionamento", d: "A IA não substitui pessoas — ela amplifica a capacidade da equipe existente.", a: "Narrativa: 'IA faz vocês serem 3x mais rápidos, não tira emprego'" }, ].map((s, i) => ({s.t}
{s.d}
→ {s.a}
Kotler (Marketing 4.0): a jornada dos 5A's aplicada à adoção interna de IA na SIAN.
{[ { en: "Aware", pt: "Consciência", d: "Workshops e demonstrações em linguagem de negócio", m: "% líderes que participaram" }, { en: "Appeal", pt: "Atração", d: "Pilotos rápidos com resultado visível em dias", m: "Interesse declarado por área" }, { en: "Ask", pt: "Investigação", d: "Acesso à plataforma em sandbox; suporte dedicado", m: "Nº de pedidos de acesso" }, { en: "Act", pt: "Ação", d: "Integração ao workflow real; treinamento hands-on", m: "Taxa de uso ativo semanal" }, { en: "Advocate", pt: "Advocacia", d: "Usuários-chave viram multiplicadores internos", m: "NPS > 50" }, ].map((a, i) => ({i + 1}
{a.pt}
({a.en})
{a.d}
{a.m}
O C.AI.O reporta ao CEO. Opera na interseção entre estratégia, dados, processos e resultado financeiro.
CEO
André Portela
CFO
Enio Rocha
C.AI.O
Estratégia, Execução, Governança
CTO / TI
Infraestrutura
{["Orçamentos & Licitações", "Obras & Projetos", "Engenharia & Construção", "Planejamento & Controle", "DP & RH", "Financeiro"].map((s, i) => (
{s}
))}
Tecnologias
10 tecnologias que compõem a plataforma
A combinação — não o uso isolado — é o que gera vantagem. Clique para explorar.
{TECHS.map((t, i) => {
const Icon = t.icon;
const isOpen = open === i;
return (
setOpen(isOpen ? null : i)}
className="rounded-lg border border-white/10 overflow-hidden cursor-pointer transition-all duration-200 hover:border-amber-500/30"
style={{ background: C.navyMid }}>
);
})}
{t.nome}
{t.sub}
{t.desc}
Integração progressiva: LLMs + RAG + RPA primeiro → demais conforme maturidade digital avança.
{/* SIDEBAR */}
{/* MAIN */}
);
}
{sidebarOpen ? (
) : (
SIAN ENGENHARIA
A Arquitetura
da Inteligência
da Inteligência
S
)}
CONFIDENCIAL • SIAN Engenharia • Abril 2026