Olimpo Landing Page

Overview

Olimpo is a productivity app I created to turn a life goal into concrete tasks for each day. The person writes the goal in one sentence, and an AI planner splits it into projects and daily tasks. When progress stops, an AI coach notices and sends a message with the smallest possible next step. The app also has a Focus Mode with a timer and a breathing exercise, a plan that adapts to 16 personality types, and a ranking that gives half of its points to regular progress. The names come from Greek mythology, so the planner is called the Oracle and the coach is called Chiron.

This case is about the landing page I designed and implemented to sell the app. Its goal is to turn a visitor into a free signup, with no card, and then show why the paid plan with the Oracle is worth it. The page speaks to people who have already tried productivity methods and given up.

Key Contributions

Page Argument. I wrote the copy with the PAS structure (problem, agitation, solution) across 12 sections. The opening names the goal. The next section shows why the usual methods fail, since one missed day erases the whole count. Most of the page goes to the product, with long sections for the planner, the focus, and the consistency.

Product at Work. The page had to show an AI planner at work, so I recreated the app on the page. The visitor sees the Oracle turn one sentence into a plan in 3 phases, then the coach's message, the Focus Mode timer, and the curfew clock, which counts the days work stopped before 11 PM.

Codex for Depth. Most visitors only need the argument, so the page stays short and the reasons behind each choice go into a Codex of 50 entries. Every section except the plans has a Learn more link to the entries on its subject, such as the psychology behind the method or the origin of each name. The reader opens in a layer over the page, so closing it leaves the visitor where they were. Each entry also has its own indexable page, so search engines can find the site through topics like goal setting, habit formation, and the 16 MBTI personality types.

Objections on the Page. The trust section answers the privacy question before the visitor asks it. It says the data leaves the browser encrypted and the AI doesn't train on what the person writes.

Plans Built to Compare. The 3 plans show the same 7 benefits, with what a plan lacks struck through, so the visitor compares them in the cards themselves. The button sits right under each price, and the free plan starts with no card.

Webflow Build. I implemented the page in Webflow with Client-First and native features first. It has 43 interactions, Components and Variables documented on a Style Guide page, and the Codex as a CMS collection. I used custom code only where Webflow has no native piece, such as the 3D amphora that turns with the scroll, the Codex reader, and the product demos. Every animation has a static final state for visitors who prefer reduced motion, and 131 media files have alt text. Claude Code, an AI coding tool, was part of the workflow to speed up the build.