{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-color-panels-demo",
  "type": "registry:component",
  "registryDependencies": [
    "hero-color-panel"
  ],
  "files": [
    {
      "path": "registry/default/example/hero-color-panels-demo.tsx",
      "content": "\"use client\"\n\nimport {\n  AISDKIcon,\n  HeroColorPanels,\n  HeroColorPanelsActions,\n  HeroColorPanelsBadges,\n  HeroColorPanelsContainer,\n  HeroColorPanelsContent,\n  HeroColorPanelsDescription,\n  HeroColorPanelsHeading,\n  HeroColorPanelsMobileVisual,\n  HeroColorPanelsRoot,\n  HeroColorPanelsVisual,\n  NextjsIcon,\n} from \"../ui/hero-color-panel\"\n\nexport default function HeroColorPanelsDemo() {\n  return (\n    <div className=\"space-y-16\">\n      <div className=\"space-y-4\">\n        <h3 className=\"text-lg font-medium\">Default</h3>\n        <HeroColorPanels />\n      </div>\n\n      <div className=\"space-y-4\">\n        <h3 className=\"text-lg font-medium\">Configured Via Props</h3>\n        <HeroColorPanelsRoot\n          ctaProps={{\n            href: \"#\",\n            label: \"Try NewCopy for marketing\",\n          }}\n          description=\"Human-in-the-loop marketing copy software that helps teams draft, review, and ship high-converting campaigns with confidence.\"\n          desktopShaderProps={{\n            width: 1280,\n            height: 720,\n            colors: [\"#ed40b3\", \"#6ef7cc\", \"#adfa1e\", \"#b054de\"],\n            colorBack: \"#ffffff00\",\n            density: 5.03,\n            angle1: 0.68,\n            angle2: 0.28,\n            length: 1.13,\n            edges: true,\n            blur: 0.25,\n            fadeIn: 0.85,\n            fadeOut: 0.3,\n            gradient: 0.56,\n            speed: 4,\n            scale: 0.96,\n            rotation: 180,\n          }}\n          mobileShaderProps={{\n            colors: [\"#ed40b3\", \"#6ef7cc\", \"#adfa1e\", \"#b054de\"],\n            colorBack: \"#ffffff00\",\n            density: 5.03,\n            angle1: 0.68,\n            angle2: 0.28,\n            length: 1.13,\n            edges: true,\n            blur: 0.25,\n            fadeIn: 0.85,\n            fadeOut: 0.3,\n            gradient: 0.56,\n            speed: 4,\n            scale: 0.96,\n            rotation: 180,\n          }}\n          srTitle=\"Composable hero\"\n          subtitle=\"Marketing\"\n          techStack={[\n            { name: \"Next.js\", version: \"v16\" },\n            { name: \"AI SDK\", version: \"v6\" },\n            { name: \"Tailwind\", version: \"v4\" },\n          ]}\n          title=\"Cursor for\"\n        >\n          <HeroColorPanelsContainer>\n            <HeroColorPanelsContent>\n              <HeroColorPanelsHeading headingClassName=\"font-sans\" />\n              <HeroColorPanelsDescription />\n              <HeroColorPanelsActions />\n              <div\n                className=\"flex justify-center lg:justify-start\"\n                data-slot=\"hero-colorpanels-badges-wrap\"\n              >\n                <HeroColorPanelsBadges\n                  techStack={[\n                    { name: \"Next.js\", version: \"v16\", icon: NextjsIcon },\n                    { name: \"AI SDK\", version: \"v6\", icon: AISDKIcon },\n                  ]}\n                />\n              </div>\n            </HeroColorPanelsContent>\n            <HeroColorPanelsVisual />\n          </HeroColorPanelsContainer>\n          <HeroColorPanelsMobileVisual />\n        </HeroColorPanelsRoot>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}