Timeline Hero Block for React

Edit the MILESTONES array at the top of the file. Each milestone has a when label, a title, a description and a stage: "shipped", "current" or "planned". The stage picks the dot from the DOT table, the badge beside the label and the tint of the current row, so there's nothing else to change. The list takes any number of milestones; the line runs the full height of the band, and each row fades in 90 ms after the one before.

Fixed dates go stale: a "current" milestone dated last year makes the whole page look abandoned. Labels relative to your launch ("Month 4") or to today ("This quarter", "Next quarter") stay true until you change the stages. If you'd rather show real dates, put them in when and update the stages when you ship, or render the list from your roadmap data so it moves on by itself.

The milestones are an ordered list, so a screen reader announces four items in order. Each title is an h2 under the page's h1, so the milestones can be reached by heading. The stage is text, not only a mark: the Current and Planned badges are read as they're shown, shipped milestones carry a visually hidden "Shipped", and the current item is marked aria-current="step". The line and the dots are decorative and hidden from assistive technology.

Fading a whole row to 60% opacity, as many timelines do, drops its description below the 4.5:1 contrast that body text needs. Here the planned row keeps full-strength text and says it's ahead in other ways: a dashed dot and an outline Planned badge. If you want it quieter, dim its dot, not its text.

It's one column at every width: below the md breakpoint the line and the dots sit at the start edge, with the time label above each title and the text taking the rest of the row; from md the label has its own column before the line. The headline drops from text-6xl to text-4xl and the buttons wrap at the narrowest widths. In right-to-left languages the line, the dots and the padding move to the other edge, since they use logical properties (start, ps).

Use a timeline when milestones span months or years and you want to show where the product has been and where it's going. Use a changelog for versioned releases with their details, and a steps hero for a process the visitor follows, such as sign up, connect and deploy.