{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["avatar","button","@efferd/full-width-divider","@efferd/github-icon","@efferd/linkedin-icon","@efferd/x-icon"],"name":"team-1","description":"Centered team grid with grayscale avatars, names, and roles, split by vertical column lines.","categories":["team"],"files":[{"path":"registry/blocks/team/1/team-section.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport {\n\tAvatar,\n\tAvatarFallback,\n\tAvatarImage,\n} from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\n\ntype TeamMember = {\n\tname: string;\n\trole: string;\n\timage: string;\n\tlink: string;\n};\n\nconst team: TeamMember[] = [\n\t{\n\t\tname: \"Shaban Haider\",\n\t\trole: \"Founder & CEO\",\n\t\timage: \"https://github.com/shabanhr.png\",\n\t\tlink: \"#\",\n\t},\n\t{\n\t\tname: \"Jordan Blake\",\n\t\trole: \"Head of Product\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=800&q=80\",\n\t\tlink: \"#\",\n\t},\n\t{\n\t\tname: \"Priya Nair\",\n\t\trole: \"Design Lead\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=800&q=80\",\n\t\tlink: \"#\",\n\t},\n\t{\n\t\tname: \"Alex Rivera\",\n\t\trole: \"Engineering\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=800&q=80\",\n\t\tlink: \"#\",\n\t},\n\t{\n\t\tname: \"Sam Okonkwo\",\n\t\trole: \"Growth\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&w=800&q=80\",\n\t\tlink: \"#\",\n\t},\n\t{\n\t\tname: \"Leo Park\",\n\t\trole: \"Developer Experience\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=800&q=80\",\n\t\tlink: \"#\",\n\t},\n\t{\n\t\tname: \"Elena Ross\",\n\t\trole: \"Brand\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=800&q=80\",\n\t\tlink: \"#\",\n\t},\n\t{\n\t\tname: \"Marcus Hale\",\n\t\trole: \"Support\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=800&q=80\",\n\t\tlink: \"#\",\n\t},\n];\n\nexport function TeamSection() {\n\treturn (\n\t\t<section\n\t\t\taria-labelledby=\"team-heading\"\n\t\t\tclassName=\"mx-auto flex w-full max-w-5xl flex-col gap-8\"\n\t\t>\n\t\t\t<h2\n\t\t\t\tclassName=\"text-balance font-medium text-3xl md:text-4xl\"\n\t\t\t\tid=\"team-heading\"\n\t\t\t>\n\t\t\t\tOur Incredible Team\n\t\t\t</h2>\n\n\t\t\t<div className=\"relative\">\n\t\t\t\t<TeamMemberCardSeparator className=\"left-0 hidden sm:block\" />\n\t\t\t\t<TeamMemberCardSeparator className=\"left-1/2 lg:hidden\" />\n\t\t\t\t<TeamMemberCardSeparator className=\"left-1/3 hidden lg:block\" />\n\t\t\t\t<TeamMemberCardSeparator className=\"left-2/3 hidden lg:block\" />\n\t\t\t\t<TeamMemberCardSeparator className=\"left-full hidden sm:block\" />\n\t\t\t\t<ul className=\"grid grid-cols-2 lg:grid-cols-3\">\n\t\t\t\t\t{team.map((member) => (\n\t\t\t\t\t\t<TeamMemberCard key={member.name} member={member} />\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t</div>\n\n\t\t\t<div className=\"flex flex-col items-start justify-between gap-4 md:flex-row md:items-center\">\n\t\t\t\t<p className=\"text-pretty text-lg text-muted-foreground\">\n\t\t\t\t\t<span className=\"font-medium text-foreground\">Join us!</span> Let's\n\t\t\t\t\tshape the future of the web together\n\t\t\t\t</p>\n\t\t\t\t<Button asChild className=\"w-full md:w-auto\">\n\t\t\t\t\t<a href=\"#careers\">View openings</a>\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n\nfunction TeamMemberCard({ member }: { member: TeamMember }) {\n\tconst { name, role, image, link } = member;\n\n\treturn (\n\t\t<li>\n\t\t\t<a\n\t\t\t\tclassName=\"group flex flex-col items-center gap-4 px-6 py-8 text-center md:py-14\"\n\t\t\t\thref={link}\n\t\t\t>\n\t\t\t\t<Avatar className=\"size-10 md:size-12\">\n\t\t\t\t\t<AvatarImage\n\t\t\t\t\t\talt={`${name}'s portrait`}\n\t\t\t\t\t\tclassName=\"grayscale group-hover:grayscale-0\"\n\t\t\t\t\t\tsrc={image}\n\t\t\t\t\t/>\n\t\t\t\t\t<AvatarFallback>{getInitials(name)}</AvatarFallback>\n\t\t\t\t</Avatar>\n\t\t\t\t<div className=\"flex flex-col gap-0.5\">\n\t\t\t\t\t<h3 className=\"font-medium text-foreground\">{name}</h3>\n\t\t\t\t\t<p className=\"text-pretty text-muted-foreground text-xs\">{role}</p>\n\t\t\t\t</div>\n\t\t\t</a>\n\t\t</li>\n\t);\n}\nfunction TeamMemberCardSeparator({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={cn(\n\t\t\t\t\"pointer-events-none absolute inset-y-0 w-px\",\n\t\t\t\t\"bg-[linear-gradient(to_bottom,--theme(--color-foreground/.05)_0%,--theme(--color-foreground/.1)_2.5%,--theme(--color-foreground/.1)_97.5%,--theme(--color-foreground/.05)_100%)]\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction getInitials(name: string) {\n\treturn name\n\t\t.split(\" \")\n\t\t.map((part) => part[0])\n\t\t.join(\"\")\n\t\t.slice(0, 2)\n\t\t.toUpperCase();\n}\n"}]}