/* eslint-disable */
// === Abra Caixas — Mobile gamified components ===
const { useState, useEffect, useRef, useMemo } = React;
// Where every CTA in the LP sends the user. Change in one place if the domain ever moves.
const REGISTER_URL = "https://abracaixas.com/auth/register";
// ---------- Icons (clean stroke) ----------
function Icon({ name, size = 16, ...rest }) {
const c = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", ...rest };
switch (name) {
case "box": return
);
}
// ---------- Box data with rarities ----------
const BOXES = [
{ id: "premium", name: "Caixa Premium", price: "49,99", img: "assets/box-premium.png", tint: "rgba(255,185,56,0.28)", rarity: "legendary", openers: 8421, featured: true },
{ id: "eletronicos", name: "Eletrônicos", price: "14,99", img: "assets/box-eletronicos.png", tint: "rgba(24,176,236,0.28)", rarity: "epic", openers: 24210 },
{ id: "gifts", name: "Gift Cards", price: "9,99", img: "assets/box-gifts.png", tint: "rgba(255,76,76,0.22)", rarity: "rare", openers: 32108 },
{ id: "apple", name: "Apple Box", price: "29,99", img: "assets/box-apple.png", tint: "rgba(20,184,166,0.22)", rarity: "epic", openers: 18204 },
{ id: "churrasco", name: "Churrasco", price: "12,99", img: "assets/box-churrasco.png", tint: "rgba(34,197,94,0.22)", rarity: "rare", openers: 14002 },
{ id: "beauty", name: "Beauty Box", price: "11,99", img: "assets/box-beauty.png", tint: "rgba(244,114,182,0.22)", rarity: "rare", openers: 11550 },
];
const FIRST_NAMES = ["Lucas", "Beatriz", "Rafael", "Mariana", "Diego", "Camila", "Thiago", "Júlia", "Pedro", "Larissa", "Gabriel", "Fernanda", "Igor", "Amanda", "Vinícius", "Bianca"];
const PRIZES = [
{ n: "iPhone 15 Pro", r: "legendary", v: "R$ 9.499" },
{ n: "PlayStation 5", r: "legendary", v: "R$ 4.299" },
{ n: "AirPods Pro 2", r: "epic", v: "R$ 2.099" },
{ n: "Gift R$ 500", r: "rare", v: "R$ 500" },
{ n: "Apple Watch", r: "epic", v: "R$ 3.299" },
{ n: "Voucher CVC R$2.500", r: "legendary", v: "R$ 2.500" },
{ n: "Echo Dot 5", r: "common", v: "R$ 249" },
{ n: "Kindle 11", r: "rare", v: "R$ 549" },
{ n: "Drone DJI Mini", r: "mythic", v: "R$ 3.799" },
{ n: "Notebook Gamer", r: "mythic", v: "R$ 7.999" },
];
// ---------- Top bar / HUD ----------
function TopBar() {
return (
);
}
// ---------- Intro animation ----------
const PRODUCTS = [
{ src: "assets/products/iphone.png", x: -90, y: -150, rot: -22, delay: 0.00, scale: 1.10 },
{ src: "assets/products/watch.png", x: 90, y: -150, rot: 20, delay: 0.06, scale: 1.05 },
{ src: "assets/products/xbox-gamepass.png", x: 0, y: -180, rot: -4, delay: 0.12, scale: 1.15 },
{ src: "assets/products/carmed-cola.png", x: -140, y: -30, rot: -28, delay: 0.18, scale: 0.95 },
{ src: "assets/products/lip-honey.png", x: 140, y: -30, rot: 24, delay: 0.22, scale: 0.95 },
{ src: "assets/products/carmed-doce.png", x: -130, y: 80, rot: -18, delay: 0.28, scale: 0.90 },
{ src: "assets/products/carmed-fini.png", x: 130, y: 80, rot: 16, delay: 0.32, scale: 0.90 },
];
function IntroSequence({ phase }) {
const phases = ["shake", "click", "open", "text", "carousel"];
const idx = phases.indexOf(phase);
const cls = [
"intro",
"intro-" + phase,
...phases.slice(0, idx + 1).map(p => "has-" + p),
].join(" ");
return (
{/* CSS-built gift box (cyan + gold ribbon) */}
{/* Cursor */}
{/* Real products erupting */}
{PRODUCTS.map((p, i) => (
))}
{/* Sparks */}
{Array.from({ length: 14 }, (_, i) => (
{/* Final message */}
Você compra uma caixaproduto surpresa .
);
}
// ---------- Hero ----------
function useLiveCounter(start = 2418, minMs = 1200, maxMs = 3400) {
const [n, setN] = useState(start);
useEffect(() => {
let timer;
const tick = () => {
setN(v => v + (1 + Math.floor(Math.random() * 2))); // +1 or +2
timer = setTimeout(tick, minMs + Math.random() * (maxMs - minMs));
};
timer = setTimeout(tick, minMs + Math.random() * (maxMs - minMs));
return () => clearTimeout(timer);
}, [minMs, maxMs]);
return n;
}
function Hero() {
const [phase, setPhase] = useState("shake"); // shake → click → open → text → carousel
const [idx, setIdx] = useState(0);
const [animate, setAnimate] = useState(true);
const liveCount = useLiveCounter(2418);
const N = BOXES.length;
// Intro sequence timeline
useEffect(() => {
const timers = [
setTimeout(() => setPhase("click"), 1400),
setTimeout(() => setPhase("open"), 2200),
setTimeout(() => setPhase("text"), 3900),
setTimeout(() => setPhase("carousel"), 6800),
];
return () => timers.forEach(clearTimeout);
}, []);
// Carousel: only start cycling once intro is over
useEffect(() => {
if (phase !== "carousel") return;
const t = setInterval(() => setIdx(i => i + 1), 2600);
return () => clearInterval(t);
}, [phase]);
// Seamless loop: when we transition into the clone at position N, snap back to 0
useEffect(() => {
if (idx === N) {
const t = setTimeout(() => {
setAnimate(false);
setIdx(0);
requestAnimationFrame(() => requestAnimationFrame(() => setAnimate(true)));
}, 760);
return () => clearTimeout(t);
}
}, [idx, N]);
const trackList = [...BOXES, BOXES[0]]; // clone first at end
const featured = BOXES[idx % N];
const showCarousel = phase === "carousel";
return (
{liveCount.toLocaleString("pt-BR")} caixas abertas hoje
Compre. Abra.
Surpreenda-se.
Caixas surpresa com produtos reais entregues na sua casa em até 10 dias.
{!showCarousel &&
}
{showCarousel && (
{trackList.map((b, i) => (
))}
)}
{showCarousel && (
{BOXES.map((b, i) => (
)}
Frete Grátis
Entrega Até 10 dias
Garantia 7 dias
Pagamento Pix
);
}
// ---------- Drop rates ----------
function DropRates() {
const rates = [
{ name: "Comum", pct: "62.00%", color: "var(--r-common)" },
{ name: "Raro", pct: "24.50%", color: "var(--r-rare)" },
{ name: "Épico", pct: "9.80%", color: "var(--r-epic)" },
{ name: "Lendário", pct: "3.20%", color: "var(--r-legendary)" },
{ name: "Mítico", pct: "0.50%", color: "var(--r-mythic)" },
];
return (
Drop rates — Eletrônicos
{rates.map(r => (
{r.name}
{r.pct}
))}
);
}
// ---------- Live drops feed ----------
function LiveDrops() {
const [drops, setDrops] = useState(() => Array.from({ length: 4 }, (_, i) => makeDrop(i)));
useEffect(() => {
const t = setInterval(() => {
setDrops(prev => [makeDrop(Date.now()), ...prev].slice(0, 4));
}, 3800);
return () => clearInterval(t);
}, []);
function makeDrop(seed) {
const n = FIRST_NAMES[Math.floor(Math.random() * FIRST_NAMES.length)];
const p = PRIZES[Math.floor(Math.random() * PRIZES.length)];
const surname = String.fromCharCode(65 + Math.floor(Math.random() * 26)) + ".";
return { id: seed + Math.random(), who: `${n} ${surname}`, prize: p, when: "agora" };
}
return (
{drops.map((d, i) => (
{d.who.split(" ").map(x => x[0]).join("")}
{d.who}
ganhou {d.prize.n}
{i === 0 ? "agora" : `${i * 2 + 1}min`}
))}
);
}
// ---------- Featured caixa (limited) ----------
function FeaturedDeal() {
const [time, setTime] = useState({ h: 4, m: 12, s: 38 });
useEffect(() => {
const t = setInterval(() => {
setTime(({ h, m, s }) => {
s -= 1;
if (s < 0) { s = 59; m -= 1; }
if (m < 0) { m = 59; h -= 1; }
if (h < 0) { h = 0; m = 0; s = 0; }
return { h, m, s };
});
}, 1000);
return () => clearInterval(t);
}, []);
const fmt = (n) => String(n).padStart(2, "0");
return (
Caixa Premium
Top do catálogo. iPhone, viagens, ouro.
146 / 200 caixas abertas hoje
73%
);
}
// ---------- Box card ----------
function BoxCard({ box }) {
return (
{box.rarity}
{box.name}
R$ {box.price}
);
}
function BoxesSection() {
return (
Catálogo · 12 caixas
Escolha sua caixa
Ver tudo
{BOXES.map(b =>
);
}
// ---------- Daily missions ----------
function Missions() {
const missions = [
{ t: "Abra sua primeira caixa do dia", done: true, prog: "1/1", xp: 50, icon: "box" },
{ t: "Abra 3 caixas em sequência", done: false, prog: "1/3", percent: 33, xp: 150, icon: "spark" },
{ t: "Convide um amigo e ganhe XP duplo", done: false, prog: "0/1", percent: 0, xp: 300, icon: "users" },
];
return (
Renova em 11h 24m
Missões diárias
+500 XP hoje
{missions.map((m, i) => (
{m.done ?
{m.t}
{m.prog} {m.done && "· Concluída"}
+{m.xp} XP
))}
);
}
// ---------- Leaderboard ----------
function Leaderboard() {
const list = [
{ rank: 1, name: "@_marquinhos21", prize: "iPhone 15 Pro Max", amount: "R$ 11.499" },
{ rank: 2, name: "@biancaray", prize: "PlayStation 5 Pro", amount: "R$ 5.799" },
{ rank: 3, name: "@ph_drops", prize: "MacBook Air M3", amount: "R$ 9.999" },
{ rank: 4, name: "@dudugamer", prize: "Apple Watch Ultra", amount: "R$ 7.299" },
{ rank: 5, name: "@nathy.rmt", prize: "Voucher Viagem", amount: "R$ 4.500" },
];
return (
Semana · Top 5
Maiores ganhos
Ranking
{list.map(it => (
{it.rank.toString().padStart(2, "0")}
{it.name.replace("@", "").slice(0, 2).toUpperCase()}
{it.amount}
))}
);
}
// ---------- How it works ----------
function HowItWorks() {
const steps = [
{ n: "1", t: "Escolha a caixa", d: "Mais de 12 temas — eletrônicos, gifts, apple, beauty…" },
{ n: "2", t: "Confirme no Pix", d: "Pagamento instantâneo. Cartão e boleto também rolam." },
{ n: "3", t: "Receba em casa", d: "Frete grátis, rastreio em tempo real, até 10 dias úteis." },
];
return (
Como rola
3 passos, sem segredo
);
}
// ---------- Trust ----------
function Trust() {
const items = [
{ ico: "truck", t: "Frete sempre grátis", x: "Em todo o território nacional, sem mínimo." },
{ ico: "shield", t: "Produtos lacrados", x: "Tudo novo, com nota fiscal e garantia." },
{ ico: "lock", t: "Pagamento seguro", x: "Criptografia + antifraude em todas as compras." },
{ ico: "bolt", t: "Entrega rastreada", x: "Acompanhe o status em tempo real no app." },
];
return (
Por que confiar
Sem trolagem.
{items.map(it => (
{it.t}
{it.x}
))}
);
}
// ---------- FAQ ----------
function FAQ() {
const items = [
{ q: "É confiável mesmo?", a: "Sim. Operamos com CNPJ ativo, nota fiscal em todo pedido, drop rates auditados e exibidos publicamente em cada caixa. Você sabe exatamente o que tá comprando." },
{ q: "Quanto tempo até receber?", a: "Entrega em até 10 dias úteis pra todo Brasil, com frete grátis. Pedidos confirmados até 14h saem no mesmo dia." },
{ q: "E se vier algo que eu não quero?", a: "Todo produto chega novo e lacrado, com 7 dias pra arrependimento (CDC) + 30 dias contra defeito de fabricação. Trocas pelo app em 1 minuto." },
{ q: "Posso pagar no Pix?", a: "Pode. Pix aprova em segundos, cartão em até 12x e boleto em 1 dia útil." },
];
const [open, setOpen] = useState(0);
return (
{items.map((it, i) => (
setOpen(open === i ? -1 : i)}>
{it.q}
{open === i &&
{it.a}
}
))}
);
}
// ---------- Sticky ticker / live conversion ----------
const TICKER_MSGS = [
{ type: "purchase", who: "Lucas R.", item: "Caixa Eletrônicos" },
{ type: "win", who: "Mariana S.", item: "iPhone 17", rare: true, emoji: "📱" },
{ type: "purchase", who: "Felipe T.", item: "Caixa Premium" },
{ type: "win", who: "João A.", item: "Apple Watch Series 10", rare: true, emoji: "⌚" },
{ type: "purchase", who: "Camila B.", item: "Caixa Apple" },
{ type: "win", who: "Bia G.", item: "Carmed Coca-Cola", emoji: "💄" },
{ type: "purchase", who: "Diego M.", item: "Caixa Beauty" },
{ type: "win", who: "Ana P.", item: "Xbox Game Pass 12M", emoji: "🎮" },
{ type: "purchase", who: "Pedro V.", item: "Caixa Gifts" },
{ type: "win", who: "Larissa D.", item: "AirPods Pro 3", rare: true, emoji: "🎧" },
{ type: "purchase", who: "Thiago N.", item: "Caixa Eletrônicos" },
{ type: "win", who: "Beatriz F.", item: "Lip Honey Candy", emoji: "🍯" },
];
function LiveTicker() {
const [visible, setVisible] = useState(false);
const [idx, setIdx] = useState(0);
useEffect(() => {
const t = setTimeout(() => setVisible(true), 2800);
return () => clearTimeout(t);
}, []);
useEffect(() => {
if (!visible) return;
const t = setInterval(() => setIdx(i => (i + 1) % TICKER_MSGS.length), 4000);
return () => clearInterval(t);
}, [visible]);
if (!visible) return null;
const msg = TICKER_MSGS[idx];
const isWin = msg.type === "win";
return (
{isWin
? {msg.emoji}
:
{isWin ? (
<>{msg.who} ganhou {msg.item}
) : (
<>Nova caixa comprada
)}
{isWin ? "agora mesmo" : `${msg.who} · ${msg.item}`}
);
}
// ---------- Conversion popup (bottom sheet) ----------
function ConversionPopup({ onClose }) {
return (
<>
Criar conta eGrátis
Cadastre-se em 30 segundos e ganhe sua primeira caixa por nossa conta.
);
}
function Dock() {
return (
);
}
// ---------- Confetti background piece ----------
function ConfettiLayer() {
const colors = ["#18B0EC", "#FF7A1A", "#FFB938", "#B85CFF", "#16C784"];
const pieces = useMemo(() => Array.from({ length: 14 }, (_, i) => ({
left: Math.random() * 100,
delay: Math.random() * 6,
duration: 5 + Math.random() * 3,
color: colors[i % colors.length],
rot: Math.random() * 360,
})), []);
return (
{pieces.map((p, i) => (
);
}
Object.assign(window, {
TopBar, Hero, DropRates, LiveDrops, FeaturedDeal, BoxesSection, Missions,
Leaderboard, HowItWorks, Trust, FAQ, Dock, ConfettiLayer, Icon,
LiveTicker, ConversionPopup
});
