{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonials-01",
  "title": "Testimonials 01",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/testimonials-01/Testimonials01.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Quote } from 'lucide-react'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nconst testimonials = [\n  {\n    quote:\n      'We replaced four spreadsheets and two SaaS tools with this. Onboarding time dropped from 6 days to under 4 hours.',\n    name: 'Aisha Rahman',\n    role: 'Head of People',\n    company: 'Northwind Logistics',\n    initials: 'AR',\n  },\n  {\n    quote:\n      'The audit trail alone is worth it. SOC2 evidence collection went from a quarterly nightmare to a one-click export.',\n    name: 'Marco Vidal',\n    role: 'Director of Compliance',\n    company: 'Helio Health',\n    initials: 'MV',\n  },\n  {\n    quote:\n      'My favourite part is how fast it is. No spinners, no loading states. Search returns instantly across the entire org.',\n    name: 'Tomoko Saito',\n    role: 'IT Operations',\n    company: 'Pixel & Co',\n    initials: 'TS',\n  },\n]\n\nexport function Testimonials01() {\n  const [active, setActive] = React.useState(0)\n\n  return (\n    <section className=\"bg-muted/30\">\n      <div className=\"mx-auto max-w-4xl px-6 py-24\">\n        <div className=\"text-center\">\n          <p className=\"text-primary text-sm font-medium tracking-widest uppercase\">Testimonials</p>\n          <h2 className=\"mt-2 text-3xl font-semibold tracking-tight sm:text-4xl\">Loved by teams everywhere</h2>\n        </div>\n\n        <Card className=\"mt-10\">\n          <CardContent className=\"space-y-6 p-8 text-center\">\n            <Quote className=\"text-primary mx-auto size-8\" />\n            <p className=\"text-foreground text-xl leading-relaxed sm:text-2xl\">\n              &ldquo;{testimonials[active].quote}&rdquo;\n            </p>\n            <div className=\"flex flex-col items-center gap-2\">\n              <Avatar className=\"size-12\">\n                <AvatarFallback>{testimonials[active].initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p className=\"text-sm font-semibold\">{testimonials[active].name}</p>\n                <p className=\"text-muted-foreground text-xs\">\n                  {testimonials[active].role} · {testimonials[active].company}\n                </p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <div className=\"mt-6 flex justify-center gap-2\">\n          {testimonials.map((t, i) => (\n            <button\n              key={t.name}\n              type=\"button\"\n              aria-label={`Show testimonial from ${t.name}`}\n              aria-current={i === active}\n              className={cn(\n                'size-2 rounded-full transition-all duration-200',\n                i === active ? 'bg-primary w-6' : 'bg-muted-foreground/30 hover:bg-muted-foreground/60',\n              )}\n              onClick={() => setActive(i)}\n            />\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/Testimonials01.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Centered single-card testimonial carousel. Quote icon, large pull-quote, avatar with initials, name + role + company line. Pip row underneath flips between three testimonials with an animated active pill.",
  "categories": [
    "marketing"
  ]
}