{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "testimonials-01",
  "title": "Testimonials 01",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/testimonials-01/Testimonials01.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Quote } from 'lucide-vue-next'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Card, CardContent } from '@/components/ui/card'\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\nconst active = ref(0)\n</script>\n\n<template>\n  <section class=\"bg-muted/30\">\n    <div class=\"mx-auto max-w-4xl px-6 py-24\">\n      <div class=\"text-center\">\n        <p class=\"text-primary text-sm font-medium tracking-widest uppercase\">Testimonials</p>\n        <h2 class=\"mt-2 text-3xl font-semibold tracking-tight sm:text-4xl\">Loved by teams everywhere</h2>\n      </div>\n\n      <Card class=\"mt-10\">\n        <CardContent class=\"space-y-6 p-8 text-center\">\n          <Quote class=\"text-primary mx-auto size-8\" />\n          <p class=\"text-foreground text-xl leading-relaxed sm:text-2xl\">\n            &ldquo;{{ testimonials[active].quote }}&rdquo;\n          </p>\n          <div class=\"flex flex-col items-center gap-2\">\n            <Avatar class=\"size-12\">\n              <AvatarFallback>{{ testimonials[active].initials }}</AvatarFallback>\n            </Avatar>\n            <div>\n              <p class=\"text-sm font-semibold\">{{ testimonials[active].name }}</p>\n              <p class=\"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 class=\"mt-6 flex justify-center gap-2\">\n        <button\n          v-for=\"(t, i) in testimonials\"\n          :key=\"t.name\"\n          type=\"button\"\n          :aria-label=\"`Show testimonial from ${t.name}`\"\n          :aria-current=\"i === active\"\n          class=\"size-2 rounded-full transition-all duration-200\"\n          :class=\"i === active ? 'bg-primary w-6' : 'bg-muted-foreground/30 hover:bg-muted-foreground/60'\"\n          @click=\"active = i\"\n        />\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/Testimonials01.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/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"
  ]
}