Iterating a Landing Page with AI: The Before/After Slider That Changed Everything

Starting Point: A Landing Page That Doesn't Explain Itself

The landing page from last week was functional but had a fundamental problem: the hero section didn't communicate what SportsSync actually does. There was a cycling photo with a gradient overlay and some text, but nothing that showed the core value — the difference between raw footage and footage with telemetry data overlaid.

I came into this session with a checklist of fixes and a Photoshop mockup showing what the hero should look like: a cycling photo with speed, heart rate, cadence, power, altitude profile, and route map overlaid — the same data visualization that Safa Brian's team produces manually with Final Cut Pro.

Community Feedback That Shaped the Direction

Two comments from the previous episode changed the plan entirely.

The first suggested creating a version of the logo with white text for the dark footer background, instead of the hacky white background container I'd used to fix the contrast issue. Simple, correct, and something I should have thought of.

The second was the game-changer: a horizontal before/after slider, like the ones Magnific AI uses to showcase their image upscaling. The idea was elegant — show the raw cycling footage on one side and the telemetry-enhanced version on the other, with a draggable divider in the middle. Land on the page, see the split, drag to explore. No explanation needed.

Building the Overlay Mockup in Photoshop

Before I could build the slider, I needed the "after" image — a cycling photo with the telemetry overlay. Since the MVP doesn't exist yet, I built it in Photoshop.

The visual language draws from Safa Brian's style: speed in large numbers at the bottom, heart rate and cadence on the side, an altitude profile along the bottom edge, and a small route map. I used one of my own cycling videos as the base image — a ride through Catalonia captured from a chest-mounted GoPro.

The key design decision was showing the route progress: the portion already ridden appears brighter, while the remaining section is slightly faded. It's a subtle detail, but it immediately communicates movement and progress through a ride.

The Slider: When Lovable Gets It Right

I asked Lovable to implement a horizontal comparison slider on the hero image. What happened next was genuinely impressive.

Lovable understood the concept immediately. It created a draggable vertical line that reveals the "with data" image on one side and the "original" image on the other. It even picked up on the brand colors, using orange for the slider controls.

The first version had issues — a circular handle with arrows that cluttered the clean line, the images not maintaining their aspect ratio, and some JavaScript glitches in the sandbox preview. But the core interaction worked.

After several rounds of iteration:

• Removed the circular handle, leaving just a clean vertical line
• Made the line draggable by click-and-drag, not just by clicking positions
• Added subtle arrow indicators for affordance
• Prevented accidental image dragging that was interfering with the slider
• Fixed the aspect ratio to maintain 16:9 regardless of viewport width

The result was the single most effective element on the landing page. You land on the page, you see a split cycling image, you instinctively drag the line, and in one second you understand exactly what SportsSync does. No copy needed. No explanation. The interaction IS the explanation.

The Frustrating Parts: Image Ratios and Spacing

Not everything went smoothly. Maintaining a 16:9 aspect ratio for the hero image while keeping it responsive turned into a 30-minute battle. Lovable kept either cropping the image (cutting off the telemetry data at the top), stretching it (destroying the composition), or adding unwanted blank spaces above and below.

The problem was fundamentally about competing constraints: I wanted the image to always show all the overlay data, maintain its ratio, and fill the hero section appropriately. Every fix for one constraint broke another. This is the kind of CSS layout challenge that's genuinely hard to communicate conversationally — you need to understand object-fit, aspect-ratio, and container sizing simultaneously.

I eventually got it working, but it required more manual intervention than I expected. Lesson learned: precise visual layout work is where conversational AI tools hit their limits. They're great at structural changes and feature additions, but pixel-perfect responsive behavior still needs a human eye and often manual CSS adjustments.

What Got Cut

Several planned improvements didn't make it into this session:

Social media icons — I wanted YouTube, Instagram, and Strava logos in the hero section. Found them, started placing them, but they added visual clutter that competed with the slider. Removed them. They might work lower on the page.

Mobile optimization — The slider works on desktop but mobile needs specific attention. The touch interaction is different from mouse dragging, and the image composition needs to work at portrait ratios. Deferred to a future session.

Section spacing — The vertical rhythm between sections (How It Works, Community, Pricing) needed adjustment. Too much padding in some places, too little in others. I started fixing it but the hero slider consumed most of the session time.

The Thumbnail Experiment

A quick aside: I noticed YouTube was showing each subsequent episode to fewer people. The thumbnails were all identical except for the episode number, which YouTube's algorithm probably interpreted as repetitive content. I'm planning to create unique thumbnails for each episode going forward — something that actually shows what happens in that specific video rather than a generic series template.

What the Landing Page Teaches About Product Communication

The before/after slider reinforced something I already suspected: showing is infinitely more powerful than telling. All the copy about "connect your GPS data" and "overlay telemetry in the cloud" communicates the feature set, but one drag of the slider communicates the experience.

This has implications for the entire product. The MVP needs to produce overlay quality that's impressive enough to be its own marketing. If someone renders a short with SportsSync and shares it on Instagram, that short IS the ad. The overlay quality is the growth engine.

Current State

The landing page is live at sportssync.io with:

• A working before/after slider in the hero section
• Brand colors and typography applied throughout
• Basic section structure (How It Works, Community, Pricing)
• Custom domain with DNS configured

Still needs:

• Mobile optimization
• Real product screenshots (once MVP exists)
• Refined copy that matches the current product vision
• Footer logo contrast fix
• Section content and imagery

Next: we start building the actual product.