Olimpo Landing Page

Visão geral

Meu Papel

Principais Contribuições

• Argumento da página. Escrevi a copy na estrutura PAS (problema, agitação, solução). A abertura nomeia a meta. A seção seguinte mostra por que os métodos de sempre falham, já que um dia perdido apaga a contagem inteira. A maior parte da página fica com o produto, com seções longas para o planejador, o foco e a constância.
• O produto funcionando. A página precisava mostrar um planejador com IA trabalhando, então recriei o app dentro dela. O visitante vê o Oráculo transformar uma frase num plano de 3 fases, e depois a mensagem do coach, o timer do Modo Foco e o relógio do Toque de Recolher, que conta os dias em que o trabalho parou antes das 23h.
• Códex para quem quer se aprofundar. A maioria dos visitantes precisa só do argumento, por isso a página é curta e o porquê de cada escolha foi para um Códex de 50 verbetes. Toda seção, menos a dos planos, tem um "saiba mais" que abre os verbetes do assunto dela, como a psicologia por trás do método ou a origem de cada nome. O leitor abre numa camada sobre a página, então fechar deixa o visitante no mesmo ponto em que estava. Cada verbete também tem página própria indexável, para o site ser achado na busca por temas como definição de metas, formação de hábito e os 16 tipos de personalidade do MBTI.
• Objeções respondidas na página. A seção de confiança responde à dúvida de privacidade antes de o visitante perguntar. Ela diz que os dados saem do navegador já cifrados e que a IA não treina com o que a pessoa escreve.
• Planos feitos para comparar. Os 3 planos mostram os mesmos 7 benefícios, com o que falta riscado, para o visitante comparar no próprio card. O botão fica logo abaixo de cada preço, e o plano grátis começa sem cartão.
• Implementação no Webflow. Implementei a página no Webflow com Client-First e recursos nativos primeiro. Components e Variables estão documentados numa página de Style Guide, e o Códex é uma coleção do CMS. Usei código próprio só onde o Webflow não tem peça nativa, como a ânfora 3D que gira com a rolagem, o leitor do Códex e as demonstrações do produto. Toda animação tem um estado final parado para quem prefere movimento reduzido, e toda imagem tem texto alternativo. O Claude Code, ferramenta de IA para programação, fez parte do processo para acelerar a implementação.

Material de marca

Para o lançamento do app, desenhei a marca fora da landing page. Ela inclui posts e perfis para as redes sociais, os e-mails de boas-vindas e de onboarding, um guia de uma página para quem testa o beta e capas para vídeos curtos no Reels e no TikTok. Cada peça usa as palavras, os desenhos e a tipografia da landing.

Performance e acessibilidade

Status