Centered Three-Step Process Hero Block for React

Edit STEPS at the top of the file: each step has a title, a description and an id that picks the drawing under it (bank, clients or invoice). The number in its circle comes from its place in the list, so reordering them renumbers them. The drawings are three small components beside the block, BankDrawing, ClientsDrawing and InvoiceDrawing; swap one for your own screen, or remove the id branch to leave a step without one. The grid has three columns from the md breakpoint, so with a different count change md:grid-cols-3 to match.

Put an <a> inside each step's h2, around the title, so the heading stays a heading and the link says where it goes. To make the whole step clickable, stretch that link over it with an after:absolute after:inset-0 pseudo-element on a relative cell and add a hover background to the li. Keep the number circle and the drawings outside the link: they're decorative.

The steps are an ordered list, so a screen reader announces three items in order. Each title is an h2 under the page's single h1, read as "Step 1: Connect your bank", with "Step 1" in visually hidden text, so someone jumping between headings still hears the order. The numbered circles and the drawings are hidden from assistive technology, since the list, the heading and the description already carry them.

Below the md breakpoint the steps stack in one column, divided by hairlines, each with its circle, title, description and drawing in reading order. The two calls to action sit side by side or wrap onto two lines at the narrowest widths, and the whole first screen, headline to buttons, fits above the first step. From md the three cells sit side by side, split by vertical hairlines, with the drawings level along their foot.

On load, the headline and the sentence fade up, then the buttons, then each step a beat after the one before. It's all CSS transitions on first paint, with no animation library and no JavaScript, so the block stays a server component. The Shine Button's light sweeps once on hover, focus or press; with reduced motion everything appears in place at once and the light fades in where it stands.

Use steps when order matters: an onboarding flow, a setup, a process where step two needs step one. The numbers say "this is a journey, and it's short". Use feature cards when the points are independent and a visitor can read them in any order; numbering them would suggest a sequence that isn't there.