/* ═══════════════════════════════════════════════════════════════
Grupo Cerrado — cenas animadas (motion graphics em SVG).
Cada divisão conta a própria história em movimento, no lugar das
fotos de placeholder:
CenaRota Express — a van sai do CD, faz a rota e entrega
CenaEmpresa Empresas — loja → Cerrado → cliente, com NF-e
CenaRastreio Consumidor — o celular acompanhando a entrega ao vivo
CenaEntregador Entregadores — o parceiro rodando, ganhos subindo
CenaGestao Consultoria — do achismo (pontos soltos) ao indicador
CenaPainel dashboards — KPIs vivos (consultoria, ERP, express)
CenaErp ERP — o sistema rodando, NF-e autorizada
CenaLex Lex — contrato se escreve, assina e é carimbado
CenaEcossistema Grupo — as 5 empresas orbitando o mesmo centro
E peças de apoio: RedeFundo (rede de rotas atrás dos títulos),
EstradaCTA (veículo cruzando o pé dos CTAs) e Digitando (código de
rastreio sendo digitado).
Animação: CSS (motion.css) para os loops ambientes e SMIL para o que
precisa andar sincronizado num caminho. motion.js pausa tudo fora
da tela. Depende de site-primitives.jsx (CE, Icon).
═══════════════════════════════════════════════════════════════ */
// Os PNGs da frota ficam 7 dias no cache do navegador (firebase.json). Ao trocar
// o conteúdo de um deles mantendo o nome, suba este número.
var CE_VERSAO_VEICULOS = 2;
function ceAsset(p) {
var base = (typeof window !== 'undefined' && window.ASSET_BASE != null) ? window.ASSET_BASE : '../../';
if (p.indexOf('assets/veiculos/') === 0) p += '?v=' + CE_VERSAO_VEICULOS;
return base + p;
}
/* moldura comum: div responsiva + svg 460×360 */
function Cena({ rotulo, fluida, altura, children, defs }) {
var estilo = altura ? { aspectRatio: 'auto', height: altura } : undefined;
return (
);
}
/* ícone do kit dentro de um svg */
function Ico({ name, x, y, size, color, sw }) {
var s = size || 18;
return (
);
}
/* um “toast” branco com ícone redondo, título e linha de apoio */
function Toast({ x, y, w, titulo, sub, cor, icone, className, d, ciclo }) {
return (
{titulo}{sub}
);
}
/* ═══════════════ EXPRESS · a rota ═══════════════ */
var ROTA_D = 'M70 290 H172 Q190 290 190 272 V198 Q190 180 208 180 H292 Q310 180 310 162 V113 Q310 95 328 95 H380';
function CenaRota({ fluida }) {
var xs = [0, 70, 190, 310, 410, 460], ys = [0, 95, 180, 290, 360];
var quadras = [];
for (var i = 0; i < xs.length - 1; i++) for (var j = 0; j < ys.length - 1; j++) {
var x0 = xs[i] + 15, x1 = xs[i + 1] - 15, y0 = ys[j] + 15, y1 = ys[j + 1] - 15;
if (x1 - x0 > 8 && y1 - y0 > 8) quadras.push([x0, y0, x1 - x0, y1 - y0, (i + j) % 3]);
}
var T = '7s';
return (
}>
{/* quarteirões */}
{quadras.map(function(q, k) {
return ;
})}
{/* ruas */}
{ys.slice(1, -1).map(function(y) { return ; })}
{xs.slice(1, -1).map(function(x) { return ; })}
{/* tráfego ambiente */}
{[['M460 180 H0', 11], ['M410 360 V0', 9], ['M0 95 H460', 13]].map(function(t, k) {
return (
);
})}
{/* rota: tracejado de fundo + traço que se desenha */}
{/* CD de origem */}
CD GYN
{/* destino: onda de chegada + pin */}
{/* a van (vista de cima), percorrendo a rota */}
{/* status embaixo: em rota → entregue */}
EM ROTA · 12 MIN
ENTREGUE ✓
{/* toast de entrega */}
PEDIDO ENTREGUE#4821 · no prazo · 14:32
);
}
/* ═══════════════ EMPRESAS · loja → Cerrado → cliente ═══════════════ */
var FLUXO_D = 'M70 112 C130 52 170 52 230 112 S330 172 390 112';
function CenaEmpresa() {
var barras = [18, 26, 22, 31, 28, 36, 30, 40, 34, 44, 39, 48, 42, 52];
return (
}>
{/* trilho do fluxo */}
{/* caixas viajando */}
{[0, 1.5, 3].map(function(b) {
return (
);
})}
{/* estações */}
{[[70, 'SUA LOJA', 'building'], [390, 'SEU CLIENTE', 'heart']].map(function(e) {
return (
{e[1]}
);
})}
CERRADO
{/* NF-e emitida a cada caixa que passa pelo centro */}
NF-e ✓
{/* painel */}
PAINEL DA SUA OPERAÇÃOAO VIVO
{[['142', 'entregues hoje', CE.blue], ['98,4%', 'no prazo', CE.success], ['6', 'em rota agora', CE.rust]].map(function(k, i) {
return (
{k[0]}{k[1]}
);
})}
Nota fiscal em 100% das entregas
{barras.map(function(h, i) {
return ;
})}
);
}
/* ═══════════════ CONSUMIDOR · o celular rastreando ═══════════════ */
var RAST_D = 'M178 214 V176 Q178 164 190 164 H238 Q250 164 250 152 V88 Q250 76 262 76 H284';
function CenaRastreio({ modo }) {
var T = '8s';
var corrida = modo === 'corrida';
var tx = corrida
? { status: 'MOTORISTA A CAMINHO', eta: 'Chega em 3 min · embarque na portaria', quem: 'Ana · Carro', info: '4,9 ★ · HB20 prata · final 42',
notif: 'Cerrado', notifTxt: 'Sua motorista chegou!', icone: 'pin', chipA: 'CORRIDA', chipB: 'PIX', chipBIco: 'wallet' }
: { status: 'SAIU PARA ENTREGA', eta: 'Chega em ~12 min · 3 paradas', quem: 'Carlos · Moto', info: '4,9 ★ · placa final 42',
notif: 'Cerrado Express', notifTxt: 'Seu pedido está chegando!', icone: 'truck', chipA: 'AO VIVO', chipB: 'SEGURO', chipBIco: 'shield' };
return (
}>
{/* celular */}
{/* mapa */}
{[[186, 86, 52, 66], [258, 86, 46, 66], [186, 174, 52, 40], [258, 174, 46, 40], [153, 26, 18, 42]].map(function(q, k) {
return ;
})}
{/* folha inferior */}
{tx.status}{tx.eta}{tx.quem}{tx.info}
{/* notificação que desce */}
{tx.notif}{tx.notifTxt}
{/* chips flutuantes */}
{tx.chipA}AVISOS{tx.chipB}
);
}
/* ═══════════════ ENTREGADORES · o parceiro rodando ═══════════════ */
function predios(seed, alt, larg) {
var out = [], x = 0, k = seed;
while (x < 460) {
k = (k * 9301 + 49297) % 233280;
var w = larg[0] + (k % (larg[1] - larg[0]));
var h = alt[0] + ((k >> 3) % (alt[1] - alt[0]));
out.push([x, w, h]);
x += w + 4;
}
return out;
}
var CE_PREDIOS_LONGE = predios(7, [40, 110], [26, 52]);
var CE_PREDIOS_PERTO = predios(3, [30, 80], [34, 62]);
function Skyline({ lista, base, cor, janelas, classe }) {
var faixa = function(dx) {
return lista.map(function(p, i) {
var x = p[0] + dx, h = p[2];
return (
{janelas && [0, 1, 2].map(function(r) {
return (i + r) % 3 === 0 && h > 40 + r * 14
? : null;
})}
);
});
};
return {faixa(0)}{faixa(460)};
}
function CenaEntregador({ fluida, carro }) {
var tracos = [];
for (var i = 0; i < 20; i++) tracos.push(i * 46);
return (
}>
{/* pista */}
{tracos.map(function(x) { return ; })}
{/* linhas de velocidade */}
{[[96, 236, 40], [70, 262, 56], [104, 284, 30]].map(function(l, k) {
return ;
})}
{/* a moto oficial da Cerrado (render do app), balançando na pista */}
{/* ganhos subindo */}
{[[300, 122, 0], [356, 150, 1.2], [262, 92, 2.4]].map(function(g, k) {
return (
+ R$ {['12,50', '9,80', '15,20'][k]}
);
})}
);
}
/* ═══════════════ CONSULTORIA · do achismo ao número ═══════════════ */
function CenaGestao() {
var TEAL = '#0F5F6B', TEAL_D = '#0A4049';
var hs = [52, 78, 70, 104, 122, 146, 172];
var soltos = [[-30, -150], [90, -40], [-60, 20], [40, -110], [-130, -30], [-70, -60], [-160, 40]];
var topos = hs.map(function(h, i) { return [74 + i * 50 + 13, 286 - h]; });
var linha = 'M' + topos.map(function(p) { return p[0] + ' ' + p[1]; }).join(' L');
return (
}>
{/* rótulos de fase */}
ACHISMOcada um com sua planilhaINDICADORESdecisão com número+23% margem
{/* área do gráfico */}
{[140, 190, 240].map(function(y) { return ; })}
{/* interrogações do caos */}
????
{hs.map(function(h, i) {
return ;
})}
{topos.map(function(p, i) {
return ;
})}
);
}
/* ═══════════════ Painel de KPIs (reutilizável) ═══════════════ */
function CenaPainel({ cor, titulo, fluida, rotulo, kpis }) {
var c = cor || CE.blue;
var k = kpis || [['87%', 'no prazo', 13], ['R$ 4,20', 'custo/entrega', 38], ['-18%', 'desperdício', 55]];
var pts = [[40, 300], [70, 286], [100, 292], [130, 268], [160, 274], [190, 248], [220, 252], [250, 226], [280, 214]];
var linha = 'M' + pts.map(function(p) { return p[0] + ' ' + p[1]; }).join(' L');
var area = linha + ' L280 318 L40 318 Z';
var horiz = [['Goiânia', 0.92], ['Anápolis', 0.74], ['Rio Verde', 0.6], ['Jataí', 0.44]];
return (
}>
{titulo || 'PAINEL DE INDICADORES'}AO VIVO
{k.map(function(kp, i) {
var x = 24 + i * 142;
return (
{kp[0]}{kp[1]}
);
})}
{/* gráfico de linha */}
EVOLUÇÃO · 9 SEMANAS
{[220, 260, 300].map(function(y) { return ; })}
{/* ranking horizontal */}
POR UNIDADE
{horiz.map(function(h, i) {
return (
{h[0]}
);
})}
);
}
/* ═══════════════ ERP · o sistema rodando ═══════════════ */
function CenaErp() {
var vendas = [34, 42, 38, 52, 48, 60, 56, 68, 64, 78, 74, 92];
return (
}>
{/* barra de título */}
{[34, 48, 62].map(function(x, i) { return ; })}
CERRADO ERP
{/* menu lateral com indicador que passeia */}
{['chart', 'package', 'building', 'truck', 'trending'].map(function(n, i) {
return ;
})}
{/* KPIs */}
{[['FATURAMENTO', 'R$ 84,3 mil', '+12%'], ['ESTOQUE', '1.284 itens', 'ok'], ['NF-e HOJE', '312 notas', '+48']].map(function(k, i) {
return (
{k[0]}{k[1]}▲ {k[2]}
);
})}
{/* gráfico de vendas */}
VENDAS · ÚLTIMOS 12 MESES
{[200, 240, 280].map(function(y) { return ; })}
{vendas.map(function(v, i) {
return ;
})}
);
}
/* ═══════════════ LEX · contrato, assinatura, carimbo ═══════════════ */
function CenaLex() {
var T = '7s';
var linhas = [150, 128, 156, 140, 96, 150, 120, 146, 84];
return (
}>
{/* documento */}
CONTRATO DE PRESTAÇÃODE SERVIÇOS · Nº 0427
{/* cláusula destacada */}
{linhas.map(function(w, i) {
var s = (0.03 + i * 0.03).toFixed(2), e = (0.07 + i * 0.03).toFixed(2);
return (
);
})}
Papel timbrado do escritório
{/* carimbo */}
ASSINADO
{/* prazo */}
PRAZO12OUTUBRO
{/* segurança */}
100% EM DIAprazos
);
}
/* ═══════════════ GRUPO · o ecossistema ═══════════════ */
function CenaEcossistema({ fluida }) {
var divs = window.CE_DIVISIONS || [];
var C = { x: 230, y: 184 }, R = 128;
var nos = divs.map(function(d, i) {
var a = (-90 + i * (360 / divs.length)) * Math.PI / 180;
return { d: d, x: C.x + Math.cos(a) * R, y: C.y + Math.sin(a) * R * 0.86 };
});
return (
}>
{nos.map(function(n, i) {
var d = 'M' + C.x + ' ' + C.y + ' L' + n.x.toFixed(1) + ' ' + n.y.toFixed(1);
return (
{[0, 1].map(function(k) {
return (
);
})}
);
})}
{/* centro */}
{nos.map(function(n, i) {
return (
{n.d.display.toUpperCase()}
);
})}
);
}
/* ═══════════════ Rede de rotas ao fundo ═══════════════ */
function RedeFundo({ cor, opacidade }) {
var c = cor || '#fff';
var curvas = [
'M-20 420 C 200 300, 360 360, 560 220 S 900 120, 1220 160',
'M-20 120 C 180 200, 420 80, 640 180 S 980 380, 1220 300',
'M100 620 C 260 420, 520 520, 700 380 S 1000 260, 1220 420',
'M300 -20 C 380 160, 560 200, 760 120 S 1060 40, 1220 90',
];
return (
);
}
/* ═══════════════ Veículo cruzando o pé do CTA ═══════════════ */
function EstradaCTA({ veiculo }) {
var moto = veiculo === 'moto';
return (
);
}
/* ═══════════════ Código de rastreio sendo digitado ═══════════════ */
function Digitando({ textos, cor }) {
var lista = textos || ['CE-2506-0042-BR'];
var st = React.useState({ i: 0, n: 0, apagando: false }), s = st[0], set = st[1];
var parado = React.useMemo(function() {
try { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch (e) { return false; }
}, []);
React.useEffect(function() {
if (parado) return;
var alvo = lista[s.i];
var espera = s.apagando ? 35 : 95;
if (!s.apagando && s.n === alvo.length) espera = 2200;
if (s.apagando && s.n === 0) espera = 400;
var t = setTimeout(function() {
if (!s.apagando && s.n === alvo.length) set({ i: s.i, n: s.n, apagando: true });
else if (s.apagando && s.n === 0) set({ i: (s.i + 1) % lista.length, n: 0, apagando: false });
else set({ i: s.i, n: s.n + (s.apagando ? -1 : 1), apagando: s.apagando });
}, espera);
return function() { clearTimeout(t); };
}, [s, parado]);
var txt = parado ? lista[0] : lista[s.i].slice(0, s.n);
return {txt};
}
/* ═══════════════ ABERTURA · a entrada do Grupo Cerrado ═══════════════
Inspirada na abertura do Dropbox Brand: linhas de grade cruzam a tela e
fecham um quadro no centro; dentro dele o sol do Cerrado se desenha em
traço e ganha cor sobre o horizonte; a marca sobe; por fim o quadro
“voa” até o logo do cabeçalho enquanto a cortina some (técnica FLIP).
Só na primeira visita da sessão — o da home marca
html.ce-com-abertura antes do React. Clique pula. */
function AberturaGrupo() {
var ativa = typeof document !== 'undefined' && document.documentElement.classList.contains('ce-com-abertura');
var st = React.useState(ativa ? 'ini' : 'fim'), fase = st[0], setFase = st[1];
var quadro = React.useRef(null), sol = React.useRef(null);
var S = Math.round(Math.min(window.innerWidth * 0.62, window.innerHeight * 0.5, 380));
React.useEffect(function() {
if (fase === 'fim') return;
var r1 = requestAnimationFrame(function() { r1 = requestAnimationFrame(function() { setFase('on'); }); });
var t1 = setTimeout(function() { voar(); setFase('sai'); }, 2400);
var t2 = setTimeout(function() { setFase('fim'); }, 3500);
return function() { cancelAnimationFrame(r1); clearTimeout(t1); clearTimeout(t2); };
}, []);
function voar() {
var q = quadro.current, s = sol.current, logo = document.querySelector('header img');
if (!q || !s || !logo) return;
var rq = q.getBoundingClientRect(), rs = s.getBoundingClientRect(), rl = logo.getBoundingClientRect();
var esc = rl.height / rs.height;
// o centro do sol pousa no centro do símbolo do logo
var dx = (rl.left + rl.width / 2) - (rq.left + (rs.left - rq.left + rs.width / 2) * esc);
var dy = (rl.top + rl.height / 2) - (rq.top + (rs.top - rq.top + rs.height / 2) * esc);
q.style.transform = 'translate(' + dx.toFixed(1) + 'px,' + dy.toFixed(1) + 'px) scale(' + esc.toFixed(4) + ')';
}
if (fase === 'fim') return null;
var meio = 'calc(50% - ' + (S / 2) + 'px)', fim = 'calc(50% + ' + (S / 2) + 'px)';
var raios = [-80, -55, -30, 0, 30, 55, 80];
return (
GrupoCerrado
);
}
/* a frota passando no horizonte do herói */
function CaravanaHorizonte() {
// só veículos de perfil: o caminhão é renderizado de 3/4 e destoa andando de lado
var v = [['moto-bag.png', 46, 19, 0], ['car.png', 40, 26, -11], ['moto-carretinha.png', 44, 30, -4]];
return (
{v.map(function(x, i) {
return ;
})}
);
}
/* sol nascendo no horizonte do herói da home */
function HorizonteSol() {
return (
);
}
/* ═══════════════ PARCEIRO COMERCIAL · a rede que gera comissão ═══════════════ */
function CenaParceiro() {
var V = { x: 230, y: 140 };
var esq = [[62, 64], [62, 140], [62, 216]], dir = [[398, 64], [398, 140], [398, 216]];
var pares = esq.map(function(e, i) {
var d = dir[(i + 1) % 3];
return 'M' + e[0] + ' ' + e[1] + ' Q' + ((e[0] + V.x) / 2) + ' ' + e[1] + ' ' + V.x + ' ' + V.y +
' Q' + ((d[0] + V.x) / 2) + ' ' + d[1] + ' ' + d[0] + ' ' + d[1];
});
var barras = [22, 28, 26, 34, 38, 44, 52];
return (
}>
EMPRESASENTREGADORES
{pares.map(function(d, i) {
return (
);
})}
{esq.map(function(p, i) {
return (
);
})}
{dir.map(function(p, i) {
return (
);
})}
{/* você no centro */}
VOCÊ
{[[-46, 0], [40, 1.2], [-6, 2.4]].map(function(c, k) {
return (
+ R$ {['1,20', '0,90', '1,50'][k]}
);
})}
{/* comissão do mês */}
SUA COMISSÃO NO MÊSR$ 3.48012 empresas · 2.900 entregas
{barras.map(function(h, i) {
return ;
})}
);
}
/* ═══════════════ ENERGIAS · sol → painel → casa ═══════════════ */
function CenaEnergia() {
var VERDE = '#16A34A', VERDE_D = '#0E6B30';
var CABO = 'M300 196 C 300 236, 252 246, 214 262 S 150 288, 120 300';
return (
}>
{/* sol com raios */}
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(function(i) {
return ;
})}
{/* raios de luz até o painel */}
{[0, 1, 2].map(function(i) {
return ;
})}
{/* chão e casa */}
{/* painéis */}
{[1, 2, 3, 4].map(function(i) { return ; })}
{/* cabo com energia correndo até o medidor */}
{[0, 1, 2, 3].map(function(i) {
return (
);
})}
{/* economia */}
CONTA DE LUZ−92%38,4 kWh hoje
{[30, 24, 18, 12, 7, 4].map(function(h, i) {
return ;
})}
);
}
Object.assign(window, { Cena, CenaRota, CenaEmpresa, CenaRastreio, CenaEntregador, CenaGestao, CenaPainel,
CenaErp, CenaLex, CenaEcossistema, RedeFundo, EstradaCTA, Digitando,
AberturaGrupo, HorizonteSol, CenaParceiro, CenaEnergia, CaravanaHorizonte });
/* ═══════════════════════════════════════════════════════════
Seções-padrão das páginas internas. Herói, grade de cards,
passos e CTA com a mesma cara em todas as páginas.
═══════════════════════════════════════════════════════════ */
function SecaoHeroi({ fundo, sol, eyebrow, eyebrowCor, titulo, texto, textoCor, botoes, visual, faixa }) {
return (
{sol !== false && (
)}
);
}
/* ═══════════════ FROTA FLUTUANTE · os veículos reais em órbita ═══════════════
Resposta da marca ao castelo 3D da EPIC: a frota oficial da Cerrado
(renders do app) gira em órbita sobre um piso em grade, em 3D de CSS.
O mouse inclina a câmera; a rolagem (--o no ancestral .ce-mf) faz a
frota subir e acelera a órbita. Os de trás viram para a esquerda,
como se estivessem mesmo dando a volta. */
var CE_FROTA = [
{ img: 'moto-bag.png', w: 150 }, { img: 'car.png', w: 190 }, { img: 'moto-carretinha.png', w: 175 },
{ img: 'moto-bag.png', w: 150 }, { img: 'car.png', w: 190 },
];
function FrotaFlutuante() {
var palco = React.useRef(null), itens = React.useRef([]);
React.useEffect(function() {
var parado = false;
try { parado = window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch (e) {}
var mx = 0, my = 0, ax = 0, ay = 0, t0 = performance.now(), vivo = true, visivel = true;
function mouse(e) { mx = e.clientX / window.innerWidth - 0.5; my = e.clientY / window.innerHeight - 0.5; }
window.addEventListener('mousemove', mouse, { passive: true });
var io = new IntersectionObserver(function(en) { visivel = en[0].isIntersecting; }, { threshold: 0 });
if (palco.current) io.observe(palco.current.parentElement); // o palco começa fora da tela; observa o contêiner
var sec = palco.current && palco.current.closest('.ce-mf');
(function quadro() {
if (!vivo) return;
requestAnimationFrame(quadro);
if (!visivel || !palco.current) return;
if (!parado) { ax += (mx - ax) * 0.05; ay += (my - ay) * 0.05; }
// com movimento reduzido a frota fica parada, já no lugar (não depende da rolagem)
var o = parado ? 1 : (sec ? parseFloat(getComputedStyle(sec).getPropertyValue('--o')) || 0 : 1);
var t = parado ? 0 : (performance.now() - t0) / 1000;
var giro = t * 0.22 + o * 1.6 + ax * 0.9;
palco.current.style.transform = 'translateY(' + ((1 - o) * 55).toFixed(1) + 'vh) rotateX(' + (64 - ay * 12).toFixed(2) + 'deg) rotateZ(' + (ax * 10).toFixed(2) + 'deg)';
palco.current.style.opacity = Math.min(1, o * 1.6).toFixed(3);
palco.current.style.scale = Math.max(0.42, Math.min(1, window.innerWidth / 1150)).toFixed(3); // cabe no celular
itens.current.forEach(function(el, i) {
if (!el) return;
var a = giro + (i / CE_FROTA.length) * Math.PI * 2;
var x = Math.cos(a) * 340, y = Math.sin(a) * 210;
var tras = Math.sin(a) < 0; // metade de trás anda para a esquerda
var pulo = Math.sin(t * 2.2 + i) * 6;
el.style.transform = 'translate3d(' + x.toFixed(1) + 'px,' + y.toFixed(1) + 'px,0) rotateX(-64deg) translateY(' + pulo.toFixed(1) + 'px) scaleX(' + (tras ? -1 : 1) + ')';
el.style.zIndex = Math.round(y + 300);
});
})();
return function() { vivo = false; window.removeEventListener('mousemove', mouse); io.disconnect(); };
}, []);
return (
{CE_FROTA.map(function(v, i) {
return (
);
})}
);
}
/* Seção "o app de verdade": celular com uma demo de telas-app.jsx + texto.
O celular gira levemente na direção do cursor (data-ce-orbita). */
function SecaoApp({ id, fundo, escuro, eyebrow, titulo, texto, itens, demo, invertido }) {
var Demo = window[demo];
if (!window.CelularMockup || !Demo) return null;
var Cel = window.CelularMockup;
var celular = (
})