feat: add sponsor section with responsive logo cards and yellow heading accent

Author: Solankimimoh

src/components/common/section-header.tsx

@@ -4,12 +4,14 @@ type SectionHeaderProps = {
   subheading: string;
   headingLine1: string;
   headingLine2: string;
+  headingLine2ClassName?: string;
 };
 
 export const SectionHeader = ({
   subheading,
   headingLine1,
   headingLine2,
+  headingLine2ClassName = 'text-google-blue',
 }: SectionHeaderProps) => {
   return (
     <div className="mb-24 flex flex-col items-start justify-between gap-12 border-l-2 border-primary/10 pl-10 md:flex-row md:items-end">
@@ -20,7 +22,7 @@ export const SectionHeader = ({
         <h2 className="font-display text-4xl font-bold uppercase leading-[0.95] tracking-tighter text-on-surface sm:text-5xl md:text-7xl">
           <span className="font-light">{headingLine1}</span>
           <br />
-          <span className="text-google-blue">{headingLine2}</span>
+          <span className={headingLine2ClassName}>{headingLine2}</span>
         </h2>
       </div>
     </div>

src/components/home/home-landing.tsx

@@ -65,11 +65,11 @@ export function HomeLanding({ copy }: HomeLandingProps) {
             subheading={copy.sponsors.header.subheading}
             headingLine1={copy.sponsors.header.heading.line1}
             headingLine2={copy.sponsors.header.heading.line2}
+            headingLine2ClassName="text-google-yellow"
           />
           <SponsorsTiers
             tiers={copy.sponsors.tiers}
             ctaLabel={copy.sponsors.cta.label}
-            ctaLink={copy.sponsors.cta.link}
           />
         </section>
       </main>

src/components/sponsors/sponsors-tiers.tsx

@@ -1,8 +1,6 @@
 'use client';
 
-// Note: Reverted to <img> tag to respect original SVG sizing as requested.
-// Using a white background for maximum contrast with dark/transparent logos.
-// Added grayscale-to-color hover effect.
+import Image from 'next/image';
 
 type SponsorTier = {
   title: string;
@@ -18,10 +16,9 @@ type SponsorTier = {
 type SponsorsTiersProps = {
   tiers: SponsorTier[];
   ctaLabel: string;
-  ctaLink: string;
 };
 
-export function SponsorsTiers({ tiers, ctaLabel, ctaLink }: SponsorsTiersProps) {
+export function SponsorsTiers({ tiers, ctaLabel }: SponsorsTiersProps) {
   return (
     <div className="space-y-14">
       {tiers.map((tier) => (
@@ -40,20 +37,22 @@ export function SponsorsTiers({ tiers, ctaLabel, ctaLink }: SponsorsTiersProps)
             </p>
           </div>
 
-          <div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4">
+          <div className="flex flex-col items-center gap-12 md:flex-row md:flex-wrap md:justify-start md:gap-x-16 md:gap-y-12">
             {tier.items.map((sponsor) => (
               <a
                 key={sponsor.name}
                 href={sponsor.link || '#'}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="group relative flex items-center justify-center rounded-lg bg-white p-6 transition-all duration-300 hover:scale-105"
+                className="group inline-flex w-full max-w-[420px] flex-col items-center justify-center rounded-lg bg-white p-6 transition-all duration-300 hover:scale-105 md:w-auto"
               >
                 {sponsor.logo && (
-                  <img
+                  <Image
                     src={sponsor.logo}
                     alt={sponsor.name}
-                    className="grayscale transition-all duration-300 group-hover:grayscale-0"
+                    width={400}
+                    height={250}
+                    className="block h-auto w-auto max-w-full grayscale transition-all duration-300 group-hover:grayscale-0"
                   />
                 )}
               </a>
@@ -63,14 +62,9 @@ export function SponsorsTiers({ tiers, ctaLabel, ctaLink }: SponsorsTiersProps)
       ))}
 
       <div className="pt-2">
-        <a
-          href={ctaLink}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center border border-white/25 px-5 py-3 font-mono-tech text-xs uppercase tracking-[0.2em] text-white transition-colors hover:border-google-blue hover:text-google-blue"
-        >
+        <div className="inline-flex items-center border border-white/25 px-5 py-3 font-mono-tech text-xs uppercase tracking-[0.2em] text-white transition-colors hover:border-google-blue hover:text-google-blue">
           {ctaLabel}
-        </a>
+        </div>
       </div>
     </div>
   );