# Integrations Hero block

> Integrations Hero With An Isometric Grid Of Floating Brand Tiles

Split marketing hero for an integrations or MCP product: outline badge, two-line headline, subtitle, blue primary action with an outline companion, an assurance row under a separator, and an isometric grid of eleven extruded brand tiles floating over a masked ground plane with a dot field backdrop.

- Type: Pro block
- Category: [Hero](https://web.dev.reui.io/blocks/marketing/hero.md)
- Page: https://web.dev.reui.io/blocks/marketing/hero/hero-5
- MCP: `get_block("hero-5")`
- Built with: Badge, Button, Separator
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A near black integrations pitch beside 11 brand tiles on an isometric floor, each naming its latest sync or event on hover

## Agent notes

- Replace the 11 entries in `DESIGN_TILES`: each tile's `mark`, `name` and hover `event` text such as Synced 2m ago are sample values
- Connect MCP and Browse integrations pass `render` an anchor to a bare hash; wire them to your connect flow and your catalog
- `HERO_ASSURANCES` lists 3 plain strings that `Hero` gives the same check icon, so add or cut lines in the array

## When not to use

- A closing banner lower on the page that repeats one integrations ask: use [MCP Integrations CTA](https://web.dev.reui.io/blocks/marketing/cta/cta-13.md) (`get_block("cta-13")`)
- A pitch for your own blocks drawn as raised product cards, not brand tiles: use [Capability Chips Hero](https://web.dev.reui.io/blocks/marketing/hero/hero-3.md) (`get_block("hero-3")`)

## Third-party libraries

- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react) (the docs follow the latest Motion, with no React API break since v12)

## Install

```bash
npx shadcn@latest add @reui/hero-5
```

## About Hero blocks

### When to use

- The first screen of a landing page: a headline, a lede and the actions a visitor takes first
- A launch pitch beside the product itself, as a rebuilt console, an isometric scene or a carousel
- A waitlist signup that collects an email above the fold, or trust shown by ratings and logos

### When not to use

- A working sidebar layout for the signed in product, not a decorative picture of one: use the [App Shell blocks](https://web.dev.reui.io/blocks/application/app-shell.md)
- A closing band lower on the page that repeats one signup or upgrade ask: use the [CTA blocks](https://web.dev.reui.io/blocks/marketing/cta.md)
- A storefront opener that sells goods, with prices, a product mosaic or a cart: use the [Shop Hero blocks](https://web.dev.reui.io/blocks/ecommerce/shop-hero.md)

### Agent notes

- `Hero` takes no props and renders the page `h1` from copy written inline in components/hero.tsx; keep it the only h1 on the page
- No call to action reaches a route or backend: links point at an `href` hash, form submits only set local state and the rest have no handler
- Each section sets its own `px-4` and `py-12` padding and a `max-w-7xl` track; strip them when your layout already pads content

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.