Olimpo Landing Page

Overview

My Role

Key Contributions

• Page Argument. I wrote the copy with the PAS structure (problem, agitation, solution). 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. Components and Variables are documented on a Style Guide page, and the Codex is 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 every image has alt text. Claude Code, an AI coding tool, was part of the workflow to speed up the build.

Brand Collateral

For the launch of the app I designed the brand outside the landing page. It covers posts and profiles for social media, the welcome and onboarding emails, a one-page guide for beta testers and covers for short videos on Reels and TikTok. Every piece uses the words, drawings and type of the landing.

Performance and Accessibility

Status