Avatar Wall CTA

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, avatar-initials, button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta35.tsx instead.

Usage

The file also exports cta35Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Cta35, cta35Demo } from "@/components/blocks/cta/cta35";

export default function Page() {
  return <Cta35 {...cta35Demo} />;
}

Props

Types

interface WallMember {
  name: string;
  avatar?: { src: string; alt: string };
}

Behavior notes

• The avatar wall is decorative texture (`aria-hidden`), not a live member directory; the overlay card holds the section's real, accessible content.
• Most avatars fall back to initials (via `AvatarFallback`/`initialsFromName`) rather than requiring a photo per member, keeping the grid cheap to fill out with placeholder data.
• The overlay card uses `bg-background/90 backdrop-blur` so the avatar wall stays visible through it; fully static layout, no scroll or hover animation.
• The join button is an inert link, not wired to a real signup flow.