{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "testimonial-masonry-verified-grid",
  "title": "Testimonial Masonry Verified Grid",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/testimonial-masonry-verified-grid/TestimonialMasonryVerifiedGrid.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { CheckCircle2, Star } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Card } from '@/components/ui/card'\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\nconst activeFilter = ref<RoleFilter>('all')\n\nconst filteredTestimonials = computed(() => {\n  if (activeFilter.value === 'all') return testimonials\n  return testimonials.filter((t) => t.roleCategory === activeFilter.value)\n})\n</script>\n\n<template>\n  <section\n    data-slot=\"testimonial-masonry-verified-grid\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <div class=\"mx-auto max-w-7xl space-y-12\">\n      <!-- Section Header -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n          <Star class=\"fill-warning text-warning size-3.5\" />\n          Verified Engineer Endorsements\n        </Badge>\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n          Loved by design engineers and CTOs worldwide.\n        </h2>\n        <p class=\"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 class=\"flex flex-wrap items-center justify-center gap-2 pt-2\">\n          <button\n            type=\"button\"\n            class=\"rounded-lg border px-3.5 py-1 font-mono text-xs transition-colors\"\n            :class=\"\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            @click=\"activeFilter = 'all'\"\n          >\n            All Perspectives ({{ testimonials.length }})\n          </button>\n          <button\n            type=\"button\"\n            class=\"rounded-lg border px-3.5 py-1 font-mono text-xs transition-colors\"\n            :class=\"\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            @click=\"activeFilter = 'design-eng'\"\n          >\n            Design Engineers\n          </button>\n          <button\n            type=\"button\"\n            class=\"rounded-lg border px-3.5 py-1 font-mono text-xs transition-colors\"\n            :class=\"\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            @click=\"activeFilter = 'frontend'\"\n          >\n            Frontend Architects\n          </button>\n          <button\n            type=\"button\"\n            class=\"rounded-lg border px-3.5 py-1 font-mono text-xs transition-colors\"\n            :class=\"\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            @click=\"activeFilter = 'founder'\"\n          >\n            CTOs &amp; Founders\n          </button>\n        </div>\n      </div>\n\n      <!-- Masonry Grid (3 Columns) -->\n      <div class=\"grid grid-cols-1 items-start gap-6 md:grid-cols-2 lg:grid-cols-3\">\n        <Card\n          v-for=\"t in filteredTestimonials\"\n          :key=\"t.id\"\n          class=\"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 class=\"flex items-start justify-between gap-3\">\n            <div class=\"flex items-center gap-3\">\n              <img\n                :src=\"t.avatar\"\n                :alt=\"t.name\"\n                class=\"border-border size-10 shrink-0 rounded-full border object-cover\"\n              />\n              <div class=\"min-w-0\">\n                <div class=\"flex items-center gap-1.5\">\n                  <h4 class=\"text-foreground truncate font-mono text-xs font-bold\">{{ t.name }}</h4>\n                  <CheckCircle2 class=\"text-info size-3.5 shrink-0\" />\n                </div>\n                <p class=\"text-muted-foreground truncate text-xs\">{{ t.role }} &bull; {{ t.company }}</p>\n              </div>\n            </div>\n\n            <Badge variant=\"outline\" class=\"text-muted-foreground shrink-0 font-mono text-xs\">\n              {{ t.verifiedSource }}\n            </Badge>\n          </div>\n\n          <!-- Quote text -->\n          <p class=\"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 class=\"border-border/60 flex flex-wrap items-center justify-between gap-2 border-t pt-3\">\n            <div class=\"flex items-center gap-0.5\">\n              <Star v-for=\"s in t.starCount\" :key=\"s\" class=\"fill-warning text-warning size-3.5\" />\n            </div>\n\n            <Badge\n              v-if=\"t.metricBadge\"\n              variant=\"outline\"\n              class=\"border-success/20 bg-success/10 text-success font-mono text-xs\"\n            >\n              {{ t.metricBadge }}\n            </Badge>\n          </div>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/TestimonialMasonryVerifiedGrid.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Masonry grid of verified engineer endorsements with role filters, star ratings, avatar badges, and quantifiable impact metrics.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "testimonial"
}