{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-sections-02",
  "type": "registry:component",
  "title": "Team Sections",
  "author": "Toby Belhome",
  "description": "Showcase your team with elegantly designed Tailwind CSS team sections. Highlight member profiles, roles, and social links with clean layouts and subtle visuals. Perfect for company websites, SaaS platforms, or portfolios aiming to humanize your brand and build trust with visitors.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "badge",
    "separator"
  ],
  "files": [
    {
      "path": "examples/blocks/marketing/team-sections/02/page.tsx",
      "content": "import Image from \"next/image\";\nimport Link from \"next/link\";\nimport { Button } from \"@/components/ui/button\";\nimport { X, Facebook, Linkedin } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Separator } from \"@/components/ui/separator\";\n\nconst teams = [\n  {\n    name: \"Emily Carter\",\n    role: \"Founder & CEO\",\n    bio: \"Former IBM engineer with a passion for building innovative and human-centered software products.\",\n    image:\n      \"https://plus.unsplash.com/premium_photo-1754211654507-e0a561f6b9c4?q=80&w=721&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    social: {\n      x: \"#\",\n      facebook: \"#\",\n      linkedin: \"#\"\n    }\n  },\n  {\n    name: \"Lucas Bennett\",\n    role: \"Lead Designer\",\n    bio: \"Creative strategist focused on clean UI and intuitive UX. Believes in the power of simplicity.\",\n    image:\n      \"https://images.unsplash.com/photo-1754051486494-cfdbf29a589c?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    social: {\n      x: \"#\",\n      facebook: \"#\",\n      linkedin: \"#\"\n    }\n  },\n  {\n    name: \"Sophie Miller\",\n    role: \"Lead Engineer\",\n    bio: \"Award-winning developer with a passion for solving complex problems and building scalable systems.\",\n    image:\n      \"https://images.unsplash.com/photo-1754006320747-a90ba54b93cd?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    social: {\n      x: \"#\",\n      facebook: \"#\",\n      linkedin: \"#\"\n    }\n  },\n  {\n    name: \"Ethan Johnson\",\n    role: \"Facilities Manager\",\n    bio: \"Behind-the-scenes operator ensuring our workspace runs smoothly and efficiently.\",\n    image:\n      \"https://images.unsplash.com/photo-1598891960072-675d49bb4242?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    social: {\n      x: \"#\",\n      facebook: \"#\",\n      linkedin: \"#\"\n    }\n  }\n];\n\nexport default function TeamSection() {\n  return (\n    <section className=\"py-12 lg:py-20\">\n      <div className=\"mx-auto max-w-7xl space-y-6 px-4 lg:space-y-8\">\n        <div className=\"flex flex-col items-start gap-4 md:flex-row md:items-end md:justify-between\">\n          <header className=\"space-y-4\">\n            <Badge className=\"dark:text-foreground inline-block rounded-full bg-blue-100 text-blue-600 dark:bg-blue-950\">\n              We&#39;re Hiring!\n            </Badge>\n            <h2 className=\"font-heading text-3xl md:text-4xl\">Let&#39;s Meet Our Team</h2>\n            <p className=\"text-muted-foreground text-balance md:text-lg\">\n              Gravida in fermentum et sollicitudin ac orci phasellus egestas. Molestie a iaculis at\n              erat pellentesque adipiscing commodo.\n            </p>\n          </header>\n          <div className=\"flex gap-2\">\n            <Button variant=\"outline\" className=\"rounded-full px-6 py-3\">\n              About Us\n            </Button>\n            <Button className=\"rounded-full\">Job Openings</Button>\n          </div>\n        </div>\n        <Separator />\n        <div className=\"grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4\">\n          {teams.map((member, index) => (\n            <div key={index} className=\"flex flex-col items-start gap-4\">\n              <div className=\"relative size-20 overflow-hidden rounded-3xl\">\n                <Image\n                  src={member.image}\n                  alt={`Picture of ${member.name}`}\n                  layout=\"fill\"\n                  objectFit=\"cover\"\n                />\n              </div>\n              <div className=\"space-y-2\">\n                <h5 className=\"text-xl font-bold\">{member.name}</h5>\n                <Badge variant=\"outline\">{member.role}</Badge>\n                <p className=\"text-muted-foreground text-sm\">{member.bio}</p>\n              </div>\n              <div className=\"flex gap-2 [&_a]:flex [&_a]:size-8 [&_a]:items-center [&_a]:justify-center [&_a]:rounded-full [&_a]:border\">\n                <Link href={member.social.x}>\n                  <X className=\"size-4\" />\n                  <span className=\"sr-only\">X (Twitter)</span>\n                </Link>\n                <Link href={member.social.facebook}>\n                  <Facebook className=\"size-4\" />\n                  <span className=\"sr-only\">Facebook</span>\n                </Link>\n                <Link\n                  href={member.social.linkedin}\n                  className=\"text-muted-foreground hover:text-gray-900\">\n                  <Linkedin className=\"size-4\" />\n                  <span className=\"sr-only\">LinkedIn</span>\n                </Link>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/team-sections-02.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}