Steps Timeline
Numbered steps timeline explaining how the product works.
Numbered steps timeline explaining how the product works.
The source for every block is part of All Access. One purchase unlocks the entire library, today and in the future.
The source for every block is part of All Access. One purchase unlocks the entire library, today and in the future.
A vertical "how it works" section that lays out four steps along a connected timeline. Each step pairs a circular icon node, rendered in your primary color, with a "Step N" label, a title, and a short explanation. A thin vertical line links the nodes down the column, giving the sequence a clear sense of progression from sign up to shipping.
bg-primary icon nodes joined by a connector lineThe steps come from a steps array of icon, title, and body. Add or remove entries and the connector logic, which hides the line after the final node, adjusts on its own. Pull different glyphs from lucide-react to match each stage. The nodes use bg-primary and text-primary-content, so they pick up your daisyUI theme's accent, while the connector uses bg-base-300 to stay subtle.
A call to action below it, inviting readers to take the first step they just read about.