ui: sponsor logos in white pill cards on dark background

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/Footer.tsx

@@ -1,70 +1,89 @@
 import Image from 'next/image'
 import { Instagram, Globe } from 'lucide-react'
 
-const SPONSORS = [
-  {
-    name: 'Finques Prats',
-    role: 'Patrocinador principal',
-    instagram: 'https://www.instagram.com/finquesprats/',
-    web: null,
-    highlight: true,
-  },
-  {
-    name: 'Runners Corbins',
-    role: 'Partner',
-    instagram: null,
-    web: 'https://cursacorbins.cat/',
-    highlight: false,
-  },
-  {
-    name: 'Ajuntament de Corbins',
-    role: 'Partner',
-    instagram: 'https://www.instagram.com/viu_corbins/',
-    web: 'https://www.corbins.cat',
-    highlight: false,
-  },
-]
-
 export default function Footer() {
   return (
     <footer className="border-t border-dark-border bg-dark">
       {/* Sponsors */}
       <div className="max-w-6xl mx-auto px-4 sm:px-6 py-12">
-        <div className="text-center mb-8">
+        <p className="text-xs font-semibold uppercase tracking-[0.3em] text-slate-600 text-center mb-10">
-          <p className="text-xs font-semibold uppercase tracking-[0.3em] text-slate-600">
           Amb el suport de
         </p>
-        </div>
+
         {/* Patrocinador principal */}
-          <div className="flex flex-col items-center gap-3 w-full">
+        <div className="flex flex-col items-center mb-8">
-            <span className="text-[10px] text-slate-600 uppercase tracking-widest">Patrocinador principal</span>
+          <span className="text-[10px] text-slate-600 uppercase tracking-widest mb-4">Patrocinador principal</span>
-            <a href="https://www.finquesprats.com" target="_blank" rel="noopener noreferrer" className="flex flex-col items-center gap-2 group">
+          <a
-              <Image src="/assets/finques-prats.png" alt="Finques Prats" width={200} height={80} className="object-contain opacity-80 group-hover:opacity-100 transition-opacity" />
+            href="https://www.finquesprats.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="group flex flex-col items-center gap-3"
+          >
+            <div className="bg-white rounded-2xl px-8 py-5 shadow-sm group-hover:shadow-md transition-shadow flex items-center justify-center" style={{minWidth: '200px', minHeight: '90px'}}>
+              <Image
+                src="/assets/Finques Prats Logo.png"
+                alt="Finques Prats"
+                width={180}
+                height={70}
+                className="object-contain"
+              />
+            </div>
             <div className="flex items-center gap-2">
-                <a href="https://www.instagram.com/finquesprats/" target="_blank" rel="noopener noreferrer" className="text-slate-600 hover:text-teal transition-colors" aria-label="Instagram de Finques Prats">
+              <a href="https://www.instagram.com/finquesprats/" target="_blank" rel="noopener noreferrer" className="text-slate-600 hover:text-teal transition-colors" aria-label="Instagram Finques Prats">
                 <Instagram size={15} />
               </a>
             </div>
           </a>
         </div>
+
         {/* Col·laboradors */}
-          <div className="flex flex-col items-center gap-3 w-full mt-4">
+        <div className="flex flex-col items-center">
-            <span className="text-[10px] text-slate-600 uppercase tracking-widest">Col·laboradors</span>
+          <span className="text-[10px] text-slate-600 uppercase tracking-widest mb-4">Col·laboradors</span>
-            <div className="flex flex-wrap justify-center items-center gap-10">
+          <div className="flex flex-wrap justify-center items-start gap-8">
-              <div className="flex flex-col items-center gap-2">
+
-                <a href="https://cursacorbins.cat/" target="_blank" rel="noopener noreferrer">
+            {/* Corbins Runners */}
-                  <Image src="/assets/runners-corbins.png" alt="Corbins Runners" width={150} height={80} className="object-contain opacity-80 hover:opacity-100 transition-opacity" />
+            <div className="flex flex-col items-center gap-3">
+              <a
+                href="https://cursacorbins.cat/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group"
+              >
+                <div className="bg-white rounded-2xl px-6 py-4 shadow-sm group-hover:shadow-md transition-shadow flex items-center justify-center" style={{width: '160px', height: '80px'}}>
+                  <Image
+                    src="/assets/runners-corbins.webp"
+                    alt="Corbins Runners"
+                    width={130}
+                    height={65}
+                    className="object-contain"
+                  />
+                </div>
               </a>
               <a href="https://cursacorbins.cat/" target="_blank" rel="noopener noreferrer" className="text-slate-600 hover:text-teal transition-colors" aria-label="Web Corbins Runners">
                 <Globe size={15} />
               </a>
             </div>
-              <div className="flex flex-col items-center gap-2">
+
-                <a href="https://www.corbins.cat" target="_blank" rel="noopener noreferrer">
+            {/* Ajuntament de Corbins */}
-                  <Image src="/assets/ajuntament-de-corbins.png" alt="Ajuntament de Corbins" width={100} height={100} className="object-contain opacity-80 hover:opacity-100 transition-opacity brightness-90" />
+            <div className="flex flex-col items-center gap-3">
+              <a
+                href="https://www.corbins.cat"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group"
+              >
+                <div className="bg-white rounded-2xl px-5 py-4 shadow-sm group-hover:shadow-md transition-shadow flex items-center justify-center" style={{width: '160px', height: '80px'}}>
+                  <Image
+                    src="/assets/ajuntament-de-corbins.webp"
+                    alt="Ajuntament de Corbins"
+                    width={110}
+                    height={60}
+                    className="object-contain"
+                  />
+                </div>
               </a>
-                <div className="flex items-center gap-2">
+              <div className="flex items-center gap-3">
-                  <a href="https://www.instagram.com/viu_corbins/" target="_blank" rel="noopener noreferrer" className="text-slate-600 hover:text-teal transition-colors" aria-label="Instagram Ajuntament de Corbins">
+                <a href="https://www.instagram.com/viu_corbins/" target="_blank" rel="noopener noreferrer" className="text-slate-600 hover:text-teal transition-colors" aria-label="Instagram Ajuntament">
                   <Instagram size={15} />
                 </a>
                 <a href="https://www.corbins.cat" target="_blank" rel="noopener noreferrer" className="text-slate-600 hover:text-teal transition-colors" aria-label="Web Ajuntament de Corbins">
@@ -72,6 +91,7 @@ export default function Footer() {
                 </a>
               </div>
             </div>
+
           </div>
         </div>
       </div>