Gantt Roadmap About Block for React

The lanes are LANES at the top of the file. Each lane has bars, and each bar has a title, a sentence, the horizons it spans in words (horizon), its progress from 0 to 100 and a place: the Tailwind classes that put it on the board from md up (md:col-start-1 md:col-span-2 for a bar over Now and Next). Bars in one lane that don't overlap share its row; add md:row-start-2 to a bar that needs a second row. The three horizons are HORIZONS.

That the work has started in the first horizon and will finish in the second. Its progress fill says how much of the whole bar is done, and its badge spells the span out ("Now to Next") so the meaning never depends on position. A bar in Later with 0% is simply not started.

Each lane is a section with an h3, each bar is a list item with an h4, and the horizons on the board's header are an ordered list that disappears on a phone, where the badges say the same thing. The progress fill is decorative: the percentage next to it, or "Not started", is the text. Nothing is conveyed by colour.

That one moves cards between status columns. This one is about time: three horizons across, lanes by theme down, and bars that stretch across the horizons they cover, with their progress shown. It is static and ends the page's about section with the plan, not a board to work in.

Below md the three columns and their hairlines are dropped and each lane stacks its bars in one column, full width, under the lane's name and note. A bar's badge keeps the horizons it spans, so a reader still sees when it lands. Nothing scrolls sideways at 320 pixels, and the percentages keep their order in a right-to-left layout.

The header and the board fade up once on load with CSS transitions, and the progress fills ease to their width. With reduced motion the entrance is off and the block simply appears. There is no script and nothing else moves, so the block can render on the server.