{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonial",
  "title": "Testimonials",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/testimonial/TestimonialLogoQuoteRow.tsx",
      "content": "'use client'\n\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Separator } from '@/components/ui/separator'\n\n// One sentence each. The row is a proof band, not a testimonial section — if a\n// quote needs two sentences it belongs in a card layout instead.\nconst quotes = [\n  {\n    wordmark: 'Northwind',\n    quote: 'Close starts from a reconciled position now, which it never did before.',\n    author: 'Erin Walsh',\n    role: 'VP Finance',\n    initials: 'EW',\n  },\n  {\n    wordmark: 'Halden',\n    quote: 'Clinic leads answer their own questions without filing a ticket.',\n    author: 'Daniel Brooks',\n    role: 'Head of Analytics',\n    initials: 'DB',\n  },\n  {\n    wordmark: 'Verity',\n    quote: 'Sales and finance forecast off one definition, so review is about the plan.',\n    author: 'Priya Raman',\n    role: 'RevOps Director',\n    initials: 'PR',\n  },\n]\n\nexport function TestimonialLogoQuoteRow() {\n  return (\n    <section data-slot=\"testimonial-logo-quote-row\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-16\">\n        <div className=\"grid gap-8 md:grid-cols-3 md:gap-10\">\n          {quotes.map((entry, index) => (\n            <figure key={entry.wordmark} className=\"relative\">\n              <span className=\"text-sm font-semibold tracking-[0.18em] uppercase\">{entry.wordmark}</span>\n              <blockquote className=\"mt-4 text-sm leading-relaxed text-pretty\">“{entry.quote}”</blockquote>\n              <figcaption className=\"mt-5 flex items-center gap-3\">\n                <Avatar className=\"size-8\">\n                  <AvatarFallback className=\"text-xs\">{entry.initials}</AvatarFallback>\n                </Avatar>\n                <div className=\"min-w-0\">\n                  <p className=\"truncate text-xs font-medium\">{entry.author}</p>\n                  <p className=\"text-muted-foreground truncate text-xs\">{entry.role}</p>\n                </div>\n              </figcaption>\n\n              {/* Vertical rules between columns only, so the row reads as one band. */}\n              {index < quotes.length - 1 && (\n                <Separator orientation=\"vertical\" className=\"absolute top-0 -right-5 hidden h-full md:block\" />\n              )}\n            </figure>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/testimonial/TestimonialLogoQuoteRow.tsx"
    },
    {
      "path": "packages/registry-react/blocks/testimonial/TestimonialMarqueeScroll.tsx",
      "content": "'use client'\n\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Card, CardContent } from '@/components/ui/card'\n\nconst quotes = [\n  { quote: 'Close starts from a reconciled position now.', author: 'Erin Walsh', role: 'VP Finance', initials: 'EW' },\n  {\n    quote: 'The request queue went away and stayed away.',\n    author: 'Daniel Brooks',\n    role: 'Head of Analytics',\n    initials: 'DB',\n  },\n  {\n    quote: 'One pipeline definition, two teams, no argument.',\n    author: 'Priya Raman',\n    role: 'RevOps Director',\n    initials: 'PR',\n  },\n  {\n    quote: 'We deleted eleven spreadsheets in one quarter.',\n    author: 'Marcus Ellery',\n    role: 'Staff Engineer',\n    initials: 'ME',\n  },\n  {\n    quote: 'Auditors get a change log instead of a folder.',\n    author: 'Sophie Lindqvist',\n    role: 'Controller',\n    initials: 'SL',\n  },\n  { quote: 'Permissions finally match the org chart.', author: 'Tom Fairbanks', role: 'IT Director', initials: 'TF' },\n  {\n    quote: 'Nobody has written a bespoke extract since March.',\n    author: 'Anna Reyes',\n    role: 'Data Lead',\n    initials: 'AR',\n  },\n  { quote: 'Forecast review is about the forecast again.', author: 'Grace Whitlock', role: 'CFO', initials: 'GW' },\n]\n\nconst rows = [quotes.slice(0, 4), quotes.slice(4)]\n\nexport function TestimonialMarqueeScroll() {\n  return (\n    <section data-slot=\"testimonial-marquee-scroll\" className=\"bg-background overflow-hidden\">\n      <div className=\"mx-auto max-w-6xl px-6 pt-20 lg:pt-28\">\n        <div className=\"max-w-2xl\">\n          <Badge variant=\"secondary\">What people say</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Eight hundred teams, unprompted</h2>\n        </div>\n      </div>\n\n      {/* Edge masks fade the rows into the page so cards never end mid-cut. */}\n      <div className=\"marquee relative mt-10 space-y-4 pb-20 lg:pb-28\">\n        {rows.map((row, index) => (\n          <div key={index} className=\"marquee__row\">\n            <div className={`marquee__track ${index === 1 ? 'marquee__track--reverse' : ''}`}>\n              {/* Duplicated once so the loop has an identical second half to scroll into. */}\n              {[...row, ...row].map((entry, i) => (\n                <Card key={`${entry.author}-${i}`} className=\"w-80 shrink-0\">\n                  <CardContent className=\"p-5\">\n                    <blockquote className=\"text-sm leading-relaxed\">“{entry.quote}”</blockquote>\n                    <div className=\"mt-4 flex items-center gap-3\">\n                      <Avatar className=\"size-8\">\n                        <AvatarFallback className=\"text-xs\">{entry.initials}</AvatarFallback>\n                      </Avatar>\n                      <div className=\"min-w-0\">\n                        <p className=\"truncate text-xs font-medium\">{entry.author}</p>\n                        <p className=\"text-muted-foreground truncate text-xs\">{entry.role}</p>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n\n      {/* Keyframes and the edge mask cannot be expressed as utilities; everything\n          else stays in the markup. Matches logo-ticker-infinite. */}\n      <style>{`\n        @keyframes marquee-scroll {\n          0% { transform: translateX(0); }\n          100% { transform: translateX(-50%); }\n        }\n        [data-slot=\"testimonial-marquee-scroll\"] .marquee {\n          mask-image: linear-gradient(to right, transparent, black 6rem, black calc(100% - 6rem), transparent);\n        }\n        [data-slot=\"testimonial-marquee-scroll\"] .marquee__row { overflow: hidden; }\n        [data-slot=\"testimonial-marquee-scroll\"] .marquee__track {\n          display: flex;\n          width: max-content;\n          gap: 1rem;\n          animation: marquee-scroll 46s linear infinite;\n        }\n        [data-slot=\"testimonial-marquee-scroll\"] .marquee__track--reverse { animation-direction: reverse; }\n        [data-slot=\"testimonial-marquee-scroll\"] .marquee__row:hover .marquee__track { animation-play-state: paused; }\n        @media (prefers-reduced-motion: reduce) {\n          [data-slot=\"testimonial-marquee-scroll\"] .marquee__track { animation: none; }\n          [data-slot=\"testimonial-marquee-scroll\"] .marquee__row { overflow-x: auto; }\n        }\n      `}</style>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/testimonial/TestimonialMarqueeScroll.tsx"
    },
    {
      "path": "packages/registry-react/blocks/testimonial/TestimonialMasonryVerifiedGrid.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { CheckCircle2, Star } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\ntype RoleFilter = 'all' | 'frontend' | 'founder' | 'design-eng'\n\ninterface Testimonial {\n  id: string\n  name: string\n  role: string\n  roleCategory: 'frontend' | 'founder' | 'design-eng'\n  company: string\n  avatar: string\n  handle: string\n  verifiedSource: 'Twitter' | 'GitHub' | 'LinkedIn'\n  quote: string\n  metricBadge?: string\n  starCount: number\n}\n\nconst testimonials: Testimonial[] = [\n  {\n    id: '1',\n    name: 'Alexandre Rivière',\n    role: 'Principal Design Engineer',\n    roleCategory: 'design-eng',\n    company: 'Linear Ecosystem',\n    avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&auto=format&fit=crop&q=80',\n    handle: '@alex_riviere',\n    verifiedSource: 'Twitter',\n    quote:\n      'The unbundled component model completely cured our team from npm dependency fatigue. We get raw SFCs and TSX with exact Tailwind v4 token alignments. Zero wrapper bloat, 100% code ownership.',\n    metricBadge: '4.2x Faster Ship Velocity',\n    starCount: 5,\n  },\n  {\n    id: '2',\n    name: 'Sarah Chen',\n    role: 'VP of Engineering',\n    roleCategory: 'founder',\n    company: 'ScaleDev AI',\n    avatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=150&auto=format&fit=crop&q=80',\n    handle: '@schen_ai',\n    verifiedSource: 'GitHub',\n    quote:\n      'We had severe bundle bloat with our previous UI package (over 500kB of unused JS). Switching to UIPKGE reduced our initial bundle to 38kB and solved our INP scores overnight.',\n    metricBadge: '-88% Bundle Size',\n    starCount: 5,\n  },\n  {\n    id: '3',\n    name: 'Marcus Vance',\n    role: 'Staff Frontend Architect',\n    roleCategory: 'frontend',\n    company: 'HyperQubit Cloud',\n    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&auto=format&fit=crop&q=80',\n    handle: '@marcus_vance',\n    verifiedSource: 'Twitter',\n    quote:\n      'Dual-framework parity is not a gimmick here—it is mathematically verified. We maintain a Nuxt 3 admin console and Next.js customer portal with identical design tokens and micro-interactions.',\n    metricBadge: '100% Token Parity',\n    starCount: 5,\n  },\n  {\n    id: '4',\n    name: 'Elena Rostova',\n    role: 'Head of Product Design',\n    roleCategory: 'design-eng',\n    company: 'Fintech Velocity',\n    avatar: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=150&auto=format&fit=crop&q=80',\n    handle: '@elena_craft',\n    verifiedSource: 'GitHub',\n    quote:\n      'The spring physics and micro-interactions match Linear and Raycast levels of craft. No arbitrary sub-12px micro-text or sloppy contrast issues.',\n    metricBadge: 'WCAG AA AA Certified',\n    starCount: 5,\n  },\n  {\n    id: '5',\n    name: 'David Kim',\n    role: 'Founder & CTO',\n    roleCategory: 'founder',\n    company: 'PulseOps',\n    avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150&auto=format&fit=crop&q=80',\n    handle: '@dkim_ops',\n    verifiedSource: 'Twitter',\n    quote:\n      'Being able to run `npx shadcn-vue add` and have clean, pristine components in our git repository is the single biggest DX breakthrough since Vite.',\n    metricBadge: 'Zero Upstream Lock-in',\n    starCount: 5,\n  },\n  {\n    id: '6',\n    name: 'Liam O’Connor',\n    role: 'Lead UI Engineer',\n    roleCategory: 'frontend',\n    company: 'Starlight Media',\n    avatar: 'https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=150&auto=format&fit=crop&q=80',\n    handle: '@liam_dev',\n    verifiedSource: 'GitHub',\n    quote:\n      'The marketing blocks are actually functional workbenches with live sliders, real SVG telemetry sparklines, and zero dummy shapes. Huge time saver.',\n    metricBadge: '450+ Verified Blocks',\n    starCount: 5,\n  },\n]\n\nexport interface TestimonialMasonryVerifiedGridProps {\n  className?: string\n}\n\nexport function TestimonialMasonryVerifiedGrid({ className }: TestimonialMasonryVerifiedGridProps) {\n  const [activeFilter, setActiveFilter] = React.useState<RoleFilter>('all')\n\n  const filteredTestimonials = React.useMemo(() => {\n    if (activeFilter === 'all') return testimonials\n    return testimonials.filter((t) => t.roleCategory === activeFilter)\n  }, [activeFilter])\n\n  return (\n    <section\n      data-slot=\"testimonial-masonry-verified-grid\"\n      className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}\n    >\n      <div className=\"mx-auto max-w-7xl space-y-12\">\n        {/* Section Header */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <Badge variant=\"secondary\" className=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n            <Star className=\"fill-warning text-warning size-3.5\" />\n            Verified Engineer Endorsements\n          </Badge>\n          <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n            Loved by design engineers and CTOs worldwide.\n          </h2>\n          <p className=\"text-muted-foreground text-base\">\n            Real feedback from engineers who dumped monolithic npm packages for unbundled code ownership.\n          </p>\n\n          {/* Category Filters */}\n          <div className=\"flex flex-wrap items-center justify-center gap-2 pt-2\">\n            <button\n              type=\"button\"\n              className={cn(\n                'rounded-lg border px-3.5 py-1 font-mono text-xs transition-colors',\n                activeFilter === 'all'\n                  ? 'border-primary bg-primary text-primary-foreground font-semibold shadow-xs'\n                  : 'border-border bg-card text-muted-foreground hover:text-foreground',\n              )}\n              onClick={() => setActiveFilter('all')}\n            >\n              All Perspectives ({testimonials.length})\n            </button>\n            <button\n              type=\"button\"\n              className={cn(\n                'rounded-lg border px-3.5 py-1 font-mono text-xs transition-colors',\n                activeFilter === 'design-eng'\n                  ? 'border-primary bg-primary text-primary-foreground font-semibold shadow-xs'\n                  : 'border-border bg-card text-muted-foreground hover:text-foreground',\n              )}\n              onClick={() => setActiveFilter('design-eng')}\n            >\n              Design Engineers\n            </button>\n            <button\n              type=\"button\"\n              className={cn(\n                'rounded-lg border px-3.5 py-1 font-mono text-xs transition-colors',\n                activeFilter === 'frontend'\n                  ? 'border-primary bg-primary text-primary-foreground font-semibold shadow-xs'\n                  : 'border-border bg-card text-muted-foreground hover:text-foreground',\n              )}\n              onClick={() => setActiveFilter('frontend')}\n            >\n              Frontend Architects\n            </button>\n            <button\n              type=\"button\"\n              className={cn(\n                'rounded-lg border px-3.5 py-1 font-mono text-xs transition-colors',\n                activeFilter === 'founder'\n                  ? 'border-primary bg-primary text-primary-foreground font-semibold shadow-xs'\n                  : 'border-border bg-card text-muted-foreground hover:text-foreground',\n              )}\n              onClick={() => setActiveFilter('founder')}\n            >\n              CTOs &amp; Founders\n            </button>\n          </div>\n        </div>\n\n        {/* Masonry Grid (3 Columns) */}\n        <div className=\"grid grid-cols-1 items-start gap-6 md:grid-cols-2 lg:grid-cols-3\">\n          {filteredTestimonials.map((t) => (\n            <Card\n              key={t.id}\n              className=\"border-border bg-card/95 hover:border-primary/40 group relative flex flex-col justify-between space-y-4 overflow-hidden rounded-2xl p-6 text-left shadow-lg transition-colors hover:shadow-xl\"\n            >\n              {/* Top Row: Avatar, Name, Handle, Verified Badge */}\n              <div className=\"flex items-start justify-between gap-3\">\n                <div className=\"flex items-center gap-3\">\n                  <img\n                    src={t.avatar}\n                    alt={t.name}\n                    className=\"border-border size-10 shrink-0 rounded-full border object-cover\"\n                  />\n                  <div className=\"min-w-0\">\n                    <div className=\"flex items-center gap-1.5\">\n                      <h4 className=\"text-foreground truncate font-mono text-xs font-bold\">{t.name}</h4>\n                      <CheckCircle2 className=\"text-info size-3.5 shrink-0\" />\n                    </div>\n                    <p className=\"text-muted-foreground truncate text-xs\">\n                      {t.role} &bull; {t.company}\n                    </p>\n                  </div>\n                </div>\n\n                <Badge variant=\"outline\" className=\"text-muted-foreground shrink-0 font-mono text-xs\">\n                  {t.verifiedSource}\n                </Badge>\n              </div>\n\n              {/* Quote text */}\n              <p className=\"text-foreground/90 text-xs leading-relaxed italic sm:text-sm\">&ldquo;{t.quote}&rdquo;</p>\n\n              {/* Footer Row: Star Rating & Impact Metric Badge */}\n              <div className=\"border-border/60 flex flex-wrap items-center justify-between gap-2 border-t pt-3\">\n                <div className=\"flex items-center gap-0.5\">\n                  {Array.from({ length: t.starCount }).map((_, s) => (\n                    <Star key={s} className=\"fill-warning text-warning size-3.5\" />\n                  ))}\n                </div>\n\n                {t.metricBadge && (\n                  <Badge variant=\"outline\" className=\"border-success/20 bg-success/10 text-success font-mono text-xs\">\n                    {t.metricBadge}\n                  </Badge>\n                )}\n              </div>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\nexport default TestimonialMasonryVerifiedGrid\n",
      "type": "registry:block",
      "target": "~/components/blocks/testimonial/TestimonialMasonryVerifiedGrid.tsx"
    },
    {
      "path": "packages/registry-react/blocks/testimonial/TestimonialQuoteCarouselTelemetry.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Building2, CheckCircle2, ChevronLeft, ChevronRight, TrendingUp, Zap } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\ninterface CaseStudy {\n  id: string\n  company: string\n  industry: string\n  quote: string\n  authorName: string\n  authorRole: string\n  avatar: string\n  kpis: {\n    label: string\n    value: string\n    delta: string\n  }[]\n  architectureSummary: string\n}\n\nconst caseStudies: CaseStudy[] = [\n  {\n    id: 'scale-ai',\n    company: 'HyperScale AI Platform',\n    industry: 'Enterprise Developer Cloud',\n    quote:\n      'We replaced an unwieldy 800MB npm design system package with UIPKGE unbundled registry primitives. Our developers can now inspect, customize, and refactor any component directly in our codebase without waiting for semver releases.',\n    authorName: 'Dr. Evelyn Ward',\n    authorRole: 'VP of Product Engineering',\n    avatar: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=150&auto=format&fit=crop&q=80',\n    kpis: [\n      { label: 'Bundle Footprint', value: '42 kB', delta: '-87% JS overhead' },\n      { label: 'Ship Velocity', value: '3.4x', delta: 'Release cycle speedup' },\n      { label: 'Interaction INP', value: '18 ms', delta: 'P99 render latency' },\n    ],\n    architectureSummary: 'Migrated from monolithic NPM design system to raw unbundled Vue 3.5 SFCs.',\n  },\n  {\n    id: 'fintech-apex',\n    company: 'Apex Clearinghouse',\n    industry: 'Institutional Fintech',\n    quote:\n      'Strict SOC2 Type II and HIPAA compliance required zero runtime telemetry from third-party vendor npm packages. UIPKGE’s own-your-code distribution model satisfied our security audits immediately.',\n    authorName: 'Vikram Mehta',\n    authorRole: 'Chief Information Security Officer',\n    avatar: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=150&auto=format&fit=crop&q=80',\n    kpis: [\n      { label: 'Security Audit', value: '100%', delta: 'Zero third-party CVEs' },\n      { label: 'Uptime Reliability', value: '99.98%', delta: 'Edge static distribution' },\n      { label: 'Annual TCO', value: '$140,000', delta: 'Saved in seat licenses' },\n    ],\n    architectureSummary: 'Full source code ownership inside air-gapped GitHub enterprise monorepo.',\n  },\n  {\n    id: 'pulse-health',\n    company: 'Vitalis Health Systems',\n    industry: 'Clinical Medical Intelligence',\n    quote:\n      'Our clinical dashboard has both a Vue 3 Nuxt clinician portal and a React Next.js patient mobile app. UIPKGE is the only registry providing 1:1 identical tokens and DOM accessibility across both.',\n    authorName: 'Camila Rodriguez',\n    authorRole: 'Director of Frontend Architecture',\n    avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&auto=format&fit=crop&q=80',\n    kpis: [\n      { label: 'Design Parity', value: '1:1', delta: '100% CVA class sync' },\n      { label: 'Accessibility', value: 'WCAG AAA', delta: 'Keyboard & screen reader' },\n      { label: 'Sync Overhead', value: '0 hrs', delta: 'Dual framework AST registry' },\n    ],\n    architectureSummary: 'Cross-framework design system synchronized via single `@theme inline` Tailwind file.',\n  },\n]\n\nexport interface TestimonialQuoteCarouselTelemetryProps {\n  className?: string\n}\n\nexport function TestimonialQuoteCarouselTelemetry({ className }: TestimonialQuoteCarouselTelemetryProps) {\n  const [activeIndex, setActiveIndex] = React.useState(0)\n\n  const nextSlide = () => {\n    setActiveIndex((prev) => (prev + 1) % caseStudies.length)\n  }\n\n  const prevSlide = () => {\n    setActiveIndex((prev) => (prev - 1 + caseStudies.length) % caseStudies.length)\n  }\n\n  const currentStudy = caseStudies[activeIndex]\n\n  return (\n    <section\n      data-slot=\"testimonial-quote-carousel-telemetry\"\n      className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}\n    >\n      <div className=\"mx-auto max-w-6xl space-y-12\">\n        {/* Section Header */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <Badge variant=\"secondary\" className=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n            <TrendingUp className=\"text-primary size-3.5\" />\n            Enterprise Customer Impact\n          </Badge>\n          <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n            Quantifiable ROI and architectural case studies.\n          </h2>\n          <p className=\"text-muted-foreground text-base\">\n            See how leading engineering teams transformed their frontend velocity with unbundled code.\n          </p>\n\n          {/* Company Tabs */}\n          <div className=\"flex flex-wrap items-center justify-center gap-2 pt-2\">\n            {caseStudies.map((study, idx) => (\n              <button\n                key={study.id}\n                type=\"button\"\n                className={cn(\n                  'flex items-center gap-1.5 rounded-lg border px-3.5 py-1.5 font-mono text-xs transition-colors',\n                  activeIndex === idx\n                    ? 'border-primary bg-primary text-primary-foreground font-semibold shadow-xs'\n                    : 'border-border bg-card text-muted-foreground hover:text-foreground',\n                )}\n                onClick={() => setActiveIndex(idx)}\n              >\n                <Building2 className=\"size-3.5\" />\n                <span>{study.company}</span>\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {/* Spotlight Workbench Card (Split-Pane) */}\n        <Card className=\"border-border bg-card/95 relative overflow-hidden rounded-3xl p-6 text-left shadow-sm sm:p-10\">\n          <div className=\"grid grid-cols-1 items-center gap-8 lg:grid-cols-12\">\n            {/* Left Column: Quote & Executive Info (7 Cols) */}\n            <div className=\"space-y-6 lg:col-span-7\">\n              <div className=\"flex items-center gap-2\">\n                <Badge variant=\"outline\" className=\"text-primary bg-primary/10 border-primary/20 font-mono text-xs\">\n                  {currentStudy.industry}\n                </Badge>\n              </div>\n\n              {/* Quote */}\n              <blockquote className=\"text-foreground text-lg leading-relaxed font-medium sm:text-xl\">\n                &ldquo;{currentStudy.quote}&rdquo;\n              </blockquote>\n\n              {/* Author info */}\n              <div className=\"flex items-center gap-4 pt-2\">\n                <img\n                  src={currentStudy.avatar}\n                  alt={currentStudy.authorName}\n                  className=\"border-border size-12 shrink-0 rounded-full border object-cover shadow-sm\"\n                />\n                <div>\n                  <h4 className=\"text-foreground font-mono text-sm font-bold\">{currentStudy.authorName}</h4>\n                  <p className=\"text-muted-foreground text-xs\">\n                    {currentStudy.authorRole} &bull; {currentStudy.company}\n                  </p>\n                </div>\n              </div>\n\n              {/* Navigation Controls */}\n              <div className=\"border-border/60 flex items-center gap-2 border-t pt-4\">\n                <Button size=\"sm\" variant=\"outline\" className=\"size-9 rounded-lg p-0\" onClick={prevSlide}>\n                  <ChevronLeft className=\"size-4\" />\n                </Button>\n                <Button size=\"sm\" variant=\"outline\" className=\"size-9 rounded-lg p-0\" onClick={nextSlide}>\n                  <ChevronRight className=\"size-4\" />\n                </Button>\n                <span className=\"text-muted-foreground ml-2 font-mono text-xs\">\n                  Case Study {activeIndex + 1} of {caseStudies.length}\n                </span>\n              </div>\n            </div>\n\n            {/* Right Column: Quantitative Telemetry KPIs & Architecture Diff (5 Cols) */}\n            <div className=\"bg-muted/40 border-border space-y-6 rounded-2xl border p-6 lg:col-span-5\">\n              <div className=\"border-border flex items-center justify-between border-b pb-3\">\n                <h4 className=\"text-foreground flex items-center gap-1.5 font-mono text-xs font-bold\">\n                  <Zap className=\"text-warning size-3.5\" />\n                  Verified Impact Telemetry\n                </h4>\n                <Badge variant=\"outline\" className=\"border-success/20 text-success font-mono text-xs\">\n                  Post-Audit\n                </Badge>\n              </div>\n\n              {/* 3 KPI Cards */}\n              <div className=\"grid grid-cols-1 gap-3\">\n                {currentStudy.kpis.map((kpi, kIdx) => (\n                  <div\n                    key={kIdx}\n                    className=\"border-border/80 bg-card flex items-center justify-between rounded-xl border p-3.5 font-mono\"\n                  >\n                    <div>\n                      <div className=\"text-muted-foreground text-xs\">{kpi.label}</div>\n                      <div className=\"text-success text-xs font-semibold\">{kpi.delta}</div>\n                    </div>\n                    <div className=\"text-foreground text-xl font-bold\">{kpi.value}</div>\n                  </div>\n                ))}\n              </div>\n\n              {/* Architecture summary */}\n              <div className=\"text-muted-foreground flex items-start gap-2 pt-2 font-mono text-xs\">\n                <CheckCircle2 className=\"text-primary mt-0.5 size-4 shrink-0\" />\n                <span>{currentStudy.architectureSummary}</span>\n              </div>\n            </div>\n          </div>\n        </Card>\n      </div>\n    </section>\n  )\n}\nexport default TestimonialQuoteCarouselTelemetry\n",
      "type": "registry:block",
      "target": "~/components/blocks/testimonial/TestimonialQuoteCarouselTelemetry.tsx"
    },
    {
      "path": "packages/registry-react/blocks/testimonial/TestimonialSingleFeatured.tsx",
      "content": "'use client'\n\nimport { ArrowRight } from 'lucide-react'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\n\nexport function TestimonialSingleFeatured() {\n  return (\n    <section data-slot=\"testimonial-single-featured\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n        <Badge variant=\"secondary\">Customer</Badge>\n\n        {/* One quote, given the whole section. Keep it short: the size is what\n            carries it, and a long quote at this scale stops being readable. */}\n        <blockquote className=\"mt-6 text-2xl leading-tight font-medium tracking-tight text-balance sm:text-3xl lg:text-4xl\">\n          “We stopped arguing about whose number was right and started arguing about what to do next.”\n        </blockquote>\n\n        <div className=\"mt-10 grid gap-8 sm:grid-cols-[1fr_auto] sm:items-center\">\n          <div className=\"flex items-center gap-4\">\n            <Avatar className=\"size-12\">\n              <AvatarFallback>EW</AvatarFallback>\n            </Avatar>\n            <div>\n              <p className=\"font-medium\">Erin Walsh</p>\n              <p className=\"text-muted-foreground text-sm\">VP Finance · Northwind Logistics</p>\n            </div>\n            <Separator orientation=\"vertical\" className=\"ml-2 hidden h-10 sm:block\" />\n            <span className=\"hidden text-sm font-semibold tracking-[0.18em] uppercase sm:inline\">Northwind</span>\n          </div>\n\n          <div className=\"sm:text-right\">\n            <p className=\"font-display text-3xl font-bold tracking-tight\">5 days</p>\n            <p className=\"text-muted-foreground mt-1 text-sm\">off the monthly close</p>\n          </div>\n        </div>\n\n        <Separator className=\"my-10\" />\n\n        <div className=\"flex flex-wrap items-center justify-between gap-4\">\n          <p className=\"text-muted-foreground text-sm\">Freight forwarding · 1,200 staff · live since Q1 2026</p>\n          <Button variant=\"outline\">\n            Read the full story\n            <ArrowRight className=\"ml-2 size-4\" aria-hidden=\"true\" />\n          </Button>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/testimonial/TestimonialSingleFeatured.tsx"
    },
    {
      "path": "packages/registry-react/blocks/testimonial/TestimonialSocialCards.tsx",
      "content": "'use client'\n\nimport { Heart, MessageCircle, Repeat2 } from 'lucide-react'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\n\n// Written as posts, not polished quotes — the lowercase, the caveats, and the\n// specific numbers are what make them read as real.\nconst posts = [\n  {\n    name: 'Erin Walsh',\n    handle: '@erinwalsh',\n    initials: 'EW',\n    when: '4h',\n    body: 'closed the month in four days. four. i have been doing this for eleven years and that number has never started with a four.',\n    replies: 18,\n    reposts: 42,\n    likes: 310,\n  },\n  {\n    name: 'Marcus Ellery',\n    handle: '@mellery',\n    initials: 'ME',\n    when: '1d',\n    body: 'the thing that sold me was the diff. every metric change opens a PR. i can finally review what finance is about to publish instead of finding out in the board deck.',\n    replies: 7,\n    reposts: 91,\n    likes: 604,\n  },\n  {\n    name: 'Anna Reyes',\n    handle: '@annareyes',\n    initials: 'AR',\n    when: '2d',\n    body: 'migration took longer than the marketing site says (three weeks, not one) but nothing broke and we did not copy a single row out of the warehouse.',\n    replies: 24,\n    reposts: 33,\n    likes: 188,\n  },\n  {\n    name: 'Tom Fairbanks',\n    handle: '@tfairbanks',\n    initials: 'TF',\n    when: '3d',\n    body: 'row level scoping wired to okta groups. someone changes teams, their dashboards change with them. this used to be a quarterly cleanup ticket.',\n    replies: 11,\n    reposts: 57,\n    likes: 402,\n  },\n  {\n    name: 'Priya Raman',\n    handle: '@praman',\n    initials: 'PR',\n    when: '5d',\n    body: 'forecast review used to open with twenty minutes of reconciling two decks. now it opens with the forecast. small change, enormous difference.',\n    replies: 5,\n    reposts: 28,\n    likes: 233,\n  },\n  {\n    name: 'Sophie Lindqvist',\n    handle: '@slindqvist',\n    initials: 'SL',\n    when: '1w',\n    body: 'handed the auditors an exported change log instead of a shared folder and they were visibly confused about what to do with their afternoon.',\n    replies: 31,\n    reposts: 120,\n    likes: 870,\n  },\n]\n\nexport function TestimonialSocialCards() {\n  return (\n    <section data-slot=\"testimonial-social-cards\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div className=\"max-w-2xl\">\n          <Badge variant=\"secondary\">In the wild</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Posted without being asked</h2>\n          <p className=\"text-muted-foreground mt-3 text-lg\">\n            Unedited, including the one about the migration taking three weeks.\n          </p>\n        </div>\n\n        {/* CSS columns give a masonry flow with no JS layout pass; cards use\n            break-inside to avoid splitting across a column boundary. */}\n        <div className=\"mt-10 gap-4 sm:columns-2 lg:columns-3\">\n          {posts.map((post) => (\n            <Card key={post.handle} className=\"mb-4 break-inside-avoid\">\n              <CardContent className=\"p-5\">\n                <div className=\"flex items-center gap-3\">\n                  <Avatar className=\"size-9\">\n                    <AvatarFallback className=\"text-xs\">{post.initials}</AvatarFallback>\n                  </Avatar>\n                  <div className=\"min-w-0\">\n                    <p className=\"truncate text-sm font-medium\">{post.name}</p>\n                    <p className=\"text-muted-foreground truncate text-xs\">\n                      {post.handle} · {post.when}\n                    </p>\n                  </div>\n                </div>\n\n                <p className=\"mt-3 text-sm leading-relaxed\">{post.body}</p>\n\n                <div className=\"text-muted-foreground mt-4 flex items-center gap-5 text-xs\">\n                  <Button variant=\"ghost\" size=\"sm\" className=\"h-auto gap-1.5 px-1.5 py-1 text-xs font-normal\">\n                    <MessageCircle className=\"size-3.5\" aria-hidden=\"true\" />\n                    {post.replies}\n                  </Button>\n                  <Button variant=\"ghost\" size=\"sm\" className=\"h-auto gap-1.5 px-1.5 py-1 text-xs font-normal\">\n                    <Repeat2 className=\"size-3.5\" aria-hidden=\"true\" />\n                    {post.reposts}\n                  </Button>\n                  <Button variant=\"ghost\" size=\"sm\" className=\"h-auto gap-1.5 px-1.5 py-1 text-xs font-normal\">\n                    <Heart className=\"size-3.5\" aria-hidden=\"true\" />\n                    {post.likes}\n                  </Button>\n                </div>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/testimonial/TestimonialSocialCards.tsx"
    },
    {
      "path": "packages/registry-react/blocks/testimonial/Testimonials01.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { BadgeCheck, CheckCircle2, ChevronLeft, ChevronRight, Pause, Play, Quote, Star } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\ninterface Testimonial {\n  id: string\n  name: string\n  role: string\n  company: string\n  industry: 'saas' | 'healthtech' | 'fintech' | 'devtools'\n  initials: string\n  avatarBg: string\n  quote: string\n  subquote: string\n  rating: number\n  verifiedBadge: string\n  metrics: { label: string; value: string; trend: string }[]\n  stack: string[]\n}\n\nconst testimonials: Testimonial[] = [\n  {\n    id: '1',\n    name: 'Aisha Rahman',\n    role: 'VP of People & Operations',\n    company: 'Northwind Global Logistics',\n    industry: 'saas',\n    initials: 'AR',\n    avatarBg: 'bg-info/10 text-info border-info/20',\n    quote:\n      'We replaced four legacy spreadsheets and two disjointed SaaS subscriptions with UIPKGE blocks. Onboarding time dropped from 6 days to under 4 hours.',\n    subquote:\n      'The unbundled registry architecture gave our engineers total ownership without ever dealing with broken npm updates or rigid vendor locks.',\n    rating: 5,\n    verifiedBadge: 'Verified Enterprise Customer · 2,400+ Seats',\n    metrics: [\n      { label: 'Onboarding Velocity', value: '< 4 hours', trend: '-88% time' },\n      { label: 'SaaS Tooling Spend', value: '$140k / yr', trend: 'Saved' },\n      { label: 'Employee NPS', value: '+74', trend: 'Top Decile' },\n    ],\n    stack: ['Vue 3.5', 'Tailwind CSS v4', 'PostgreSQL', 'SCIM Okta'],\n  },\n  {\n    id: '2',\n    name: 'Marco Vidal',\n    role: 'Director of Information Security',\n    company: 'Helio Health Systems',\n    industry: 'healthtech',\n    initials: 'MV',\n    avatarBg: 'bg-success/10 text-success border-success/20',\n    quote:\n      'SOC 2 and HIPAA evidence collection went from a grueling quarterly nightmare to a continuous, automated background audit trail.',\n    subquote:\n      'Our external auditors completed our Type II examination in record time because every UI state change is cryptographically verifiable.',\n    rating: 5,\n    verifiedBadge: 'Verified Healthcare Provider · HIPAA Tier 1',\n    metrics: [\n      { label: 'Audit Prep Duration', value: '1.5 days', trend: 'Down from 3 wks' },\n      { label: 'Compliance Adherence', value: '100.0%', trend: '142 Controls' },\n      { label: 'Zero Trust Rollout', value: '14 Days', trend: '100% Org' },\n    ],\n    stack: ['React 19', 'Reka UI Primitives', 'Cloudflare Workers', 'AuditLog API'],\n  },\n  {\n    id: '3',\n    name: 'Tomoko Saito',\n    role: 'Staff Infrastructure Architect',\n    company: 'Pixel & Co Engine Labs',\n    industry: 'devtools',\n    initials: 'TS',\n    avatarBg: 'bg-chart-1/10 text-chart-1 border-chart-1/20',\n    quote:\n      'My favourite part is how blazing fast it is. Sub-20ms P99 search latencies across 50,000 workforce records without a single loading spinner.',\n    subquote:\n      'Keyboard shortcuts for every workflow make our engineering managers feel like they are operating a sleek CLI rather than a web dashboard.',\n    rating: 5,\n    verifiedBadge: 'Verified DevTools Customer · 450+ Devs',\n    metrics: [\n      { label: 'P99 Edge Latency', value: '18ms', trend: 'Global Edge' },\n      { label: 'Daily Hotkey Actions', value: '42k / day', trend: '+310%' },\n      { label: 'Memory Footprint', value: '< 12MB', trend: 'Zero bloat' },\n    ],\n    stack: ['Vue 3.5', 'Vite', 'Turborepo', 'WebAssembly'],\n  },\n  {\n    id: '4',\n    name: 'Julian Montgomery',\n    role: 'Chief Financial Officer',\n    company: 'Vanguard FinTech Matrix',\n    industry: 'fintech',\n    initials: 'JM',\n    avatarBg: 'bg-warning/10 text-warning border-warning/20',\n    quote:\n      'Multi-currency payroll runs across 34 countries used to require 5 days of manual reconciliation. Now it settles automatically with zero FX fee slippage.',\n    subquote:\n      'Direct ledger sync and real-time tax calculations give our board instant visibility into gross-to-net runway.',\n    rating: 5,\n    verifiedBadge: 'Verified FinTech Customer · $800M+ Volume',\n    metrics: [\n      { label: 'Payroll Settlement', value: 'Instant', trend: 'FedNow / SEPA' },\n      { label: 'FX Reconciliation', value: '0.00%', trend: 'Zero error' },\n      { label: 'Tax Auto-filing', value: '34 Regs', trend: 'Statutory' },\n    ],\n    stack: ['React 19', 'Next.js', 'Tailwind v4', 'Stripe Treasury'],\n  },\n]\n\nexport function Testimonials01() {\n  const [activeIndex, setActiveIndex] = React.useState(0)\n  const [activeIndustry, setActiveIndustry] = React.useState<'all' | 'saas' | 'healthtech' | 'fintech' | 'devtools'>(\n    'all',\n  )\n  const [isAutoPlaying, setIsAutoPlaying] = React.useState(true)\n\n  const filteredTestimonials = React.useMemo(() => {\n    if (activeIndustry === 'all') return testimonials\n    return testimonials.filter((t) => t.industry === activeIndustry)\n  }, [activeIndustry])\n\n  const next = React.useCallback(() => {\n    setActiveIndex((prev) => (prev + 1) % filteredTestimonials.length)\n  }, [filteredTestimonials.length])\n\n  const prev = React.useCallback(() => {\n    setActiveIndex((prev) => (prev - 1 + filteredTestimonials.length) % filteredTestimonials.length)\n  }, [filteredTestimonials.length])\n\n  React.useEffect(() => {\n    if (!isAutoPlaying) return\n    const timer = setInterval(() => {\n      next()\n    }, 6500)\n    return () => clearInterval(timer)\n  }, [isAutoPlaying, next])\n\n  const activeTestimonial = filteredTestimonials[activeIndex] ?? filteredTestimonials[0]\n\n  return (\n    <section\n      data-slot=\"testimonials-01\"\n      className=\"bg-background border-border relative w-full overflow-hidden border-y py-16 lg:py-24\"\n    >\n      <div className=\"mx-auto max-w-7xl space-y-12 px-4 sm:px-6 lg:px-8\">\n        {/* Section Header */}\n        <div className=\"flex flex-col gap-6 md:flex-row md:items-end md:justify-between\">\n          <div className=\"max-w-2xl space-y-3\">\n            <div className=\"inline-flex items-center gap-2\">\n              <Badge\n                variant=\"outline\"\n                className=\"border-primary/30 text-primary bg-primary/5 gap-1.5 px-2.5 py-1 font-mono text-xs tracking-wide uppercase\"\n              >\n                <BadgeCheck className=\"size-3.5\" />\n                Verified Case Studies\n              </Badge>\n              <span className=\"text-muted-foreground font-mono text-xs\">Real-World Customer Telemetry</span>\n            </div>\n            <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n              Trusted by the Teams Building the Future.\n            </h2>\n            <p className=\"text-muted-foreground text-base leading-relaxed sm:text-lg\">\n              See how high-growth scaleups and enterprise leaders accelerate engineering velocity and operational\n              clarity.\n            </p>\n          </div>\n\n          {/* Industry Filter Switcher */}\n          <div className=\"bg-muted/60 border-border flex flex-wrap items-center gap-1.5 rounded-lg border p-1\">\n            {[\n              { id: 'all', label: 'All Industries' },\n              { id: 'saas', label: 'Enterprise SaaS' },\n              { id: 'healthtech', label: 'HealthTech' },\n              { id: 'devtools', label: 'Developer DX' },\n              { id: 'fintech', label: 'FinTech' },\n            ].map((cat) => (\n              <button\n                key={cat.id}\n                type=\"button\"\n                className={cn(\n                  'rounded-md px-3 py-1.5 text-xs font-medium transition-colors',\n                  activeIndustry === cat.id\n                    ? 'bg-background text-foreground font-semibold shadow-xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                )}\n                onClick={() => {\n                  setActiveIndustry(cat.id as any)\n                  setActiveIndex(0)\n                }}\n              >\n                {cat.label}\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {/* Featured Testimonial Canvas */}\n        <Card className=\"bg-card border-border overflow-hidden shadow-md\">\n          <div className=\"grid grid-cols-1 lg:grid-cols-12\">\n            {/* Left Main Quote Area (7 cols) */}\n            <div className=\"flex flex-col justify-between space-y-8 p-6 sm:p-10 lg:col-span-7\">\n              <div className=\"space-y-6\">\n                {/* Rating & Badge */}\n                <div className=\"flex flex-wrap items-center justify-between gap-3\">\n                  <div className=\"text-warning flex items-center gap-1\">\n                    {Array.from({ length: activeTestimonial.rating }).map((_, s) => (\n                      <Star key={s} className=\"fill-warning size-4\" />\n                    ))}\n                  </div>\n                  <Badge\n                    variant=\"outline\"\n                    className=\"border-success/20 bg-success/10 text-success gap-1.5 font-mono text-xs\"\n                  >\n                    <CheckCircle2 className=\"size-3\" />\n                    {activeTestimonial.verifiedBadge}\n                  </Badge>\n                </div>\n\n                {/* Quote Content */}\n                <div className=\"relative space-y-3\">\n                  <Quote className=\"text-primary/20 absolute -top-4 -left-3 -z-10 size-8\" />\n                  <p className=\"text-foreground text-xl leading-relaxed font-medium tracking-tight sm:text-2xl\">\n                    &ldquo;{activeTestimonial.quote}&rdquo;\n                  </p>\n                  <p className=\"text-muted-foreground text-sm leading-relaxed\">{activeTestimonial.subquote}</p>\n                </div>\n              </div>\n\n              {/* Author Info & Controls */}\n              <div className=\"border-border flex flex-col justify-between gap-4 border-t pt-6 sm:flex-row sm:items-center\">\n                <div className=\"flex items-center gap-3.5\">\n                  <div\n                    className={cn(\n                      'flex size-11 items-center justify-center rounded-full border text-sm font-bold',\n                      activeTestimonial.avatarBg,\n                    )}\n                  >\n                    {activeTestimonial.initials}\n                  </div>\n                  <div>\n                    <h4 className=\"text-foreground text-sm font-semibold\">{activeTestimonial.name}</h4>\n                    <p className=\"text-muted-foreground text-xs\">\n                      {activeTestimonial.role} ·{' '}\n                      <span className=\"text-foreground font-medium\">{activeTestimonial.company}</span>\n                    </p>\n                  </div>\n                </div>\n\n                {/* Navigation Buttons */}\n                <div className=\"flex items-center gap-2\">\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    className=\"size-8 rounded-lg\"\n                    aria-label=\"Previous customer story\"\n                    onClick={prev}\n                  >\n                    <ChevronLeft className=\"size-4\" />\n                  </Button>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    className=\"size-8 rounded-lg\"\n                    aria-label={isAutoPlaying ? 'Pause rotation' : 'Resume rotation'}\n                    onClick={() => setIsAutoPlaying(!isAutoPlaying)}\n                  >\n                    {isAutoPlaying ? <Pause className=\"text-primary size-3.5\" /> : <Play className=\"size-3.5\" />}\n                  </Button>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    className=\"size-8 rounded-lg\"\n                    aria-label=\"Next customer story\"\n                    onClick={next}\n                  >\n                    <ChevronRight className=\"size-4\" />\n                  </Button>\n                </div>\n              </div>\n            </div>\n\n            {/* Right Telemetry & Metrics Sidebar (5 cols) */}\n            <div className=\"bg-muted/20 border-border flex flex-col justify-between space-y-6 border-t p-6 sm:p-8 lg:col-span-5 lg:border-t-0 lg:border-l\">\n              <div className=\"space-y-4\">\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-muted-foreground font-mono text-xs tracking-wider uppercase\">\n                    Impact Telemetry\n                  </span>\n                  <span className=\"text-success font-mono text-xs\">Production Validated</span>\n                </div>\n\n                {/* Metrics Grid */}\n                <div className=\"space-y-3\">\n                  {activeTestimonial.metrics.map((m) => (\n                    <div\n                      key={m.label}\n                      className=\"border-border bg-card/80 flex items-center justify-between rounded-lg border p-3.5 shadow-xs\"\n                    >\n                      <div>\n                        <p className=\"text-muted-foreground text-xs\">{m.label}</p>\n                        <p className=\"text-foreground mt-0.5 text-lg font-bold tracking-tight\">{m.value}</p>\n                      </div>\n                      <Badge variant=\"secondary\" className=\"bg-success/10 text-success font-mono text-xs font-semibold\">\n                        {m.trend}\n                      </Badge>\n                    </div>\n                  ))}\n                </div>\n\n                {/* Stack Tags */}\n                <div className=\"space-y-2 pt-2\">\n                  <p className=\"text-muted-foreground font-mono text-xs tracking-wider uppercase\">\n                    Tech Stack Architecture\n                  </p>\n                  <div className=\"flex flex-wrap gap-1.5\">\n                    {activeTestimonial.stack.map((tech) => (\n                      <Badge key={tech} variant=\"outline\" className=\"bg-background font-mono text-xs\">\n                        {tech}\n                      </Badge>\n                    ))}\n                  </div>\n                </div>\n              </div>\n\n              {/* Story Navigation Dots */}\n              <div className=\"border-border/60 flex items-center justify-between border-t pt-4\">\n                <div className=\"flex items-center gap-1.5\">\n                  {filteredTestimonials.map((t, i) => (\n                    <button\n                      key={t.id}\n                      type=\"button\"\n                      aria-label={`Jump to testimonial ${i + 1}`}\n                      className={cn(\n                        'h-1.5 rounded-full transition-colors duration-300',\n                        i === activeIndex\n                          ? 'bg-primary w-6'\n                          : 'bg-muted-foreground/30 hover:bg-muted-foreground/60 w-2',\n                      )}\n                      onClick={() => setActiveIndex(i)}\n                    />\n                  ))}\n                </div>\n                <span className=\"text-muted-foreground font-mono text-xs\">\n                  {activeIndex + 1} of {filteredTestimonials.length} Stories\n                </span>\n              </div>\n            </div>\n          </div>\n        </Card>\n      </div>\n    </section>\n  )\n}\nexport default Testimonials01\n",
      "type": "registry:block",
      "target": "~/components/blocks/testimonial/Testimonials01.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Testimonial section set covering the full proof spectrum: a featured pull quote, a logo-and-quote row, a verified masonry grid, social-post cards, a counter-scrolling marquee, a case-study carousel with telemetry KPIs, and an ROI workbench with filters and autoplay.",
  "categories": [
    "marketing"
  ]
}