{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"mist-team-2","type":"registry:block","title":"Team 2","description":"Tailark Mist team variant 2 block","registryDependencies":["@tailark-oss/mist-button","@tailark-oss/mist-hover-card"],"meta":{"aspect-ratio":"60/23","width":686,"height":263},"files":[{"path":"mist/blocks/team/two.tsx","type":"registry:component","target":"@components/team-2.tsx","content":"import { Button } from '@/components/ui/button'\nimport { ChevronRight, Twitter } from 'lucide-react'\nimport Link from 'next/link'\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'\nimport Image from 'next/image'\n\nconst members = [\n    { src: 'https://avatars.githubusercontent.com/u/47919550?v=4', name: 'Meschac Irung', role: 'Frontend Engineer' },\n    { src: 'https://avatars.githubusercontent.com/u/31113941?v=4', name: 'Bernard Ngandu', role: 'Backend Developer' },\n    { src: 'https://avatars.githubusercontent.com/u/68236786?v=4', name: 'Theo Balick', role: 'UI/UX Designer' },\n    { src: 'https://avatars.githubusercontent.com/u/99137927?v=4', name: 'Glodie Lukose', role: 'Project Manager' },\n    { src: 'https://avatars.githubusercontent.com/u/12345678?v=4', name: 'Sarah Johnson', role: 'DevOps Engineer' },\n    { src: 'https://avatars.githubusercontent.com/u/23456789?v=4', name: 'Michael Chen', role: 'QA Specialist' },\n    { src: 'https://avatars.githubusercontent.com/u/34567890?v=4', name: 'Aisha Patel', role: 'Data Scientist' },\n    { src: 'https://avatars.githubusercontent.com/u/45678901?v=4', name: 'Carlos Rodriguez', role: 'Product Manager' },\n    { src: 'https://avatars.githubusercontent.com/u/56789012?v=4', name: 'Emma Wilson', role: 'Content Strategist' },\n]\n\nexport default function TeamSection() {\n    return (\n        <section>\n            <div className=\"bg-muted/50 py-24\">\n                <div className=\"@container mx-auto w-full max-w-5xl px-6\">\n                    <div className=\"mb-12\">\n                        <h2 className=\"text-foreground text-4xl font-semibold\">Meet Our Team</h2>\n                        <p className=\"text-muted-foreground my-4 text-balance text-lg\">Our talented professionals bring diverse expertise and passion to every project. Together, we collaborate to deliver exceptional results and innovative solutions for our clients.</p>\n                        <Button\n                            asChild\n                            variant=\"outline\"\n                            className=\"pr-2\"\n                        >\n                            <Link href=\"#\">\n                                We're hiring\n                                <ChevronRight className=\"opacity-50\" />\n                            </Link>\n                        </Button>\n                    </div>\n\n                    <div className=\"@sm:grid-cols-2 @xl:grid-cols-3 @3xl:grid-cols-4 grid gap-6 md:gap-y-10\">\n                        {members.map((member, index) => (\n                            <HoverCard\n                                key={index}\n                                openDelay={300}\n                            >\n                                <HoverCardTrigger className=\"grid cursor-pointer grid-cols-[auto_1fr] items-center gap-2.5\">\n                                    <div className=\"ring-foreground/10 size-6 border border-transparent shadow ring-1\">\n                                        <Image\n                                            src={member.src}\n                                            alt={member.name}\n                                            width={28}\n                                            height={28}\n                                            className=\"rounded-full\"\n                                        />\n                                    </div>\n\n                                    <span className=\"text-foreground font-medium\">{member.name}</span>\n                                </HoverCardTrigger>\n\n                                <HoverCardContent data-theme=\"mist\">\n                                    <div className=\"space-y-3\">\n                                        <div className=\"flex justify-between\">\n                                            <div className=\"rounded-(--radius) ring-foreground/10 size-10 border border-transparent shadow ring\">\n                                                <Image\n                                                    src={member.src}\n                                                    alt={member.name}\n                                                    width={44}\n                                                    height={44}\n                                                    className=\"rounded-(--radius)\"\n                                                />\n                                            </div>\n                                            <Button\n                                                variant=\"ghost\"\n                                                asChild\n                                                aria-label=\"X Account\"\n                                            >\n                                                <Link href=\"https://x.com/MeschacIrung\">\n                                                    <Twitter className=\"fill-muted-foreground stroke-muted-foreground\" />\n                                                </Link>\n                                            </Button>\n                                        </div>\n\n                                        <div>\n                                            <span className=\"text-foreground font-medium\">{member.name}</span>\n                                            <div className=\"text-muted-foreground text-sm\">{member.role}</div>\n                                        </div>\n                                    </div>\n                                </HoverCardContent>\n                            </HoverCard>\n                        ))}\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n"}]}