Modo Reset
Página única do Modo Reset, protocolo digital de 7 dias contra procrastinação e névoa mental, que leva ao checkout do material.
- Endereço
- modoresetoficial.com.br
- Setor
- Infoproduto digital: protocolo comportamental de produtividade e foco
- Escopo
- Copy, estrutura, interface, animações e desenvolvimento, dentro da identidade visual do cliente.
- Stack
- Vite · JavaScript · CSS
- Capturas
- Atualizado em


Preview completo
Role dentro de cada janela para percorrer a página como ela está no ar. Capturas de .


A landing page do Modo Reset, protocolo digital de 7 dias contra procrastinação, névoa mental e esgotamento. Escrevemos, desenhamos e desenvolvemos uma página única que vai da identificação com o problema até o checkout do material.
Contexto
O Modo Reset se apresenta como um protocolo de ativação comportamental de 7 dias, para quem sabe o que precisa fazer mas não consegue executar. A oferta é um PDF de 71 páginas com fases táticas para manhã, tarde e noite, exercícios práticos e um guia de biohacking, com acesso vitalício a uma comunidade e suporte como bônus. A página vende esse material diretamente; o pagamento é processado num checkout externo, da Greenn.
Como foi pensado
Escrevemos a página como um funil de oferta digital, com a identidade da marca, fundo quase preto, verde-neon elétrico e um mascote ilustrado em forma de bateria, aplicada do topo ao rodapé. Ela abre pelo problema, névoa mental, ciclos de procrastinação e esgotamento, antes de apresentar o método em três fases, o processo de entrega em três passos, a lista do que está incluso, uma tabela comparando o "antes" e o "depois" e só então a oferta, com preço, cronômetro e garantia; as perguntas frequentes fecham a página. Os botões de chamada mudam de texto conforme a seção, "Saber mais", "Quero acessar o material", "Quero meu acesso imediato", mas levam sempre à mesma oferta. Antes do conteúdo, uma tela de carregamento em forma de bateria carregando, de 10% a 100%, reforça o conceito de reset da marca; o cabeçalho se esconde ao rolar para baixo e um botão retorna ao topo. Cada bloco entra conforme a rolagem alcança sua seção, e as perguntas frequentes abrem uma de cada vez. No celular, a grade de duas colunas empilha numa coluna única.

O que foi feito
Desenvolvemos a página com Vite, em JavaScript e CSS próprios, com ícones da biblioteca Remixicon. As animações foram criadas para ela: a tela de carregamento com a barra de bateria e as mensagens de status, os blocos que entram em cena conforme a rolagem, o cabeçalho retrátil, o botão de voltar ao topo e o selo de garantia em SVG, com contorno animado e o traço de confirmação desenhado. Não há formulário: cada botão de oferta leva ao checkout externo da Greenn (payfast.greenn.com.br), onde o pagamento é processado. A seção de oferta traz um cronômetro de contagem regressiva de 12 horas, reiniciado a cada visita quando a seção entra na tela. A página carrega o Google Tag Manager; não identificamos outros pixels nem formulário de contato.

Destaques
- Tela de carregamento com barra de bateria de 10% a 100%, ecoando o conceito de reset da marca.
- Cronômetro de 12 horas na seção de oferta, reiniciado a cada visita quando a seção entra na tela.
- Tabela comparando cinco pares de estado, do "sistema obsoleto" ao "protocolo ativado".
- Checkout externo na Greenn: os botões de oferta levam direto ao pagamento, sem formulário no site.
- Selo de garantia em SVG com contorno animado e traço de confirmação desenhado na entrada da seção.
Desempenho medido
Computador
- Performance
- 98
- Acessibilidade
- 91
- Boas práticas
- 100
- SEO
- 91
Performance 98 nas 2 execuçõesLCP 1,1 s · CLS 0,005 · TBT 0 ms
Fonte: Lighthouse 13.5.0 (Chromium aberto pelo Playwright), mediana de 2 execuções no computador, . Resultado no computador. No celular a performance medida ficou entre 69 e 79, abaixo do piso de publicação do projeto, e não é mostrada. O PageSpeed Insights recusou as chamadas (erro 429) no dia da medição; a fonte foi só o Lighthouse local.
Site não é vitrine.É parte da operação.
Conte o que a empresa precisa comunicar e para onde o visitante deve ir. Começamos pela estrutura, antes da primeira tela.