{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-1",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/team-1.tsx",
      "content": "import React from \"react\";\nimport { Globe, Mail } from \"lucide-react\";\nimport { FaXTwitter as Twitter, FaLinkedin as Linkedin, FaGithub as Github, FaDribbble as Dribbble } from \"react-icons/fa6\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SocialIconType =\n  | \"twitter\"\n  | \"linkedin\"\n  | \"github\"\n  | \"dribbble\"\n  | \"website\"\n  | \"email\";\n\nexport interface SocialLink {\n  icon: SocialIconType;\n  url: string;\n}\n\nexport interface TeamMember {\n  id: string;\n  name: string;\n  role: string;\n  image: string;\n  bio?: string;\n  socials?: SocialLink[];\n}\n\nexport interface Team1Props {\n  badge?: string;\n  heading?: string;\n  description?: string;\n  members?: TeamMember[];\n  className?: string;\n}\n\nconst IconMap: Record<SocialIconType, React.ElementType> = {\n  twitter: Twitter,\n  linkedin: Linkedin,\n  github: Github,\n  dribbble: Dribbble,\n  website: Globe,\n  email: Mail,\n};\n\nconst defaultMembers: TeamMember[] = [\n  {\n    id: \"1\",\n    name: \"Eleanor Pena\",\n    role: \"Founder & CEO\",\n    image:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=800&auto=format&fit=crop\",\n    bio: \"Eleanor is a visionary leader with over a decade of experience designing intuitive and engaging user experiences for global brands.\",\n    socials: [\n      { icon: \"twitter\", url: \"#\" },\n      { icon: \"linkedin\", url: \"#\" },\n    ],\n  },\n  {\n    id: \"2\",\n    name: \"Cody Fisher\",\n    role: \"Head of Engineering\",\n    image:\n      \"https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=800&auto=format&fit=crop\",\n    bio: \"A technical mastermind, Cody specializes in building robust, scalable architectures and leading high-performing engineering teams.\",\n    socials: [\n      { icon: \"github\", url: \"#\" },\n      { icon: \"linkedin\", url: \"#\" },\n      { icon: \"twitter\", url: \"#\" },\n    ],\n  },\n  {\n    id: \"3\",\n    name: \"Courtney Henry\",\n    role: \"Lead Designer\",\n    image:\n      \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=800&auto=format&fit=crop\",\n    bio: \"Courtney crafts pixel-perfect designs with a relentless focus on user-centric principles and modern aesthetic trends.\",\n    socials: [\n      { icon: \"dribbble\", url: \"#\" },\n      { icon: \"website\", url: \"#\" },\n    ],\n  },\n  {\n    id: \"4\",\n    name: \"Albert Flores\",\n    role: \"Product Manager\",\n    image:\n      \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=800&auto=format&fit=crop\",\n    bio: \"Albert excels at connecting complex user needs with technical execution, driving product strategy from concept to launch.\",\n    socials: [\n      { icon: \"linkedin\", url: \"#\" },\n      { icon: \"email\", url: \"mailto:#\" },\n    ],\n  },\n];\n\nexport default function Team1({\n  badge = \"Our Team\",\n  heading = \"Meet the minds behind the magic\",\n  description = \"Our team of passionate designers, engineers, and strategists are dedicated to building the best products in the world.\",\n  members = defaultMembers,\n  className,\n}: Team1Props) {\n  return (\n    <section className={cn(\"bg-background py-16\", className)}>\n      <div className=\"container mx-auto px-4 md:px-6\">\n        <div className=\"mx-auto mb-16 flex max-w-3xl flex-col items-center text-center md:mb-24\">\n          {badge && (\n            <div className=\"border-border bg-muted text-muted-foreground mb-6 inline-flex items-center rounded-full border px-3 py-1 text-sm font-medium\">\n              {badge}\n            </div>\n          )}\n          {heading && (\n            <h2 className=\"text-foreground mb-6 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl lg:text-6xl\">\n              {heading}\n            </h2>\n          )}\n          {description && (\n            <p className=\"text-muted-foreground text-lg leading-relaxed md:text-xl\">\n              {description}\n            </p>\n          )}\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4\">\n          {members.map((member) => (\n            <div\n              key={member.id}\n              className=\"group bg-muted focus-within:ring-ring border-zinc-100 dark:border-zinc-900 relative aspect-[4/5] overflow-hidden rounded-4xl border-6 focus-within:ring-2 focus-within:ring-offset-2 sm:aspect-[3/4] \"\n              tabIndex={0}\n            >\n              <img\n                src={member.image}\n                alt={member.name}\n                className=\"absolute inset-0 h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105 group-hover:mask-b-from-100%\"\n                loading=\"lazy\"\n              />\n\n              <div\n                className=\"absolute inset-0 rounded-4xl opacity-0 backdrop-blur-md transition-opacity duration-500 group-focus-within:opacity-100 group-hover:opacity-100\"\n                style={{\n                  WebkitMaskImage:\n                    \"linear-gradient(to top, black 10%, transparent 70%)\",\n                  maskImage:\n                    \"linear-gradient(to top, black 10%, transparent 70%)\",\n                }}\n              />\n\n              <div className=\"absolute inset-0 bg-gradient-to-t from-zinc-950 via-zinc-950/20 to-transparent opacity-80 transition-opacity duration-500 group-focus-within:opacity-90 group-hover:opacity-90\" />\n\n              <div className=\"absolute inset-0 flex flex-col justify-end p-2 md:p-4\">\n                <div className=\"z-10\">\n                  <h3 className=\"text-xl font-semibold tracking-tight text-white\">\n                    {member.name}\n                  </h3>\n                  <p className=\"text-sm font-medium tracking-wider text-zinc-200\">\n                    {member.role}\n                  </p>\n\n                  <div className=\"grid grid-rows-[0fr] opacity-0 transition-all duration-300 ease-out group-focus-within:grid-rows-[1fr] group-focus-within:opacity-100 group-hover:grid-rows-[1fr] group-hover:opacity-100 \">\n                    <div className=\"overflow-hidden\">\n                      <div className=\"flex flex-col gap-2 pt-2\">\n                        {member.bio && (\n                          <p className=\"line-clamp-3 text-sm leading-tight text-white/80\">\n                            {member.bio}\n                          </p>\n                        )}\n                        {member.socials && member.socials.length > 0 && (\n                          <div className=\"flex items-center gap-3 mb-1\">\n                            {member.socials.map((social, idx) => {\n                              const Icon = IconMap[social.icon];\n                              return (\n                                <a\n                                  key={idx}\n                                  href={social.url}\n                                  className=\"flex h-9 w-9 items-center justify-center rounded-full bg-white/10 text-white backdrop-blur-sm transition-all  hover:bg-white hover:text-zinc-950 focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-zinc-950 focus:outline-none\"\n                                  aria-label={`Visit ${member.name}'s ${social.icon}`}\n                                >\n                                  <Icon className=\"h-4 w-4\" />\n                                </a>\n                              );\n                            })}\n                          </div>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/team-1.tsx"
    }
  ],
  "type": "registry:ui"
}