Milestone Lanes Awards Block for React

Edit PAIRS: each pair holds a milestone (a date and a title) and the award that followed it (a date, title, programme, category and shape). The quarter of each date places it on the axis, so keep each award in the quarter after its milestone, the way the connectors are drawn. The header and the "N months later" labels are counted from the dates.

monthsBetween takes the days between the milestone and the award, divides by 30.44 and rounds, never below one month, so 4 February to 30 May reads "4 months later". The header names the shortest and longest gap in the list.

It is set up for eight columns: QUARTERS and the COL_START classes are both eight long, and the grids use grid-cols-8. For a longer axis, extend those three together; the classes are written out so Tailwind generates each one.

Two lists, "Milestones" and "Awards". Each award reads its title, its programme and category, its date, and then the gap with the milestone it followed ("3 months later, after 1,000 customers"). The axis, the diamonds and the steps are hidden drawings.

One list of pairs: a milestone with its date and title, and under it, behind a short vertical line, the gap and the award. Below lg the lane layout is hidden, so only one version is ever read.

No. Time runs from the start of the axis to its end the same way in any language, so the lane area keeps its own direction while the rest of the block follows the page.