{label}

const { useState, useEffect, useRef } = React; // ── Icons ──────────────────────────────────────────────────── const I = ({ c, s = 20, w = 1.8 }) => ; const IconDash = (p) => } />; const IconStore = (p) => } />; const IconCash = (p) => } />; const IconBill = (p) => } />; const IconBag = (p) => } />; const IconChef = (p) => } />; const IconChart = (p) => } />; const IconUsers = (p) => } />; const IconWhats = (p) => } />; const IconArrow = (p) => } />; const IconCheck = (p) => } />; const IconX = (p) => } />; const IconPlay = (p) => } />; const IconSun = (p) => } />; const IconMoon = (p) => } />; const IconPlus = (p) => } />; const IconWhatsLogo = ({ s = 18 }) => ( ); const IconGear = (p) => } />; // ── Logo ───────────────────────────────────────────────────── const Logo = ({ size = 32, white }) => ( Cardápio Code ); // ── Reveal hook ────────────────────────────────────────────── const useInView = () => { const ref = useRef(null); const [seen, setSeen] = useState(false); useEffect(() => { if (!ref.current) return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }, { threshold: .12 }); io.observe(ref.current); return () => io.disconnect(); }, []); return [ref, seen]; }; const Reveal = ({ children, delay = 0, style = {} }) => { const [ref, seen] = useInView(); return
{children}
; }; const CountUp = ({ to, dur = 1400, suf = '', dec = 0 }) => { const [ref, seen] = useInView(); const [v, setV] = useState(0); useEffect(() => { if (!seen) return; const s = performance.now(); const tick = (n) => { const p = Math.min(1, (n - s) / dur); setV(to * (1 - Math.pow(1 - p, 3))); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); }, [seen]); return {dec ? v.toFixed(dec) : Math.round(v).toLocaleString('pt-BR')}{suf}; }; // ── KDS Mockup (matches real screenshot) ───────────────────── const KDSBoard = ({ compact }) => { const [tick, setTick] = useState(0); useEffect(() => { const t = setInterval(() => setTick(x => x + 1), 3200); return () => clearInterval(t); }, []); const ChefIcon = () => ; const ClockIcon = () => ; const TruckIcon = () => ; const CheckIcon = () => ; const Arrow = () => ; const cols = [ { t: 'Em preparação', Ic: ChefIcon, bg: '#F59E0B', n: 2, orders: [ { n: '#11', t: '5min', tags: ['BALCÃO', 'MESA 1'], item: 'Duplo + Nuggets', action: 'PRONTO P/ SERVIR' }, { n: '#1', t: '12min', tags: ['BALCÃO', 'RETIRADA'], item: 'Combo Família', action: 'PRONTO / AGUARDANDO' }, ]}, { t: 'Prontos para entrega', Ic: ClockIcon, bg: '#10B981', n: 1, orders: [ { n: '#10', t: '8min', tags: ['BALCÃO', 'MESA 1'], item: 'Barca Tradicional', action: 'SERVIDO NA MESA' }, ]}, { t: 'Saiu p/ entrega', Ic: TruckIcon, bg: '#EF4444', n: 0, orders: [] }, { t: 'Concluído', Ic: CheckIcon, bg: '#16A34A', n: 8, orders: [ { n: '#7', t: '25min', tags: ['DELIVERY'], item: 'Pizza Calabresa', action: 'ENTREGUE' }, { n: '#8', t: '32min', tags: ['BALCÃO'], item: 'Combo Big', action: 'ENTREGUE' }, ]}, ]; return (
{cols.map((col, ci) => { const Ic = col.Ic; return (

{col.t} {col.n}

{col.orders.slice(0, compact ? 2 : 3).map((o, i) => (

{o.n} {o.t}

{o.tags.map(tag => ( {tag} ))}

1× {o.item}

))} {col.orders.length === 0 && (
Vazio
)}

); })}
); }; // ── Dashboard / Relatório mockup ───────────────────────────── const RelatoryMock = () => (

Relatório

Acompanhe o desempenho do seu negócio

{['Hoje','7 dias','30 dias','Personalizado'].map((t,i) => ( {t} ))}

✓ Estoque em dia Nenhum item vencendo ou em falta

{[ { l: 'TOTAL DE PEDIDOS', v: '13', s: '0 cancelados' }, { l: 'FATURAMENTO', v: 'R$ 1.420,00', s: '' }, { l: 'TICKET MÉDIO', v: 'R$ 109,23', s: '' }, { l: 'PEDIDOS VÁLIDOS', v: '13', s: '' }, ].map(k => (

{k.l}

{k.v}
{k.s &&
{k.s}
}
))}

