{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-2",
  "type": "registry:block",
  "title": "Team 2",
  "description": "Portrait team grid with grayscale-to-color hover.",
  "files": [
    {
      "path": "app/preview/team/two/page.tsx",
      "content": "import Link from 'next/link'\n\nconst members = [\n    {\n        name: 'Liam Brown',\n        role: 'Founder - CEO',\n        avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=826&h=1239&fit=crop&crop=faces&q=80',\n        link: '#',\n    },\n    {\n        name: 'Elijah Jones',\n        role: 'Co-Founder - CTO',\n        avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=826&h=1239&fit=crop&crop=faces&q=80',\n        link: '#',\n    },\n    {\n        name: 'Isabella Garcia',\n        role: 'Sales Manager',\n        avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=826&h=1239&fit=crop&crop=faces&q=80',\n        link: '#',\n    },\n    {\n        name: 'Henry Lee',\n        role: 'UX Engeneer',\n        avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=826&h=1239&fit=crop&crop=faces&q=80',\n        link: '#',\n    },\n    {\n        name: 'Ava Williams',\n        role: 'Interaction Designer',\n        avatar: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=826&h=1239&fit=crop&crop=faces&q=80',\n        link: '#',\n    },\n    {\n        name: 'Olivia Miller',\n        role: 'Visual Designer',\n        avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=826&h=1239&fit=crop&crop=faces&q=80',\n        link: '#',\n    },\n]\n\nexport default function TeamSection() {\n    return (\n        <section className=\"bg-gray-50 py-16 md:py-32 dark:bg-transparent\">\n            <div className=\"mx-auto max-w-5xl border-t px-6\">\n                <span className=\"text-caption -ml-6 -mt-3.5 block w-max bg-gray-50 px-6 dark:bg-gray-950\">Team</span>\n                <div className=\"mt-12 gap-4 sm:grid sm:grid-cols-2 md:mt-24\">\n                    <div className=\"sm:w-2/5\">\n                        <h2 className=\"text-3xl font-bold sm:text-4xl\">Our dream team</h2>\n                    </div>\n                    <div className=\"mt-6 sm:mt-0\">\n                        <p>During the working process, we perform regular fitting with the client because he is the only person who can feel whether a new suit fits or not.</p>\n                    </div>\n                </div>\n                <div className=\"mt-12 md:mt-24\">\n                    <div className=\"grid gap-x-6 gap-y-12 sm:grid-cols-2 lg:grid-cols-3\">\n                        {members.map((member, index) => (\n                            <div key={index} className=\"group overflow-hidden\">\n                                <img className=\"h-96 w-full rounded-md object-cover object-top grayscale transition-all duration-500 hover:grayscale-0 group-hover:h-[22.5rem] group-hover:rounded-xl\" src={member.avatar} alt=\"team member\" width=\"826\" height=\"1239\" />\n                                <div className=\"px-2 pt-2 sm:pb-0 sm:pt-4\">\n                                    <div className=\"flex justify-between\">\n                                        <h3 className=\"text-title text-base font-medium transition-all duration-500 group-hover:tracking-wider\">{member.name}</h3>\n                                        <span className=\"text-xs\">_0{index + 1}</span>\n                                    </div>\n                                    <div className=\"mt-1 flex items-center justify-between\">\n                                        <span className=\"text-muted-foreground inline-block translate-y-6 text-sm opacity-0 transition duration-300 group-hover:translate-y-0 group-hover:opacity-100\">{member.role}</span>\n                                        <Link href={member.link} className=\"group-hover:text-primary-600 dark:group-hover:text-primary-400 inline-block translate-y-8 text-sm tracking-wide opacity-0 transition-all duration-500 hover:underline group-hover:translate-y-0 group-hover:opacity-100\">\n                                            {' '}\n                                            Linktree\n                                        </Link>\n                                    </div>\n                                </div>\n                            </div>\n                        ))}\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/team.tsx"
    }
  ]
}