MAD bikes

New dream bike?

On a daily basis, I’m passionate about cycling in all its forms – the romantic kind, where watts and perfect cadence don’t really matter, but rather the surrounding nature and the right number of stops for coffee and ice cream; and the extreme kind, where speed on the descent narrows your field of vision, the suspension works through its full travel, and the sight of the next jump triggers an uncontrollable rush of adrenaline (and endorphins – assuming a successful landing…).

Inspired by a project I stumbled upon on dribbble.com, I decided to combine one passion with another and create a product landing page featuring an AI-generated trail/enduro bike. A short video in the hero section, some technical specs, shots highlighting key components, bold typography – all blended together and seasoned with a pinch of GSAP animations – could be the perfect recipe for a product presentation that’s a real pleasure to experience.

technical aspects

I built MAD Bikes using Next.js – even though I usually work with Vue and Nuxt.js, I like to stay up to date with other technologies and frameworks for building websites and applications.

The site uses GSAP for both simple and advanced animations – ScrollTrigger, Timeline, and methods like gsap.set, gsap.from, and gsap.to can be found in almost every component.

CSS – as always – is powered by TailwindCSS, this time in version 4.1.7.

Stack