{
  "name": "banner-08-block",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\nimport React, { useState } from \"react\";\n\nfunction Banner_08() {\n  // State to control banner visibility\n  const [isVisible, setIsVisible] = useState(true);\n\n  // Hide banner when user dismisses it\n  const dismissBanner = () => {\n    setIsVisible(false);\n  };\n\n  if (!isVisible) return null;\n\n  return (\n    <div className=\"relative overflow-hidden bg-gradient-to-r from-teal-600 to-cyan-600 px-4 py-3 shadow-md\">\n      {/* Background decorative elements */}\n      <div className=\"absolute inset-0 flex items-center justify-center opacity-10\">\n        <div className=\"h-32 w-32 rotate-12 rounded-full border-4 border-white\"></div>\n        <div className=\"absolute -right-6 h-24 w-24 -rotate-12 rounded-full border-4 border-white\"></div>\n        <div className=\"absolute -left-8 h-16 w-16 rotate-45 rounded-full border-4 border-white\"></div>\n      </div>\n\n      <div className=\"relative z-10 flex items-center justify-between\">\n        <div className=\"flex flex-1 items-center justify-center text-center sm:justify-start sm:text-left\">\n          <div className=\"hidden sm:block\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"mr-3 h-6 w-6 text-white\"\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=\"M13 10V3L4 14h7v7l9-11h-7z\"\n              />\n            </svg>\n          </div>\n          <p className=\"flex items-center text-sm font-medium text-white\">\n            <span className=\"mr-1.5 hidden rounded-full bg-white px-2 py-0.5 text-xs font-bold text-teal-500 sm:inline-block\">\n              NEW\n            </span>\n            <span>\n              <span className=\"font-bold\">Free shipping</span> now available on\n              all Summer Edition items!\n              <a\n                href=\"#\"\n                className=\"ml-1.5 whitespace-nowrap underline hover:text-teal-100\"\n              >\n                Shop now →\n              </a>\n            </span>\n          </p>\n        </div>\n        <button\n          className=\"ml-3 flex-shrink-0 text-white focus:outline-none\"\n          onClick={dismissBanner}\n          aria-label=\"Dismiss\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className=\"h-5 w-5\"\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  );\n}\n\nexport default Banner_08;\n",
      "path": "/components/commerce-ui/blocks/banners/banner-08.tsx",
      "target": "components/commerce-ui/banner-08.tsx"
    }
  ]
}