Olimpo Landing Page

Visão geral

O Olimpo é um app de produtividade que eu criei para transformar uma meta de vida em tarefas concretas de cada dia. A pessoa escreve a meta numa frase, e um planejador com IA a divide em projetos e tarefas diárias. Quando o progresso para, um coach com IA percebe e manda uma mensagem com o menor passo possível. O app também tem um Modo Foco com timer e exercício de respiração, um plano que se adapta a 16 tipos de personalidade e um ranking que dá metade dos pontos à regularidade. Os nomes vêm da mitologia grega, por isso o planejador se chama Oráculo e o coach se chama Quíron.

Este case é sobre a landing page que eu desenhei e implementei para vender o app. O objetivo dela é transformar o visitante em cadastro gratuito, sem cartão, e depois mostrar por que vale pagar pelo plano com o Oráculo. A página fala com quem já tentou métodos de produtividade e desistiu.

Principais Contribuições

Argumento da página. Escrevi a copy na estrutura PAS (problema, agitação, solução) ao longo de 12 seções. 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. Ela tem 32 interações, Components e Variables documentados numa página de Style Guide, e o Códex como 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 as 131 mídias têm texto alternativo. O Claude Code, ferramenta de IA para programação, fez parte do processo para acelerar a implementação.