{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonial-01",
  "title": "Testimonial 01",
  "description": "Scrolling testimonial section with two animated marquee rows of customer review cards. Use it as a social proof belt on landing pages to continuously surface customer validation without requiring any user interaction.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "card",
    "avatar",
    "https://magicui.design/r/marquee.json"
  ],
  "files": [
    {
      "path": "src/registry/blocks/testimonial-01/testimonial.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport { Marquee } from \"@/components/ui/marquee\";\nimport { Card } from \"@/components/ui/card\";\nimport { Avatar, AvatarFallback } from \"@/components/ui/avatar\";\n\ninterface TestimonialItem {\n  name: string;\n  role: string;\n  content: string;\n  avatar?: string;\n}\n\ninterface Testimonial01Props {\n  title?: string;\n  description?: string;\n  testimonials?: TestimonialItem[];\n  className?: string;\n}\n\nconst testimonials: TestimonialItem[] = [\n  {\n    name: \"Alex Chen\",\n    role: \"Frontend Developer\",\n    content:\n      \"These components saved me weeks of development time. Copy, paste, customize—it's that simple!\",\n  },\n  {\n    name: \"Sarah Johnson\",\n    role: \"UI/UX Designer\",\n    content:\n      \"The components are beautifully designed and fully customizable. Perfect for rapid prototyping and production.\",\n  },\n  {\n    name: \"Michael Rodriguez\",\n    role: \"Full-Stack Engineer\",\n    content:\n      \"TypeScript support and accessibility built-in? This is exactly what I need to ship faster without compromising quality.\",\n  },\n  {\n    name: \"Emily Watson\",\n    role: \"Product Manager\",\n    content:\n      \"Our team's velocity increased significantly. We're shipping features faster than ever with these reusable components.\",\n  },\n  {\n    name: \"David Kim\",\n    role: \"Senior Developer\",\n    content:\n      \"Zero dependencies, fully typed, and production-ready. This is how component libraries should be built.\",\n  },\n  {\n    name: \"Lisa Anderson\",\n    role: \"Tech Lead\",\n    content:\n      \"The best part? Everything is customizable with Tailwind. No fighting with CSS frameworks or complex overrides.\",\n  },\n];\n\nconst TestimonialCard = ({ name, role, content, avatar }: TestimonialItem) => {\n  const initials = name\n    .split(\" \")\n    .map((n) => n[0])\n    .join(\"\")\n    .toUpperCase();\n\n  return (\n    <Card className=\"w-80 gap-4 p-6\">\n      <div className=\"flex items-center gap-2\">\n        <Avatar className=\"size-10\">\n          {avatar ? (\n            <img src={avatar} alt={name} className=\"size-full object-cover\" />\n          ) : (\n            <AvatarFallback className=\"bg-primary font-medium text-primary-foreground\">\n              {initials}\n            </AvatarFallback>\n          )}\n        </Avatar>\n        <div className=\"flex flex-col gap-0.5\">\n          <p className=\"font-medium\">{name}</p>\n          <p className=\"text-sm text-muted-foreground\">{role}</p>\n        </div>\n      </div>\n      <p className=\"pl-1 text-sm text-muted-foreground\">{content}</p>\n    </Card>\n  );\n};\n\nconst Testimonial01 = ({\n  title = \"Loved by Developers\",\n  description = \"See what developers are saying about building faster with our components\",\n  testimonials: items = testimonials,\n  className,\n}: Testimonial01Props) => {\n  const firstRow = items.slice(0, Math.ceil(items.length / 2));\n  const secondRow = items.slice(Math.ceil(items.length / 2));\n\n  return (\n    <section className={cn(\"container mx-auto py-12 md:py-24\", className)}>\n      <div className=\"mx-auto flex flex-col items-center gap-4 px-8 text-center\">\n        <h2 className=\"text-4xl leading-tight font-medium tracking-tight md:text-5xl\">\n          {title}\n        </h2>\n        <p className=\"max-w-2xl text-muted-foreground md:text-lg\">\n          {description}\n        </p>\n      </div>\n      <div className=\"relative mt-8 flex flex-col overflow-hidden\">\n        <Marquee pauseOnHover className=\"[--duration:20s]\">\n          {firstRow.map((testimonial, index) => (\n            <TestimonialCard key={index} {...testimonial} />\n          ))}\n        </Marquee>\n        <Marquee reverse pauseOnHover className=\"[--duration:20s]\">\n          {secondRow.map((testimonial, index) => (\n            <TestimonialCard key={index} {...testimonial} />\n          ))}\n        </Marquee>\n        <div className=\"pointer-events-none absolute inset-y-0 left-0 w-1/6 bg-linear-to-r from-background\" />\n        <div className=\"pointer-events-none absolute inset-y-0 right-0 w-1/6 bg-linear-to-l from-background\" />\n      </div>\n    </section>\n  );\n};\n\nexport default Testimonial01;\n",
      "type": "registry:component",
      "target": "components/testimonial-01.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/testimonial-01.webp",
    "imageDark": "/r/previews/testimonial-01-dark.webp",
    "prose": {
      "about": "Testimonial 01 is a social proof section with two rows of customer review cards that animate continuously in opposite horizontal directions using CSS marquee animations. Each card displays a customer avatar, name, role, and quoted review text. Built with Tailwind CSS animations and shadcn/ui Card components, the marquee runs on CSS transforms rather than JavaScript — making it lightweight and performant. The animation pauses on hover to let users read individual cards.",
      "whenToUse": [
        "Landing pages where continuous motion keeps the testimonial section engaging as users scroll past",
        "Products with a large number of reviews where a static grid would require truncation",
        "B2C products where peer validation is a primary conversion driver",
        "Pages where you want social proof visible without requiring the user to interact with a carousel"
      ],
      "notes": "Duplicate a few cards at the end of the array to prevent a visible gap when the marquee loops. The animation is paused via CSS on hover — no JavaScript event listeners needed.",
      "faqs": [
        {
          "question": "Does the marquee animation use JavaScript?",
          "answer": "No. It runs on CSS transforms, which keeps it lightweight and performant compared to a JavaScript-driven carousel."
        },
        {
          "question": "What happens when a user hovers over the testimonials?",
          "answer": "The marquee pauses on hover so users can read a card without it scrolling away, then resumes when the cursor leaves."
        },
        {
          "question": "Do I need a lot of real testimonials to use this block?",
          "answer": "No, but duplicate a few cards at the end of your array — with too few unique cards the marquee loop shows a visible gap."
        }
      ]
    }
  },
  "categories": [
    "social-proof"
  ],
  "type": "registry:block"
}