{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "logo-cloud-categorized-grid",
  "title": "Logo Cloud Categorized Grid",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/logo-cloud-categorized-grid/LogoCloudCategorizedGrid.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowRight, Brain, Building2, Cloud, Globe, Quote, ShieldCheck, Terminal, X } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Card } from '@/components/ui/card'\n\ninterface CustomerEntity {\n  id: string\n  name: string\n  category: 'cloud' | 'devtools' | 'fintech' | 'ai'\n  tier: string\n  scale: string\n  quote: string\n  author: string\n  title: string\n}\n\nconst customerList: CustomerEntity[] = [\n  // Infrastructure & Cloud\n  {\n    id: 'cloudflare',\n    name: 'Cloudflare',\n    category: 'cloud',\n    tier: 'Enterprise Scale',\n    scale: '300+ Edge Data Centers',\n    quote:\n      'UIPKGE allowed us to standardize our internal console UI across 40+ engineering squads with zero bundle overhead.',\n    author: 'Alex K.',\n    title: 'Principal Architect, Cloudflare Workers',\n  },\n  {\n    id: 'flyio',\n    name: 'Fly.io',\n    category: 'cloud',\n    tier: 'Core Partner',\n    scale: '50k+ Compute Machines',\n    quote: 'We copy the raw SFC components and style them directly to match our brand — no package upgrades to fight.',\n    author: 'Sam T.',\n    title: 'Lead Frontend Engineer',\n  },\n  {\n    id: 'railway',\n    name: 'Railway',\n    category: 'cloud',\n    tier: 'Growth Tier',\n    scale: '1.5M Deployed Services',\n    quote:\n      'AST-level source control gives our team complete confidence without ever fearing breaking upstream package releases.',\n    author: 'Elena R.',\n    title: 'VP of Product Experience',\n  },\n\n  // Developer Tooling\n  {\n    id: 'vercel',\n    name: 'Vercel',\n    category: 'devtools',\n    tier: 'Design Pioneer',\n    scale: '100M+ Monthly Visitors',\n    quote:\n      'The level of keyboard ergonomics, focus ring layering, and spring physics in UIPKGE meets the highest craft benchmarks.',\n    author: 'Rauno F.',\n    title: 'Design Engineering Advisor',\n  },\n  {\n    id: 'supabase',\n    name: 'Supabase',\n    category: 'devtools',\n    tier: 'Ecosystem Partner',\n    scale: '1M+ Databases Provisioned',\n    quote: 'Dual-framework parity means we can ship both Vue and React examples for our developer docs in minutes.',\n    author: 'Ant W.',\n    title: 'Co-Founder & CEO',\n  },\n  {\n    id: 'biome',\n    name: 'BiomeJS',\n    category: 'devtools',\n    tier: 'Open Source',\n    scale: '20M+ Weekly Downloads',\n    quote: 'The cleanest AST code patterns in any modern UI registry. 100% type-safe.',\n    author: 'Nico M.',\n    title: 'Core Maintainer',\n  },\n\n  // Fintech & Security\n  {\n    id: 'stripe',\n    name: 'Stripe',\n    category: 'fintech',\n    tier: 'Global Infrastructure',\n    scale: '$1T+ Payment Volume',\n    quote:\n      'Zero dependency bloat guarantees compliance with strict internal security and dependency auditing requirements.',\n    author: 'Marcus H.',\n    title: 'Staff Security Engineer',\n  },\n  {\n    id: 'ramp',\n    name: 'Ramp',\n    category: 'fintech',\n    tier: 'Scale Unicorn',\n    scale: '$10B+ Managed Spend',\n    quote: 'The dense KPI tiles and transaction workbenches are plug-and-play masterpieces.',\n    author: 'David P.',\n    title: 'Director of Frontend Engineering',\n  },\n  {\n    id: 'snyk',\n    name: 'Snyk Security',\n    category: 'fintech',\n    tier: 'Enterprise SecOps',\n    scale: '2.5M+ Repos Scanned',\n    quote: 'Owning the source code completely removes transitive dependency CVE vulnerabilities.',\n    author: 'Sarah L.',\n    title: 'Head of Developer Relations',\n  },\n\n  // AI & Machine Learning\n  {\n    id: 'replicate',\n    name: 'Replicate',\n    category: 'ai',\n    tier: 'AI Infrastructure',\n    scale: '500M+ Model Inferences',\n    quote: 'We built our interactive prompt tester in an afternoon using UIPKGE terminal and slider primitives.',\n    author: 'Ben F.',\n    title: 'Co-Founder',\n  },\n  {\n    id: 'modal',\n    name: 'Modal Labs',\n    category: 'ai',\n    tier: 'GPU Cloud',\n    scale: '10k+ GPU Clusters',\n    quote: 'The tactile feel and speed of the UI blocks matches the lightning speed of our Python container runs.',\n    author: 'Erik B.',\n    title: 'Co-Founder & CTO',\n  },\n  {\n    id: 'mistral',\n    name: 'Mistral AI',\n    category: 'ai',\n    tier: 'Frontier AI',\n    scale: 'Global Deployment',\n    quote: 'Phenomenal attention to typographic hierarchy and clean Geist font metrics.',\n    author: 'Arthur M.',\n    title: 'Co-Founder',\n  },\n]\n\ntype VerticalCategory = 'all' | 'cloud' | 'devtools' | 'fintech' | 'ai'\n\nconst selectedCategory = ref<VerticalCategory>('all')\nconst activeModalCustomer = ref<CustomerEntity | null>(null)\n\nconst categoryLabels: Record<VerticalCategory, { label: string; icon: any }> = {\n  all: { label: 'All Industries', icon: Globe },\n  cloud: { label: 'Cloud & Infra', icon: Cloud },\n  devtools: { label: 'DevTools & DX', icon: Terminal },\n  fintech: { label: 'Fintech & Security', icon: ShieldCheck },\n  ai: { label: 'AI & GPU Compute', icon: Brain },\n}\n\nconst filteredCustomers = computed(() => {\n  if (selectedCategory.value === 'all') return customerList\n  return customerList.filter((c) => c.category === selectedCategory.value)\n})\n</script>\n\n<template>\n  <section\n    data-slot=\"logo-cloud-categorized-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          <Building2 class=\"text-primary size-3.5\" />\n          Industry Benchmark Customers\n        </Badge>\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n          Powering the world's most rigorous engineering organizations.\n        </h2>\n        <p class=\"text-muted-foreground text-base\">\n          From frontier AI labs to global payment platforms, see how top tier engineering teams build on UIPKGE.\n        </p>\n\n        <!-- Vertical Category Filter Tabs -->\n        <div class=\"flex flex-wrap items-center justify-center gap-1 pt-4\">\n          <button\n            v-for=\"(meta, catKey) in categoryLabels\"\n            :key=\"catKey\"\n            type=\"button\"\n            class=\"flex items-center gap-1.5 rounded-lg border px-3 py-1.5 font-mono text-xs transition-colors\"\n            :class=\"\n              selectedCategory === catKey\n                ? 'border-primary bg-primary text-primary-foreground font-semibold shadow-xs'\n                : 'border-border bg-card/60 text-muted-foreground hover:text-foreground hover:bg-muted'\n            \"\n            @click=\"selectedCategory = catKey as VerticalCategory\"\n          >\n            <component :is=\"meta.icon\" class=\"size-3.5\" />\n            <span>{{ meta.label }}</span>\n          </button>\n        </div>\n      </div>\n\n      <!-- Categorized Customer Grid -->\n      <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3\">\n        <Card\n          v-for=\"customer in filteredCustomers\"\n          :key=\"customer.id\"\n          class=\"border-border bg-card/90 hover:border-primary/40 group flex cursor-pointer flex-col justify-between space-y-4 rounded-2xl p-5 shadow-sm transition-colors hover:shadow-md\"\n          @click=\"activeModalCustomer = customer\"\n        >\n          <!-- Card Top: Name & Tier Pill -->\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-2.5\">\n              <div\n                class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg font-mono text-xs font-bold\"\n              >\n                {{ customer.name.charAt(0) }}\n              </div>\n              <div>\n                <h3 class=\"text-foreground group-hover:text-primary font-mono text-sm font-bold transition-colors\">\n                  {{ customer.name }}\n                </h3>\n                <p class=\"text-muted-foreground text-xs\">{{ customer.scale }}</p>\n              </div>\n            </div>\n            <Badge variant=\"outline\" class=\"font-mono text-xs capitalize\">\n              {{ customer.tier }}\n            </Badge>\n          </div>\n\n          <!-- Quote Excerpt -->\n          <p class=\"text-muted-foreground line-clamp-2 text-xs leading-relaxed italic\">\n            &ldquo;{{ customer.quote }}&rdquo;\n          </p>\n\n          <!-- Card Footer: Author & Read Case Study -->\n          <div class=\"border-border/60 flex items-center justify-between border-t pt-2 text-xs\">\n            <span class=\"text-muted-foreground font-mono text-xs\">{{ customer.author }}</span>\n            <span class=\"text-primary flex items-center gap-1 text-xs font-medium group-hover:underline\">\n              <span>Read quote</span>\n              <ArrowRight class=\"size-3\" />\n            </span>\n          </div>\n        </Card>\n      </div>\n\n      <!-- Testimonial Detail Dialog Modal -->\n      <div\n        v-if=\"activeModalCustomer\"\n        class=\"bg-background/80 fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-md sm:p-6\"\n      >\n        <div\n          class=\"bg-card border-border animate-in fade-in-0 zoom-in-95 relative w-full max-w-xl space-y-6 rounded-2xl border p-6 text-left shadow-sm duration-200 sm:p-8\"\n        >\n          <div class=\"border-border flex items-center justify-between border-b pb-4\">\n            <div class=\"flex items-center gap-3\">\n              <div\n                class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-xl font-mono text-sm font-bold\"\n              >\n                {{ activeModalCustomer.name.charAt(0) }}\n              </div>\n              <div>\n                <h3 class=\"text-foreground font-mono text-base font-bold\">{{ activeModalCustomer.name }}</h3>\n                <p class=\"text-muted-foreground font-mono text-xs\">{{ activeModalCustomer.scale }}</p>\n              </div>\n            </div>\n            <button\n              type=\"button\"\n              class=\"text-muted-foreground hover:text-foreground hover:bg-muted rounded-md p-1 transition-colors\"\n              @click=\"activeModalCustomer = null\"\n            >\n              <X class=\"size-4\" />\n            </button>\n          </div>\n\n          <div class=\"space-y-4\">\n            <Quote class=\"text-primary/40 size-6\" />\n            <p class=\"text-foreground text-sm leading-relaxed sm:text-base\">\n              &ldquo;{{ activeModalCustomer.quote }}&rdquo;\n            </p>\n          </div>\n\n          <div\n            class=\"border-border bg-muted/20 -mx-6 -mb-6 flex items-center justify-between rounded-b-2xl border-t p-4 px-6 pt-4 sm:-mx-8 sm:-mb-8 sm:px-8\"\n          >\n            <div>\n              <p class=\"text-foreground text-xs font-bold\">{{ activeModalCustomer.author }}</p>\n              <p class=\"text-muted-foreground font-mono text-xs\">{{ activeModalCustomer.title }}</p>\n            </div>\n            <Badge variant=\"outline\" class=\"border-success/20 bg-success/10 text-success font-mono text-xs\">\n              Verified Production Customer\n            </Badge>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/LogoCloudCategorizedGrid.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Categorized 4-industry logo & enterprise customer workbench with scale metrics, category filter tabs, and full testimonial modal inspect.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "logos"
}