[Feature]: Sponsor banner

[jeromehardaway]

---

name: Feature Request
about: Suggest an idea or enhancement for the project
title: "[Feature]: Add Tech Sponsor Banner to Highlight Infrastructure Supporters"
labels: [feature, frontend, enhancement]
assignees: [@jeromehardaway]

✨ Description

We need a Tech Sponsor Banner component for the Vets Who Code app that highlights the companies and tools providing technical infrastructure or platform support — such as GitHub, Microsoft, Firebase, etc.

This banner will display on key public-facing pages (e.g., homepage, About, curriculum overview), use Tailwind CSS, and should be accessible, responsive, and visually consistent with our branding. The component will accept a structured list of sponsors (name, logo, URL) and optionally include a call-to-action button.

📈 Value

• Increases visibility for companies providing critical infrastructure
• Reinforces engineering excellence by showcasing our tech stack and backers
• Encourages other companies to join as tech sponsors
• Maintains alignment with Vets Who Code's focus on developer tools and platforms — no dilution with non-tech sponsor content

🎯 Desired Outcome

• A functional and reusable TechSponsorBanner.tsx React component in the components/ directory
• Props include:
  • sponsors: Array of { name, logo, link }
  • headline: Optional string (e.g., "Powered by Our Tech Sponsors")
  • cta: Optional { label, link }
• Layout optimized for mobile and desktop
• Logos live in /public/sponsors/ or a static config file
• Accessibility: meaningful alt text, semantic structure, keyboard nav
• CTA leads to a sponsorship or support page
• Banner is displayed on the homepage and About page

📋 Additional Context

We're rolling out new high-visibility features like the PTSD Toolkit and AEGIS Dashboard. Featuring tech sponsors visually signals our growth, professionalism, and operational capacity — and invites further participation from the dev ecosystem.

If extended later, we could generate this from GitHub Sponsors API, a CMS, or a Stripe tier.

Mock Example:

[
  { name: "GitHub", logo: "/sponsors/github.svg", link: "https://github.com" },
  { name: "Microsoft", logo: "/sponsors/microsoft.svg", link: "https://microsoft.com" },
  { name: "Firebase", logo: "/sponsors/firebase.svg", link: "https://firebase.google.com" }
]