{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-5",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/team-5.tsx",
      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { FaLinkedinIn, FaGithub, FaDribbble, FaGlobe } from \"react-icons/fa\";\nimport { FaXTwitter } from \"react-icons/fa6\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/components/ui/badge\";\n\nexport type Team5SocialPlatform =\n  | \"linkedin\"\n  | \"github\"\n  | \"twitter\"\n  | \"dribbble\"\n  | \"website\";\n\nexport interface Team5Social {\n  platform: Team5SocialPlatform;\n  url: string;\n  label?: string;\n}\n\nexport interface Team5Member {\n  id: string;\n  name: string;\n  role: string;\n  image: string;\n  socials?: Team5Social[];\n}\n\nexport interface Team5Props {\n  badge?: string;\n  heading?: string;\n  description?: string;\n  members?: Team5Member[];\n  className?: string;\n  renderLink?: (props: {\n    href: string;\n    label: string;\n    children: ReactNode;\n  }) => ReactNode;\n}\n\nconst socialIconMap: Record<Team5SocialPlatform, React.ElementType> = {\n  linkedin: FaLinkedinIn,\n  github: FaGithub,\n  twitter: FaXTwitter,\n  dribbble: FaDribbble,\n  website: FaGlobe,\n};\n\nconst defaultMembers: Team5Member[] = [\n  {\n    id: \"riya-kapoor\",\n    name: \"Riya Kapoor\",\n    role: \"Founding Partner\",\n    image:\n      \"https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=800&auto=format&fit=crop\",\n    socials: [\n      { platform: \"linkedin\", url: \"#\" },\n      { platform: \"twitter\", url: \"#\" },\n    ],\n  },\n  {\n    id: \"noah-schmidt\",\n    name: \"Noah Schmidt\",\n    role: \"Technical Architect\",\n    image:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=800&auto=format&fit=crop\",\n    socials: [\n      { platform: \"github\", url: \"#\" },\n      { platform: \"linkedin\", url: \"#\" },\n    ],\n  },\n  {\n    id: \"amara-osei\",\n    name: \"Amara Osei\",\n    role: \"Creative Director\",\n    image:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=800&auto=format&fit=crop\",\n    socials: [\n      { platform: \"dribbble\", url: \"#\" },\n      { platform: \"twitter\", url: \"#\" },\n    ],\n  },\n  {\n    id: \"liam-vasquez\",\n    name: \"Liam Vasquez\",\n    role: \"Growth Strategist\",\n    image:\n      \"https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=800&auto=format&fit=crop\",\n    socials: [\n      { platform: \"linkedin\", url: \"#\" },\n      { platform: \"website\", url: \"#\" },\n    ],\n  },\n  {\n    id: \"sofia-lin\",\n    name: \"Sofia Lin\",\n    role: \"Lead Engineer\",\n    image:\n      \"https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=800&auto=format&fit=crop\",\n    socials: [\n      { platform: \"github\", url: \"#\" },\n      { platform: \"linkedin\", url: \"#\" },\n    ],\n  },\n  {\n    id: \"erik-johansson\",\n    name: \"Erik Johansson\",\n    role: \"Operations Lead\",\n    image:\n      \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=800&auto=format&fit=crop\",\n    socials: [\n      { platform: \"linkedin\", url: \"#\" },\n      { platform: \"twitter\", url: \"#\" },\n    ],\n  },\n];\n\nfunction MemberSocialLinks({\n  member,\n  renderLink,\n}: {\n  member: Team5Member;\n  renderLink?: Team5Props[\"renderLink\"];\n}) {\n  if (!member.socials || member.socials.length === 0) return null;\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      {member.socials.map((social) => {\n        const Icon = socialIconMap[social.platform];\n        if (!Icon) return null;\n\n        const label = social.label ?? `${member.name} on ${social.platform}`;\n\n        const content = (\n          <span className=\"flex size-8 items-center justify-center rounded-full bg-white/10 text-white backdrop-blur-sm transition-colors hover:bg-white hover:text-zinc-950\">\n            <Icon className=\"size-3.5\" />\n          </span>\n        );\n\n        if (renderLink) {\n          return (\n            <span key={`${social.platform}-${social.url}`}>\n              {renderLink({ href: social.url, label, children: content })}\n            </span>\n          );\n        }\n\n        return (\n          <a\n            key={`${social.platform}-${social.url}`}\n            href={social.url}\n            aria-label={label}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            {content}\n          </a>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction MemberStrip({\n  member,\n  renderLink,\n}: {\n  member: Team5Member;\n  renderLink?: Team5Props[\"renderLink\"];\n}) {\n  return (\n    <div\n      className={cn(\n        \"group relative min-w-0 flex-[1] overflow-hidden rounded-lg\",\n        \"cursor-pointer shadow-sm transition-all duration-500\",\n        \"hover:flex-[3] hover:shadow-xl\",\n      )}\n    >\n      <img\n        src={member.image}\n        alt={`Portrait of ${member.name}`}\n        className=\"absolute inset-0 h-full w-full object-cover grayscale transition-all duration-500 group-hover:grayscale-0\"\n        loading=\"lazy\"\n      />\n\n      <div className=\"absolute inset-0 bg-gradient-to-t from-zinc-950/80 via-zinc-950/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100\" />\n\n      <div className=\"absolute inset-x-0 bottom-0 flex translate-y-3 flex-col gap-3 p-5 opacity-0 transition-all delay-100 duration-300 group-hover:translate-y-0 group-hover:opacity-100 sm:p-6\">\n        <Badge variant=\"secondary\" className=\"w-fit text-xs\">\n          {member.role}\n        </Badge>\n\n        <h3 className=\"text-xl font-semibold tracking-tight whitespace-nowrap text-white sm:text-2xl\">\n          {member.name}\n        </h3>\n\n        <MemberSocialLinks member={member} renderLink={renderLink} />\n      </div>\n    </div>\n  );\n}\n\nexport default function Team5({\n  heading = \"Makers who move the needle\",\n  description = \"Six minds. One mission. We ship products that matter.\",\n  members = defaultMembers,\n  className,\n  renderLink,\n}: Team5Props) {\n  return (\n    <section className={cn(\"bg-background w-full py-16\", className)}>\n      <div className=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        <div className=\"mb-10 flex flex-col items-center text-center sm:mb-14\">\n          {heading && (\n            <h2 className=\"text-foreground text-3xl font-semibold tracking-tight sm:text-4xl lg:text-5xl\">\n              {heading}\n            </h2>\n          )}\n\n          {description && (\n            <p className=\"text-muted-foreground mt-4 max-w-xl text-base sm:text-lg\">\n              {description}\n            </p>\n          )}\n        </div>\n\n        <div className=\"flex h-72 gap-1.5 sm:h-80 sm:gap-2 md:h-96\">\n          {members.map((member) => (\n            <MemberStrip\n              key={member.id}\n              member={member}\n              renderLink={renderLink}\n            />\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport { Team5 };\n",
      "type": "registry:ui",
      "target": "components/ui/team-5.tsx"
    }
  ],
  "type": "registry:ui"
}