/* global React */
// ============================================================
// DECK NEW WAY — 4 linhas (C/D/E/F) × 12 layouts essenciais
// 1920×1080
// ============================================================
const C = {
aurora: '#7418DA',
neuralPurple: '#371A82',
synapse: '#792BB8',
quantum: '#AA4BEF',
coreSlate: '#434A54',
systemGray: '#626A75',
neuralNight: '#1E242C',
neuralMist: '#A7AFBA',
softIface: '#C8CED7',
lightCanvas: '#EFF1F5',
};
const SANS = "'Inter', sans-serif";
const SERIF = "'Inter', sans-serif"; // brand: Inter italic 300 substitui Instrument Serif
const MONO = "'JetBrains Mono', 'Courier New', monospace";
const SLIDE_W = 1920;
const SLIDE_H = 1080;
// ============================================================
// FRAME BASE
// ============================================================
const Slide = ({ children, bg = '#fff', color = C.coreSlate, style = {} }) => (
{children}
);
// Logo institucional
// size = WIDTH em px (logo é horizontal 7.2:1)
const Logo = ({ dark = false, size = 160, top = 56, left = 56, right = null }) => (
{label}
{String(page).padStart(2, '0')} / {String(total).padStart(2, '0')}
);
// Eyebrow padrão
const Eyebrow = ({ children, color, mb = 24, mono = false }) => (
{children}
);
// ============================================================
// IDENTIDADE C · EDITORIAL DUOTONE
// Foto duotone Aurora + sans bold + serif itálica
// ============================================================
const DuotoneStub = ({ children, h = '100%', tone = C.aurora }) => (
{children || 'foto · duotone'}
);
// ============================================================
// IDENTIDADE D · TECH ONDA
// Background dark + ondas em outline NW
// ============================================================
const Waves = ({ variant = 'topright', opacity = 1, color = C.aurora, color2 = C.quantum }) => {
const presets = {
topright: { transform: 'translate(1200px, -200px) rotate(15deg) scale(1.4)' },
bottomleft: { transform: 'translate(-200px, 600px) rotate(-15deg) scale(1.5)' },
full: { transform: 'translate(-100px, 0px) scale(1.8)' },
side: { transform: 'translate(1100px, 100px) scale(1.2)' },
};
const id = `dgrad-${variant}-${color.slice(1)}`;
return (
{Array.from({ length: 26 }).map((_, i) => (
);
};
// ============================================================
// IDENTIDADE E/F · TECH GRID (cyber dark / light)
// ============================================================
const TechBg = ({ dark = true }) => {
const grid = dark ? `${C.aurora}25` : `${C.aurora}1A`;
const grid2 = dark ? `${C.aurora}10` : `${C.aurora}10`;
const radial = dark ? `${C.aurora}33` : `${C.quantum}25`;
const scan = dark ? 'rgba(255,255,255,0.025)' : 'rgba(0,0,0,0.025)';
return (
);
};
// Header de "sistema" (E e F)
const SysHeader = ({ id = 'NW//DECK', status = 'LIVE', dark = true }) => (
{id}
·
{new Date().toISOString().slice(0, 10)}
{status}
);
// ============================================================
// LAYOUTS — recebem theme ('C' | 'D' | 'E' | 'F') + props
// ============================================================
//
// THEMES:
// C · Editorial duotone → bg claro/foto, serif itálico, accent aurora
// D · Tech onda → bg neuralNight + ondas, sans bold
// E · Hyper-tech (cyber) → bg dark #0A0D12 + grid + mono, highlight quantum
// F · Light-tech → bg lilás claro #F4F1FA + grid + mono, highlight aurora
// Theme tokens
const TH = {
C: {
bg: '#fff', text: C.coreSlate, sub: C.systemGray, accent: C.aurora,
accent2: C.quantum, dark: false, label: 'gruponewway.com.br · proposta', isCyber: false,
},
D: {
bg: C.neuralNight, text: '#fff', sub: 'rgba(255,255,255,.7)', accent: C.aurora,
accent2: C.quantum, dark: true, label: 'gruponewway.com.br', isCyber: false,
},
E: {
bg: '#0A0D12', text: '#fff', sub: 'rgba(255,255,255,.7)', accent: C.quantum,
accent2: C.aurora, dark: true, label: 'gruponewway.com.br // deck', isCyber: true,
},
F: {
bg: '#F4F1FA', text: C.coreSlate, sub: C.systemGray, accent: C.aurora,
accent2: C.quantum, dark: false, label: 'gruponewway.com.br // deck', isCyber: true,
},
};
// Background apropriado por tema
const ThemeBg = ({ t }) => {
if (t === 'C') return null;
if (t === 'D') return
{display}
);
};
// ============================================================
// L01 · CAPA
// ============================================================
const L01_Capa = ({ t = 'C' }) => {
const th = TH[t];
return (
Proposta de parceria
{t === 'C' ? (<>Crescimento inteligente não é sorte. )
: (<>Crescimento{th.isCyber ? '$ não_é_sorte' : 'não é sorte.'} )}
preparado para
[ Cliente ]
);
};
// ============================================================
// L02 · DIVISOR DE SEÇÃO
// ============================================================
const L02_Divisor = ({ t = 'C' }) => {
const th = TH[t];
return (
{t !== 'C' &&
02
Capítulo 02
{t === 'C' ? (<>O contexto empresa decide. )}
);
};
// ============================================================
// L03 · AGENDA
// ============================================================
const L03_Agenda = ({ t = 'C' }) => {
const th = TH[t];
const items = [
'Diagnóstico · onde estamos',
'Mercado · o que mudou',
'Método · IA aplicada com rigor',
'Plano · 90 dias para o primeiro resultado',
'Investimento · proposta comercial',
'Próximos passos',
];
return (
Agenda
{t === 'C' ? (<>Por onde vamos .)
: 'Por onde vamos.'}
{items.map((it, i) => (
{String(i + 1).padStart(2, '0')}
{it}
))}
);
};
// ============================================================
// L04 · CONTEÚDO + BULLETS
// ============================================================
const L04_Conteudo = ({ t = 'C' }) => {
const th = TH[t];
const points = [
{ k: '01', t: 'Decisões viraram aposta', d: 'Times grandes, dados ruins. Crescer virou tentativa-erro.' },
{ k: '02', t: 'IA virou ruído', d: 'Ferramenta nova toda semana, e ninguém sabe o que move o ponteiro.' },
{ k: '03', t: 'Método ficou pra trás', d: 'Sem rigor, IA só amplifica o que já tava errado.' },
];
return (
Diagnóstico
{t === 'C' ? (<>O que travou o crescimento. )
: 'O que travou o crescimento.'}
{t === 'C' || t === 'D'
? 'Olhamos centenas de operações. As travas se repetem.'
: '// olhamos centenas de operações. as travas se repetem.'}
);
};
// ============================================================
// L05 · DADO / KPI GIGANTE
// ============================================================
const L05_Dado = ({ t = 'C' }) => {
const th = TH[t];
return (
O número que importa
3x
{t === 'C' ? (<>é o que separa quem trata IA como moda de quem trata como método. )
: 'é o que separa quem trata IA como moda de quem trata como método.'}
{[
['CICLO', 'até 50%', 'menor time-to-decision'],
['CUSTO', 'até 40%', 'menos no CAC'],
['VELOCIDADE', '90 dias', 'até a primeira métrica'],
].map(([k, v, sub], i) => (
))}
);
};
// ============================================================
// L06 · QUOTE / DEPOIMENTO
// ============================================================
const L06_Quote = ({ t = 'C' }) => {
const th = TH[t];
return (
cliente · executivo
)}
"
A gente não vende IA. Vende um jeito diferente de tomar decisão
nw
manifesto · 2026
);
};
// ============================================================
// L07 · TIME / PESSOAS
// ============================================================
const L07_Time = ({ t = 'C' }) => {
const th = TH[t];
const team = [
{ n: 'Estrategista', r: 'Sócio · Estratégia' },
{ n: 'IA Aplicada', r: 'Líder · Engenharia de IA' },
{ n: 'Crescimento', r: 'Head · Growth & RevOps' },
{ n: 'Produto', r: 'Lead · Engineering' },
];
return (
Time alocado
{t === 'C' ? (<>Quem vai tocar isso.)
: 'Quem vai tocar isso.'}
{th.isCyber ? '// times pequenos. sêniors. dedicação alta.' : 'Times pequenos. Sêniors. Dedicação alta.'}
{team.map((p, i) => (
))}
);
};
// ============================================================
// L08 · CASE / CLIENTE
// ============================================================
const L08_Case = ({ t = 'C' }) => {
const th = TH[t];
return (
Case · indústria nacional
{t === 'C' ? (<>De ciclo de venda longo a previsível.)
: 'De ciclo longo a previsível.'}
{[
{ k: 'Antes', v: '~90 dias', d: 'Ciclo médio sem priorização nem scoring.' },
{ k: 'Depois', v: '~35 dias', d: 'Mesmo time, IA + scoring novo.' },
{ k: 'Resultado', v: '+2x receita', d: 'No primeiro semestre pós-sprint.', highlight: true },
].map((m, i) => (
))}
);
};
// ============================================================
// L09 · DIAGRAMA / PROCESSO
// ============================================================
const L09_Processo = ({ t = 'C' }) => {
const th = TH[t];
const steps = [
{ n: '01', k: 'DIAGNOSE', t: 'Diagnóstico', d: 'Onde estão os gargalos reais.' },
{ n: '02', k: 'STRATEGIZE', t: 'Estratégia', d: 'Mapa de alavancas com IA + método.' },
{ n: '03', k: 'EXECUTE', t: 'Execução', d: 'Times pequenos, sprints curtos.' },
{ n: '04', k: 'SCALE', t: 'Escala', d: 'Medimos, replicamos, escalamos.' },
];
return (
Método NW
{t === 'C' ? (<>O protocolo de crescimento.)
: 'O protocolo de crescimento.'}
{steps.map((s, i) => (
{s.n} · {s.k}
{s.t}
{s.d}
{i < 3 && (
→
)}
))}
);
};
// ============================================================
// L10 · TIMELINE
// ============================================================
const L10_Timeline = ({ t = 'C' }) => {
const th = TH[t];
const phases = [
{ d: '0–30d', t: 'Imersão & diagnóstico', dt: 'Mergulho em dados, decisões, gargalos.' },
{ d: '31–60d', t: 'Quick wins', dt: 'Primeiras alavancas com IA aplicada.' },
{ d: '61–90d', t: 'Resultado mensurável', dt: 'Métrica primária movendo o ponteiro.' },
{ d: '91–180d', t: 'Escala', dt: 'Replicar e ampliar onde funcionou.' },
];
return (
Roadmap
{t === 'C' ? (<>Os primeiros 180 dias .)
: 'Os primeiros 180 dias.'}
{phases.map((p, i) => (
))}
);
};
// ============================================================
// L11 · PRICING / PROPOSTA
// ============================================================
const L11_Pricing = ({ t = 'C' }) => {
const th = TH[t];
const tiers = [
{ n: 'Diagnóstico', p: 'a partir de', sub: '4 semanas · executive readout', items: ['Imersão nos seus dados', 'Mapa de alavancas reais', 'Plano 90d sugerido'] },
{ n: 'Sprint 90d', p: 'sob escopo', sub: 'time dedicado · 1 alavanca', items: ['Tudo do anterior', 'Implementação ponta a ponta', 'Métrica primária mensurável'], highlight: true },
{ n: 'Programa 12m', p: 'sob medida', sub: 'parceria de crescimento', items: ['Múltiplas alavancas', 'Time co-localizado', 'Governança trimestral'] },
];
return (
Investimento
{t === 'C' ? (<>Três formas de começar .)
: 'Três formas de começar.'}
{tiers.map((tier, i) => (
{tier.n}
{tier.p}
{tier.sub}
{tier.items.map((it, j) => (
+
{it}
))}
))}
);
};
// ============================================================
// L13 · ANTES / DEPOIS (transformação)
// ============================================================
const L13_AntesDepois = ({ t = 'C' }) => {
const th = TH[t];
const rows = [
['Decisão', 'Por intuição, semanas de discussão', 'Dados + IA, em horas'],
['Time', 'Operação grande, generalista', 'Núcleo pequeno, sênior'],
['Métrica', 'Vaidade (impressões, leads)', 'Receita, ciclo, margem'],
['IA', 'Ferramenta de moda, isolada', 'Aplicada onde move o ponteiro'],
['Cadência', 'Trimestral, formal', 'Semanal, executável'],
];
return (
A virada
{t === 'C' ? (<>O que muda com a New Way.)
: 'O que muda com a New Way.'}
Antes
Depois
{rows.map(([k, a, d], i) => (
{k}
{a}
{d}
))}
);
};
// ============================================================
// L14 · LOGOS DE CLIENTES
// ============================================================
const L14_Logos = ({ t = 'C' }) => {
const th = TH[t];
const logos = [
'CLIENTE 01', 'CLIENTE 02', 'CLIENTE 03', 'CLIENTE 04',
'CLIENTE 05', 'CLIENTE 06', 'CLIENTE 07', 'CLIENTE 08',
'CLIENTE 09', 'CLIENTE 10', 'CLIENTE 11', 'CLIENTE 12',
];
return (
Quem confia
{t === 'C' ? (<>Empresas que cresceram com a gente.)
: 'Empresas que cresceram com a gente.'}
{logos.map((l, i) => (
))}
+ empresas atendidas
receita destravada em todos os portes
NPS alto, real, mensurado
);
};
// ============================================================
// L15 · FAQ / OBJEÇÕES
// ============================================================
const L15_FAQ = ({ t = 'C' }) => {
const th = TH[t];
const faqs = [
{ q: '"IA é só hype, não é?"', a: 'IA sem método é. A gente entrega IA aplicada a 1 alavanca por vez, com métrica primária mensurável em 90 dias.' },
{ q: '"Vamos demorar pra ver resultado?"', a: 'Não. Quick wins na semana 4–6. Métrica primária movendo no fim do trimestre. Sem isso, não cobramos a renovação.' },
{ q: '"Meu time vai ser substituído?"', a: 'Pelo contrário. A gente opera com seu time, não no lugar dele. Sai com playbook documentado para vocês manterem.' },
{ q: '"Por que não contratar interno?"', a: 'Porque você precisa de cabeça sênior por 90 dias, não de 4 contratações que demoram 6 meses para ramp-up.' },
];
return (
O que perguntam
{t === 'C' ? (<>As quatro objeções clássicas.)
: 'As quatro objeções clássicas.'}
{faqs.map((f, i) => (
))}
);
};
// ============================================================
// L12 · CTA / PRÓXIMOS PASSOS
// ============================================================
const L12_CTA = ({ t = 'C' }) => {
const th = TH[t];
return (
Próximos passos
{t === 'C' ? (<>Vamos começar? )
: (<>Vamos{th.isCyber ? '$ start_now' : 'começar?'} )}
{[
{ k: '01', t: 'Aprovar escopo', d: 'Decisão nesta semana' },
{ k: '02', t: 'Kick-off', d: 'Semana seguinte · 2h presencial' },
{ k: '03', t: 'Imersão', d: 'Time NW começa em D+7' },
].map((s, i) => (
))}
);
};
// ============================================================
// CANVAS
// ============================================================
const ART_W = 1920;
const ART_H = 1080;
const LAYOUTS = [
['L01 · Capa', L01_Capa],
['L02 · Divisor', L02_Divisor],
['L03 · Agenda', L03_Agenda],
['L04 · Conteúdo', L04_Conteudo],
['L05 · Dado / KPI', L05_Dado],
['L06 · Quote', L06_Quote],
['L07 · Time', L07_Time],
['L08 · Case', L08_Case],
['L09 · Método', L09_Processo],
['L10 · Timeline', L10_Timeline],
['L11 · Pricing', L11_Pricing],
['L13 · Antes/Depois', L13_AntesDepois],
['L14 · Logos clientes', L14_Logos],
['L15 · FAQ', L15_FAQ],
['L12 · CTA', L12_CTA],
];
const LINES = [
{ k: 'E', title: 'E · Hyper-tech (cyber dark)', sub: 'Terminal aesthetic, monospace, grid + scanlines, badges system. Para audiências tech / IA que esperam densidade e atitude. Funciona muito em dark room.' },
{ k: 'F', title: 'F · Light-tech', sub: 'Mesma linguagem da E em modo claro: fundo lilás suave, texto Core Slate. Sensação dashboard SaaS premium — boa para boards e contextos formais que ainda querem aroma tech.' },
];
const EXTRA_LINES = [
{ k: 'G', title: 'G · Apple Keynote', sub: 'Preto puro / branco puro, alternância dramática. Tipografia gigante (200–480pt) — 1 ideia por slide. Stripe / Linear / keynote vibe. Para palco grande, demos de produto, narrativa de impacto.', layouts: () => window.G_LAYOUTS },
];
const DeckApp = () => {
const renderRow = (lineKey) =>
LAYOUTS.map(([name, Comp], i) => (
));
return (
{LINES.map(L => (
{renderRow(L.k)}
))}
{EXTRA_LINES.map(L => {
const layouts = L.layouts() || [];
return (
{layouts.map(([name, Comp], i) => (
))}
);
})}
);
};
window.DeckApp = DeckApp;
window.DECK_LAYOUTS = LAYOUTS;