// ------------------------------------------------------------------------- // RECURSO EM DESTAQUE // // Destino: /lp/components/middle.jsx // Protótipo: lab/protos/recurso-em-destaque.html · Ficha: refs/recurso-em-destaque/ficha.md // GERADO por tools/portar.py — edite o protótipo e rode de novo. // // Ícones: use `II` (window.Icon), já aliasado no topo de middle.jsx. // Tudo vive numa IIFE porque os arquivos de /lp/components/ dividem o // mesmo escopo global — nomes soltos colidem entre si. // ------------------------------------------------------------------------- (function () { // --------------------------------------------------------------------------- // Dados reais: loja UperClean (uperclean.com), checkout cartROI em // pagamento.uperclean.com. Preços e descontos vindos de /products.json. // --------------------------------------------------------------------------- const LOJA = { nome: 'UperClean', primaria: '#5148FF', // roxo da marca (rgb(81,72,255)) sucesso: '#18E889', // verde da marca aviso: 'Pague com PIX e ganhe 5% de desconto!', freteGratisAcima: 200, }; const SUBTOTAL = 89.70; const DESC_PIX = 0.05; const BUMPS = [ { nome: 'Limpador Multiuso TUDO 500ml', de: 25.90, por: 17.90, img: '/lp/assets/uperclean/multiuso.jpg' }, { nome: 'Home Spray Casaflor Bamboo', de: 39.90, por: 27.90, img: '/lp/assets/uperclean/homespray.jpg' }, { nome: 'Pano de Chão Microfibra 50x90', de: 25.90, por: 17.90, img: '/lp/assets/uperclean/pano.jpg' }, ]; const brl = (v) => v.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); const pct = (de, por) => Math.round((1 - por / de) * 100); // --------------------------------------------------------------------------- // Timeline. Índice = etapa; valor = quanto ela dura. // 0 telas trocando · 1 cursor→PIX · 2 PIX selecionado · 3 valor+lista entram // 4,5,6 marca cada bump · 7 CTA confirma · 8 hold e reinicia // --------------------------------------------------------------------------- const DUR = [900, 1000, 900, 700, 1150, 1150, 1150, 1150, 1400]; const ETAPA_FINAL = 7; // Quando o dedo desce, por etapa. Na 2 o cursor já está sobre o PIX (chegou na // etapa 1); nas 4-7 ele precisa viajar os 550ms da transição antes de apertar. const PRESSIONA_EM = { 2: 90, 4: 580, 5: 580, 6: 580, 7: 580 }; const DUR_PRESS = 130; function useReduced() { const [r, setR] = React.useState(false); React.useEffect(() => { if (!window.matchMedia) return; const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); setR(mq.matches); const on = (e) => setR(e.matches); mq.addEventListener ? mq.addEventListener('change', on) : mq.addListener(on); return () => { mq.removeEventListener ? mq.removeEventListener('change', on) : mq.removeListener(on); }; }, []); return r; } // Contador suave — mesma técnica dos AnimNum/DashNum que já existem no site. function useContador(alvo, ativo) { const [v, setV] = React.useState(alvo); const de = React.useRef(alvo); React.useEffect(() => { if (!ativo) { setV(alvo); de.current = alvo; return; } const inicio = de.current, delta = alvo - inicio, t0 = performance.now(), dur = 420; let raf; const tick = (t) => { const p = Math.min(1, (t - t0) / dur); const e = 1 - Math.pow(1 - p, 3); setV(inicio + delta * e); if (p < 1) raf = requestAnimationFrame(tick); else de.current = alvo; }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [alvo, ativo]); return v; } // Duas camadas: a de fora viaja (550ms), a de dentro aperta (160ms). Se fosse // um transform só, o aperto herdaria a lentidão da viagem. function Cursor({ x, y, visivel, clicando }) { return (
{/* Onda do clique */}
); } function Tela({ titulo, sub, feito, saindo }) { return (
{titulo} {feito && ( )}
{sub}
); } function RecursoEmDestaque() { const reduzido = useReduced(); const [etapa, setEtapa] = React.useState(0); // `aplicado` anda atrás de `etapa`: o efeito visual só entra quando o dedo // solta, nunca antes de o cursor chegar. const [aplicado, setAplicado] = React.useState(0); const [pressionando, setPressionando] = React.useState(false); const [visivel, setVisivel] = React.useState(false); const [cursor, setCursor] = React.useState({ x: 250, y: 470 }); const secaoRef = React.useRef(null); const telaRef = React.useRef(null); const alvos = React.useRef({}); // Só roda com a seção na tela — é um loop de 9s, não pode queimar frame escondido. React.useEffect(() => { const el = secaoRef.current; if (!el) return; const io = new IntersectionObserver(([e]) => setVisivel(e.isIntersecting), { threshold: 0.35 }); io.observe(el); return () => io.disconnect(); }, []); React.useEffect(() => { if (reduzido) { setEtapa(ETAPA_FINAL); setAplicado(ETAPA_FINAL); return; } if (!visivel) return; const t = setTimeout(() => setEtapa((e) => (e + 1) % DUR.length), DUR[etapa]); return () => clearTimeout(t); }, [etapa, visivel, reduzido]); // Ciclo do clique: cursor chega → encolhe (dedo desce) → cresce de volta e, // nesse instante, o elemento muda de cor. React.useEffect(() => { if (reduzido || !visivel) return; const atraso = PRESSIONA_EM[etapa]; if (atraso == null) { setAplicado(etapa); setPressionando(false); return; } const desce = setTimeout(() => setPressionando(true), atraso); const sobe = setTimeout(() => { setPressionando(false); setAplicado(etapa); }, atraso + DUR_PRESS); return () => { clearTimeout(desce); clearTimeout(sobe); }; }, [etapa, visivel, reduzido]); // Alvo do cursor por etapa. Medimos o elemento real: funciona em qualquer // tamanho de tela e anima só transform. const alvoDaEtapa = { 1: 'pix', 2: 'pix', 3: 'pix', 4: 'bump0', 5: 'bump1', 6: 'bump2', 7: 'cta' }; React.useLayoutEffect(() => { if (reduzido) return; const chave = alvoDaEtapa[etapa]; const el = chave && alvos.current[chave]; const tela = telaRef.current; if (!el || !tela) return; const a = el.getBoundingClientRect(), b = tela.getBoundingClientRect(); setCursor({ x: a.left - b.left + 26, y: a.top - b.top + a.height / 2 - 2 }); }, [etapa, reduzido]); const pixEscolhido = aplicado >= 2; const listaVisivel = aplicado >= 3; const marcados = Math.max(0, Math.min(3, aplicado - 3)); const confirmado = aplicado >= ETAPA_FINAL; // Escala de quem está sendo apertado agora. Desce rápido, sobe junto com a cor. const apertado = (chave) => (pressionando && alvoDaEtapa[etapa] === chave ? 0.93 : 1); const TRANS_PRESS = 'transform .16s cubic-bezier(.2,.7,.2,1)'; const somaBumps = BUMPS.slice(0, marcados).reduce((s, b) => s + b.por, 0); const totalPix = (SUBTOTAL + somaBumps) * (1 - DESC_PIX); const total = useContador(totalPix, !reduzido); const falta = Math.max(0, LOJA.freteGratisAcima - (SUBTOTAL + somaBumps)); const progresso = Math.min(100, ((SUBTOTAL + somaBumps) / LOJA.freteGratisAcima) * 100); const reg = (k) => (el) => { if (el) alvos.current[k] = el; }; return (
{/* Cena escura com o glow dot-matrix vazando por cima do aparelho */}
{/* Texto */}
Recursos que já vêm ligados

Order bump que recalcula sozinho.

O comprador escolhe PIX, ganha o desconto e vê ofertas complementares no mesmo passo — sem recarregar, sem sair do fluxo. O total, o desconto e a barra de frete grátis se atualizam no mesmo instante.

Desconto por método de pagamento · Ofertas por regra de carrinho · Barra de frete grátis

Checkout real da UperClean · pagamento.uperclean.com
O checkout veste a marca da loja, não a nossa.

{/* Aparelho — ilustração decorativa: o conteúdo textual está na coluna ao lado, então some do a11y tree em vez de narrar um checkout falso. */}
); } setTimeout(() => window.__attachReveal && window.__attachReveal(), 50); Object.assign(window, { RecursoEmDestaque }); })();