{
  "name": "banner-10-block",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\n\nfunction Banner_10() {\n  // State to control banner visibility\n  const [isVisible, setIsVisible] = useState(true);\n  // State to handle animation entry\n  const [isLoaded, setIsLoaded] = useState(false);\n\n  useEffect(() => {\n    // Trigger entrance animations after component mounts\n    const timer = setTimeout(() => {\n      setIsLoaded(true);\n    }, 300);\n\n    return () => clearTimeout(timer);\n  }, []);\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-slate-900 via-slate-800 to-slate-900 px-6 py-6 shadow-2xl\">\n      {/* Animated background elements */}\n      <div className=\"absolute inset-0 overflow-hidden\">\n        {/* Top right golden circle that rotates slowly */}\n        <div className=\"absolute -top-16 -right-16 h-40 w-40 animate-[spin_15s_linear_infinite] rounded-full bg-gradient-to-br from-amber-400 to-amber-600 opacity-20 blur-md\"></div>\n\n        {/* Bottom left circle with scale effect */}\n        <div className=\"absolute bottom-0 -left-20 h-48 w-48 animate-[ping_4s_ease-in-out_infinite] rounded-full bg-indigo-600 opacity-10 blur-lg\"></div>\n\n        {/* Center small stars twinkling */}\n        <div className=\"absolute top-1/2 left-1/3 h-1 w-1 animate-[pulse_2s_ease-in-out_infinite] rounded-full bg-white\"></div>\n        <div className=\"absolute top-1/4 left-2/3 h-2 w-2 animate-[pulse_3s_ease-in-out_infinite] rounded-full bg-white\"></div>\n        <div className=\"absolute top-3/4 left-1/4 h-1.5 w-1.5 animate-[pulse_2.5s_ease-in-out_infinite] rounded-full bg-white\"></div>\n\n        {/* Multiple diagonal lines */}\n        <div className=\"absolute inset-0 opacity-20\">\n          <div className=\"absolute top-0 left-0 h-full w-0.5 -rotate-45 bg-gradient-to-b from-transparent via-amber-400 to-transparent\"></div>\n          <div className=\"absolute top-0 left-1/3 h-full w-0.5 -rotate-45 bg-gradient-to-b from-transparent via-amber-400 to-transparent\"></div>\n          <div className=\"absolute top-0 left-2/3 h-full w-0.5 -rotate-45 bg-gradient-to-b from-transparent via-amber-400 to-transparent\"></div>\n        </div>\n      </div>\n\n      <div className=\"relative z-10 flex flex-col items-center gap-6 md:flex-row md:justify-between\">\n        <div\n          className={`flex items-center gap-4 text-center transition-all duration-1000 md:text-left ${isLoaded ? \"translate-y-0 opacity-100\" : \"translate-y-4 opacity-0\"}`}\n        >\n          <div className=\"hidden md:block\">\n            <div className=\"relative\">\n              <div className=\"absolute -inset-1 animate-[spin_3s_linear_infinite] rounded-full bg-gradient-to-r from-amber-400 via-amber-300 to-amber-500 opacity-70 blur-sm\"></div>\n              <div className=\"relative aspect-square rounded-full bg-slate-900 p-3\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  className=\"h-10 w-10 text-amber-400\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={1.5}\n                    d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n                  />\n                </svg>\n              </div>\n            </div>\n          </div>\n          <div className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <div className=\"flex items-center justify-center gap-2 md:justify-start\">\n                <span className=\"inline-flex rounded-md bg-amber-400/20 px-3 py-1 text-sm font-bold text-amber-400\">\n                  VIP ACCESS\n                </span>\n                <span className=\"inline-block h-1.5 w-1.5 animate-ping rounded-full bg-amber-400\"></span>\n              </div>\n              <h3 className=\"text-2xl font-bold text-white md:text-3xl\">\n                Premium Membership Launch\n              </h3>\n            </div>\n            <p className=\"text-base font-medium text-slate-300\">\n              Introducing our exclusive{\" \"}\n              <span className=\"text-amber-400\">VIP Program</span> with priority\n              access and unique benefits\n            </p>\n          </div>\n        </div>\n\n        <div\n          className={`flex flex-col items-center gap-3 transition-all delay-300 duration-1000 sm:flex-row ${isLoaded ? \"translate-y-0 opacity-100\" : \"translate-y-4 opacity-0\"}`}\n        >\n          <button className=\"group relative w-full overflow-hidden rounded-md bg-gradient-to-r from-amber-500 to-amber-600 px-6 py-3 font-medium text-white shadow-lg transition-all hover:shadow-xl hover:shadow-amber-500/20 sm:w-auto\">\n            <span className=\"absolute inset-0 h-full w-1/3 -translate-x-full transform bg-white opacity-20 transition-transform duration-300 group-hover:translate-x-full\"></span>\n            Join Now\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_10;\n",
      "path": "/components/commerce-ui/blocks/banners/banner-10.tsx",
      "target": "components/commerce-ui/banner-10.tsx"
    }
  ]
}