{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "security-certification-band",
  "title": "Security — Certification Band",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/security-certification-band/SecurityCertificationBand.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { ShieldCheck } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\n\n// Issuing body and audit date are what make a certification claim checkable;\n// a bare logo row is decoration.\nconst certifications = [\n  { name: 'SOC 2 Type II', body: 'Prescient Assurance', audited: 'Mar 2026' },\n  { name: 'ISO 27001', body: 'BSI Group', audited: 'Jan 2026' },\n  { name: 'GDPR', body: 'Self-attested · DPA available', audited: 'Ongoing' },\n  { name: 'HIPAA', body: 'Third-party assessed', audited: 'Nov 2025' },\n]\n\nconst region = ref('eu')\n</script>\n\n<template>\n  <section data-slot=\"security-certification-band\" class=\"border-border bg-muted/40 border-y\">\n    <div class=\"mx-auto max-w-6xl px-6 py-8\">\n      <div class=\"flex flex-wrap items-center gap-x-6 gap-y-4\">\n        <div class=\"flex items-center gap-2\">\n          <ShieldCheck class=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n          <span class=\"text-sm font-medium\">Audited, not asserted</span>\n        </div>\n\n        <Separator orientation=\"vertical\" class=\"hidden h-8 sm:block\" />\n\n        <dl class=\"flex min-w-0 flex-1 flex-wrap gap-x-8 gap-y-3\">\n          <div v-for=\"certification in certifications\" :key=\"certification.name\">\n            <dt class=\"text-sm font-semibold\">{{ certification.name }}</dt>\n            <dd class=\"text-muted-foreground text-xs\">{{ certification.body }} · {{ certification.audited }}</dd>\n          </div>\n        </dl>\n\n        <div class=\"flex items-center gap-2\">\n          <Select v-model=\"region\">\n            <SelectTrigger class=\"h-8 w-44 text-xs\" aria-label=\"Data residency\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"eu\">EU residency</SelectItem>\n              <SelectItem value=\"us\">US residency</SelectItem>\n              <SelectItem value=\"au\">AU residency</SelectItem>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">Trust centre</Button>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/SecurityCertificationBand.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Slim compliance band listing each certification with its issuing body and last audit date, plus a data residency selector, for placing above a pricing table.",
  "categories": [
    "marketing"
  ]
}