{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-2",
  "title": "Department Badge Grid",
  "description": "Team grid of six people in a hairline-divided layout, each with an avatar, name, role, department badge, and one-line bio.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "avatar",
    "badge"
  ],
  "files": [
    {
      "path": "registry/blocks/team/2/team-block.tsx",
      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\n\nconst members = [\n  {\n    name: \"Clara Hoffmann\",\n    role: \"Chief Executive Officer\",\n    department: \"Leadership\",\n    bio: \"20 years scaling enterprise software from seed to IPO across three continents.\",\n    avatar: \"https://i.pravatar.cc/300?u=clara-h\",\n  },\n  {\n    name: \"Marcus Tran\",\n    role: \"Chief Technology Officer\",\n    department: \"Engineering\",\n    bio: \"Former Staff Engineer at Google. Obsessed with distributed systems and developer experience.\",\n    avatar: \"https://i.pravatar.cc/300?u=marcus-t\",\n  },\n  {\n    name: \"Amara Osei\",\n    role: \"Head of Design\",\n    department: \"Design\",\n    bio: \"Crafts interfaces that win awards and convert users, rarely a coincidence.\",\n    avatar: \"https://i.pravatar.cc/300?u=amara-o\",\n  },\n  {\n    name: \"Lena Kovač\",\n    role: \"VP of Engineering\",\n    department: \"Engineering\",\n    bio: \"Led platform migrations at Stripe and Figma. Turns technical debt into roadmap wins.\",\n    avatar: \"https://i.pravatar.cc/300?u=lena-k\",\n  },\n  {\n    name: \"Daniel Reyes\",\n    role: \"Head of Product\",\n    department: \"Product\",\n    bio: \"Zero-to-one product thinker. Launched features now used by 4 million people.\",\n    avatar: \"https://i.pravatar.cc/300?u=daniel-r\",\n  },\n  {\n    name: \"Sophie Laurent\",\n    role: \"Head of Marketing\",\n    department: \"Marketing\",\n    bio: \"Turned brand storytelling into a growth engine, twice, at companies you know.\",\n    avatar: \"https://i.pravatar.cc/300?u=sophie-l\",\n  },\n]\n\nfunction getInitials(name: string) {\n  return name\n    .split(\" \")\n    .map((part) => part[0])\n    .join(\"\")\n}\n\nexport default function TeamBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-20 text-foreground\">\n      <div className=\"mx-auto w-full max-w-5xl\">\n        <div className=\"mx-auto max-w-2xl text-center\">\n          <Badge\n            variant=\"outline\"\n            className=\"mb-5 px-3 py-1 text-xs tracking-widest uppercase\"\n          >\n            Meet The Team\n          </Badge>\n          <h2 className=\"font-heading text-4xl font-bold tracking-tight sm:text-5xl\">\n            The people behind Acme\n          </h2>\n          <p className=\"mt-4 text-base text-muted-foreground\">\n            Founders and leaders who have shipped products used by millions.\n            Relentlessly focused on craft, speed, and customer impact.\n          </p>\n        </div>\n\n        <div className=\"mt-14 grid grid-cols-1 gap-px overflow-hidden rounded-xl border border-border bg-border sm:grid-cols-2 md:grid-cols-3\">\n          {members.map(({ name, role, department, bio, avatar }) => (\n            <div\n              key={name}\n              className=\"group flex flex-col gap-5 bg-card p-6 transition-colors duration-200 hover:bg-muted/40 sm:p-8\"\n            >\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"size-16 border border-border\">\n                  <AvatarImage\n                    src={avatar}\n                    alt={name}\n                    className=\"grayscale transition-all duration-300 group-hover:grayscale-0\"\n                  />\n                  <AvatarFallback className=\"text-sm font-semibold\">\n                    {getInitials(name)}\n                  </AvatarFallback>\n                </Avatar>\n                <div className=\"flex flex-col items-start gap-1\">\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"text-[10px] font-normal\"\n                  >\n                    {department}\n                  </Badge>\n                  <span className=\"text-sm leading-snug font-semibold text-foreground\">\n                    {name}\n                  </span>\n                  <span className=\"text-xs text-muted-foreground\">{role}</span>\n                </div>\n              </div>\n\n              <p className=\"text-sm leading-relaxed text-muted-foreground\">\n                {bio}\n              </p>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/team-2.tsx"
    }
  ],
  "meta": {
    "height": "816px",
    "tier": "free"
  },
  "categories": [
    "team"
  ],
  "type": "registry:block"
}