React CTA Section with Scattered Customer Avatars

Pro

A light, rounded panel with a simple message in the middle, Ready to get started?, a sentence and a black pill button with an arrow. Around it, ten round faces of different sizes are scattered towards the left and right edges, like a crowd gathered around the invitation.

CTA Section With Scattered Avatars block preview

A crowd around the call to action

CTA Section with Scattered Avatars is a React and Tailwind CSS call to action section that frames a centred message and button with customer avatars scattered at different sizes and positions. It runs in Next.js or any React app, in light and dark.

Scattered faces say community without a number. Unlike an avatar stack with a count, which invites scrutiny of the figure, a loose ring of people makes the space feel populated and friendly, and keeps all the attention on the centre.

Each avatar carries its own position and size, so the composition is fully in your control: you decide who sits where and how prominent they are.

Panel and avatars

Scaled heading

The heading grows from 28px to 40px across breakpoints, and the panel adds padding on larger screens so the avatars have room around the copy.

Rounded panel

A light grey panel up to 1080px wide with a 32px radius and a minimum height of 340px, 400px from 640px, turning near black with a faint ring in dark mode.

Scattered avatars

Ten round photos, each placed by its own className with left, top and size utilities, ignoring pointer events so they never block clicks.

Centre copy

An h2 and a lede capped at about 440px for a short, centred read.

Arrow button

A black pill with an arrow in a white circle, with its label as the accessible name.

When scattered faces work

Use it when

Light and dark themes, since the panel and the button both invert cleanly.
Events, courses and cohorts where the people are the product.
Community products, marketplaces and consumer apps.
You want warmth without quoting a customer count.
A final CTA with one action.
You have ten or so photos of real customers or team members you may show.

Skip it when

You need the avatars to link to profiles or reviews; they ignore pointer events by design.
Your photos vary a lot in lighting and background, which looks messy when scattered.
You want to avoid placing each avatar by hand; positions are part of the data.
Phones are the main audience and you need every face visible; small screens leave less room around the copy.
Your brand avoids people imagery.
You need two buttons.

Place the avatars

avatars takes src, alt and className. The className positions and sizes each face, for example left-[7%] top-[16%] size-14 sm:size-16. Keep the left group under about 30 percent from the left and the right group beyond 70 percent so the centre stays clear, and vary sizes to create depth.

headline, lede, ctaLabel, ctaHref and onCtaClick set the centre. The default lede mentions thousands of happy customers; write something you can support.

Use larger avatars nearer the corners and smaller ones closer to the copy. That creates depth and keeps the heading and button as the clear centre of the panel.

npx wensity@latest add cta-section-with-scattered-avatars --type block

page.tsx

import { ScatteredAvatarsCta } from "@/components/wensity/blocks/cta-section-with-scattered-avatars";

export function CommunityCta() {
  return (
    <ScatteredAvatarsCta
      headline="Join the next cohort"
      lede="Twelve weeks, one project, a group that ships together."
      ctaLabel="Apply now"
      ctaHref="/apply"
      avatars={[
        { src: "/alumni/1.jpg", alt: "", className: "left-[6%] top-[18%] size-14 sm:size-16" },
        { src: "/alumni/2.jpg", alt: "", className: "left-[20%] top-[62%] size-10" },
        { src: "/alumni/3.jpg", alt: "", className: "right-[8%] top-[22%] size-16" },
        { src: "/alumni/4.jpg", alt: "", className: "right-[22%] top-[66%] size-11" },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
`avatars`	{ src: string; alt: string; className: string }[]	-	Each face with its own position and size classes.
`headline`	string	"Ready to get started?"	The centred heading.
`lede`	string	-	One or two lines under the heading.
`ctaLabel / ctaHref / onCtaClick`	string / handler	-	The arrow button.

Details from the source

Inverting button

The pill turns white in dark mode and its arrow circle turns black, with a visible focus ring in both themes.

Clicks pass through

The avatars ignore pointer events, so they never cover the button or text selection.

Decorative faces

If the avatars are decoration, pass empty alt text as in the example so screen readers skip them.

Ten images

Each avatar is a separate request. Serve small, square files.

Static

No animation or state, so nothing to reduce and nothing to hydrate beyond markup.

Responsive sizes

Size classes can differ per breakpoint, as in the defaults, so faces can shrink on phones to protect the copy.

Block details

CTA Section With Scattered Avatars

Category: CTA Sections
Renders: CSS only. Paints as soon as the stylesheet arrives
Theme: Follows the site theme in light and dark
Dependencies: clsxtailwind-merge
Source: 140 lines, 5 KB in one file
Install: wensity add cta-section-with-scattered-avatars --type block
Tags: light, dark, cta, avatars, community, conversion
Last updated: October 13, 2026