{
  "name": "banner-12-block",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\n\nfunction Banner_12() {\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-950 to-zinc-900 px-6 py-6 shadow-2xl\">\n      {/* Animated background elements */}\n      <div className=\"absolute inset-0 overflow-hidden\">\n        {/* Top right circle with slow rotation */}\n        <div className=\"absolute -top-20 -right-20 h-48 w-48 animate-[spin_20s_linear_infinite] rounded-full bg-gradient-to-br from-teal-400 to-teal-600 opacity-10 blur-xl\"></div>\n\n        {/* Bottom left circle */}\n        <div className=\"absolute -bottom-16 -left-16 h-48 w-48 rounded-full bg-teal-600 opacity-10 blur-xl\"></div>\n\n        {/* Multiple diagonal lines */}\n        <div className=\"absolute inset-0 opacity-10\">\n          <div className=\"absolute top-0 left-1/4 h-full w-px rotate-45 bg-gradient-to-b from-transparent via-teal-400 to-transparent\"></div>\n          <div className=\"absolute top-0 left-2/3 h-full w-px rotate-45 bg-gradient-to-b from-transparent via-teal-400 to-transparent\"></div>\n          <div className=\"absolute top-0 left-1/2 h-full w-px rotate-45 bg-gradient-to-b from-transparent via-teal-400 to-transparent\"></div>\n        </div>\n      </div>\n\n      <div className=\"relative z-10 flex flex-col items-center gap-5 md:flex-row md:justify-between\">\n        <div\n          className={`flex items-center gap-4 transition-all duration-700 ${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_4s_linear_infinite] rounded-full bg-gradient-to-r from-teal-400 via-teal-300 to-emerald-400 opacity-70 blur-sm\"></div>\n              <div className=\"relative flex h-12 w-12 items-center justify-center rounded-full bg-slate-900 p-2\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  className=\"h-7 w-7 text-teal-400\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                  strokeWidth={1.5}\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    d=\"M16 15v-1a4 4 0 00-4-4H8m0 0l3 3m-3-3l3-3m9 14V5a2 2 0 00-2-2H6a2 2 0 00-2 2v16l4-2 4 2 4-2 4 2z\"\n                  />\n                </svg>\n              </div>\n            </div>\n          </div>\n\n          <div className=\"space-y-1 text-center md:text-left\">\n            <div className=\"flex items-center justify-center gap-2 md:justify-start\">\n              <span className=\"inline-flex rounded-md bg-teal-400/20 px-3 py-1 text-sm font-bold text-teal-400\">\n                90 DAYS\n              </span>\n            </div>\n            <h3 className=\"text-2xl font-bold text-white md:text-3xl\">\n              Free Returns on All Products\n            </h3>\n            <p className=\"text-base font-medium text-slate-300\">\n              Shop with complete{\" \"}\n              <span className=\"text-teal-400\">confidence</span> — no questions\n              asked return policy\n            </p>\n          </div>\n        </div>\n\n        <div\n          className={`flex flex-col items-center gap-3 transition-all delay-300 duration-700 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-teal-500 to-emerald-600 px-6 py-3 font-medium text-white shadow-lg transition-all hover:shadow-xl hover:shadow-teal-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            Learn More\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\n      {/* Policy highlights */}\n      <div\n        className={`relative z-10 mt-6 grid grid-cols-2 gap-4 border-t border-slate-700/50 pt-5 transition-all delay-500 duration-700 sm:grid-cols-4 ${isLoaded ? \"translate-y-0 opacity-100\" : \"translate-y-4 opacity-0\"}`}\n      >\n        <div className=\"flex flex-col items-center text-center\">\n          <div className=\"mb-2 rounded-full bg-teal-400/10 p-2\">\n            <svg\n              className=\"h-5 w-5 text-teal-400\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\n              ></path>\n            </svg>\n          </div>\n          <span className=\"text-sm font-bold text-white\">90 Day Window</span>\n          <span className=\"text-xs text-slate-400\">Extended Period</span>\n        </div>\n\n        <div className=\"flex flex-col items-center text-center\">\n          <div className=\"mb-2 rounded-full bg-teal-400/10 p-2\">\n            <svg\n              className=\"h-5 w-5 text-teal-400\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z\"\n              ></path>\n            </svg>\n          </div>\n          <span className=\"text-sm font-bold text-white\">All Products</span>\n          <span className=\"text-xs text-slate-400\">Store-wide</span>\n        </div>\n\n        <div className=\"flex flex-col items-center text-center\">\n          <div className=\"mb-2 rounded-full bg-teal-400/10 p-2\">\n            <svg\n              className=\"h-5 w-5 text-teal-400\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n              ></path>\n            </svg>\n          </div>\n          <span className=\"text-sm font-bold text-white\">Full Refund</span>\n          <span className=\"text-xs text-slate-400\">Money Back</span>\n        </div>\n\n        <div className=\"flex flex-col items-center text-center\">\n          <div className=\"mb-2 rounded-full bg-teal-400/10 p-2\">\n            <svg\n              className=\"h-5 w-5 text-teal-400\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M5 13l4 4L19 7\"\n              ></path>\n            </svg>\n          </div>\n          <span className=\"text-sm font-bold text-white\">Free Shipping</span>\n          <span className=\"text-xs text-slate-400\">No Extra Cost</span>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Banner_12;\n",
      "path": "/components/commerce-ui/blocks/banners/banner-12.tsx",
      "target": "components/commerce-ui/banner-12.tsx"
    }
  ]
}