Olimpo Landing Page

Resumen

Olimpo es una app de productividad que creé para convertir una meta de vida en tareas concretas de cada día. La persona escribe la meta en una frase, y un planificador con IA la divide en proyectos y tareas diarias. Cuando el progreso se detiene, un coach con IA lo nota y envía un mensaje con el paso más pequeño posible. La app también tiene un Modo Foco con temporizador y ejercicio de respiración, un plan que se adapta a 16 tipos de personalidad y un ranking que da la mitad de los puntos a la regularidad. Los nombres vienen de la mitología griega, por eso el planificador se llama Oráculo y el coach se llama Quirón.

Este caso de estudio trata de la landing page que diseñé e implementé para vender la app. Su objetivo es convertir al visitante en un registro gratuito, sin tarjeta, y después mostrar por qué vale la pena pagar el plan con el Oráculo. La página habla con quien ya probó métodos de productividad y desistió.

Contribuciones Clave

Argumento de la página. Escribí el copy con la estructura PAS (problema, agitación, solución) a lo largo de 12 secciones. La apertura nombra la meta. La sección siguiente muestra por qué fallan los métodos de siempre, ya que un día perdido borra todo el conteo. La mayor parte de la página es del producto, con secciones largas para el planificador, el foco y la constancia.

El producto en acción. La página tenía que mostrar un planificador con IA trabajando, así que recreé la app dentro de ella. El visitante ve al Oráculo convertir una frase en un plan de 3 fases, y después el mensaje del coach, el temporizador del Modo Foco y el reloj del Toque de Queda, que cuenta los días en que el trabajo terminó antes de las 23 h.

Códex para profundizar. La mayoría de los visitantes solo necesita el argumento, por eso la página es corta y el porqué de cada decisión pasó a un Códex de 50 entradas. Cada sección, menos la de los planes, tiene un "saber más" que abre las entradas de su tema, como la psicología detrás del método o el origen de cada nombre. El lector se abre en una capa sobre la página, así que al cerrarlo el visitante sigue en el mismo punto. Cada entrada también tiene su propia página indexable, para que el sitio aparezca en búsquedas sobre temas como definición de metas, formación de hábitos y los 16 tipos de personalidad del MBTI.

Objeciones respondidas en la página. La sección de confianza responde a la duda de privacidad antes de que el visitante pregunte. Dice que los datos salen del navegador ya cifrados y que la IA no se entrena con lo que la persona escribe.

Planes hechos para comparar. Los 3 planes muestran los mismos 7 beneficios, con lo que falta tachado, para que el visitante compare en la propia tarjeta. El botón está justo debajo de cada precio, y el plan gratis empieza sin tarjeta.

Implementación en Webflow. Implementé la página en Webflow con Client-First y recursos nativos primero. Tiene 32 interacciones, Components y Variables documentados en una página de Style Guide, y el Códex como colección del CMS. Usé código propio solo donde Webflow no tiene una pieza nativa, como el ánfora 3D que gira con el scroll, el lector del Códex y las demostraciones del producto. Cada animación tiene un estado final quieto para quien prefiere movimiento reducido, y los 131 archivos de medios tienen texto alternativo. Claude Code, una herramienta de IA para programar, fue parte del proceso para acelerar la implementación.