{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "title": "Card",
  "author": "AlgorizeTech",
  "description": "A composable surface with header, title, description, content, and footer slots. Use it to group related content into a bounded block.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://avaraui.com/r/button.json",
    "https://avaraui.com/r/product-card.json",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/custom/blocks/CardBlock.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport React, { useState } from \"react\";\nimport { ArrowUpRight, Mail, Copy, Check } from \"lucide-react\";\nimport Button from \"./Button\";\n\n\n// ==========================================\n// 1. ROOT CARD WRAPPER\n// ==========================================\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"default\" | \"bordered\" | \"flat\";\n  interactive?: boolean;\n}\n\nexport function Card({\n  className,\n  variant = \"bordered\",\n  interactive = false,\n  children,\n  ...props\n}: CardProps) {\n  const variants = {\n    default: \"bg-card shadow-sm border border-primary/10\",\n    bordered:\n      \"bg-card border border-primary/25 shadow-sm\",\n    flat: \"bg-muted border border-primary/20\",\n  };\n\n  return (\n    <div\n      className={cn(\n        \"rounded-xl text-card-foreground flex flex-col transition-all duration-200\",\n        variants[variant],\n        interactive &&\n          \"hover:shadow-md hover:-translate-y-0.5 cursor-pointer hover:border-primary/50 active:scale-[0.98]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ==========================================\n// 2. HEADER\n// ==========================================\nexport function CardHeader({\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className={cn(\"flex flex-col space-y-1.5 p-6\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport function CardTitle({\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLHeadingElement>) {\n  return (\n    <h3\n      className={cn(\n        \"font-semibold leading-none tracking-tight text-lg\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h3>\n  );\n}\n\nexport function CardDescription({\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) {\n  return (\n    <p\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    >\n      {children}\n    </p>\n  );\n}\n\n// ==========================================\n// 3. CONTENT AREA\n// ==========================================\nexport function CardContent({\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className={cn(\"p-6 pt-0 flex-1\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\n// ==========================================\n// 4. FOOTER\n// ==========================================\nexport function CardFooter({\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"flex items-center p-6 pt-0 mt-auto\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ==========================================\n// 5. PROJECT SHOWCASE CARD\n// A responsive, full-width two-column showcase card matching the interactive block design:\n// visual preview frame with package slug on the left, pairing with pill tags,\n// headline, description, 2x2 specification grid, branded action buttons, and\n// copyable install CLI command bar on the right.\n// ==========================================\nexport interface ProjectCardSpec {\n  label: string;\n  value: string;\n}\n\nexport interface ProjectCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  image?: string;\n  slug?: string;\n  scope?: string;\n  badge1?: string;\n  badge2?: string;\n  description?: string;\n  specs?: ProjectCardSpec[];\n  ctaLabel?: string;\n  ctaHref?: string;\n  contactLabel?: string;\n  installCommand?: string;\n  onCtaClick?: (e: React.MouseEvent<HTMLElement>) => void;\n  onContactClick?: (e: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport function ProjectCard({\n  title = \"Platform grid\",\n  image = \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto/v1790516057/platform-grid-1790516064500.jpg\",\n  slug,\n  scope = \"avara-ui\",\n  badge1 = \"Component Block\",\n  badge2 = \"TypeScript & Tailwind\",\n  description = \"A meticulously crafted, responsive interactive block built with modern animations, responsive layouts, and accessible standards. Ready to drop into your Next.js and React applications.\",\n  specs,\n  ctaLabel = \"Full View\",\n  ctaHref = \"#\",\n  contactLabel = \"Contact\",\n  installCommand,\n  onCtaClick,\n  onContactClick,\n  className,\n  ...props\n}: ProjectCardProps) {\n  const [copied, setCopied] = useState(false);\n  const resolvedSlug =\n    slug ??\n    title\n      .toLowerCase()\n      .replace(/[^a-z0-9]+/g, \"-\")\n      .replace(/(^-|-$)/g, \"\");\n\n  const resolvedCommand = installCommand ?? `npx shadcn@latest add @${scope}/${resolvedSlug}`;\n\n  const defaultSpecs: ProjectCardSpec[] = [\n    { label: \"Framework\", value: \"Next.js / React 19\" },\n    { label: \"Styling\", value: \"Tailwind CSS v4\" },\n    { label: \"Animation\", value: \"Motion / GSAP\" },\n    { label: \"Responsive\", value: \"Fluid Mobile & Desktop\" },\n  ];\n\n  const specsList = specs ?? defaultSpecs;\n\n  const handleCopy = () => {\n    if (typeof window !== \"undefined\" && navigator.clipboard) {\n      navigator.clipboard.writeText(resolvedCommand);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"w-full overflow-hidden bg-card border border-foreground/15 dark:border-foreground/20 rounded-2xl sm:rounded-3xl shadow-none ring-1 ring-foreground/10 dark:ring-foreground/15\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-0 w-full\">\n        {/* Left Column: Visual Card Preview Frame */}\n        <div className=\"relative flex flex-col justify-center p-5 sm:p-7 md:p-8 lg:p-10 bg-muted/35 dark:bg-muted/20 border-b lg:border-b-0 lg:border-r border-border/80 dark:border-border/60 w-full\">\n          <div className=\"relative z-10 w-full flex flex-col justify-between p-4 sm:p-6 rounded-2xl sm:rounded-3xl border border-border/80 dark:border-border/60 bg-card shadow-none\">\n            <div className=\"font-mono text-base sm:text-lg font-bold text-foreground tracking-tight mb-3\">\n              {title}\n            </div>\n\n            <div className=\"relative w-full aspect-[4/3] sm:aspect-[16/11] rounded-xl sm:rounded-2xl border border-border/60 bg-muted/20 overflow-hidden p-2 sm:p-3 flex items-center justify-center my-auto\">\n              <img\n                src={image}\n                alt={title}\n                className=\"w-full h-full object-contain rounded-lg select-none pointer-events-none\"\n              />\n            </div>\n\n            <div className=\"font-mono text-xs sm:text-sm text-muted-foreground mt-3\">\n              @{scope}/{resolvedSlug}\n            </div>\n          </div>\n        </div>\n\n        {/* Right Column: Full Details & Project Metadata */}\n        <div className=\"flex flex-col justify-between p-5 sm:p-7 md:p-8 lg:p-10 space-y-6 w-full\">\n          <div className=\"space-y-4\">\n            {/* Badges */}\n            <div className=\"flex flex-wrap items-center gap-2\">\n              {badge1 && (\n                <span className=\"px-3 py-1 rounded-full text-xs font-semibold bg-rose-500/10 text-rose-500 border border-rose-500/20\">\n                  {badge1}\n                </span>\n              )}\n              {badge2 && (\n                <span className=\"px-3 py-1 rounded-full text-xs font-medium bg-amber-500/10 text-amber-800 dark:text-amber-300 border border-amber-500/20\">\n                  {badge2}\n                </span>\n              )}\n            </div>\n\n            {/* Title & Description */}\n            <div>\n              <h2 className=\"text-3xl sm:text-4xl lg:text-[40px] font-extrabold tracking-tight text-foreground leading-[1.15]\">\n                {title}\n              </h2>\n              <p className=\"mt-2.5 sm:mt-3 text-sm sm:text-base text-muted-foreground leading-relaxed\">\n                {description}\n              </p>\n            </div>\n\n            {/* Project Specifications 2x2 Grid */}\n            <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1\">\n              {specsList.map((spec, i) => (\n                <div\n                  key={i}\n                  className=\"p-3.5 sm:p-4 rounded-2xl bg-muted/40 dark:bg-muted/20 border border-border/70\"\n                >\n                  <div className=\"text-xs text-muted-foreground font-normal\">\n                    {spec.label}\n                  </div>\n                  <div className=\"text-sm sm:text-base font-bold text-foreground mt-0.5 sm:mt-1 truncate\">\n                    {spec.value}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {/* Actions & Install Bar */}\n          <div className=\"space-y-3 pt-1\">\n            <div className=\"flex flex-col sm:flex-row items-center gap-3 w-full\">\n              <div className=\"w-full sm:flex-1 flex [&>div]:w-full [&>div>button]:w-full [&>button]:w-full\">\n                <Button\n                  variant=\"default\"\n                  size=\"default\"\n                  onClick={(e) => {\n                    e.preventDefault();\n                    if (ctaHref && ctaHref !== \"#\") {\n                      window.open(ctaHref, \"_blank\", \"noopener,noreferrer\");\n                    }\n                    onCtaClick?.(e);\n                  }}\n                  iconRight={<ArrowUpRight size={15} />}\n                  className=\"w-full font-medium\"\n                >\n                  {ctaLabel}\n                </Button>\n              </div>\n\n              <div className=\"w-full sm:flex-1 flex [&>div]:w-full [&>div>button]:w-full [&>button]:w-full\">\n                <Button\n                  variant=\"outline\"\n                  size=\"default\"\n                  onClick={(e) => {\n                    e.preventDefault();\n                    onContactClick?.(e);\n                  }}\n                  iconLeft={<Mail size={15} />}\n                  className=\"w-full font-medium\"\n                >\n                  {contactLabel}\n                </Button>\n              </div>\n            </div>\n\n            {/* Install Command Bar */}\n            <div className=\"flex items-center justify-between px-4 py-3 rounded-xl bg-muted/40 border border-border/60 text-xs sm:text-sm font-mono text-muted-foreground w-full\">\n              <span className=\"truncate\">{resolvedCommand}</span>\n              <button\n                type=\"button\"\n                onClick={handleCopy}\n                className=\"shrink-0 ml-2 hover:text-foreground cursor-pointer flex items-center gap-1.5 transition-colors\"\n                title=\"Copy install command\"\n              >\n                {copied ? (\n                  <Check size={15} className=\"text-emerald-500\" />\n                ) : (\n                  <Copy size={15} />\n                )}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport { ProjectCard as ShowcaseCard };\n\n// Re-export ProductCard for convenient unified importing from CardBlock\nexport { ProductCard } from \"@/components/custom/blocks/ProductCardBlock\";\nexport type { ProductCardProps, ProductColorOption } from \"@/components/custom/blocks/ProductCardBlock\";\n\n",
      "type": "registry:component",
      "target": "components/custom/blocks/CardBlock.tsx"
    }
  ],
  "docs": "Named exports: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, ProjectCard (also ShowcaseCard). Compose primitives or use ProjectCard for rich two-column showcases.",
  "categories": [
    "layout"
  ],
  "type": "registry:component"
}