// sections.jsx — DropX landing page section components const { useState, useEffect, useMemo } = React; // ── helpers ────────────────────────────────────────────────────────────────── function useCountdown(targetDate) { const [now, setNow] = useState(() => Date.now()); useEffect(() => { const id = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(id); }, []); const diff = Math.max(0, targetDate - now); const days = Math.floor(diff / 86400000); const hours = Math.floor(diff / 3600000) % 24; const mins = Math.floor(diff / 60000) % 60; const secs = Math.floor(diff / 1000) % 60; return { days, hours, mins, secs }; } function scrollToId(id) { const el = document.getElementById(id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 60, behavior: "smooth" }); } // ── NAV ────────────────────────────────────────────────────────────────────── function Nav() { const cart = useCart(); const openCatalog = () => cart && cart.setCatalogOpen(true); return ( ); } // ── HERO ───────────────────────────────────────────────────────────────────── function Hero({ headlineVariant }) { const cart = useCart(); const openCatalog = () => cart && cart.setCatalogOpen(true); const headlines = { A: <>DO JEITO
QUE DEVERIA
SER., B: <>DIRETO
DA FÁBRICA.
DO JEITO
QUE VOCÊ
PODE PAGAR., C: <>O SEGREDO
DE QUEM SEMPRE
ESTÁ BEM
VESTIDO. }; return (
IMPORTAÇÃO DIRETA · SEM ATRAVESSADOR

{headlines[headlineVariant] || headlines.A}

DropX mascote

Direto da fábrica. Sem atravessador. Sem markup. Sem desculpa. A peça custa o que ela realmente custa — do jeito que sempre deveria ter sido.

PIX OU CARTÃO A PARTIR DE R$ 200 ACABAMENTO PREMIUM FORNECEDOR VALIDADO
10× MAIS BARATO QUE
A LOJA OFICIAL /01
45d PRAZO MÉDIO
SOB ENCOMENDA /02
1:1 MESMA FÁBRICA
MESMOS MATERIAIS /03
); } // ── MARQUEE ────────────────────────────────────────────────────────────────── function Marquee() { const items = [ "STREETWEAR", "DO JEITO QUE DEVERIA SER", "DIRETO DA FÁBRICA", "SEM ATRAVESSADOR", "PREÇO JUSTO", "PIX & CARTÃO", "DROP #01 ABERTO"]; const renderTrack = (k) => {items.map((it, i) => {it} {i % 2 === 0 ? : } )} ; return (
{renderTrack(0)} {renderTrack(1)}
); } // ── PITCH (Você conhece a sensação) ────────────────────────────────────────── function Pitch() { return (

Você conhece a sensação.

Vê a peça. Olha o preço. Fecha a aba.

Não é falta de gosto — é falta de sentido pagar R$ 1.500 numa peça que saiu da mesma fábrica por uma fração disso.

Tá na hora de fazer do jeito que sempre deveria ter sido.

); } // ── MANIFESTO (Como é hoje × Como deveria ser) ─────────────────────────────── function Manifesto() { const rows = [ ["Marca cobrando R$ 1.500 pelo nome na etiqueta.", "A peça custar o que ela realmente custa."], ["Intermediário inflando o preço em 1.000%.", "Direto da fábrica. Sem ninguém no meio."], ["Esperar liquidação que nunca chega.", "Pagar o preço justo desde o primeiro dia."], ["Fornecedor aleatório no Instagram.", "Fornecedor testado, validado, com nome."], ["Achar que estilo é privilégio de quem pode pagar.", "Estilo virar uma coisa só de gosto."], ]; return (

O sistema tá quebrado.
A gente tá consertando.

Não é manifesto de marca. É a operação inteira da DropX em duas colunas — o que existe hoje no varejo de moda, e o que deveria existir desde sempre.

/01 COMO É HOJE
/02 COMO DEVERIA SER
{rows.map((r, i) => (
{r[0]}
→{r[1]}
 ))}
DO JEITO QUE DEVERIA SER.
); } // ── PAIN ───────────────────────────────────────────────────────────────────── function Pain() { const items = [ "Olhou uma peça por dias e não comprou porque o preço não cabia no mês", "Usou réplica duvidosa e passou raiva quando chegou nada a ver com a foto", "Tentou importar sozinho e perdeu dinheiro na alfândega ou com fornecedor furado", "Se sentiu pra fora porque todo mundo ao redor parecia conseguir as peças", "Desistiu de um look porque o tênis certo custava mais que o aluguel"]; return (

Como é
hoje.

Marca mentalmente quantas dessas situações você já viveu. Não é falta de gosto, de visão ou de dinheiro — é o sistema funcionando do jeito errado.

{items.map((t, i) =>
/{String(i + 1).padStart(2, "0")} {t} JÁ VIVI ISSO
)}
não é falta de dinheiro.
é falta de acesso ao lugar certo.
); } // ── SOLUTION ───────────────────────────────────────────────────────────────── function Solution() { return (

Como deveria
ser.

