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

ui: clean footer - single sponsors section, white pills, correct links

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Albert
2026-06-17 15:20:59 +02:00
parent a5169b77a3
commit 50b14ced21
1 changed files with 52 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.tsx
+25 -56
View File
@@ -1,102 +1,70 @@
import Image from 'next/image'
import { Instagram, Globe } from 'lucide-react'
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">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-slate-600 text-center mb-10">
Amb el suport de
</p>
{/* Patrocinador principal */}
<div className="flex flex-col items-center mb-8">
<span className="text-[10px] text-slate-600 uppercase tracking-widest mb-4">Patrocinador principal</span>
{/* ── Patrocinadors ───────────────────────────────────── */}
<div className="max-w-4xl mx-auto px-4 sm:px-6 py-14">
{/* Principal */}
<p className="text-[10px] uppercase tracking-[0.25em] text-slate-600 text-center mb-5">
Patrocinador principal
</p>
<div className="flex justify-center mb-12">
<a
href="https://www.finquesprats.com"
href="https://www.instagram.com/finquesprats/"
target="_blank"
rel="noopener noreferrer"
className="group flex flex-col items-center gap-3"
style={{ background: '#ffffff', borderRadius: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px 32px', boxShadow: '0 2px 8px rgba(0,0,0,0.15)' }}
>
<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"
height={65}
style={{ objectFit: '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 Finques Prats">
<Instagram size={15} />
</a>
</div>
</a>
</div>
{/* Col·laboradors */}
<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">
{/* Organitzadors */}
<p className="text-[10px] uppercase tracking-[0.25em] text-slate-600 text-center mb-5">
Organitzadors
</p>
<div className="flex flex-wrap justify-center items-center gap-6">
<a
href="https://cursacorbins.cat/"
target="_blank"
rel="noopener noreferrer"
className="group"
style={{ background: '#ffffff', borderRadius: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '14px 24px', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', width: '170px', height: '80px' }}
>
<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"
height={60}
style={{ objectFit: '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>
{/* Ajuntament de Corbins */}
<div className="flex flex-col items-center gap-3">
<a
href="https://www.corbins.cat"
href="https://www.instagram.com/viu_corbins/"
target="_blank"
rel="noopener noreferrer"
className="group"
style={{ background: '#ffffff', borderRadius: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '14px 24px', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', width: '170px', height: '80px' }}
>
<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"
style={{ objectFit: 'contain' }}
/>
</div>
</a>
<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">
<Globe size={15} />
</a>
</div>
</div>
</div>
</div>
</div>
{/* Bottom bar */}
{/* ── Bottom bar ──────────────────────────────────────── */}
<div className="border-t border-dark-border/50 py-6">
<div className="max-w-6xl mx-auto px-4 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-center sm:text-left">
<div className="flex items-center gap-2">
@@ -118,6 +86,7 @@ export default function Footer() {
</div>
</div>
</div>
</footer>
)
}