Left Right Icon CTA with Facts Footer Block for React

Swap the Lucide icon inside the tile, edit the heading and paragraph, and change FACTS at the top of the file: each fact has an icon and a line of text. Two to four facts fit; they sit in a row on wide screens and wrap onto more lines on narrow ones.

It's a link: change the href on the anchor inside the Shine Button to your marketplace listing, install page or docs. Add query parameters there if you attribute where installs come from. Keep the label saying where it goes, "Add to repository" here, rather than a generic "Learn more". The button renders the link it's given with render, with nativeButton={false}.

The three facts are samples. Replace them with ones that are true of your product, and keep them checkable: a list of supported languages, a setup step count you have timed and a licence you have published. This block deliberately has no adoption figures such as "used by 1,200 repositories", since those go stale and need a source.

The headline is an h2, the icon tile is decoration and hidden, and the facts are a list whose icons are hidden too, so it reads "Works with Node, Python, Go and Rust" and the rest as three list items. All the text is in your theme's muted foreground at full strength, which keeps its contrast at AA in light and dark.

Below the md breakpoint the icon and text stack above a full-width button, and the facts in the tray wrap under each other. Nothing has a fixed width, so it reads at 320 pixels without scrolling sideways.