React Contact Us CTA with Team Avatars for the End of an FAQ

Pro

The section that belongs right after an FAQ. Three faces from your team overlap in the middle, the centre one in front, above a heading that asks Still have questions we haven't answered?, a line about how quickly you reply, and a blue Contact us button.

CTA Section With Centered Contact Avatars block preview

A human way out of the FAQ

CTA Section with Centered Contact Avatars is a small React and Tailwind CSS contact CTA that shows team avatars, a question and a contact button, designed to sit at the end of an FAQ or help page. It runs in Next.js or any React app, in light and dark.

When an FAQ does not answer someone's question, the worst outcome is a dead end. A short block with real faces and a promise of a reply gives them a next step and makes writing in feel like talking to people rather than filing a ticket.

At 76 lines it is the smallest block in the library, which makes it easy to read, adapt and drop into any page.

What is in the card

Scaled heading

The question grows from 22px on phones to 28px on large screens, and the lede stays under 420px wide so it reads as one or two lines.

Inset frame

A white outer card, up to 920px wide with a soft shadow, framing a pale grey inner panel. In dark mode both turn near black with a faint ring.

Avatar trio

Three overlapping photos with the middle one raised in front, each with alt text from props.

Question heading

An h2 phrased as the visitor's own question.

Reply promise

One line saying when to expect an answer.

Contact button

A blue button with its label as the accessible name, a link and an optional click handler, for example to open a chat widget.

Best placement

Use it when

Docs and help centres that end every article with a way to reach a person.
Directly under an FAQ, help article or pricing questions.
You have a real support team whose photos you can show.
You can commit to a reply time.
You want a small block rather than a full contact section.

Skip it when

Your support hours are limited and you cannot promise a reply time in the lede.
You support customers through a bot only; faces would mislead.
You need the form itself on the page.
You want more than three people shown.
The page has no questions above it, where the heading would read oddly.

Faces, promise and destination

avatars takes src and alt; three is the designed number and the middle one sits on top. Use people who actually answer messages. lede should state a reply time you meet, such as within one working day.

Point ctaHref at your contact page, or use onCtaClick to open an in page chat or a mail client. headline can be changed, but phrasing it as the visitor's own question keeps the tone.

If the button opens a chat widget, pass onCtaClick, call preventDefault on the event and open the widget there, while keeping ctaHref pointed at a contact page so the link still works without JavaScript.

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

page.tsx

import { CenteredContactAvatarsCta } from "@/components/wensity/blocks/cta-section-with-centered-contact-avatars";

export function AfterFaq() {
  return (
    <CenteredContactAvatarsCta
      avatars={[
        { src: "/team/lea.jpg", alt: "Lea, support" },
        { src: "/team/omar.jpg", alt: "Omar, support lead" },
        { src: "/team/kim.jpg", alt: "Kim, onboarding" },
      ]}
      lede="Our team replies within four working hours, Monday to Friday."
      ctaLabel="Message the team"
      ctaHref="/contact"
    />
  );
}

Props

Prop	Type	Default	Description
`avatars`	{ src: string; alt: string }[]	-	Three team photos. The middle one overlaps the others.
`headline`	string	"Still have questions we haven't answered?"	The question shown under the faces.
`lede`	string	-	Your reply promise in one line.
`ctaLabel / ctaHref`	string	"Contact us" / "#contact"	The button and its destination.
`onCtaClick`	(event) => void	-	Optional handler, for example to open a chat widget instead of navigating.

Small block, small cost

No focus ring

The button has hover and press states but no explicit focus ring. Add focus-visible classes if your site's global focus style does not cover links.

Three images

The avatars are the only requests. Serve them at around 96px for crisp display at 2x.

Alt text

Each avatar takes alt text from props. Naming the person and their role adds warmth for screen reader users too.

No motion

No animation, no state. It renders identically on the server.

Theme aware

Frame, card and text switch with the dark class; the blue button stays the accent in both.

Block details

CTA Section With Centered Contact 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: 77 lines, 3 KB in one file
Install: wensity add cta-section-with-centered-contact-avatars --type block
Tags: light, dark, cta, avatars, contact, support, conversion
Last updated: October 13, 2026