{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-4",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/team-4.tsx",
      "content": "import { FaFacebook as Facebook, FaInstagram as Instagram, FaXTwitter as Twitter } from \"react-icons/fa6\";\nimport { Badge } from \"@/components/ui/badge\";\n\nexport interface SocialLink {\n  platform: \"instagram\" | \"facebook\" | \"twitter\";\n  url: string;\n}\n\nexport interface TeamMember {\n  id: string;\n  name: string;\n  role: string;\n  avatar: string;\n  socials?: SocialLink[];\n}\n\nexport interface Team4Props {\n  /**\n   * The text to display in the badge above the heading.\n   */\n  badge?: string;\n  /**\n   * The main heading text.\n   */\n  heading?: string;\n  /**\n   * The description text below the heading.\n   */\n  description?: string;\n  /**\n   * The list of team members to display.\n   */\n  members?: TeamMember[];\n}\n\nconst defaultMembers: TeamMember[] = [\n  {\n    id: \"1\",\n    name: \"James Turner\",\n    role: \"Brand Strategy Director\",\n    avatar:\n      \"https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=256&h=256&auto=format&fit=crop\",\n    socials: [\n      { platform: \"instagram\", url: \"#\" },\n      { platform: \"facebook\", url: \"#\" },\n      { platform: \"twitter\", url: \"#\" },\n    ],\n  },\n  {\n    id: \"2\",\n    name: \"Emily Park\",\n    role: \"Digital Solutions Expert\",\n    avatar:\n      \"https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=256&h=256&auto=format&fit=crop\",\n    socials: [\n      { platform: \"instagram\", url: \"#\" },\n      { platform: \"facebook\", url: \"#\" },\n      { platform: \"twitter\", url: \"#\" },\n    ],\n  },\n  {\n    id: \"3\",\n    name: \"Daniel Kim\",\n    role: \"Creative Marketing Partner\",\n    avatar:\n      \"https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=256&h=256&auto=format&fit=crop\",\n    socials: [\n      { platform: \"instagram\", url: \"#\" },\n      { platform: \"facebook\", url: \"#\" },\n      { platform: \"twitter\", url: \"#\" },\n    ],\n  },\n  {\n    id: \"4\",\n    name: \"Sophia Williams\",\n    role: \"Experience Innovation Lead\",\n    avatar:\n      \"https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=crop\",\n    socials: [\n      { platform: \"instagram\", url: \"#\" },\n      { platform: \"facebook\", url: \"#\" },\n      { platform: \"twitter\", url: \"#\" },\n    ],\n  },\n  {\n    id: \"5\",\n    name: \"Emma Wright\",\n    role: \"Product Design Manager\",\n    avatar:\n      \"https://images.unsplash.com/photo-1531123897727-8f129e1688ce?q=80&w=256&h=256&auto=format&fit=crop\",\n    socials: [\n      { platform: \"instagram\", url: \"#\" },\n      { platform: \"facebook\", url: \"#\" },\n      { platform: \"twitter\", url: \"#\" },\n    ],\n  },\n];\n\nexport function Team4({\n  badge = \"Together, we innovate\",\n  heading = \"Building ideas, shaping futures\",\n  description = \"Pushing limits, sharing ideas, and building lasting impact.\",\n  members = defaultMembers,\n}: Team4Props) {\n  return (\n    <section className=\"bg-background py-16\">\n      <div className=\"container mx-auto px-4 md:px-6\">\n        <div className=\"mb-12 flex flex-col items-center text-center md:mb-20\">\n          {badge && (\n            <Badge\n              variant=\"secondary\"\n              className=\"mb-6 rounded-full px-4 py-1.5 text-sm font-normal\"\n            >\n              {badge}\n            </Badge>\n          )}\n\n          {heading && (\n            <h2 className=\"text-foreground mb-4 text-3xl font-semibold tracking-tight md:text-4xl lg:text-5xl\">\n              {heading}\n            </h2>\n          )}\n\n          {description && (\n            <p className=\"text-muted-foreground max-w-2xl text-base md:text-lg\">\n              {description}\n            </p>\n          )}\n        </div>\n\n        <div className=\"mx-auto grid w-full max-w-7xl grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 lg:gap-6\">\n          {members.map((member) => (\n            <div key={member.id} className=\"group flex flex-col items-center\">\n              <div className=\"bg-muted ring-border/50 ring-offset-background group-hover:ring-border relative mb-6 h-40 w-40 overflow-hidden rounded-full ring-1 ring-offset-4 transition-all duration-300 sm:h-48 sm:w-48 md:h-52 md:w-52 lg:h-44 lg:w-44 xl:h-52 xl:w-52\">\n                <img\n                  src={member.avatar}\n                  alt={`Portrait of ${member.name}`}\n                  className=\"h-full w-full object-cover transition-transform duration-500 group-hover:scale-105\"\n                  loading=\"lazy\"\n                />\n              </div>\n\n              <div className=\"text-center\">\n                <h3 className=\"text-foreground mb-1 text-lg font-medium\">\n                  {member.name}\n                </h3>\n                <p className=\"text-muted-foreground mb-4 text-sm\">\n                  {member.role}\n                </p>\n              </div>\n\n              {member.socials && member.socials.length > 0 && (\n                <div className=\"flex items-center gap-4\">\n                  {member.socials.map((social, index) => {\n                    const Icon =\n                      social.platform === \"instagram\"\n                        ? Instagram\n                        : social.platform === \"facebook\"\n                          ? Facebook\n                          : Twitter;\n\n                    return (\n                      <a\n                        key={index}\n                        href={social.url}\n                        className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                        aria-label={`${member.name} on ${social.platform}`}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                      >\n                        <Icon className=\"h-4 w-4\" strokeWidth={2} />\n                      </a>\n                    );\n                  })}\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default Team4;\n",
      "type": "registry:ui",
      "target": "components/ui/team-4.tsx"
    }
  ],
  "type": "registry:ui"
}