Feature 90 - Integration hero with overlapping logo circles

Pro

Centered headline, description, and button above a row of overlapping circular logo avatars with a count link beneath.

Vue
Shadcn Feature 90 block

Component Data

  • ID:feature90
  • Access:pro
  • Created:Oct 9, 2024
  • Type:block

Feature 90 block design & features

Feature90 is a centered integration showcase built with shadcn/ui. At the top sits a large extrabold balanced heading, a muted description paragraph, and an outline button. Below, eight circular containers overlap horizontally using negative spacing, each holding a logo image on a muted background with a background-colored border to create visual separation. A small text line with an underlined link closes the section at the bottom.

The logo circles use viewport-relative sizing with minimum and maximum constraints so they scale smoothly from mobile to desktop. Each circle carries a two-pixel border matching the page background color, which produces the overlapping stack illusion. The section itself applies a faint muted background tint. Typography is bold and large for the headline, stepping down to standard muted body text.

The overall style is concise and social-proof-oriented, using the stacked logo row as its central visual hook. The layout is intentionally single-focused with no cards or grids, keeping attention on the headline promise and the cluster of brand marks. Complexity is low since you only supply logo images.

On smaller viewports the circles shrink proportionally through the viewport-width sizing, maintaining the overlap without breaking into multiple rows.