Team & Mission

Installation

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

Usage

The file also exports about1Demo, 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 { About1, about1Demo } from "@/components/blocks/about/about1";

export default function Page() {
  return <About1 {...about1Demo} />;
}

Props

Types

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

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

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};

Behavior notes

• The badge, heading, and description block only renders when at least one of the three is set, so a section with none of them collapses cleanly instead of leaving empty spacing.
• stats renders in a fixed 2-column grid regardless of item count; five or more stats wrap to a third row rather than reflowing to three columns.
• team also renders in a fixed 2-column grid; each avatar falls back to initials built from the first letter of up to two space-separated words in the member's name when no avatar image is supplied.
• The mission column and the team column are independent: mission and stats render whether or not team has entries, and vice versa.
• Every button defaults to variant "default" unless it sets its own variant; there is no alternating default/outline behavior across the list.