/* global React */
const { useState, useEffect, useRef } = React;
// ============================================================
// NAV
// ============================================================
function Nav() {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 8);
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
);
}
// ============================================================
// HERO — Totem PDV with animated PIX QR Code flow
// ============================================================
function Hero({ heroVariant }) {
return (
Pagamentosna frente do caixa.
A infraestrutura de PIX, checkout e API que move totens,
PDVs e frentes de loja em todo o Brasil. Recebimento
instantâneo, conciliação automática, zero fricção.
{heroVariant === 'totem' &&
}
{heroVariant === 'phone' &&
}
{heroVariant === 'flow' &&
}
);
}
function HeroGridPattern() {
return (
);
}
function Metric({ value, label }) {
return (
);
}
function HeroBottomBar() {
const items = ['Visa', 'Mastercard', 'PIX', 'Banco Central', 'Elo', 'American Express', 'Hipercard'];
return (
Aceitamos
{[...items, ...items].map((i, idx) => (
{i}
))}
);
}
// ============================================================
// TOTEM MOCKUP — animated PIX checkout
// ============================================================
function TotemMockup() {
const [stage, setStage] = useState(0); // 0 idle, 1 qr, 2 scanning, 3 paid
useEffect(() => {
const seq = [
{ s: 1, t: 1400 },
{ s: 2, t: 2400 },
{ s: 3, t: 4200 },
{ s: 0, t: 6800 },
];
let timer;
let i = 0;
const tick = () => {
setStage(seq[i].s);
timer = setTimeout(() => {
i = (i + 1) % seq.length;
tick();
}, seq[i].t - (i > 0 ? seq[i-1].t : 0));
};
timer = setTimeout(tick, 500);
return () => clearTimeout(timer);
}, []);
return (
14:32
{/* Stage 0: idle / amount */}
{/* Stage 1: QR */}
Aponte a câmera
R$
127,40
{/* Stage 2: scanning / pending */}
Processando pagamento…
R$
127,40
{/* Stage 3: paid */}
Pago!
Comprovante #84921 · liquidado em 612ms
natipay.com.br
·
terminal #PDV-014
{/* Floating event chip */}
);
}
function FloatingChip({ stage }) {
const messages = [
{ icon: '○', text: 'aguardando cliente', cls: 'idle' },
{ icon: '◇', text: 'QR Code gerado · 30s', cls: 'qr' },
{ icon: '↻', text: 'callback /webhook enviado', cls: 'pending' },
{ icon: '✓', text: 'pix.received · R$ 127,40', cls: 'paid' },
];
const m = messages[stage];
return (
{m.icon}
{m.text}
);
}
function QRCode() {
// procedural QR-like grid (not a real QR)
const cells = 25;
const seed = [];
let s = 7;
for (let i = 0; i < cells * cells; i++) {
s = (s * 9301 + 49297) % 233280;
seed.push(s / 233280 > 0.5);
}
return (
{/* finder patterns */}
{[[0,0],[18,0],[0,18]].map(([x,y],i) => (
))}
{/* random data cells */}
{seed.map((on, i) => {
if (!on) return null;
const x = i % cells;
const y = Math.floor(i / cells);
// skip finder regions
if ((x < 8 && y < 8) || (x > 16 && y < 8) || (x < 8 && y > 16)) return null;
return
);
}
// ============================================================
// Alternative hero variants
// ============================================================
function PhoneCheckoutMockup() {
return (
Padaria Bom Pão
R$ 42,90
Confirmar pagamento
PIX · expira em 04:58
);
}
function PaymentFlowMockup() {
return (
01
Cliente abre o checkout
02
QR Code PIX gerado pela API
04
Webhook entregue ao lojista
);
}
Object.assign(window, {
Nav, Hero, TotemMockup, PhoneCheckoutMockup, PaymentFlowMockup, QRCode, Metric
});
14:32