{
  "name": "banner-09-block",
  "type": "registry:block",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\nimport { Sun } from \"lucide-react\";\nimport React, { useState } from \"react\";\n\nfunction Banner_09() {\n  // State to control banner visibility\n  const [isVisible, setIsVisible] = useState(true);\n  // State to control promo code copy action\n  const [copied, setCopied] = useState(false);\n\n  // Hide banner when user dismisses it\n  const dismissBanner = () => {\n    setIsVisible(false);\n  };\n\n  // Handle copy promo code\n  const copyPromoCode = () => {\n    navigator.clipboard.writeText(\"SPRING25\");\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  if (!isVisible) return null;\n\n  return (\n    <div className=\"relative w-full overflow-hidden bg-gradient-to-r from-purple-600 to-indigo-500 px-6 py-5 shadow-lg\">\n      {/* Animated background elements */}\n      <div className=\"absolute inset-0 overflow-hidden\">\n        <div className=\"absolute -top-20 -left-20 h-48 w-48 animate-pulse rounded-full bg-white opacity-10\"></div>\n        <div className=\"absolute top-5 right-10 h-20 w-20 animate-bounce rounded-full bg-white opacity-10 delay-300\"></div>\n        <div className=\"absolute bottom-4 left-1/3 h-24 w-24 animate-ping rounded-full bg-white opacity-10 [animation-duration:3s]\"></div>\n        <div className=\"absolute -right-10 -bottom-10 h-40 w-40 animate-pulse rounded-full bg-white opacity-10 delay-700\"></div>\n      </div>\n\n      <div className=\"relative z-10 flex flex-col items-center justify-between gap-5 md:flex-row\">\n        <div className=\"flex items-center justify-center gap-4 text-center md:justify-start md:text-left\">\n          <div className=\"hidden animate-spin duration-9000 md:block\">\n            <Sun className=\"h-16 w-16 text-white\" />\n          </div>\n          <div className=\"space-y-1\">\n            <span className=\"inline-flex animate-pulse rounded-md bg-white px-3 py-1 text-sm font-bold text-indigo-600 shadow-sm\">\n              25% OFF EVERYTHING\n            </span>\n            <h3 className=\"text-2xl font-bold text-white md:text-3xl\">\n              Spring Sale Event\n            </h3>\n            <p className=\"text-base font-medium text-white/90\">\n              Use code{\" \"}\n              <span className=\"rounded bg-white/20 px-2 py-0.5 font-bold tracking-wider text-white\">\n                SPRING25\n              </span>{\" \"}\n              at checkout\n            </p>\n          </div>\n        </div>\n\n        <div className=\"flex items-center space-x-4\">\n          <button\n            onClick={copyPromoCode}\n            className=\"relative rounded-md border-2 border-indigo-500 bg-white px-5 py-2.5 text-base font-medium text-indigo-500 backdrop-blur-sm transition-all hover:bg-white/80 focus:ring-2 focus:ring-white/50 focus:outline-none\"\n          >\n            <span\n              className={`transition-opacity ${copied ? \"opacity-0\" : \"opacity-100\"}`}\n            >\n              Copy Code\n            </span>\n            <span\n              className={`absolute inset-0 flex items-center justify-center transition-opacity ${copied ? \"opacity-100\" : \"opacity-0\"}`}\n            >\n              Copied!\n            </span>\n          </button>\n\n          <button\n            className=\"flex-shrink-0 text-white opacity-70 transition-opacity hover:opacity-100 focus:outline-none\"\n            onClick={dismissBanner}\n            aria-label=\"Dismiss\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"h-6 w-6\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M6 18L18 6M6 6l12 12\"\n              />\n            </svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Banner_09;\n",
      "path": "/components/commerce-ui/blocks/banners/banner-09.tsx",
      "target": "components/commerce-ui/banner-09.tsx"
    }
  ]
}