Olimpo Landing Page

Resumen

Mi Rol

Contribuciones Clave

• Argumento de la página. Escribí el copy con la estructura PAS (problema, agitación, solución). 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. Components y Variables están documentados en una página de Style Guide, y el Códex es una 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 cada imagen tiene texto alternativo. Claude Code, una herramienta de IA para programar, fue parte del proceso para acelerar la implementación.

Material de marca

Para el lanzamiento de la app, diseñé la marca fuera de la landing page. Incluye publicaciones y perfiles para redes sociales, los correos de bienvenida y de onboarding, una guía de una página para quienes prueban la beta y portadas para videos cortos en Reels y TikTok. Cada pieza usa las palabras, los dibujos y la tipografía de la landing.

Rendimiento y accesibilidad

Estado