Centered Integration Grid Hero Block for React

Edit the INTEGRATIONS array at the top of the file. Each entry is a name, a category shown under it ("Payments", "CI/CD") and an icon, any Lucide icon. The names are fictional placeholders: put your real integrations in their place, the ones visitors look for first. Twelve fill three full rows of four; eight or sixteen also leave no gap at every width.

Replace the icon inside each tile's icon box with the integration's logo, an img or an inline svg at the same size-5. The name is already written under it, so give the logo an empty alt (or aria-hidden on an svg) and the tile is still announced once. Monochrome logos in currentColor keep the panel quiet and follow light and dark mode.

Yes. The tiles are plain list items, not links, so nothing suggests a click that goes nowhere. To link them, wrap each tile's content in an a pointing at the integration's page, give the cell a hover style such as hover:bg-muted/50, and its name becomes the link's name. Keep the "Browse integrations" call to action for the full directory.

Yes. The headline is the page's one h1, and the panel's "Connected apps" heading is an h2. The tiles are a list named "Integrations", so a screen reader announces how many there are before reading each name and kind; the icons are hidden from assistive technology. The announcement pill is a link named by its text, and "200+" is isolated with bdi, so it reads the right way round in right-to-left layouts.

Both are links to #: point "Browse integrations" at your directory and "Request an integration" at a form. The first is a ShineButton, the block's one primary action; the second is an outline Button. On Base UI, each button renders its link with render={<a href="/signup" />} and nativeButton={false}.

Below the sm breakpoint the headline wraps, balanced, at text-4xl, and the two calls to action wrap onto centered rows, so both sit on the first screen. The tiles keep two columns down to 320px, wide enough for each name and its kind on one line; they grow to three columns at sm and four at lg. Twelve divides evenly into all three, so no cell is left empty.