Split Layout Progress Tracker Hero Block for React

Edit STEPS. Each step has a title, a meta (what the client sees at the step's end: Done, Due Friday) and a status: complete, active or pending. Everything else follows from the list: the summary counts the complete steps, the percentage and the Progress bar are worked out from that count, and each step's marker and line take their look from MARKER and LINE. Add a sixth step, or finish the third, and the tracker stays consistent. The current step's upload count comes from FILES.

Map each step to an event in your product (agreement signed, brief submitted, assets uploaded) and set its status from the client's record: complete once the event has happened, active for the first step that hasn't, pending after it. If the tracker becomes the client's real checklist rather than an illustration, take aria-hidden and inert off the figure, give the list a name, and make each unfinished step a link to where it's done.

Because it's a picture of a tracker, not a wizard. Steps moves through content with triggers and Back and Next buttons, and its triggers take focus; here nothing is meant to be used. The tracker is a plain ordered list with CSS markers, and the figure is aria-hidden and inert. For a real multi-step flow in a hero, use Steps.

The headline is the block's one h1, and the pill and both calls to action are links named by their text. The figure is decoration, so it's hidden from screen readers and nothing in it takes focus; the sentence beside it already says what the product does.

The two columns stack below the lg breakpoint, with the tracker under the copy at full width, so the actions stay on the first screen. The line between markers is drawn from each step's top to its bottom rather than at a fixed length, so it stretches with the layout, and the markers and line use logical insets, so they move to the other side in right-to-left layouts.

Use the tracker when your product's value is a sequence, setup wizards, onboarding and compliance flows where one step unlocks the next, and you want to show progress through it. Use a checklist hero when the items are features with no order or state.