// Brochure body sections: Why, How, Wallet, Stamp, CTA, Footer. const { useState: useStM, useEffect: useEfM } = React; // ───────────────────────────────────────────────────────────── // WHY section — 3 pillars in dashed-border cards // ───────────────────────────────────────────────────────────── function WhySection({ lang, copy }) { const t = copy.why[lang]; return (
{t.eyebrow}

{t.title}

{t.body}

{t.pillars.map((p, i) => (
0{i+1}
{p.k}
{p.v}
))}
); } // ───────────────────────────────────────────────────────────── // HOW section — 3 step journey, each with a phone mockup // Mobile: stacked vertically. Desktop: phone-text-phone-text rhythm. // ───────────────────────────────────────────────────────────── function HowSection({ lang, copy }) { const t = copy.how[lang]; // each step gets a different phone screen const screens = [HowStepScan, HowStepWhatsApp, HowStepShow]; return (
{t.eyebrow}

{t.title}

{t.steps.map((step, i) => { const ScreenComp = screens[i]; return (
{step.n}

{step.title}

{step.body}

{i < t.steps.length - 1 && ( )}
); })}
); } // Step 1 — phone camera scanning a counter QR function HowStepScan() { return (
{/* fake camera viewfinder */}
{/* QR target on counter */}
Carimbou · Tapioca
{/* scan brackets */}
{[ { top: 0, left: 0, borderTop: '2px solid #2D8A6B', borderLeft: '2px solid #2D8A6B' }, { top: 0, right: 0, borderTop: '2px solid #2D8A6B', borderRight: '2px solid #2D8A6B' }, { bottom: 0, left: 0, borderBottom: '2px solid #2D8A6B', borderLeft: '2px solid #2D8A6B' }, { bottom: 0, right: 0, borderBottom: '2px solid #2D8A6B', borderRight: '2px solid #2D8A6B' }, ].map((s, i) => (
))}
{/* hint */}
QR Code do balcão
Aponte a câmera
); } // Step 2 — whatsapp-style chat (more complete than hero) function HowStepWhatsApp() { return (
C
Carimbou
respondendo…
Quero meu cartão da Padaria do Bairro Oi! Como te chamamos? Carlos Pronto, Carlos! Tá aí 👇
🔗 carimbou.com.br/c/padaria
{/* input bar */}
Mensagem
); } function ChatBubble2({ side, children }) { const isOut = side === 'out'; return (
{children}
); } // Step 3 — customer showing the card to be stamped, with subtle stamp animation function HowStepShow() { return (
Fidelidade
Padaria do Bairro
Carlos Pimentel
{/* stamp grid */}
{Array.from({ length: 10 }).map((_, i) => { const filled = i < 5; // last one will animate const isLast = i === 4; return (
); })}
{/* progress + reward */}
Carimbos 5/10
{/* QR — fills the rest */}
Mostre para o atendente carimbar
); } // ───────────────────────────────────────────────────────────── // WALLET section — grid of mini cards with a bigger phone showing the wallet // ───────────────────────────────────────────────────────────── function WalletSection({ lang, copy }) { const t = copy.wallet[lang]; return (
{t.eyebrow}

{t.title}

{t.body}

    {t.bullets.map((b, i) => (
  • {b}
    • ))}
); } // Wallet screen — list of cards (the customer's wallet) function WalletScreen() { const cards = [ { biz: BUSINESSES.tapioca, stamps: 7, name: 'Andrea Mendes' }, { biz: BUSINESSES.padaria, stamps: 5, name: 'Andrea Mendes' }, { biz: BUSINESSES.esmalte, stamps: 9, name: 'Andrea Mendes' }, { biz: BUSINESSES.cabelo, stamps: 2, name: 'Andrea Mendes' }, ]; return (
Carteira
Meus cartões
{/* card list */}
{cards.map((c, i) => ( ))}
); } function WalletCardRow({ biz, stamps, name }) { const total = 10; return (
{biz.name}
{biz.tagline}
{stamps}/{total}
); } // ───────────────────────────────────────────────────────────── // STAMP section — counter POV: the staff stamping screen // ───────────────────────────────────────────────────────────── function StampSection({ lang, copy }) { const t = copy.stamp[lang]; return (
{/* floating "tap" indicator */}
); } // Big stamping screen shown in this section function StampScreenPreview() { return (
Carimbou
Estação Tapioca
Cliente
Andrea Mendes
+55 21 977…6932
{/* stamp grid (bigger) */}
{Array.from({ length: 10 }).map((_, i) => { const filled = i < 6; // 6 stamps so far const isJust = i === 5; // most recent: animate return (
); })}
Carimbos 6/10
{/* big stamp button */}
); } // ───────────────────────────────────────────────────────────── // Plans section — pricing tiers // ───────────────────────────────────────────────────────────── function PlansSection({ lang, copy }) { const t = copy.plans[lang]; return (
{t.eyebrow}

{t.title}

{t.body}

{t.cards.map((card, idx) => (
{card.tag}
{card.name}
{card.price} {card.period}
{card.subPrice &&
{card.subPrice}
}
    {card.features.map((f, i) => (
  • {f}
    • ))}
{card.cta}
))}
{t.footnote}
); } // ───────────────────────────────────────────────────────────── // CTA section — big block to sign up // ───────────────────────────────────────────────────────────── function CTASection({ lang, copy }) { const t = copy.cta[lang]; return (
{/* dashed-border cta card with the brand mark */}
{t.eyebrow}

{t.title}

{t.body}

{t.footnote}
); } // ───────────────────────────────────────────────────────────── // Footer // ───────────────────────────────────────────────────────────── function FooterSection({ lang, copy }) { const t = copy.footer[lang]; return ( ); } Object.assign(window, { WhySection, HowSection, WalletSection, StampSection, PlansSection, CTASection, FooterSection, });