About this block

Centered With Integration Diagram is a centered hero with a hub and spoke graphic under the copy. The headline, lede, and two CTAs sit above a diagram of six integration chips arranged around a filled Acme node, joined by dashed curved paths drawn in a decorative SVG layer. The chips are bordered pills with lucide icons, the hub is a primary colored card, and every stroke uses theme tokens, so the whole diagram inverts cleanly in dark mode. The hero ships without its own header.

The six integrations are a plain array of label and icon pairs, so swapping categories means changing imports and strings, not geometry. On small screens the connector SVG hides and the chips fall into a simple two column grid with the hub centered, which keeps the diagram honest on phones instead of squeezing the curves.

When to use

Reach for this block when the pitch is connectivity: integration platforms, automation tools, or any product whose value is sitting in the middle of an existing stack. It says ecosystem faster than centered-with-feature-pills says features, and it suits a connectivity story better than with-kanban-preview or centered-with-browser-mockup, which sell a destination app instead of a hub.

A natural flow around it on a Marketing Pro page:

Before

• A navigation header to anchor the page before the hero fills the fold

After

• Features to explain what happens once the stack is connected
• FAQs to answer the inevitable does it work with mine question

What you can display

One strong use is a marketing stack hub joining email, CRM, chat, calendar, analytics, and a warehouse. Other arrangements:

• Data platform. Sources on top, destinations below, with the hub as the pipeline in the middle.
• Support ecosystem. Helpdesk, docs, chat, and community around a shared inbox product.
• Commerce stack. Storefront, payments, shipping, and ads around an operations hub.

Tip: six chips is the sweet spot, four feels thin and eight starts to tangle the connector curves on medium screens.