{
  "name": "banner-04-block",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "type": "registry:block",
      "content": "import React from \"react\";\n\nfunction Banner_04() {\n  return (\n    <div className=\"relative overflow-hidden rounded-lg bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-500 p-0.5\">\n      {/* Inner container with border effect */}\n      <div className=\"relative rounded-md bg-white p-6 dark:bg-gray-900\">\n        {/* Decorative elements */}\n        <div className=\"absolute -top-6 -right-6 h-24 w-24 rounded-full bg-purple-500 opacity-10\"></div>\n        <div className=\"absolute -bottom-6 -left-6 h-32 w-32 rounded-full bg-indigo-500 opacity-10\"></div>\n\n        <div className=\"relative flex flex-col items-center justify-between gap-6 md:flex-row\">\n          {/* Left: Badge icon */}\n          <div className=\"flex-shrink-0\">\n            <div className=\"flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-lg\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"h-8 w-8\"\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=\"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                />\n              </svg>\n            </div>\n          </div>\n\n          {/* Middle: Content */}\n          <div className=\"flex-1 text-center md:text-left\">\n            <div className=\"mb-1 inline-flex rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300\">\n              Exclusive Membership\n            </div>\n            <h2 className=\"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white\">\n              Join Our Loyalty Rewards Program\n            </h2>\n            <p className=\"text-gray-600 dark:text-gray-300\">\n              Earn points with every purchase, get exclusive discounts, early\n              access to sales, and personalized offers.\n            </p>\n          </div>\n\n          {/* Right: Call to action */}\n          <div className=\"flex-shrink-0\">\n            <button className=\"rounded-md bg-gradient-to-r from-indigo-600 to-purple-600 px-5 py-2.5 font-medium text-white shadow-md transition-all hover:from-indigo-700 hover:to-purple-700\">\n              Sign Up Now\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Banner_04;\n",
      "path": "/components/commerce-ui/blocks/banners/banner-04.tsx",
      "target": "components/commerce-ui/banner-04.tsx"
    }
  ]
}