Você escolhe a peça. A gente importa direto de quem fabrica. Sem atravessador, sem markup, sem mistério. Não são cópias mal feitas — são peças construídas com os mesmos materiais, pelo mesmo processo, sem o nome na etiqueta que infla o preço em 1.000%.

01 Você escolhe a peçaManda print, link, ou pede o que viu no feed.
02 A gente valida o fornecedorJá testado. Sem loteria, sem perfil aleatório.
03 Você paga via Pix ou cartãoPedido entra no drop da quinzena.
04 Chega na sua casaAcompanhamento direto pelo WhatsApp/Instagram.
); } // ── BENEFITS ───────────────────────────────────────────────────────────────── function Benefits() { const items = [ { n: "B/01", t: <>Qualidade que você vê e sente, d: "Materiais, acabamento e caimento equivalentes ao original — sem decepção ao abrir a caixa." }, { n: "B/02", t: <>Preço que cabe no Pix, d: "Ticket médio de R$ 200 por peças que custam 5x, 10x mais nas lojas oficiais." }, { n: "B/03", t: <>Fornecedor verificado, d: "Nossos contatos foram testados e validados. Você não está jogando na loteria." }, { n: "B/04", t: <>A gente resolve o resto, d: "Sem você precisar entender de importação, câmbio, frete ou alfândega." }, { n: "B/05", t: <>Pagamento simples e seguro, d: "Pix à vista ou cartão. Sem burocracia, sem ginástica financeira." }, { n: "B/06", t: <>Acesso ao que está em alta, d: "Sem estoque parado: importamos o que o mercado pede no momento que pede." }]; return (

Seis razões
pra não esperar o próximo mês.

06 PRINCÍPIOS / NENHUMA PROMESSA VAZIA
{items.map((b, i) =>
{b.n} {b.d} {b.t}
)}
); } // ── SHOWCASE (Product placeholders) ────────────────────────────────────────── function Showcase() { const cart = useCart(); const openCatalog = () => cart && cart.setCatalogOpen(true); const prods = [ { tag: "STREETWEAR / 01", name: "Hoodie Boxy", price: "R$ 280" }, { tag: "FOOTWEAR / 02", name: "Sneaker Low", price: "R$ 420" }, { tag: "OUTERWEAR / 03", name: "Puffer Tech", price: "R$ 580" }, { tag: "ACCESSORIES / 04", name: "Crossbody", price: "R$ 220" }, { tag: "DENIM / 05", name: "Baggy Jean", price: "R$ 320" }, { tag: "FOOTWEAR / 06", name: "Runner V2", price: "R$ 460" }, { tag: "TOPS / 07", name: "Tee Heavy", price: "R$ 200" }, { tag: "OUTERWEAR / 08", name: "Trench Mid", price: "R$ 640" }]; return (

As peças
que rodam
no drop atual.

*valores médios — sob encomenda · fotos reais via DM
{prods.map((p, i) =>
{p.tag} [ FOTO REAL DO PRODUTO ]
{p.name} {p.price}
+ ADICIONAR
)}
); } // ── OFFER ──────────────────────────────────────────────────────────────────── function Offer() { const cart = useCart(); const openCatalog = () => cart && cart.setCatalogOpen(true); return (

O que você recebe
ao encomendar.

ENCOMENDA DROPX / DROP #01

✓ Produto importado 1:1 selecionado por vocêValor de mercado: R$ 800 a R$ 3.000+ INCLUSO
✓ Curadoria e validação do fornecedor pela DropXVocê não precisa entender de importação. INCLUSO
✓ Acompanhamento do pedido até a entregaStatus atualizado a cada etapa da jornada. INCLUSO
✓ Suporte direto via Instagram / WhatsAppPessoa real, resposta no mesmo dia. INCLUSO
A PARTIR DE
R$ 200,00
PIX À VISTA OU CARTÃO
PRÓXIMO LOTE FECHA EM BREVE
); } // ── OBJECTIONS ─────────────────────────────────────────────────────────────── function Objections() { const items = [ { q: "Mas demora 45 dias pra chegar...", a: "Sim, e a gente fala isso abertamente porque respeita seu tempo. A peça vem direto da fábrica — não tem estoque parado esperando por você. Esse prazo é o preço do acesso real. E quem já recebeu diz que valeu cada dia." }, { q: "Mas eu nunca ouvi falar da DropX...", a: "A gente é novo. E prefere crescer na base da entrega real do que na base de promessa vazia. Cada pedido que sai daqui é uma vitrine. Nossos primeiros clientes viram isso. Os próximos vão ver também." }, { q: "E se o produto não chegar?", a: "Todo pedido é confirmado e acompanhado. Se algo der errado do nosso lado, resolvemos — sem enrolação, sem sumiço. Nossa reputação está sendo construída agora, e não vamos jogar isso fora." }, { q: "E se a qualidade não for o que eu espero?", a: "Trabalhamos só com fornecedores que já foram testados. Antes de recomendar qualquer peça, a qualidade foi validada. Não somos uma conta aleatória revendendo qualquer coisa — temos critério." }, { q: "Meus amigos nunca ouviram falar, como vou confiar?", a: "Faz sentido. Por isso o mais inteligente é começar com uma peça só, testar, e ver com seus próprios olhos. Risco baixo, potencial alto." }]; const [open, setOpen] = useState(0); return (

