Milestone Rail Testimonials Block for React

Edit the MILESTONES array at the top of the file. Each milestone has a rail label, a short headline, the quote and the speaker's name, initials and role. The rail grows or shrinks with the array, and OPENING is the index the page opens on; the milestones before it show their check. Keep the labels relative ("Month 6", not a calendar date) so the block never goes out of date.

The rail is one tab stop. Arrow keys, Home and End move focus between the milestones, and Enter or Space opens the one that has focus, so a quote never changes just because focus passed over it. Each milestone is a tab that opens a labelled panel, and the panel's headline is an h3 under the section's h2. The numbers in the circles are decoration; the milestone's name is what is read out.

The page spine (Guides bleed marks="top" rules="top") draws the rails and the top rule. The frame is a box inset from the rails with Guides extend="sm" marks="corners", so its four sides run half a rem past the corners with a plus on each; the line between the rail and the panel is a second Guides marks="top" rules="top" sides={false} on the panel's band. The rail's markers and separators use foreground tones (data-complete:bg-foreground), so the button is the only element in your primary colour.

The check is the Steps component's mark for a step that is behind the current one: opening Month 1 puts a check on Day 1 and Week 2, and opening Day 1 clears them all. It tells the visitor how far into the story they are, and nothing is saved between visits.

Under the sm breakpoint the milestone names are hidden visually and the rail keeps its five numbered circles, so it never scrolls sideways at 320px; the open panel starts with a badge that names the milestone, and screen readers still hear each name on the rail. The panel's two columns stack, and it is the same height for every milestone, so nothing below it moves when you switch. In a right-to-left page, set dir="rtl" and your direction provider: the rail, its separators and the arrow keys mirror, and each quote stays in a bdi, so its quotation marks keep their place.

The header and the frame fade up once on load, and a newly opened quote fades in over 300ms. All of it is CSS, and under reduced motion each part simply appears. Nothing plays by itself, so there is nothing to pause.

The Shine Button is a real link (href="#"): point it at the customer's case study. The button renders the link it's given with render, with nativeButton={false}.