{
  "name": "banner-11-block",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\n\nfunction Banner_11() {\n  const [isVisible, setIsVisible] = useState(true);\n\n  // Payment options data - removed icons and using text only\n  const paymentOptions = [\n    { name: \"Credit Cards\" },\n    { name: \"PayPal\" },\n    { name: \"Apple Pay\" },\n    { name: \"Google Pay\" },\n    { name: \"Bank Transfer\" },\n    { name: \"Crypto\" },\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 rounded-xl bg-gradient-to-br from-white to-gray-50 p-6 shadow-xl transition-all duration-300\">\n      {/* Top gradient accent - enhanced with animation */}\n      <div className=\"animate-gradient absolute inset-x-0 top-0 h-2 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600\"></div>\n\n      <div className=\"mb-5 flex items-center justify-between\">\n        <h3 className=\"text-xl font-bold tracking-tight text-gray-800\">\n          Multiple Payment Options Available\n        </h3>\n\n        <button\n          className=\"rounded-full p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600\"\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\n      <p className=\"mb-6 max-w-3xl text-gray-600\">\n        Checkout made easy with flexible payment methods. Choose what works best\n        for you.\n      </p>\n\n      <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6\">\n        {paymentOptions.map((option, index) => (\n          <div\n            key={index}\n            className=\"group flex items-center justify-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-all duration-200 hover:scale-[1.02] hover:transform hover:border-blue-300 hover:bg-blue-50 hover:shadow-md\"\n          >\n            <span className=\"text-sm font-medium text-gray-700 group-hover:text-blue-700\">\n              {option.name}\n            </span>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"mt-6 text-center\">\n        <a\n          href=\"#payment-details\"\n          className=\"inline-block rounded-md bg-blue-50 px-4 py-2 text-sm font-medium text-blue-700 transition-all duration-200 hover:bg-blue-100 hover:text-blue-800\"\n        >\n          Learn more about our payment processes →\n        </a>\n      </div>\n    </div>\n  );\n}\n\nexport default Banner_11;\n",
      "path": "/components/commerce-ui/blocks/banners/banner-11.tsx",
      "target": "components/commerce-ui/banner-11.tsx"
    }
  ]
}