{[{c:'#F59E0B',v:0,l:'Em análise'},{c:'#F59E0B',v:2,l:'Na cozinha'},{c:'#3B82F6',v:0,l:'Aguardando'},{c:'#EF4444',v:0,l:'Saiu entrega'},{c:'#10B981',v:11,l:'Entregues'},{c:'#EF4444',v:0,l:'Cancelados'}].map((s,i) => (

{s.v}

{s.l}

))}

Faturamento no período

Por tipo

🛵 EntregaR$ 820 · 7

🛍 RetiradaR$ 600 · 6

); // ── Catalog storefront mockup (cliente) ────────────────────── const StorefrontMock = () => { // Decorative banner — use the real Bonjour Sucree imagery uploaded. const Banner = () => (

); // Cake-pot product tile — cute SVG mason-jar-with-frosting per flavor const Cake = ({ top, base, sprinkleColors, label }) => ( ); const products = [ { n: 'Bolo de pote brigadeiro', p: 'R$ 10,00', top: '#5B3A1E', base: '#7B4B26', spr: ['#fff', '#FCD34D', '#FBC4DC', '#fff'] }, { n: 'Bolo de pote prestígio M', p: 'R$ 10,00', top: '#FFFFFF', base: '#5B3A1E', spr: ['#5B3A1E', '#5B3A1E', '#fff', '#5B3A1E'] }, { n: 'Bolo de pote limão M', p: 'R$ 10,00', top: '#D9F99D', base: '#FEF9C3', spr: ['#84CC16', '#fff', '#84CC16', '#FCD34D'] }, { n: 'Bolo de pote doce de leite M', p: 'R$ 10,00', top: '#FCD34D', base: '#F59E0B', spr: ['#fff', '#7B4B26', '#fff', '#7B4B26'] }, ]; return (

Bonjour Sucree

📍 Guarujá - SP · Mais informações

● Aberto agora

🛵Calcular taxa e tempo de entrega

🏆
Programa de fidelidade
A cada R$ 1,00 em compras você ganha 1 ponto

🍰 Bolo de Pote {products.length}
{products.map((it, i) => (

{it.n}

{it.p}

))}

Sua sacola

🛍️

Sua sacola está vazia

Adicione produtos para fazer seu pedido

🏆

Programa de fidelidade

A cada R$ 1,00 você ganha 1 ponto

); }; // ── Header ─────────────────────────────────────────────────── const Header = ({ dark, setDark }) => { const [s, setS] = useState(false); useEffect(() => { const h = () => setS(window.scrollY > 10); h(); window.addEventListener('scroll', h, { passive: true }); return () => window.removeEventListener('scroll', h); }, []); return (

{['Produto', 'KDS', 'Planos', 'Clientes'].map(n => {n})}

Entrar em contato

); }; // ── Hero ───────────────────────────────────────────────────── const Hero = () => (

Pedidos, cozinha e entregas num só lugar
Tudo pronto
pra abrir.

O sistema que seu restaurante precisa — cardápio online, KDS na cozinha, caixa, entregas e relatórios. Tudo num só login, sem taxa por pedido.

Entrar em contato

+
lojas ativas

pedidos/mês

uptime

{/* Split visual — matches login page aesthetic */}

Tudo pronto pra abrir

Pedidos, cozinha e entregas num só lugar

#1042 ⏱ 4min

Preparar em até 15:00

1× Josefa Clara

Pix R$ 48,90

PDV MODERNO · OPERACIONAL

); // ── Features / Modules bento ───────────────────────────────── const Modules = () => { const mods = [ { i: IconBag, t: 'Meus Pedidos', d: 'Kanban visual com tempo de preparo, cliente, pagamento e status. Tudo em uma tela.', c: 'var(--orange)' }, { i: IconChef, t: 'Cozinha (KDS)', d: 'Quatro colunas coloridas: em preparo, prontos, saiu pra entrega, concluído. Sem papel, sem grito.', c: '#10B981' }, { i: IconStore, t: 'Catálogo online', d: 'Link próprio do tipo cardapiocode.app/sua-loja. Cliente pede do celular sem baixar app.', c: 'var(--blue)' }, { i: IconCash, t: 'Caixa & PDV', d: 'Abertura, sangria, fechamento. Comanda, balcão, delivery e retirada num só PDV.', c: '#6B7280' }, { i: IconChart, t: 'Desempenho', d: 'Faturamento, ticket médio, status dos pedidos e produtos mais vendidos — em tempo real.', c: 'var(--blue)' }, { i: IconBill, t: 'Contas a Receber', d: 'Fiado organizado por cliente, vencimento e método. Chega de caderninho.', c: 'var(--orange)' }, { i: IconUsers, t: 'Clientes & Fidelidade', d: 'Cadastro automático, programa de pontos e histórico de compras por cliente.', c: '#EC4899' }, { i: IconWhats, t: 'WhatsApp', d: 'Confirmação, status do pedido e mensagens automáticas direto no WhatsApp da loja.', c: '#25D366' }, ]; return (

