Cards or sections? How should you showcase courses on a Kajabi website?

It depends on what you want visitors to see first.

Course cards are great when you want to show the full picture at a glance – “Here are all the programs we offer.” They make the product range clear before visitors start scrolling.

Separate sections work better when each course needs more attention – its story, audience, benefits, and outcomes.

When we design Kajabi websites, we don’t use one layout for every course.

We choose the structure that makes the offer easier to understand – and easier to explore.

Cards

Sonder One: product site for a repairable headphone

Sonder One is a headphone built to be taken apart, so this site shows it that way. As you scroll, the headphone comes apart piece by piece, from the finished pair down to its six parts, with each part labelled as it separates.

The site responds to the mouse throughout. The custom cursor holds a small sound wave that grows as you move faster. Headlines are made of soap bubbles that float up under the cursor. Guide boxes with live coordinates follow the pointer, and product photos tilt and catch the light as you pass over them.

There are three pages: Object, Anatomy and Specifications, with smooth transitions between them and a reserve form on the last page. A light and dark mode lets you view the product in chalk white or graphite.

Built with React, GSAP ScrollTrigger, Lenis, Three.js and Vite.

Good work!