{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "certificate-credential-card",
  "title": "Certificate Credential Card",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/certificate-credential-card/CertificateCredentialCard.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Award, Check, Copy, Download, ExternalLink, Share2, ShieldCheck } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardHeader } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface CertificateCredentialCardProps {\n  className?: string\n}\n\nconst credentialData = {\n  certId: 'CERT-2026-984210',\n  institution: 'UIPKGE Engineering Academy',\n  motto: 'EXCELLENTIA IN ARCHITECTURA',\n  type: 'Professional Certificate of Mastery in Full-Stack UI Engineering',\n  recipientName: 'Elena Rostova',\n  achievementDescription:\n    'For demonstrating advanced mastery in headless component architecture, OKLCH token systems, accessibility compliance, and dual-framework engineering.',\n  issueDate: 'August 21, 2026',\n  expiration: 'No Expiration · Lifetime Validity',\n  skills: ['Vue 3.5', 'React 19', 'TypeScript', 'Tailwind v4', 'Reka UI', 'WCAG AA A11y'],\n  leadInstructor: {\n    name: 'Dr. Marcus Vance',\n    title: 'Lead Instructor & Distinguished Architect',\n  },\n  academicDean: {\n    name: 'Sarah Jenkins, Ph.D.',\n    title: 'Academic Dean of Engineering',\n  },\n  sha256Digest: '7f83b1657ff1fc53b92dc18148a1d65dfc2d4b1fa3d677284addd200126d9069',\n  verifyUrl: 'https://uipkge.dev/verify/CERT-2026-984210',\n  blockLedger: 'Block #19,482,019 (OpenAttestation v3)',\n}\n\nexport function CertificateCredentialCard({ className }: CertificateCredentialCardProps) {\n  const [copiedCertId, setCopiedCertId] = React.useState(false)\n  const [copiedVerifyUrl, setCopiedVerifyUrl] = React.useState(false)\n  const [copiedDigest, setCopiedDigest] = React.useState(false)\n  const [sharedLinkedIn, setSharedLinkedIn] = React.useState(false)\n  const [downloadingPdf, setDownloadingPdf] = React.useState(false)\n\n  const copyCertId = () => {\n    navigator.clipboard?.writeText(credentialData.certId)\n    setCopiedCertId(true)\n    setTimeout(() => {\n      setCopiedCertId(false)\n    }, 2000)\n  }\n\n  const copyVerifyUrl = () => {\n    navigator.clipboard?.writeText(credentialData.verifyUrl)\n    setCopiedVerifyUrl(true)\n    setTimeout(() => {\n      setCopiedVerifyUrl(false)\n    }, 2000)\n  }\n\n  const copyDigest = () => {\n    navigator.clipboard?.writeText(credentialData.sha256Digest)\n    setCopiedDigest(true)\n    setTimeout(() => {\n      setCopiedDigest(false)\n    }, 2000)\n  }\n\n  const handleLinkedInShare = () => {\n    const url = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(credentialData.verifyUrl)}`\n    window.open(url, '_blank', 'noopener,noreferrer')\n    setSharedLinkedIn(true)\n    setTimeout(() => {\n      setSharedLinkedIn(false)\n    }, 2500)\n  }\n\n  const handleDownloadPdf = () => {\n    setDownloadingPdf(true)\n    setTimeout(() => {\n      setDownloadingPdf(false)\n    }, 2000)\n  }\n\n  return (\n    <div data-slot=\"certificate-credential-card\" className={cn('w-full space-y-6', className)}>\n      {/* Header Card */}\n      <Card className=\"border shadow-xs\">\n        <CardHeader className=\"flex flex-col gap-4 pb-6 sm:flex-row sm:items-start sm:justify-between\">\n          <div className=\"space-y-2\">\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <Badge wrap variant=\"outline\" className=\"gap-1.5 font-mono text-xs\">\n                <Award className=\"text-warning size-3.5\" aria-hidden=\"true\" />\n                Verified Credential\n              </Badge>\n              <div className=\"border-success/20 bg-success/10 text-success inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium\">\n                <span className=\"relative flex size-1.5\">\n                  <span className=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n                  <span className=\"bg-success relative inline-flex size-1.5 rounded-full\" />\n                </span>\n                Authentic · Cryptographically Signed\n              </div>\n            </div>\n\n            <div>\n              <h1 className=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n                Verified Credential &amp; Certificate of Mastery\n              </h1>\n              <div className=\"text-muted-foreground mt-1 flex flex-wrap items-center gap-2 text-xs sm:text-sm\">\n                <span>Credential ID:</span>\n                <button\n                  type=\"button\"\n                  onClick={copyCertId}\n                  className=\"hover:bg-muted focus-visible:ring-ring border-border bg-muted/40 text-foreground inline-flex min-h-6 items-center gap-1.5 rounded border px-2 py-0.5 font-mono text-xs font-semibold transition-colors focus-visible:ring-2 focus-visible:outline-hidden\"\n                  title=\"Click to copy credential ID\"\n                >\n                  #{credentialData.certId}\n                  {copiedCertId ? (\n                    <Check className=\"text-success size-3\" aria-hidden=\"true\" />\n                  ) : (\n                    <Copy className=\"text-muted-foreground size-3\" aria-hidden=\"true\" />\n                  )}\n                </button>\n                <span className=\"text-muted-foreground tabular-nums\">Issued {credentialData.issueDate}</span>\n              </div>\n            </div>\n          </div>\n\n          {/* Action Buttons */}\n          <div className=\"flex flex-wrap items-center gap-2.5 pt-1\">\n            <Button variant=\"default\" onClick={handleLinkedInShare} className=\"gap-2 shadow-xs\">\n              <Share2 className=\"size-4\" aria-hidden=\"true\" />\n              {sharedLinkedIn ? 'Shared!' : 'Share on LinkedIn'}\n            </Button>\n            <Button\n              aria-label=\"Download attachment\"\n              variant=\"outline\"\n              onClick={handleDownloadPdf}\n              className=\"gap-2 shadow-xs\"\n            >\n              <Download className=\"size-4\" aria-hidden=\"true\" />\n              {downloadingPdf ? 'Generating PDF...' : 'Download High-Res PDF'}\n            </Button>\n          </div>\n        </CardHeader>\n      </Card>\n\n      {/* Certificate Visual Diploma Frame */}\n      <Card className=\"border-border from-card via-card/95 to-card/90 relative overflow-hidden rounded-2xl border bg-gradient-to-b shadow-sm\">\n        {/* Watermark Background Graphic */}\n        <div\n          className=\"pointer-events-none absolute inset-0 flex items-center justify-center overflow-hidden opacity-[0.03] select-none dark:opacity-[0.05]\"\n          aria-hidden=\"true\"\n        >\n          <svg\n            className=\"h-[680px] w-full max-w-[680px]\"\n            viewBox=\"0 0 500 500\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            {/* Concentric Guilloché Circles */}\n            <circle cx=\"250\" cy=\"250\" r=\"230\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeDasharray=\"4 4\" />\n            <circle cx=\"250\" cy=\"250\" r=\"210\" stroke=\"currentColor\" strokeWidth=\"2\" />\n            <circle cx=\"250\" cy=\"250\" r=\"185\" stroke=\"currentColor\" strokeWidth=\"1\" strokeDasharray=\"2 2\" />\n            <circle cx=\"250\" cy=\"250\" r=\"150\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n            <circle cx=\"250\" cy=\"250\" r=\"120\" stroke=\"currentColor\" strokeWidth=\"1\" />\n            <circle cx=\"250\" cy=\"250\" r=\"90\" stroke=\"currentColor\" strokeWidth=\"2\" strokeDasharray=\"6 3\" />\n            <circle cx=\"250\" cy=\"250\" r=\"60\" stroke=\"currentColor\" strokeWidth=\"1\" />\n            {/* Radial Radiating Lines */}\n            <g stroke=\"currentColor\" strokeWidth=\"0.75\" opacity=\"0.6\">\n              <line x1=\"250\" y1=\"20\" x2=\"250\" y2=\"480\" />\n              <line x1=\"20\" y1=\"250\" x2=\"480\" y2=\"250\" />\n              <line x1=\"87\" y1=\"87\" x2=\"413\" y2=\"413\" />\n              <line x1=\"87\" y1=\"413\" x2=\"413\" y2=\"87\" />\n              <line x1=\"135\" y1=\"51\" x2=\"365\" y2=\"449\" />\n              <line x1=\"365\" y1=\"51\" x2=\"135\" y2=\"449\" />\n              <line x1=\"51\" y1=\"135\" x2=\"449\" y2=\"365\" />\n              <line x1=\"51\" y1=\"365\" x2=\"449\" y2=\"135\" />\n            </g>\n            {/* Center Emblem Symbol */}\n            <polygon\n              points=\"250,170 275,220 330,225 290,265 300,320 250,290 200,320 210,265 170,225 225,220\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              fill=\"none\"\n            />\n          </svg>\n        </div>\n\n        <CardContent className=\"relative z-10 p-6 sm:p-10 lg:p-12\">\n          {/* Certificate Inner Ornamental Border Container */}\n          <div className=\"border-border/80 bg-background/50 relative rounded-xl border p-6 backdrop-blur-xs sm:p-10 lg:p-12\">\n            {/* Inner Double Inset Border with Corner Filigree Accents */}\n            <div className=\"border-border/70 pointer-events-none absolute inset-3 rounded-lg border border-dashed sm:inset-4\">\n              {/* Top-Left Corner Rosette */}\n              <div className=\"text-warning/70 absolute -top-2.5 -left-2.5 flex size-5 items-center justify-center\">\n                <svg className=\"size-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                  <path d=\"M12 2v20M2 12h20M5 5l14 14M5 19L19 5\" />\n                </svg>\n              </div>\n              {/* Top-Right Corner Rosette */}\n              <div className=\"text-warning/70 absolute -top-2.5 -right-2.5 flex size-5 items-center justify-center\">\n                <svg className=\"size-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                  <path d=\"M12 2v20M2 12h20M5 5l14 14M5 19L19 5\" />\n                </svg>\n              </div>\n              {/* Bottom-Left Corner Rosette */}\n              <div className=\"text-warning/70 absolute -bottom-2.5 -left-2.5 flex size-5 items-center justify-center\">\n                <svg className=\"size-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                  <path d=\"M12 2v20M2 12h20M5 5l14 14M5 19L19 5\" />\n                </svg>\n              </div>\n              {/* Bottom-Right Corner Rosette */}\n              <div className=\"text-warning/70 absolute -right-2.5 -bottom-2.5 flex size-5 items-center justify-center\">\n                <svg className=\"size-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                  <path d=\"M12 2v20M2 12h20M5 5l14 14M5 19L19 5\" />\n                </svg>\n              </div>\n            </div>\n\n            <div className=\"relative space-y-8 text-center sm:space-y-10\">\n              {/* 1. Issuing Institution Crest & Header */}\n              <div className=\"flex flex-col items-center space-y-3\">\n                {/* Academy Crest Emblem SVG */}\n                <div className=\"relative flex size-20 items-center justify-center sm:size-24\">\n                  <div className=\"to-primary/20 absolute inset-0 rounded-full bg-gradient-to-tr from-amber-500/20 via-emerald-500/20 blur-md\" />\n                  <div className=\"bg-card border-warning/40 relative flex size-18 items-center justify-center rounded-full border-2 p-3 shadow-md sm:size-20\">\n                    <svg\n                      className=\"text-foreground size-full\"\n                      viewBox=\"0 0 100 100\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      aria-label=\"UIPKGE Engineering Academy Crest\"\n                    >\n                      {/* Outer Shield */}\n                      <path\n                        d=\"M50 8 L84 20 V50 C84 72 50 92 50 92 C50 92 16 72 16 50 V20 Z\"\n                        fill=\"currentColor\"\n                        fillOpacity=\"0.06\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"3\"\n                        strokeLinejoin=\"round\"\n                      />\n                      {/* Inner Shield Contour */}\n                      <path\n                        d=\"M50 16 L76 26 V48 C76 66 50 82 50 82 C50 82 24 66 24 48 V26 Z\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"1.5\"\n                        strokeDasharray=\"3 2\"\n                      />\n                      {/* Dual-Framework Atom Rings */}\n                      <ellipse\n                        cx=\"50\"\n                        cy=\"48\"\n                        rx=\"20\"\n                        ry=\"8\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"1.5\"\n                        transform=\"rotate(-30 50 48)\"\n                      />\n                      <ellipse\n                        cx=\"50\"\n                        cy=\"48\"\n                        rx=\"20\"\n                        ry=\"8\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"1.5\"\n                        transform=\"rotate(30 50 48)\"\n                      />\n                      {/* Center Core Star & Graduation Cap Symbol */}\n                      <circle cx=\"50\" cy=\"48\" r=\"4\" fill=\"currentColor\" />\n                      <polygon\n                        points=\"50,30 54,38 63,39 56,45 58,54 50,49 42,54 44,45 37,39 46,38\"\n                        fill=\"currentColor\"\n                        fillOpacity=\"0.8\"\n                      />\n                    </svg>\n                  </div>\n                </div>\n\n                <div className=\"space-y-1\">\n                  <p className=\"text-muted-foreground text-xs font-bold tracking-[0.25em] uppercase\">\n                    {credentialData.institution}\n                  </p>\n                  <p className=\"text-success font-mono text-xs font-semibold tracking-widest\">{credentialData.motto}</p>\n                </div>\n\n                <div className=\"text-muted-foreground/60 flex items-center justify-center gap-3 pt-1\">\n                  <span className=\"bg-border h-px w-12 sm:w-20\" />\n                  <Award className=\"text-warning/80 size-3.5\" aria-hidden=\"true\" />\n                  <span className=\"font-mono text-xs tracking-wider uppercase\">Accredited Diploma</span>\n                  <Award className=\"text-warning/80 size-3.5\" aria-hidden=\"true\" />\n                  <span className=\"bg-border h-px w-12 sm:w-20\" />\n                </div>\n              </div>\n\n              {/* 2. Recipient Presentation & Certificate Title */}\n              <div className=\"space-y-4\">\n                <p className=\"text-muted-foreground text-xs font-medium tracking-[0.2em] uppercase\">\n                  This is to certify that\n                </p>\n\n                {/* Recipient Name in Elegant / Prominent Display */}\n                <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-5xl lg:text-6xl\">\n                  {credentialData.recipientName}\n                </h2>\n\n                <p className=\"text-muted-foreground text-xs italic sm:text-sm\">\n                  has successfully fulfilled all rigorous requirements and demonstrated distinguished mastery in\n                </p>\n\n                {/* Certificate Specialization Heading */}\n                <div className=\"border-primary/20 bg-primary/5 mx-auto max-w-2xl rounded-lg border px-4 py-3 sm:px-6\">\n                  <h3 className=\"text-foreground text-base font-semibold tracking-tight sm:text-xl md:text-2xl\">\n                    {credentialData.type}\n                  </h3>\n                </div>\n\n                {/* Achievement Description */}\n                <p className=\"text-muted-foreground mx-auto max-w-2xl text-xs leading-relaxed sm:text-sm\">\n                  {credentialData.achievementDescription}\n                </p>\n\n                {/* Distinction Badge */}\n                <div className=\"border-warning/30 bg-warning/10 text-warning inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium\">\n                  <Award className=\"size-3.5\" aria-hidden=\"true\" />\n                  <span>Conferred with Highest Distinction · Top 1% Cohort · 480 CEU Hours</span>\n                </div>\n              </div>\n\n              {/* 3. Validated Skills Pills */}\n              <div className=\"space-y-3 pt-2\">\n                <p className=\"text-muted-foreground text-xs font-medium\">\n                  Validated Competencies &amp; Technical Proficiencies\n                </p>\n                <div className=\"flex flex-wrap items-center justify-center gap-2\">\n                  {credentialData.skills.map((skill) => (\n                    <Badge\n                      wrap\n                      key={skill}\n                      variant=\"secondary\"\n                      className=\"border-border/80 bg-muted/60 hover:bg-muted gap-1.5 border px-3 py-1 text-xs font-medium transition-colors\"\n                    >\n                      <span className=\"bg-success size-1.5 rounded-full\" />\n                      {skill}\n                    </Badge>\n                  ))}\n                </div>\n              </div>\n\n              {/* 4. Issue Date & Validity Bar */}\n              <div className=\"border-border/60 bg-muted/20 mx-auto grid max-w-xl grid-cols-1 gap-3 rounded-lg border p-3 text-xs sm:grid-cols-3\">\n                <div>\n                  <span className=\"text-muted-foreground\">Issue Date</span>\n                  <p className=\"text-foreground mt-0.5 font-semibold\">{credentialData.issueDate}</p>\n                </div>\n                <div className=\"border-border/60 border-t pt-2 sm:border-t-0 sm:border-l sm:pt-0 sm:pl-3\">\n                  <span className=\"text-muted-foreground\">Validity</span>\n                  <p className=\"text-success mt-0.5 font-semibold\">{credentialData.expiration}</p>\n                </div>\n                <div className=\"border-border/60 border-t pt-2 sm:border-t-0 sm:border-l sm:pt-0 sm:pl-3\">\n                  <span className=\"text-muted-foreground\">Credential Status</span>\n                  <p className=\"text-foreground mt-0.5 font-mono font-semibold\">Active · Verified</p>\n                </div>\n              </div>\n\n              {/* 5. Signatures & Verification Seal / QR Code Grid */}\n              <div className=\"grid grid-cols-1 items-end gap-8 pt-4 sm:grid-cols-3 sm:gap-6\">\n                {/* Lead Instructor Signature */}\n                <div className=\"flex flex-col items-center space-y-2 text-center\">\n                  {/* Handwritten Signature SVG */}\n                  <div className=\"flex h-14 w-44 items-center justify-center\">\n                    <svg\n                      className=\"text-foreground h-full w-full opacity-90\"\n                      viewBox=\"0 0 200 60\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      aria-label=\"Signature of Dr. Marcus Vance\"\n                    >\n                      {/* Cursive handwritten stroke: M. Vance */}\n                      <path\n                        d=\"M 15,45 C 18,20 28,12 36,25 C 44,38 48,15 56,22 C 64,29 68,48 76,42 C 84,36 92,30 102,32 C 114,34 122,46 134,36 C 144,28 152,18 162,26 C 172,34 180,42 188,40\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"2.2\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                      />\n                      <path\n                        d=\"M 30,52 C 70,50 140,53 180,48\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"1.2\"\n                        strokeLinecap=\"round\"\n                        strokeDasharray=\"4 2\"\n                        opacity=\"0.6\"\n                      />\n                    </svg>\n                  </div>\n                  <div className=\"border-border w-full max-w-[200px] border-t pt-1.5\">\n                    <p className=\"text-foreground text-xs font-bold\">{credentialData.leadInstructor.name}</p>\n                    <p className=\"text-muted-foreground text-xs\">{credentialData.leadInstructor.title}</p>\n                  </div>\n                </div>\n\n                {/* Center Gold/Emerald Cryptographic Seal & SVG QR Code */}\n                <div className=\"flex flex-col items-center space-y-3\">\n                  <div className=\"relative flex flex-col items-center\">\n                    {/* Medallion Seal Badge Outer */}\n                    <div className=\"via-background border-warning/60 relative flex size-28 flex-col items-center justify-center rounded-full border-2 bg-gradient-to-br from-amber-500/10 to-emerald-500/10 p-2 shadow-md\">\n                      {/* QR Code SVG with finder blocks */}\n                      <svg\n                        className=\"text-foreground size-16\"\n                        viewBox=\"0 0 21 21\"\n                        fill=\"currentColor\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        aria-label=\"QR code for online credential verification\"\n                      >\n                        {/* Top-Left Finder Pattern (7x7) */}\n                        <rect x=\"0\" y=\"0\" width=\"7\" height=\"7\" rx=\"0.5\" />\n                        <rect x=\"1\" y=\"1\" width=\"5\" height=\"5\" fill=\"var(--color-card, #fff)\" />\n                        <rect x=\"2\" y=\"2\" width=\"3\" height=\"3\" />\n\n                        {/* Top-Right Finder Pattern (7x7) */}\n                        <rect x=\"14\" y=\"0\" width=\"7\" height=\"7\" rx=\"0.5\" />\n                        <rect x=\"15\" y=\"1\" width=\"5\" height=\"5\" fill=\"var(--color-card, #fff)\" />\n                        <rect x=\"16\" y=\"2\" width=\"3\" height=\"3\" />\n\n                        {/* Bottom-Left Finder Pattern (7x7) */}\n                        <rect x=\"0\" y=\"14\" width=\"7\" height=\"7\" rx=\"0.5\" />\n                        <rect x=\"1\" y=\"15\" width=\"5\" height=\"5\" fill=\"var(--color-card, #fff)\" />\n                        <rect x=\"2\" y=\"16\" width=\"3\" height=\"3\" />\n\n                        {/* Timing Patterns (Row 6 & Col 6) */}\n                        <rect x=\"8\" y=\"6\" width=\"1\" height=\"1\" />\n                        <rect x=\"10\" y=\"6\" width=\"1\" height=\"1\" />\n                        <rect x=\"12\" y=\"6\" width=\"1\" height=\"1\" />\n                        <rect x=\"6\" y=\"8\" width=\"1\" height=\"1\" />\n                        <rect x=\"6\" y=\"10\" width=\"1\" height=\"1\" />\n                        <rect x=\"6\" y=\"12\" width=\"1\" height=\"1\" />\n\n                        {/* Data Modules */}\n                        <rect x=\"8\" y=\"0\" width=\"1\" height=\"1\" />\n                        <rect x=\"10\" y=\"1\" width=\"1\" height=\"1\" />\n                        <rect x=\"12\" y=\"2\" width=\"1\" height=\"1\" />\n                        <rect x=\"9\" y=\"3\" width=\"1\" height=\"1\" />\n                        <rect x=\"11\" y=\"4\" width=\"1\" height=\"1\" />\n\n                        <rect x=\"0\" y=\"8\" width=\"1\" height=\"1\" />\n                        <rect x=\"2\" y=\"9\" width=\"1\" height=\"1\" />\n                        <rect x=\"4\" y=\"10\" width=\"1\" height=\"1\" />\n                        <rect x=\"1\" y=\"12\" width=\"1\" height=\"1\" />\n\n                        <rect x=\"8\" y=\"8\" width=\"2\" height=\"2\" />\n                        <rect x=\"11\" y=\"8\" width=\"1\" height=\"1\" />\n                        <rect x=\"13\" y=\"9\" width=\"2\" height=\"1\" />\n                        <rect x=\"8\" y=\"11\" width=\"1\" height=\"2\" />\n                        <rect x=\"10\" y=\"11\" width=\"2\" height=\"1\" />\n                        <rect x=\"13\" y=\"12\" width=\"1\" height=\"1\" />\n\n                        <rect x=\"14\" y=\"8\" width=\"1\" height=\"1\" />\n                        <rect x=\"16\" y=\"9\" width=\"1\" height=\"1\" />\n                        <rect x=\"19\" y=\"10\" width=\"1\" height=\"1\" />\n                        <rect x=\"15\" y=\"11\" width=\"2\" height=\"1\" />\n                        <rect x=\"18\" y=\"12\" width=\"1\" height=\"1\" />\n\n                        <rect x=\"8\" y=\"14\" width=\"1\" height=\"1\" />\n                        <rect x=\"10\" y=\"15\" width=\"2\" height=\"1\" />\n                        <rect x=\"8\" y=\"17\" width=\"1\" height=\"2\" />\n                        <rect x=\"10\" y=\"18\" width=\"1\" height=\"1\" />\n                        <rect x=\"12\" y=\"16\" width=\"1\" height=\"2\" />\n                        <rect x=\"12\" y=\"19\" width=\"1\" height=\"1\" />\n\n                        <rect x=\"14\" y=\"14\" width=\"2\" height=\"1\" />\n                        <rect x=\"17\" y=\"15\" width=\"1\" height=\"1\" />\n                        <rect x=\"19\" y=\"14\" width=\"2\" height=\"1\" />\n                        <rect x=\"15\" y=\"17\" width=\"1\" height=\"2\" />\n                        <rect x=\"17\" y=\"18\" width=\"2\" height=\"1\" />\n                        <rect x=\"20\" y=\"19\" width=\"1\" height=\"1\" />\n                      </svg>\n\n                      {/* Cryptographic Seal Label */}\n                      <div className=\"text-success mt-1 flex items-center gap-1\">\n                        <ShieldCheck className=\"size-3\" aria-hidden=\"true\" />\n                        <span className=\"font-mono text-xs font-semibold\">VERIFIED</span>\n                      </div>\n                    </div>\n                  </div>\n\n                  <p className=\"text-muted-foreground text-xs font-medium\">Scan to Verify Authenticity</p>\n                </div>\n\n                {/* Academic Dean Signature */}\n                <div className=\"flex flex-col items-center space-y-2 text-center\">\n                  {/* Handwritten Signature SVG */}\n                  <div className=\"flex h-14 w-44 items-center justify-center\">\n                    <svg\n                      className=\"text-foreground h-full w-full opacity-90\"\n                      viewBox=\"0 0 200 60\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      aria-label=\"Signature of Dr. Sarah Jenkins\"\n                    >\n                      {/* Cursive handwritten stroke: S. Jenkins */}\n                      <path\n                        d=\"M 20,25 C 24,14 34,12 40,20 C 46,28 32,48 42,48 C 52,48 60,30 70,30 C 80,30 84,42 94,40 C 104,38 112,24 122,24 C 132,24 136,44 148,42 C 158,40 166,28 176,32 C 182,35 186,40 190,38\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"2.2\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                      />\n                      <path\n                        d=\"M 25,54 C 65,52 130,50 175,48\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"1.2\"\n                        strokeLinecap=\"round\"\n                        strokeDasharray=\"4 2\"\n                        opacity=\"0.6\"\n                      />\n                    </svg>\n                  </div>\n                  <div className=\"border-border w-full max-w-[200px] border-t pt-1.5\">\n                    <p className=\"text-foreground text-xs font-bold\">{credentialData.academicDean.name}</p>\n                    <p className=\"text-muted-foreground text-xs\">{credentialData.academicDean.title}</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Cryptographic Verification & Blockchain Ledger Audit Strip */}\n      <Card className=\"border-border bg-muted/20 border shadow-xs\">\n        <CardContent className=\"flex flex-col gap-4 p-4 text-xs lg:flex-row lg:items-center lg:justify-between\">\n          <div className=\"text-muted-foreground flex items-center gap-2.5\">\n            <ShieldCheck className=\"text-success size-4 shrink-0\" aria-hidden=\"true\" />\n            <span>\n              Tamper-Proof Credential · W3C Verifiable Credentials &amp;{' '}\n              <span className=\"text-foreground font-mono font-medium\">{credentialData.blockLedger}</span>\n            </span>\n          </div>\n\n          <div className=\"flex flex-wrap items-center gap-3\">\n            {/* SHA-256 Digest Copy Button */}\n            <div className=\"flex items-center gap-1.5 font-mono\">\n              <span className=\"text-muted-foreground\">SHA-256:</span>\n              <button\n                type=\"button\"\n                onClick={copyDigest}\n                className=\"hover:bg-muted focus-visible:ring-ring border-border bg-muted/60 text-foreground inline-flex min-h-6 items-center gap-1 rounded border px-2 py-0.5 transition-colors focus-visible:ring-2 focus-visible:outline-hidden\"\n                title=\"Click to copy SHA-256 cryptographic digest\"\n              >\n                <span className=\"tabular-nums\">7f83b1...126d9069</span>\n                {copiedDigest ? (\n                  <Check className=\"text-success size-3\" aria-hidden=\"true\" />\n                ) : (\n                  <Copy className=\"text-muted-foreground size-3\" aria-hidden=\"true\" />\n                )}\n              </button>\n            </div>\n\n            {/* Direct Verification URL Button */}\n            <button\n              type=\"button\"\n              onClick={copyVerifyUrl}\n              className=\"hover:bg-muted focus-visible:ring-ring text-primary hover:text-primary/80 inline-flex min-h-6 items-center gap-1 rounded px-1.5 py-0.5 font-medium transition-colors focus-visible:ring-2 focus-visible:outline-hidden\"\n              title=\"Click to copy public verification URL\"\n            >\n              <span>{copiedVerifyUrl ? 'URL Copied' : 'Copy Verification URL'}</span>\n              {copiedVerifyUrl ? (\n                <Check className=\"text-success size-3\" aria-hidden=\"true\" />\n              ) : (\n                <ExternalLink className=\"size-3\" aria-hidden=\"true\" />\n              )}\n            </button>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n\nexport default CertificateCredentialCard\n",
      "type": "registry:block",
      "target": "~/components/blocks/CertificateCredentialCard.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Digital diploma and verified credential card featuring ornamental certificate container, cryptographic seal with QR code verification, recipient honors, validated skill pills, instructor signatures, and social sharing.",
  "categories": [
    "education",
    "app",
    "card"
  ]
}