As perguntas que você está fazendo agora.

{items.map((it, i) =>
setOpen(open === i ? -1 : i)}> /{String(i + 1).padStart(2, "0")} "{it.q}" +
{it.a}
)}
); } // ── GUARANTEE ──────────────────────────────────────────────────────────────── function Guarantee() { return (

Produto com problema?
A gente resolve.

Se o produto chegar com defeito evidente ou diferente do acordado, a gente resolve. Sem enrolação. Sem sumiço. Sem "não é com a gente". A DropX está aqui pra crescer junto com você — e isso só acontece sendo honesto até quando dói.

COMPROMISSO
DROPX
· · ·
2026
); } // ── URGENCY ────────────────────────────────────────────────────────────────── function Urgency() { const cart = useCart(); const openCatalog = () => cart && cart.setCatalogOpen(true); // Set deadline to ~6 days from now (demo) const target = useMemo(() => Date.now() + 6 * 86400000 + 7 * 3600000 + 23 * 60000, []); const { days, hours, mins, secs } = useCountdown(target); const pad = (n) => String(n).padStart(2, "0"); return (
ENCOMENDAS ABERTAS · DROP #01

Próxima janela
fecha em.

{pad(days)}
DIAS
{pad(hours)}
HORAS
{pad(mins)}
MINUTOS
{pad(secs)}
SEGUNDOS
DROP ATUAL
#01 — ABERTO
PRÓXIMO DROP
+15 DIAS
REGRA
PRIMEIRO QUE PAGA, PRIMEIRO QUE EMBARCA
); } // ── FAQ ────────────────────────────────────────────────────────────────────── function FAQ() { const items = [ { q: "Quanto tempo demora pra chegar?", a: "Em média 45 dias para produtos sob encomenda. Se o produto estiver disponível para pronta entrega, avisamos antes. Sempre com transparência sobre o prazo real." }, { q: "Qualquer pessoa pode comprar?", a: "Sim. Você escolhe o produto, faz o pedido e a gente cuida do resto. Não precisa entender nada de importação." }, { q: "E se eu não gostar quando chegar?", a: "Se o produto vier com defeito ou diferente do combinado, a gente resolve. Nosso compromisso é com a entrega real do que foi prometido." }, { q: "Como funciona o pagamento?", a: "Pix à vista ou cartão. O pedido é confirmado depois do pagamento." }, { q: "Como acompanho meu pedido?", a: "Via Instagram ou WhatsApp direto com a gente. Você não fica no escuro esperando." }, { q: "É seguro comprar de uma loja nova?", a: "A melhor forma de descobrir é fazer um primeiro pedido menor e testar. A gente confia no produto — por isso não temos medo de começar assim." }, { q: "Como sei que a qualidade é boa de verdade?", a: "Nossos fornecedores são validados antes de qualquer venda. E quando os primeiros clientes receberem, você vai poder ver com seus próprios olhos — fotos reais, sem filtro." }, { q: "Vocês vendem qual tipo de produto?", a: "Foco em moda e streetwear — as peças que estão em alta, que você vê no feed e quer ter. Se tiver dúvida se a gente consegue determinado produto, só perguntar." }]; const [open, setOpen] = useState(-1); return (

Dúvidas
honestas.
Respostas
curtas.

{items.map((it, i) =>
setOpen(open === i ? -1 : i)}> {it.q} +
{it.a}
)}
); } // ── FINAL CTA ──────────────────────────────────────────────────────────────── function Final() { const cart = useCart(); const openCatalog = () => cart && cart.setCatalogOpen(true); return (

Você já sabe
como deveria ser.

Só ainda não tinha encontrado o caminho pra chegar lá sem esvaziar a conta. Agora tem. A DropX não é pra todo mundo — é pra quem entende que estilo não deveria ser privilégio de quem pode pagar o preço da etiqueta.

); } // ── PS ─────────────────────────────────────────────────────────────────────── function PS() { const cart = useCart(); const openCatalog = () => cart && cart.setCatalogOpen(true); return (
P.S.

Se você chegou até aqui, você já sabe que faz sentido. A única dúvida agora é se vai agir ou vai fechar essa aba e continuar vendo a peça no feed dos outros.

O drop atual fecha em breve. Depois disso, próxima janela só em +15 dias. A peça que você quer pode não estar disponível no próximo lote.

Garante o seu agora.

{e.preventDefault();openCatalog();}}> FAZER PEDIDO AGORA →
); } // ── FOOTER ─────────────────────────────────────────────────────────────────── function Footer() { return ( ); } Object.assign(window, { Nav, Hero, Marquee, Pitch, Manifesto, Pain, Solution, Benefits, Showcase, Offer, Objections, Guarantee, Urgency, FAQ, Final, PS, Footer });