{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-2",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/team-2.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { FaLinkedinIn, FaGithub, FaDribbble, FaGlobe } from \"react-icons/fa\";\nimport { FaXTwitter, FaInstagram } from \"react-icons/fa6\";\n\nexport type Team2SocialPlatform =\n  | \"instagram\"\n  | \"twitter\"\n  | \"linkedin\"\n  | \"github\"\n  | \"dribbble\"\n  | \"website\";\n\nexport interface Team2Social {\n  platform: Team2SocialPlatform;\n  url: string;\n  label?: string;\n}\n\nexport interface TeamMember {\n  id: string;\n  name: string;\n  role: string;\n  image: string;\n  socials?: Team2Social[];\n}\n\nexport interface Team2Props {\n  badge?: string;\n  title?: string;\n  description?: string;\n  footerText?: string;\n  members?: TeamMember[];\n  className?: string;\n  renderLink?: (props: {\n    href: string;\n    label: string;\n    children: ReactNode;\n  }) => ReactNode;\n}\n\nconst socialIconMap: Record<Team2SocialPlatform, React.ElementType> = {\n  instagram: FaInstagram,\n  twitter: FaXTwitter,\n  linkedin: FaLinkedinIn,\n  github: FaGithub,\n  dribbble: FaDribbble,\n  website: FaGlobe,\n};\n\nconst defaultMembers: TeamMember[] = [\n  {\n    id: \"1\",\n    name: \"Sophia Williams\",\n    role: \"Product Design Director\",\n    image:\n      \"https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=800&auto=format&fit=crop\",\n    socials: [\n      { platform: \"instagram\", url: \"#\" },\n      { platform: \"linkedin\", url: \"#\" },\n      { platform: \"twitter\", url: \"#\" },\n    ],\n  },\n  {\n    id: \"2\",\n    name: \"Arthur Taylor\",\n    role: \"Growth Strategy Manager\",\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      { platform: \"twitter\", url: \"#\" },\n    ],\n  },\n  {\n    id: \"3\",\n    name: \"Matthew Johnson\",\n    role: \"Experience Solutions Lead\",\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: \"dribbble\", url: \"#\" },\n      { platform: \"twitter\", url: \"#\" },\n    ],\n  },\n  {\n    id: \"4\",\n    name: \"Emma Wright\",\n    role: \"Creative Brand Partner\",\n    image:\n      \"https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=800&auto=format&fit=crop\",\n    socials: [\n      { platform: \"instagram\", url: \"#\" },\n      { platform: \"linkedin\", url: \"#\" },\n      { platform: \"website\", url: \"#\" },\n    ],\n  },\n  {\n    id: \"5\",\n    name: \"Richard Mills\",\n    role: \"Payments Support\",\n    image:\n      \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=800&auto=format&fit=crop\",\n    socials: [\n      { platform: \"github\", url: \"#\" },\n      { platform: \"linkedin\", url: \"#\" },\n    ],\n  },\n];\n\nfunction MemberSocialLinks({\n  member,\n  renderLink,\n}: {\n  member: TeamMember;\n  renderLink?: Team2Props[\"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-none bg-white/10 text-white backdrop-blur-sm transition-all duration-300 hover:scale-102 hover:bg-white hover:text-zinc-900\">\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 MemberCard({\n  member,\n  index,\n  renderLink,\n}: {\n  member: TeamMember;\n  index: number;\n  renderLink?: Team2Props[\"renderLink\"];\n}) {\n  return (\n    <div\n      className={cn(\n        \"group flex flex-col\",\n        index % 2 === 1 && \"lg:translate-y-6\",\n      )}\n    >\n      <div className=\"bg-muted relative aspect-[3/4] overflow-hidden rounded-none\">\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-300 ease-out group-hover:scale-105 group-hover:grayscale-0\"\n          loading=\"lazy\"\n        />\n\n        <div className=\"absolute inset-0 bg-gradient-to-t from-zinc-950/70 via-transparent 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 items-end justify-start p-4 opacity-0 transition-all delay-100 duration-300 group-hover:translate-y-0 group-hover:opacity-100\">\n          <MemberSocialLinks member={member} renderLink={renderLink} />\n        </div>\n\n        <div className=\"bg-foreground/20 absolute top-3 right-3 size-2.5 rounded-full transition-colors duration-300 group-hover:bg-emerald-400\" />\n      </div>\n\n      <div className=\"flex flex-col gap-0 pt-2 pb-2\">\n        <h3 className=\"text-md text-foreground group-hover:text-foreground/80 font-medium tracking-tight transition-colors duration-300\">\n          {member.name}\n        </h3>\n        <p className=\"text-muted-foreground text-sm\">{member.role}</p>\n      </div>\n    </div>\n  );\n}\n\nexport const Team2: React.FC<Team2Props> = ({\n  badge = \"Meet our leadership\",\n  title = \"Building the future, together\",\n  description = \"Working together, we solve challenges and deliver exceptional results for every client.\",\n  footerText = \"Teamwork shapes our culture, empowers new ideas, and inspires real progress.\",\n  members = defaultMembers,\n  className,\n  renderLink,\n}) => {\n  return (\n    <section\n      className={cn(\"bg-background w-full overflow-hidden py-16\", className)}\n    >\n      <div className=\"container mx-auto max-w-7xl px-4 md:px-6 lg:px-8\">\n        <div className=\"mb-14 flex flex-col items-center gap-4 text-center sm:mb-16\">\n          {badge && (\n            <Badge\n              variant=\"outline\"\n              className=\"rounded-full px-4 py-1 text-sm font-normal\"\n            >\n              {badge}\n            </Badge>\n          )}\n          {title && (\n            <h2 className=\"text-foreground max-w-3xl text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl\">\n              {title}\n            </h2>\n          )}\n          {description && (\n            <p className=\"text-muted-foreground mx-auto max-w-2xl text-base md:text-lg\">\n              {description}\n            </p>\n          )}\n        </div>\n\n        <div className=\"mb-14 grid grid-cols-2 gap-4 sm:mb-16 sm:grid-cols-3 md:gap-6 lg:grid-cols-5\">\n          {members.map((member, index) => (\n            <MemberCard\n              key={member.id}\n              member={member}\n              index={index}\n              renderLink={renderLink}\n            />\n          ))}\n        </div>\n\n        {footerText && (\n          <div className=\"text-center\">\n            <p className=\"text-muted-foreground mx-auto max-w-2xl text-sm md:text-base\">\n              {footerText}\n            </p>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n};\n\nexport default Team2;\n",
      "type": "registry:ui",
      "target": "components/ui/team-2.tsx"
    }
  ],
  "type": "registry:ui"
}