Módulos
Um sistema completo,
do cardápio ao fechamento.

13 módulos integrados. Ativa só o que precisa, paga uma mensalidade só.

{mods.map((m, i) => { const Ic = m.i; return (
e.currentTarget.style.transform = 'translateY(-4px)'} onMouseLeave={e => e.currentTarget.style.transform = 'none'}>

{m.t}

{m.d}

); })}

); }; // ── KDS spotlight section ──────────────────────────────────── const KDSSection = () => (

KDS em tempo real
Cozinha que não perde pedido.

Quatro colunas, cores que sua brigada entende sem treinamento. Pedido entra, vira card com timer, muda de coluna ao toque.

Últimos pedidos

Modo teste · Loja Admin — teste

⏱ 25 min 🍳 25-115 min

); // ── Relatório section ──────────────────────────────────────── const RelatorySection = () => (

Desempenho
Seu negócio
em números claros.

Hoje, 7 dias, 30 dias ou personalizado. Faturamento, ticket médio, pedidos por status e produtos campeões — sem planilha.

{['Faturamento por período e tipo (entrega/retirada)', 'Status dos pedidos em 6 colunas coloridas', 'Ranking de produtos e formas de pagamento', 'Alertas de estoque em falta ou vencendo'].map(x => (
{x}
))}

); // ── Storefront showcase ────────────────────────────────────── const StorefrontSection = () => (

Catálogo online
Seu link,
sua marca.

Cada loja ganha um endereço próprio — cardapiocode.app/sua-loja. Cliente pede direto, sem baixar app, sem pagar comissão pra marketplace.

{[ { l: 'Zero comissão', v: 'Mensalidade fixa' }, { l: 'Programa de pontos', v: 'Fidelidade nativa' }, { l: 'Cupons', v: 'Desconto fixo ou %' }, { l: 'Cálculo de entrega', v: 'Taxa e tempo por CEP' }, ].map(x => (

{x.l}

{x.v}

))}

); // ── Plans ──────────────────────────────────────────────────── const Plans = () => { // 12 features that the admin's plan-config screen shows, in order. const FEATURES = [ 'Delivery', 'Retirada', 'Mesas e Comandas', 'Garçom', 'Motoboys', 'Cozinha (KDS)', 'Cardápio Digital', 'CRM de Clientes', 'Programa de Fidelidade', 'Cupons de Desconto', 'Relatórios', 'Auditoria', ]; // ON-feature indexes per plan, mirroring the admin screenshot. const plans = [ { n: 'Mesa', d: 'Plano focado em atendimento local — mesas, comandas e garçom.', tag: 'MESA', tagC: '#10B981', icon: '🪑', on: [2, 3, 5, 6, 7, 10], // Mesas, Garçom, Cozinha (KDS), Cardápio, CRM, Relatórios }, { n: 'Delivery', d: 'Plano focado em pedidos online — cardápio digital, delivery e motoboy.', tag: 'DELIVERY', tagC: '#1E66F5', icon: '🛵', on: [0, 1, 4, 5, 6, 9, 10], // Delivery, Retirada, Motoboys, Cozinha (KDS), Cardápio, Cupons, Relatórios }, { n: 'Plus', d: 'Plano completo — todas as funcionalidades liberadas.', tag: 'PLUS', tagC: '#F59E0B', icon: '👑', featured: true, on: [0,1,2,3,4,5,6,7,8,9,10,11], // todas }, ]; return (

Planos
Três planos.
Escolha o tamanho da sua operação.

Cada plano agrupa as features liberadas para a loja. Mude quando quiser, sem multa.

{plans.map((p, i) => { const enabled = p.on.length; const total = FEATURES.length; const isFeat = !!p.featured; return (

{p.icon}
{p.tag}
{enabled}/{total}

{p.n}

{p.d}

FEATURES

{FEATURES.map((f, idx) => { const active = p.on.includes(idx); const onColor = isFeat ? 'var(--orange)' : 'var(--blue)'; const offColor = isFeat ? 'rgba(255,255,255,.25)' : 'rgba(15,17,21,.22)'; return (
{active ? : } {f}
); })}
Entrar em contato
); })}

); }; // ── Testimonials ───────────────────────────────────────────── const Testimonials = () => (

