{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonials-featured",
  "title": "Featured testimonial",
  "description": "One rotating quote with crossfading portraits, framed by a beam card over a row of counting stats.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://velora.colorlib.com/r/animated-testimonials.json",
    "https://velora.colorlib.com/r/blur-fade.json",
    "https://velora.colorlib.com/r/border-beam.json",
    "https://velora.colorlib.com/r/grid-pattern.json",
    "https://velora.colorlib.com/r/number-ticker.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/testimonials-featured.tsx",
      "content": "import { QuoteIcon, StarIcon } from \"lucide-react\";\n\nimport {\n  AnimatedTestimonials,\n  type Testimonial,\n} from \"@/components/velora/animated-testimonials\";\nimport { BlurFade } from \"@/components/velora/blur-fade\";\nimport { BorderBeam } from \"@/components/velora/border-beam\";\nimport { GridPattern } from \"@/components/velora/grid-pattern\";\nimport { NumberTicker } from \"@/components/velora/number-ticker\";\n\nconst portrait = (id: string) =>\n  `https://images.unsplash.com/photo-${id}?w=400&h=400&q=70&auto=format&fit=crop`;\n\nconst TESTIMONIALS: Testimonial[] = [\n  {\n    quote:\n      \"Acme gave us back a day a week. Planning, specs and release notes live in one place, and the whole company can finally see what we're shipping and why.\",\n    name: \"Maya Lindqvist\",\n    role: \"Head of Product, Northwind\",\n    src: portrait(\"1494790108377-be9c29b29330\"),\n  },\n  {\n    quote:\n      \"We migrated 40 teams in a fortnight without a single blocked sprint. It's the rare tool engineers ask to keep using after the trial.\",\n    name: \"Daniel Okafor\",\n    role: \"VP Engineering, Lumen Labs\",\n    src: portrait(\"1507003211169-0a1dd7228f2d\"),\n  },\n  {\n    quote:\n      \"Our changelog used to be a chore nobody owned. Now it's generated from merged work, and customers actually subscribe to it.\",\n    name: \"Nadia Haddad\",\n    role: \"Growth Lead, Quartzite\",\n    src: portrait(\"1531123897727-8f129e1688ce\"),\n  },\n  {\n    quote:\n      \"Calm, fast and keyboard-first. Acme is the first process tool my team has never once complained about.\",\n    name: \"Marcus Bell\",\n    role: \"CTO, Tidewater\",\n    src: portrait(\"1506794778202-cad84cf45f1d\"),\n  },\n];\n\nconst STATS = [\n  { label: \"Average rating from 2,400+ reviews\", value: 4.9, decimals: 1, suffix: \"/5\", stars: true },\n  { label: \"Teams planning their work in Acme\", value: 12000, suffix: \"+\" },\n  { label: \"Hours saved per person, every week\", value: 6.5, decimals: 1, suffix: \"h\" },\n];\n\n/**\n * One rotating customer quote as the centrepiece, framed by a travelling\n * border beam, with a row of stats that count up as they scroll into view.\n */\nexport function TestimonialsFeatured() {\n  return (\n    <section className=\"relative isolate overflow-hidden px-6 py-24 sm:py-32 lg:px-8\">\n      <GridPattern className=\"-z-10 [mask-image:radial-gradient(ellipse_at_top,black,transparent_65%)]\" />\n      <div\n        aria-hidden\n        className=\"absolute inset-x-0 top-40 -z-10 mx-auto h-64 max-w-3xl rounded-full bg-gradient-to-r from-brand-from/15 via-brand-via/10 to-brand-to/15 blur-3xl\"\n      />\n\n      <div className=\"mx-auto max-w-4xl\">\n        <BlurFade className=\"mx-auto max-w-2xl text-center\">\n          <p className=\"text-sm font-semibold text-brand\">Customer stories</p>\n          <h2 className=\"mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-5xl\">\n            The tool our customers recommend first\n          </h2>\n          <p className=\"mx-auto mt-5 max-w-xl text-lg text-pretty text-muted-foreground\">\n            From ten-person startups to companies with hundreds of teams, Acme\n            is where the work gets planned and shipped.\n          </p>\n        </BlurFade>\n\n        <BlurFade delay={0.1}>\n          <figure className=\"relative mt-14 rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur-sm sm:p-10 lg:p-12\">\n            <BorderBeam size={120} duration={10} />\n            <span\n              aria-hidden\n              className=\"absolute -top-5 right-6 grid size-10 place-items-center rounded-full bg-gradient-to-br from-brand-from to-brand-to text-brand-foreground shadow-lg ring-4 ring-background sm:right-10\"\n            >\n              <QuoteIcon className=\"size-4 fill-current\" />\n            </span>\n            <AnimatedTestimonials\n              testimonials={TESTIMONIALS}\n              interval={7}\n              className=\"sm:gap-10 [&_blockquote]:min-h-52 sm:[&_blockquote]:min-h-40 [&_blockquote_p]:text-xl [&_blockquote_p]:font-medium [&_blockquote_p]:tracking-tight sm:[&_blockquote_p]:text-2xl\"\n            />\n          </figure>\n        </BlurFade>\n\n        <dl className=\"mt-12 grid gap-8 text-center sm:grid-cols-3 sm:gap-0 sm:divide-x\">\n          {STATS.map((stat) => (\n            <div key={stat.label} className=\"flex flex-col-reverse items-center gap-2 px-6\">\n              <dt className=\"max-w-48 text-sm text-pretty text-muted-foreground\">\n                {stat.label}\n              </dt>\n              <dd className=\"flex flex-col items-center gap-2\">\n                {stat.stars && (\n                  <span className=\"flex gap-0.5 text-brand\" aria-hidden>\n                    {Array.from({ length: 5 }).map((_, i) => (\n                      <StarIcon key={i} className=\"size-4 fill-current\" />\n                    ))}\n                  </span>\n                )}\n                <NumberTicker\n                  value={stat.value}\n                  decimalPlaces={stat.decimals ?? 0}\n                  suffix={stat.suffix}\n                  className=\"text-4xl font-semibold tracking-tight\"\n                />\n              </dd>\n            </div>\n          ))}\n        </dl>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/testimonials-featured.tsx"
    }
  ],
  "categories": [
    "testimonial-sections"
  ],
  "type": "registry:block"
}