{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"mist-testimonials-2","type":"registry:block","title":"Testimonials 2","description":"Tailark Mist testimonials variant 2 block","meta":{"aspect-ratio":"90/33","width":686,"height":252},"files":[{"path":"mist/blocks/testimonials/two.tsx","type":"registry:component","target":"@components/testimonials-2.tsx","content":"import Image from 'next/image'\n\nexport default function TestimonialSection() {\n    const testimonials = [\n        {\n            name: 'Méschac Irung',\n            role: 'Creator',\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 and versatility.\",\n        },\n        {\n            name: 'Théo Balick',\n            role: 'Frontend Dev',\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            avatar: 'https://avatars.githubusercontent.com/u/99137927?v=4',\n            content: 'The extensive collection of UI components has significantly accelerated my workflow. Tailark is a game-changer.',\n        },\n    ]\n\n    return (\n        <section>\n            <div className=\"bg-muted 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\">What Our Clients Say</h2>\n                        <p className=\"text-muted-foreground my-4 text-balance text-lg\">Discover why our clients love working with us. Read their testimonials about our dedication to excellence, innovative solutions, and exceptional customer service.</p>\n                    </div>\n                    <div className=\"@lg:grid-cols-2 @3xl:grid-cols-3 grid gap-6\">\n                        {testimonials.map((testimonial, index) => (\n                            <div key={index}>\n                                <div className=\"bg-background ring-foreground/10 rounded-2xl rounded-bl border border-transparent px-4 py-3 ring-1\">\n                                    <p className=\"text-foreground\">{testimonial.content}</p>\n                                </div>\n                                <div className=\"mt-4 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"}]}