Story, Image & Team Row

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, avatar, avatar-initials, media-slot 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/about/about23.tsx instead.

Usage

The file also exports about23Demo, 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 { About23, about23Demo } from "@/components/blocks/about/about23";

export default function Page() {
  return <About23 {...about23Demo} />;
}

Props

Types

type StatItem = { title: string; value: string };

type TeamMember = {
  name: string;
  role: string;
  avatar?: { src: string; alt: string };
};

type LeadershipQuote = { text: string; name: string; role: string };

Behavior notes

• Unlike About1's team grid, the right column here holds a single photo with a small avatar row underneath, so it reads as "this is our office and these are the people in it" rather than a directory.
• The quote is always rendered (it is required, not optional) as a border-l blockquote under the stats, distinct from About4 which centers its quote as the entire hero and from About15 which treats its signature as a letter sign-off rather than a pull quote.
• stats renders in a fixed 3-column grid, narrower than About1's 2-column stat grid, since it shares the left column with both the story paragraph and the quote below it.