Split Layout Hover Cards Hero Block for React

Edit CARDS at the top of the file: each card has a Lucide icon, a title, a description and a meta line for the proof. Keep descriptions to a line or two so the cards stay about the same height. The links all point to #; point each at the feature's page.

Each card is a link with a CSS transition: under the pointer it moves up two pixels, takes the card background and a shadow, and its icon tile fills with the foreground colour, over 200 ms. Keyboard focus does the same, plus a focus ring. The lines around the card live inside it, so they lift with it. With reduced motion on, the card doesn't move, but the background, shadow and icon still change. Touch screens have no hover, so the cards simply sit still.

Each card holds <Guides extend="md" marks="start" />, whose solid hairlines run 1 rem past the corners, which is why the cards sit 2 rem apart. The divider is a border-s on the cards' cell with a + mark where it meets the section's top rule, and below lg it becomes a rule between the stacked parts.

It reads the badge, the headline (the block's one h1), the paragraph and the two links, then the cards as a list of three links, each named by its title and description. Give each link a distinct title, since a screen reader lists links by name. The icons, the arrows and the lines are hidden from screen readers.

The parts stack below the lg breakpoint, with the cards under the copy at the panel's full width so each description has room to wrap, down to 320 px. The Shine Button sits on the first screen.

The copy fades and rises in on load, and the cards slide in from the end side, one after another; in a right-to-left page they come from the other side. It's all CSS, with no animation library. With reduced motion on, everything appears in place and the cards don't lift.