{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "design-folder-box",
  "title": "Design Folder Box",
  "author": "AlgorizeTech",
  "description": "A frosted-glass folder shape with title and subtitle, used as a decorative container. Use it on portfolio and feature sections where a plain card is too plain.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/custom/blocks/DesignFolderBox.tsx",
      "content": "\"use client\";\n\nimport React, { forwardRef } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/* ═══════════════════════════════════════════════\n   TYPES & INTERFACES\n   ═══════════════════════════════════════════════ */\n\nexport interface DesignFolderBoxProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  subtitle?: string;\n  color?: string;\n}\n\n/* ═══════════════════════════════════════════════\n   STANDALONE COMPONENT: DesignFolderBox\n   (Pure Frosted Glass Folder Box without cards)\n   ═══════════════════════════════════════════════ */\n\nexport const DesignFolderBox = forwardRef<\n  HTMLDivElement,\n  DesignFolderBoxProps\n>(\n  (\n    {\n      title = \"Design\",\n      subtitle = \"Components\",\n      color,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const getAccentColor = (col?: string) => {\n      if (!col || col === \"primary\" || col === \"default\") return undefined;\n      const presets: Record<string, string> = {\n        indigo: \"#6366f1\",\n        rose: \"#f43f5e\",\n        emerald: \"#10b981\",\n        zinc: \"#18181b\",\n      };\n      return presets[col] || col;\n    };\n\n    const resolvedColor = getAccentColor(color);\n    const customStyle: React.CSSProperties = resolvedColor\n      ? ({ \"--primary\": resolvedColor } as React.CSSProperties)\n      : {};\n\n    return (\n      <section\n        ref={ref}\n        style={customStyle}\n        className={cn(\n          \"relative w-full py-4 md:py-8 overflow-hidden select-none flex justify-center items-center\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"w-full flex justify-center items-center overflow-hidden px-1 sm:px-0\">\n          <div className=\"relative w-full max-w-[960px] mx-auto h-[220px] min-[420px]:h-[260px] min-[520px]:h-[300px] sm:h-[360px] md:h-[420px] lg:h-[460px] flex items-end justify-center\">\n            {/* FOREGROUND FROSTED GLASS FOLDER BOX ONLY */}\n            <div className=\"relative w-[95%] sm:w-[85%] md:w-[680px] lg:w-[780px] h-full z-30 pointer-events-none\">\n              <div className=\"relative w-full h-full\">\n                {/* Folder Shape */}\n                <div className=\"absolute inset-0\">\n                  <div\n                    className=\"absolute inset-0 backdrop-blur-[3px] pointer-events-none\"\n                    style={{ clipPath: \"url(#pureFolderShapeClip)\" }}\n                  />\n                  <svg\n                    className=\"w-full h-full relative z-10\"\n                    viewBox=\"-10 0 660 310\"\n                    preserveAspectRatio=\"none\"\n                  >\n                    <defs>\n                      <clipPath\n                        id=\"pureFolderShapeClip\"\n                        clipPathUnits=\"objectBoundingBox\"\n                      >\n                        <path d=\"M -0.012,0.0258 C -0.012,0.0097 -0.004,0 0.012,0 L 0.500,0 C 0.525,0 0.545,0.0806 0.564,0.145 C 0.576,0.187 0.594,0.2193 0.618,0.2193 L 0.966,0.2193 C 0.975,0.2193 0.982,0.2322 0.982,0.258 L 0.939,0.9742 C 0.939,0.9903 0.933,1 0.924,1 L 0.045,1 C 0.036,1 0.030,0.9903 0.030,0.9742 Z\" />\n                      </clipPath>\n                      <linearGradient\n                        id=\"themePureFolderGradient\"\n                        x1=\"0%\"\n                        y1=\"0%\"\n                        x2=\"100%\"\n                        y2=\"100%\"\n                      >\n                        <stop\n                          offset=\"0%\"\n                          stopColor=\"var(--primary)\"\n                          stopOpacity=\"0.75\"\n                        />\n                        <stop\n                          offset=\"50%\"\n                          stopColor=\"var(--primary)\"\n                          stopOpacity=\"0.82\"\n                        />\n                        <stop\n                          offset=\"100%\"\n                          stopColor=\"var(--primary)\"\n                          stopOpacity=\"0.9\"\n                        />\n                      </linearGradient>\n                    </defs>\n                    <path\n                      d=\"\n                        M -8 8\n                        C -8 3, -3 0, 8 0\n                        L 330 0\n                        C 347 0, 360 25, 372 45\n                        C 380 58, 392 68, 408 68\n                        L 638 68\n                        C 644 68, 648 72, 648 80\n                        L 620 302\n                        C 620 307, 616 310, 610 310\n                        L 30 310\n                        C 24 310, 20 307, 20 302\n                        Z\n                      \"\n                      fill=\"url(#themePureFolderGradient)\"\n                      stroke=\"rgba(255, 255, 255, 0.45)\"\n                      strokeWidth=\"2\"\n                    />\n                  </svg>\n                </div>\n\n                {/* Folder Text Overlay */}\n                <div className=\"absolute inset-0 p-6 sm:p-10 md:p-14 lg:p-16 flex flex-col justify-end pointer-events-auto\">\n                  <div className=\"relative z-10\">\n                    <h3 className=\"text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold text-primary-foreground tracking-tight leading-[1.05]\">\n                      {title}\n                      {subtitle && (\n                        <>\n                          <br />\n                          {subtitle}\n                        </>\n                      )}\n                    </h3>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    );\n  }\n);\n\nDesignFolderBox.displayName = \"DesignFolderBox\";\n\nexport default DesignFolderBox;\n",
      "type": "registry:component",
      "target": "components/custom/blocks/DesignFolderBox.tsx"
    }
  ],
  "docs": "Named export: DesignFolderBox. Presentational only — `color` tints the glass. For the version that holds stacked cards inside the folder, use `design-components-folder`.",
  "categories": [
    "media",
    "marketing"
  ],
  "type": "registry:component"
}