{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":[],"name":"testimonials-3","description":"Staggered grid layout of testimonial cards with quote icons.","categories":["testimonials"],"files":[{"path":"registry/blocks/testimonials/3/testimonials-section.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport {\n\tAvatar,\n\tAvatarFallback,\n\tAvatarImage,\n} from \"@/components/ui/avatar\";\nimport { DecorIcon } from \"@/components/decor-icon\";\n\ntype Testimonial = {\n\tquote: string;\n\tname: string;\n\trole: string;\n\tcompany: string;\n\timage: string;\n};\n\nconst testimonials: Testimonial[] = [\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];\n\nexport function TestimonialsSection() {\n\treturn (\n\t\t<div className=\"mx-auto -mt-10 grid w-full max-w-5xl gap-8 md:grid-cols-3 md:gap-6\">\n\t\t\t{testimonials.map((testimonial, index) => (\n\t\t\t\t<TestimonialCard\n\t\t\t\t\tindex={index}\n\t\t\t\t\tkey={testimonial.name}\n\t\t\t\t\ttestimonial={testimonial}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\nfunction TestimonialCard({\n\ttestimonial,\n\tindex,\n\tclassName,\n\t...props\n}: React.ComponentProps<\"figure\"> & {\n\ttestimonial: Testimonial;\n\tindex: number;\n}) {\n\tconst { quote, name, role, company, image } = testimonial;\n\n\treturn (\n\t\t<figure\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex flex-col justify-between gap-6 px-8 pt-8 pb-6 shadow-xs md:translate-y-[calc(3rem*var(--t-card-index))]\",\n\t\t\t\t\"dark:bg-[radial-gradient(50%_80%_at_25%_0%,--theme(--color-foreground/.1),transparent)]\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t\"--t-card-index\": index,\n\t\t\t\t} as React.CSSProperties\n\t\t\t}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"absolute -inset-y-4 -left-px w-px bg-border\" />\n\t\t\t<div className=\"absolute -inset-y-4 -right-px w-px bg-border\" />\n\t\t\t<div className=\"absolute -inset-x-4 -top-px h-px bg-border\" />\n\t\t\t<div className=\"absolute -right-4 -bottom-px -left-4 h-px bg-border\" />\n\t\t\t<DecorIcon className=\"size-3.5\" position=\"top-left\" />\n\n\t\t\t<blockquote className=\"flex gap-4\">\n\t\t\t\t<IconPlaceholder\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName=\"size-6 shrink-0 stroke-1\"\n\t\t\t\t\thugeicons=\"QuoteDownIcon\"\n\t\t\t\t\tlucide=\"QuoteIcon\"\n\t\t\t\t\tphosphor=\"QuotesIcon\"\n\t\t\t\t\tremixicon=\"RiDoubleQuotesL\"\n\t\t\t\t\ttabler=\"IconQuote\"\n\t\t\t\t/>\n\n\t\t\t\t<p className=\"flex-1 font-normal text-base text-muted-foreground leading-relaxed\">\n\t\t\t\t\t{quote}\n\t\t\t\t</p>\n\t\t\t</blockquote>\n\n\t\t\t<figcaption className=\"flex items-center gap-3\">\n\t\t\t\t<Avatar className=\"size-10 rounded-full ring-2 ring-border ring-offset-2 ring-offset-background transition-shadow group-hover:ring-foreground/20\">\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 text-foreground text-sm not-italic\">\n\t\t\t\t\t\t{name}\n\t\t\t\t\t</cite>\n\t\t\t\t\t<p className=\"text-muted-foreground text-xs\">\n\t\t\t\t\t\t{role}, <span className=\"text-foreground/80\">{company}</span>\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</figcaption>\n\t\t</figure>\n\t);\n}\n"}]}