{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["avatar","@efferd/infinite-slider"],"name":"testimonials-6","description":"Infinite vertical testimonial scroller with smooth motion and repeated card animation.","categories":["testimonials"],"files":[{"path":"registry/blocks/testimonials/6/testimonials-section.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport { InfiniteSlider } from \"@/components/ui/infinite-slider\";\nimport {\n\tAvatar,\n\tAvatarFallback,\n\tAvatarImage,\n} from \"@/components/ui/avatar\";\n\ntype Testimonial = {\n\tquote: string;\n\timage: string;\n\tname: string;\n\trole: string;\n\tcompany?: 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\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];\n\nconst firstColumn = testimonials.slice(0, 3);\nconst secondColumn = testimonials.slice(3, 6);\nconst thirdColumn = testimonials.slice(6, 9);\n\nexport function TestimonialsSection() {\n\treturn (\n\t\t<section className=\"relative py-10\">\n\t\t\t<div className=\"mx-auto max-w-5xl\">\n\t\t\t\t<div className=\"mx-auto flex max-w-sm flex-col items-center justify-center gap-4\">\n\t\t\t\t\t<div className=\"flex justify-center\">\n\t\t\t\t\t\t<div className=\"rounded-lg border px-4 py-1\">Testimonials</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<h2 className=\"font-bold text-3xl tracking-tighter lg:text-4xl\">\n\t\t\t\t\t\tWhat our users say\n\t\t\t\t\t</h2>\n\t\t\t\t\t<p className=\"text-center text-muted-foreground text-sm\">\n\t\t\t\t\t\tSee what our customers have to say about us.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"mt-10 flex max-h-160 justify-center gap-6 overflow-hidden\",\n\t\t\t\t\t\t\"mask-[linear-gradient(to_bottom,transparent,black_25%,black_75%,transparent)]\"\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<InfiniteSlider direction=\"vertical\" speed={30} speedOnHover={15}>\n\t\t\t\t\t\t{firstColumn.map((testimonial) => (\n\t\t\t\t\t\t\t<TestimonialsCard\n\t\t\t\t\t\t\t\tkey={testimonial.name}\n\t\t\t\t\t\t\t\ttestimonial={testimonial}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</InfiniteSlider>\n\t\t\t\t\t<InfiniteSlider\n\t\t\t\t\t\tclassName=\"hidden md:block\"\n\t\t\t\t\t\tdirection=\"vertical\"\n\t\t\t\t\t\tspeed={50}\n\t\t\t\t\t\tspeedOnHover={25}\n\t\t\t\t\t>\n\t\t\t\t\t\t{secondColumn.map((testimonial) => (\n\t\t\t\t\t\t\t<TestimonialsCard\n\t\t\t\t\t\t\t\tkey={testimonial.name}\n\t\t\t\t\t\t\t\ttestimonial={testimonial}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</InfiniteSlider>\n\t\t\t\t\t<InfiniteSlider\n\t\t\t\t\t\tclassName=\"hidden lg:block\"\n\t\t\t\t\t\tdirection=\"vertical\"\n\t\t\t\t\t\tspeed={35}\n\t\t\t\t\t\tspeedOnHover={17}\n\t\t\t\t\t>\n\t\t\t\t\t\t{thirdColumn.map((testimonial) => (\n\t\t\t\t\t\t\t<TestimonialsCard\n\t\t\t\t\t\t\t\tkey={testimonial.name}\n\t\t\t\t\t\t\t\ttestimonial={testimonial}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</InfiniteSlider>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n\nfunction TestimonialsCard({\n\ttestimonial,\n\tclassName,\n\t...props\n}: React.ComponentProps<\"figure\"> & {\n\ttestimonial: Testimonial;\n}) {\n\tconst { quote, image, name, role, company } = testimonial;\n\treturn (\n\t\t<figure\n\t\t\tclassName={cn(\n\t\t\t\t\"w-full max-w-xs rounded-3xl border bg-card p-8 shadow-foreground/10 shadow-lg dark:bg-card/20\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<blockquote>{quote}</blockquote>\n\t\t\t<figcaption className=\"mt-5 flex items-center gap-2\">\n\t\t\t\t<Avatar className=\"size-8 rounded-full\">\n\t\t\t\t\t<AvatarImage alt={`${name}'s profile picture`} src={image} />\n\t\t\t\t\t<AvatarFallback>{name.charAt(0)}</AvatarFallback>\n\t\t\t\t</Avatar>\n\t\t\t\t<div className=\"flex flex-col\">\n\t\t\t\t\t<cite className=\"font-medium not-italic leading-5 tracking-tight\">\n\t\t\t\t\t\t{name}\n\t\t\t\t\t</cite>\n\t\t\t\t\t<span className=\"text-muted-foreground text-sm leading-5 tracking-tight\">\n\t\t\t\t\t\t{role} {company && `, ${company}`}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</figcaption>\n\t\t</figure>\n\t);\n}\n"}]}