{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "banners-02",
  "type": "registry:component",
  "title": "Banners",
  "author": "Toby Belhome",
  "description": "Highlight promotions, announcements, or key messages with Tailwind CSS banner sections. These layouts combine bold visuals, concise copy, and strategic calls-to-action to capture attention. Perfect for marketing campaigns, landing pages, and SaaS platforms seeking a modern, high-impact, and conversion-focused presentation.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "examples/blocks/marketing/banners/02/page.tsx",
      "content": "export default function Banner() {\n  return (\n    <>\n      <div className=\"flex w-full items-center justify-between bg-gradient-to-r from-violet-500 via-[#9938CA] to-[#E0724A] px-4 py-1 text-center text-sm font-medium text-white md:px-14\">\n        <p>Get 20% OFF on Your First Order!</p>\n        <div className=\"flex items-center space-x-6\">\n          <button\n            type=\"button\"\n            className=\"rounded-full bg-white px-7 py-2 font-normal text-gray-800\">\n            Claim Offer\n          </button>\n          <button type=\"button\">\n            <svg\n              width=\"14\"\n              height=\"14\"\n              viewBox=\"0 0 14 14\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <rect\n                y=\"12.532\"\n                width=\"17.498\"\n                height=\"2.1\"\n                rx=\"1.05\"\n                transform=\"rotate(-45.74 0 12.532)\"\n                fill=\"#fff\"\n              />\n              <rect\n                x=\"12.533\"\n                y=\"13.915\"\n                width=\"17.498\"\n                height=\"2.1\"\n                rx=\"1.05\"\n                transform=\"rotate(-135.74 12.533 13.915)\"\n                fill=\"#fff\"\n              />\n            </svg>\n          </button>\n        </div>\n      </div>\n\n      {/* fake content */}\n      <div className=\"h-60\"></div>\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/banners-02.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}