{
  "name": "banner-02-block",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport React, { useState, useEffect } from \"react\";\n\nfunction Banner_02() {\n  const [isLoaded, setIsLoaded] = useState(false);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setIsLoaded(true);\n    }, 100);\n\n    return () => clearTimeout(timer);\n  }, []);\n\n  return (\n    <div className=\"relative w-full overflow-hidden rounded-lg bg-gradient-to-br from-amber-50 via-amber-100 to-amber-50 p-6 shadow-lg\">\n      {/* Enhanced background pattern */}\n      <div className=\"absolute inset-0 opacity-20\">\n        <div className=\"absolute -top-8 -left-8 h-32 w-32 animate-pulse rounded-full bg-amber-500\"></div>\n        <div className=\"absolute right-0 bottom-0 h-40 w-40 rounded-full bg-amber-600 blur-md\"></div>\n        <div className=\"absolute bottom-12 left-1/3 h-24 w-24 rounded-full bg-amber-400 blur-sm\"></div>\n        <div className=\"absolute top-1/2 right-1/4 h-16 w-16 rounded-full bg-amber-600\"></div>\n        <div className=\"absolute inset-0 bg-[radial-gradient(circle_at_20%_70%,rgba(251,191,36,0.1),transparent)]\"></div>\n      </div>\n\n      {/* Banner content with animations */}\n      <div className=\"relative z-10 flex flex-col items-center space-y-5 text-center md:flex-row md:justify-between md:space-y-0 md:text-left\">\n        <div\n          className={`space-y-3 transition-all duration-700 md:max-w-2xl ${isLoaded ? \"translate-y-0 opacity-100\" : \"translate-y-4 opacity-0\"}`}\n        >\n          <div className=\"flex items-center justify-center md:justify-start\">\n            <span className=\"relative inline-block rounded-full bg-gradient-to-r from-amber-500 to-amber-600 px-3 py-1.5 text-xs font-semibold text-white\">\n              NEW ARRIVAL\n              <span className=\"absolute -top-1 -right-1 flex h-3 w-3\">\n                <span className=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-amber-400 opacity-75\"></span>\n                <span className=\"relative inline-flex h-3 w-3 rounded-full bg-amber-500\"></span>\n              </span>\n            </span>\n          </div>\n          <h2 className=\"text-2xl font-bold text-amber-900 md:text-3xl lg:text-4xl\">\n            Introducing the{\" \"}\n            <span className=\"relative\">\n              Autumn Essentials\n              <span className=\"absolute bottom-0 left-0 h-0.5 w-full bg-amber-600\"></span>\n            </span>{\" \"}\n            Collection\n          </h2>\n          <p className=\"max-w-lg text-amber-700\">\n            Our latest seasonal collection is now available. Discover premium\n            quality pieces designed for comfort and style that embrace the warm\n            colors of fall.\n          </p>\n        </div>\n        <div\n          className={`flex space-x-3 transition-all delay-200 duration-700 ${isLoaded ? \"translate-y-0 opacity-100\" : \"translate-y-4 opacity-0\"}`}\n        >\n          <button className=\"group relative overflow-hidden rounded-md bg-gradient-to-r from-amber-600 to-amber-700 px-6 py-3 font-medium text-white shadow-md transition-all hover:shadow-lg\">\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            Shop Now\n          </button>\n          <button className=\"relative rounded-md border-2 border-amber-600 px-6 py-2.5 font-medium text-amber-700 transition-all hover:bg-amber-50 hover:shadow-md\">\n            Learn More\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Banner_02;\n",
      "path": "/components/commerce-ui/blocks/banners/banner-02.tsx",
      "target": "components/commerce-ui/banner-02.tsx"
    }
  ]
}