{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"mist-testimonials-3","type":"registry:block","title":"Testimonials 3","description":"Tailark Mist testimonials variant 3 block","meta":{"aspect-ratio":"30/7","width":686,"height":160},"files":[{"path":"mist/blocks/testimonials/three.tsx","type":"registry:component","target":"@components/testimonials-3.tsx","content":"import { cn } from '@/lib/utils'\nimport { Star } from 'lucide-react'\nimport Image from 'next/image'\n\nexport default function TestimonialSection() {\n    const testimonials = [\n        {\n            name: 'Méschac Irung',\n            role: 'Creator',\n            stars: 5,\n            avatar: 'https://avatars.githubusercontent.com/u/47919550?v=4',\n            content: \"Using Tailark has been like unlocking a secret design superpower. It's the perfect fusion of simplicity.\",\n        },\n        {\n            name: 'Théo Balick',\n            role: 'Frontend Dev',\n            stars: 4,\n            avatar: 'https://avatars.githubusercontent.com/u/68236786?v=4',\n            content: 'Tailark has transformed the way I develop web applications. The flexibility to customize every aspect is amazing.',\n        },\n        {\n            name: 'Glodie Lukose',\n            role: 'Frontend Dev',\n            stars: 5,\n            avatar: 'https://avatars.githubusercontent.com/u/99137927?v=4',\n            content: 'The extensive collection of UI components has significantly accelerated my workflow.',\n        },\n    ]\n\n    return (\n        <section>\n            <div className=\"py-24\">\n                <div className=\"@container mx-auto w-full max-w-5xl px-6\">\n                    <div className=\"@lg:grid-cols-2 @3xl:grid-cols-3 @3xl:gap-12 grid gap-6\">\n                        {testimonials.map((testimonial, index) => (\n                            <div key={index}>\n                                <div className=\"flex gap-1\">\n                                    {Array.from({ length: 5 }).map((_, i) => (\n                                        <Star\n                                            key={i}\n                                            className={cn('size-4', i < testimonial.stars ? 'fill-primary stroke-primary' : 'fill-foreground/15 stroke-transparent')}\n                                        />\n                                    ))}\n                                </div>\n                                <p className=\"text-foreground my-4\">{testimonial.content}</p>\n                                <div className=\"flex items-center gap-2\">\n                                    <div className=\"ring-foreground/10 size-6 border border-transparent shadow ring-1\">\n                                        <Image\n                                            src={testimonial.avatar}\n                                            alt={testimonial.name}\n                                            width={28}\n                                            height={28}\n                                            className=\"rounded-full\"\n                                        />\n                                    </div>\n                                    <div className=\"text-foreground text-sm font-medium\">{testimonial.name}</div>\n                                    <span\n                                        aria-hidden\n                                        className=\"bg-foreground/25 size-1 rounded-full\"\n                                    ></span>\n                                    <span className=\"text-muted-foreground text-sm\">{testimonial.role}</span>\n                                </div>\n                            </div>\n                        ))}\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n"}]}