{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "civic-tech-banner",
  "title": "Civic Tech Banner",
  "description": "Full-width banner for civic tech campaigns and community engagement with gradient background and call-to-action buttons.",
  "registryDependencies": [],
  "files": [
    {
      "path": "src/lib/kapwa/civic-tech-banner/index.tsx",
      "content": "type CivicTechBannerItem = {\n  title: string;\n  highlightedWord: string;\n  description: string;\n  highlightedPhrase: string;\n  primaryButton: {\n    text: string;\n    className?: string;\n    href: string;\n  };\n  secondaryButton: {\n    text: string;\n    className?: string;\n    href: string;\n  };\n};\n\nconst CivicTechBanner = ({\n  fullBannerTitle,\n  fullBanner,\n}: {\n  fullBannerTitle: string;\n  fullBanner: CivicTechBannerItem;\n}) => {\n  return (\n    <div>\n      <h3 className='font-medium mb-4'>{fullBannerTitle}</h3>\n      <div className='relative overflow-hidden bg-linear-to-br from-orange-500 via-red-500 to-pink-600 text-white py-12 rounded-lg'>\n        <div className='container mx-auto px-4 text-center'>\n          <h2 className='text-2xl md:text-3xl font-bold mb-4'>\n            {fullBanner.title}{' '}\n            <span className='text-yellow-200'>\n              {fullBanner.highlightedWord}\n            </span>{' '}\n            Revolution\n          </h2>\n          <p className='text-lg mb-6 text-orange-100 max-w-2xl mx-auto'>\n            {fullBanner.description}\n            <strong className='text-yellow-200'>\n              {' '}\n              {fullBanner.highlightedPhrase}\n            </strong>\n          </p>\n          <div className='flex flex-col sm:flex-row gap-4 justify-center'>\n            <a\n              className={\n                fullBanner.primaryButton.className ||\n                'bg-white text-gray-900 px-6 py-3 rounded-lg font-bold hover:bg-gray-100'\n              }\n              href={fullBanner.primaryButton.href}\n            >\n              {fullBanner.primaryButton.text}\n            </a>\n            <a\n              className={\n                fullBanner.secondaryButton.className ||\n                'border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-gray-900'\n              }\n              href={fullBanner.secondaryButton.href}\n            >\n              {fullBanner.secondaryButton.text}\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport { CivicTechBanner };\nexport type { CivicTechBannerItem };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}