Timeline 12 block design & features
Timeline12 is a tabbed timeline section built with Shadcn UI, centered under a large semibold heading. Four tabs sit in a transparent tab list styled with bottom-border indicators instead of filled backgrounds. Selecting a tab reveals a two-column content pane: the left side shows a monospace date, a large heading, a description paragraph, and a pill-shaped outline download button; the right side displays an image inside a rounded shadcn Card with a muted inner border.
Tab triggers show a phase number in muted monospace alongside the phase title. The active tab picks up a solid foreground bottom border while inactive tabs remain unadorned. Content images animate in with a Framer Motion fade-and-slide transition on each tab switch, and the image scales down slightly on hover via a CSS transition inside the card.
The overall style is clean and step-based, framing each phase as a standalone content view rather than a traditional linear timeline. The large heading and generous whitespace give the section a presentation-deck quality.
On smaller screens the two-column content area stacks, placing the text above the image card. Tab labels hide the phase number and show only the title to save horizontal space.