Timeline 5 block design & features
Timeline5 is a sticky-scroll timeline section built with Shadcn UI, split into two columns. The left column contains a bold heading with a sparkle-decorated "AI" label and a supporting paragraph, pinned in place as the user scrolls. The right column holds three stacked muted cards, each displaying a large Lucide icon, a monospace sequence number in the top-right corner, a semibold title, and a description in muted text.
Cards use a muted background with rounded corners and generous padding that increases at each breakpoint. The sequence numbers render in a large monospace face, giving each card a clear ordinal anchor. Icons sit at full width above the text content. No borders or shadows are applied to the cards; the muted fill provides the only surface distinction.
The overall feel is modern and scroll-narrative, using the sticky left column to maintain context while the user reads through sequential steps on the right. Complexity is low because the data array is hardcoded and no interactive state is involved beyond the native scroll behavior.
On smaller screens the two columns stack, removing the sticky behavior so the heading scrolls normally above the card list.