{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["avatar","@magicui/grid-pattern","@efferd/full-width-divider","@efferd/grid-filler"],"name":"testimonials-5","description":"Clean grid layout with full-width dividers and auto-filled grid cells.","categories":["testimonials"],"files":[{"path":"registry/blocks/testimonials/5/testimonials-section.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\n// https://magicui.design/docs/components/grid-pattern\nimport { GridPattern } from \"@/components/ui/grid-pattern\";\nimport {\n\tAvatar,\n\tAvatarFallback,\n\tAvatarImage,\n} from \"@/components/ui/avatar\";\nimport { FullWidthDivider } from \"@/components/full-width-divider\";\nimport { GridFiller } from \"@/components/grid-filler\";\n\ntype Testimonial = {\n\tname: string;\n\trole: string;\n\timage: string;\n\tcompany?: string;\n\tquote: string;\n};\n\nconst testimonials: Testimonial[] = [\n\t{\n\t\tquote:\n\t\t\t\"Efferd is so polished I might just retire and become a full-time potato farmer. The ecosystem is in safe hands.\",\n\t\timage: \"https://github.com/shadcn.png\",\n\t\tname: \"Shadcn\",\n\t\trole: \"Founder\",\n\t\tcompany: \"Shadcn UI\",\n\t},\n\t{\n\t\tquote:\n\t\t\t\"Efferd is why I still have hair. No more pulling it out over centering divs or fighting with CSS grid.\",\n\t\timage: \"https://github.com/rauchg.png\",\n\t\tname: \"Guillermo Rauch\",\n\t\trole: \"CEO\",\n\t\tcompany: \"Vercel\",\n\t},\n\t{\n\t\tquote:\n\t\t\t\"I tried to buy Efferd but they wouldn't sell. So I just bought Twitter instead to complain about it.\",\n\t\timage: \"https://unavatar.io/x/elonmusk\",\n\t\tname: \"Elon Musk\",\n\t\trole: \"CEO\",\n\t\tcompany: \"X.com\",\n\t},\n\t{\n\t\tquote:\n\t\t\t\"We just acquired Efferd for 3 gazillion dollars. We're calling it iEfferd. It's our best product yet.\",\n\t\timage: \"https://unavatar.io/x/tim_cook\",\n\t\tname: \"Tim Cook\",\n\t\trole: \"CEO\",\n\t\tcompany: \"Apple\",\n\t},\n\t{\n\t\tquote:\n\t\t\t\"I'm considering shipping Efferd components with Prime delivery. 2-day shipping on beautiful UIs? Done.\",\n\t\timage: \"https://unavatar.io/x/JeffBezos\",\n\t\tname: \"Jeff Bezos\",\n\t\trole: \"Founder\",\n\t\tcompany: \"Amazon\",\n\t},\n\t{\n\t\tquote:\n\t\t\t\"We're rewriting OpenAI's entire frontend in Efferd. The AGI told us it's the only logical choice.\",\n\t\timage: \"https://unavatar.io/x/sama\",\n\t\tname: \"Sam Altman\",\n\t\trole: \"CEO\",\n\t\tcompany: \"OpenAI\",\n\t},\n\t{\n\t\tquote:\n\t\t\t\"We processed 100 petabytes of data to find the perfect UI library. The algorithm returned 'Efferd' with 99.9% confidence.\",\n\t\timage: \"https://unavatar.io/x/sundarpichai\",\n\t\tname: \"Sundar Pichai\",\n\t\trole: \"CEO\",\n\t\tcompany: \"Google\",\n\t},\n\t{\n\t\tquote:\n\t\t\t\"Our links might 404 sometimes, but thanks to Efferd, at least the 404 page looks absolutely stunning.\",\n\t\timage: \"https://github.com/steven-tey.png\",\n\t\tname: \"Steven Tey\",\n\t\trole: \"Founder\",\n\t\tcompany: \"Dub.co\",\n\t},\n\t{\n\t\tquote:\n\t\t\t\"It's so fast, I finished my UI sprint before my next meeting even started. Open source for the win.\",\n\t\timage: \"https://unavatar.io/x/peer_rich\",\n\t\tname: \"Peer Richelsen\",\n\t\trole: \"Co-Founder\",\n\t\tcompany: \"Cal.com\",\n\t},\n\t{\n\t\tquote:\n\t\t\t\"21st.dev brings in 100k users daily just to see Efferd. We got into YC solely because of this UI library. And yes, we're rich now.\",\n\t\timage: \"https://github.com/serafimcloud.png\",\n\t\tname: \"Serafim\",\n\t\trole: \"Founder\",\n\t\tcompany: \"21st Labs.\",\n\t},\n\t{\n\t\tquote:\n\t\t\t\"I posted a video on Efferd components and it got more views than my cat video. That's statistically impossible.\",\n\t\timage: \"https://github.com/TheOrcDev.png\",\n\t\tname: \"OrcDev\",\n\t\trole: \"Youtuber\",\n\t},\n];\n\nexport function TestimonialsSection() {\n\treturn (\n\t\t<div className=\"mx-auto min-h-screen max-w-5xl space-y-8 border-x py-6\">\n\t\t\t<div className=\"flex flex-col gap-2 px-4 md:px-6\">\n\t\t\t\t<h1 className=\"text-balance font-semibold text-3xl tracking-wide md:text-4xl xl:font-bold\">\n\t\t\t\t\tReal Results, Real Voices\n\t\t\t\t</h1>\n\t\t\t\t<p className=\"text-muted-foreground text-sm md:text-base lg:text-lg\">\n\t\t\t\t\tUsed by thousands of developers to build beautiful, accessible, and\n\t\t\t\t\tperformant web applications.\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t\t<div className=\"relative grid grid-cols-1 gap-px bg-border sm:grid-cols-2 lg:grid-cols-3\">\n\t\t\t\t<FullWidthDivider position=\"top\" />\n\t\t\t\t{testimonials.map((testimonial) => (\n\t\t\t\t\t<TestimonialsCard key={testimonial.name} testimonial={testimonial} />\n\t\t\t\t))}\n\t\t\t\t<GridFiller\n\t\t\t\t\tclassName=\"bg-background\"\n\t\t\t\t\tlgColumns={3}\n\t\t\t\t\tsmColumns={2}\n\t\t\t\t\ttotalItems={testimonials.length}\n\t\t\t\t/>\n\t\t\t\t<FullWidthDivider position=\"bottom\" />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction TestimonialsCard({\n\ttestimonial,\n\tclassName,\n\t...props\n}: React.ComponentProps<\"figure\"> & {\n\ttestimonial: Testimonial;\n}) {\n\tconst { quote, company, image, name, role } = testimonial;\n\treturn (\n\t\t<figure\n\t\t\tclassName={cn(\n\t\t\t\t\"relative grid grid-cols-[auto_1fr] gap-x-3 overflow-hidden bg-background p-4\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"mask-[radial-gradient(farthest-side_at_top,white,transparent)] pointer-events-none absolute top-0 left-1/2 -mt-2 -ml-20 size-full\">\n\t\t\t\t<GridPattern\n\t\t\t\t\tclassName=\"absolute inset-0 size-full stroke-border\"\n\t\t\t\t\theight={25}\n\t\t\t\t\twidth={25}\n\t\t\t\t\tx={-12}\n\t\t\t\t\ty={4}\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t<Avatar className=\"size-8 rounded-full\">\n\t\t\t\t<AvatarImage alt={`${name}'s profile picture`} src={image} />\n\t\t\t\t<AvatarFallback>{name.charAt(0)}</AvatarFallback>\n\t\t\t</Avatar>\n\t\t\t<div>\n\t\t\t\t<figcaption className=\"-mt-0.5 -space-y-0.5\">\n\t\t\t\t\t<cite className=\"text-sm not-italic md:text-base\">{name}</cite>\n\t\t\t\t\t<span className=\"block font-light text-[11px] text-muted-foreground tracking-tight\">\n\t\t\t\t\t\t{role}\n\t\t\t\t\t\t{company && `, ${company}`}\n\t\t\t\t\t</span>\n\t\t\t\t</figcaption>\n\t\t\t\t<blockquote className=\"mt-3\">\n\t\t\t\t\t<p className=\"text-foreground/80 text-sm tracking-wide\">{quote}</p>\n\t\t\t\t</blockquote>\n\t\t\t</div>\n\t\t</figure>\n\t);\n}\n"}]}