Quem já usa
Lojas de verdade,
operando agora.

{[ { n: 'Bonjour Sucree', c: 'Guarujá - SP', plan: 'PLUS', pc: '#F59E0B', p: 118, r: 'R$ 2.212,00', q: 'Plantei o Plus no primeiro dia. O KDS acabou com ticket perdido.' }, { n: 'Central do Açaí', c: 'Guarujá - SP', plan: 'PLUS', pc: '#F59E0B', p: 92, r: 'R$ 3.199,00', q: 'Saí do marketplace e hoje 70% dos pedidos vêm direto pelo meu link.' }, { n: 'Batatou Bertioga', c: 'Bertioga - SP', plan: 'PLUS', pc: '#F59E0B', p: 3, r: 'R$ 30,00', q: 'Abri a segunda loja e o painel multi-loja ajudou a gerir as duas juntas.' }, ].map((t, i) => (

{t.n}

{t.c}

{t.plan}

"{t.q}"

PEDIDOS
{t.p}

FATURAMENTO
{t.r}

))}

); // ── Final CTA ──────────────────────────────────────────────── const FinalCTA = () => (

Tudo pronto pra abrir
— hoje mesmo.

Criamos sua loja em 5 minutos, migramos seu cardápio e você já sai vendendo. 14 dias grátis, sem cartão.

Entrar em contato

); // ── Footer ─────────────────────────────────────────────────── const Footer = () => (

O sistema operacional do seu restaurante. Feito no Brasil.

{[ { t: 'Produto', l: ['Catálogo', 'KDS', 'Caixa', 'Desempenho'] }, { t: 'Empresa', l: ['Sobre', 'Blog', 'Parceiros'] }, { t: 'Ajuda', l: ['Suporte', 'Docs', 'Status', 'cardapiocode.app'] }, ].map(c => (

{c.t}
{c.l.map(x => {x})}
))}

© 2026 Cardápio Code · cardapiocode.app

Made in 🇧🇷 · LGPD compliant

); // ── Tweaks ─────────────────────────────────────────────────── const Tweaks = ({ dark, setDark, open, setOpen }) => { useEffect(() => { const fn = (e) => { if (e.data?.type === '__activate_edit_mode') setOpen(true); if (e.data?.type === '__deactivate_edit_mode') setOpen(false); }; window.addEventListener('message', fn); window.parent.postMessage({ type: '__edit_mode_available' }, '*'); return () => window.removeEventListener('message', fn); }, []); if (!open) return null; return (

Tweaks

Tema

); }; // ── Promo video section ────────────────────────────────────── const PromoVideo = () => (

Veja em 60 segundos.

Cardapio Code rodando do pedido ao caixa — cardápio online, KDS, motoboy e relatório numa volta só.

<button type="button" aria-label="Tela cheia" onClick={(e) => { const wrap = e.currentTarget.parentElement; if (document.fullscreenElement) { document.exitFullscreen(); } else if (wrap.requestFullscreen) { wrap.requestFullscreen(); } else if (wrap.webkitRequestFullscreen) { wrap.webkitRequestFullscreen(); } else { // iOS Safari fallback: open the video in its own tab window.open('video.html', '_blank'); } }} style={{ position: 'absolute', bottom: 12, right: 12, zIndex: 2, background: 'rgba(0,0,0,.65)', color: '#fff', border: '1px solid rgba(255,255,255,.2)', borderRadius: 8, padding: '8px 12px', fontSize: 13, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer', backdropFilter: 'blur(6px)' }} > <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"> <path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3"/> </svg> Tela cheia </button> </div> </Reveal> </div> </section> ); // ── App ────────────────────────────────────────────────────── const App = () => { const [dark, setDark] = useState(false); const [tweakOpen, setTweakOpen] = useState(false); useEffect(() => { document.documentElement.classList.toggle('dark', dark); }, [dark]); useEffect(() => { const obs = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); }); }, { threshold: .1 }); document.querySelectorAll('.reveal').forEach(el => obs.observe(el)); return () => obs.disconnect(); }, []); return ( <> <Header dark={dark} setDark={setDark} /> <Hero /> <PromoVideo /> <Modules /> <KDSSection /> <RelatorySection /> <StorefrontSection /> <Plans /> <Testimonials /> <FinalCTA /> <Footer /> <Tweaks dark={dark} setDark={setDark} open={tweakOpen} setOpen={setTweakOpen} /> </> ); }; ReactDOM.createRoot(document.getElementById('root')).render(<App />);