admin/cursa-corbins-2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: sponsor logos in white pill cards on dark background

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Albert
2026-06-17 15:17:27 +02:00
parent c1922140a9
commit a5169b77a3
1 changed files with 80 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.tsx
+63 -43
View File
@@ -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">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-slate-600 text-center mb-10">
Amb el suport de
</p>
</div>
{/* Patrocinador principal */}
<div className="flex flex-col items-center gap-3 w-full">
<span className="text-[10px] text-slate-600 uppercase tracking-widest">Patrocinador principal</span>
<a href="https://www.finquesprats.com" target="_blank" rel="noopener noreferrer" className="flex flex-col items-center gap-2 group">
<Image src="/assets/finques-prats.png" alt="Finques Prats" width={200} height={80} className="object-contain opacity-80 group-hover:opacity-100 transition-opacity" />
<div className="flex flex-col items-center mb-8">
<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="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">
<span className="text-[10px] text-slate-600 uppercase tracking-widest">Col·laboradors</span>
<div className="flex flex-wrap justify-center items-center gap-10">
<div className="flex flex-col items-center gap-2">
<a href="https://cursacorbins.cat/" target="_blank" rel="noopener noreferrer">
<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">
<span className="text-[10px] text-slate-600 uppercase tracking-widest mb-4">Col·laboradors</span>
<div className="flex flex-wrap justify-center items-start gap-8">
{/* Corbins Runners */}
<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">
<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" />
{/* Ajuntament de Corbins */}
<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">
<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">
<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">
<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>