All work
Flex Academy Landing Page project cover

Flex Academy Landing Page

A scroll-driven concept landing page for a short-term rental course, designed in two themes and built in code.

Landing PageUI DesignFront-end Development

1. Overview

Flex Academy is a concept landing page for a course from the team behind The Flex and Base360. The Flex runs short-term rentals in seven cities. The idea is simple: teach other people the playbook they used.

The page sells two programmes. Launch is for people with no units yet, or just one. Scale is for operators who already run a few units and want to grow into a real company.

I designed the page in Claude Design, in a light theme and a dark theme. Then I built it as a working web page. You can open it from the prototype link and try it yourself.

2. One page, two kinds of visitor

A beginner and an operator need very different things. A beginner needs to feel safe to start. An operator needs to see how to stop doing everything by hand.

So the page lets visitors choose their path early. A switch in the hero says "I'm starting out" or "I already run units". The message and the main button change with it. Beginners go to a free webinar. Operators go to a free strategy call.

The learning journey shows both programmes as one path. Modules 01 to 04 are Launch. Modules 05 to 08 are Scale. Between them sits "The stall": three to five units, everything manual, margins getting thinner. This is where most operators get stuck, and where Scale begins.

Learning journey with Launch and Scale module cards stacked side by side

3. Telling the story with scroll

The page tells one story as you scroll: from a messy start to an organised business. Each section hands something to the next one, so the story feels connected.

  • The hero. The Flex Academy logo turns into a glowing house frame on a real London street. Four cards appear around it: pricing, distribution, portfolio and operations.
  • The house moves. As you scroll, the house leaves the street and lands in the next section.
  • The challenges board. Sticky notes show the real problems: regulation, contracts, money, operations and time. The question is "Is this your desk right now?"
  • The notes get sorted. The same notes fly into the Launch and Scale card stacks. The mess becomes a plan.
  • The forms. Booking a webinar or a call opens from inside the card, like a letter coming out of an envelope.
Challenges board with pinned sticky notes next to the house card, dark theme
Learning journey card stacks in the dark theme with a blue glow

4. Light and dark themes

I made two full versions of the design. The dark theme uses glass cards and a soft blue glow, like the street at night. The light theme is calmer and closer to a normal day.

They are not just a colour swap. Cards, shadows and some layouts are different in each theme. A button in the nav switches between them, and the page remembers the choice.

Flex Academy hero in the light theme, with a glowing house frame on a London street
Flex Academy hero in the dark theme, with glass cards and a blue glow

5. From design file to working page

This is the part I care about most as a UX engineer. The design file was a prototype, not production code. I wanted the real page to look the same, without rebuilding it by hand.

I wrote a small script that turns the Claude Design export into React for Next.js. The design stays the source of truth. When I change the design, I export it again and run one command.

I used AI to help with the build. I checked the result myself. I compared the built page with the prototype at 16 scroll points in each theme, and they match almost pixel for pixel. I also tested both booking flows from start to finish, and the layout on a 390 px phone screen.

6. What I would do next

The next step is to measure how people really use the page. I would track:

  • Form completion rate. How many people start the webinar or strategy call form, and how many finish it.
  • Time on page. How long visitors stay on the whole page.
  • Time on the hero. How long people spend in the scroll story at the top before they move on.
  • Time on the course content. How long people stay on the learning journey and the Launch and Scale details.

7. Process

  1. Sketch the story and the two visitor paths

  2. Design the page in Claude Design, in light and dark themes

  3. Turn the design export into a Next.js page with a small converter script

  4. Compare the built page with the prototype, scroll point by scroll point

  5. Test the booking flows and the phone layout

8. Showcase

Flex Academy hero on a phone in dark and light themes
The hero on a phone, dark and light

Thank you

For taking the time to explore this project.

All projects