120 lines
4.1 KiB
TypeScript
120 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useLanguage } from '@/context/LanguageContext';
|
|
import { getSocialLinks, socialIcons } from '@/lib/socialLinks';
|
|
|
|
const legalLinks = [
|
|
{ slug: 'terms-policy', en: 'Terms & Conditions', es: 'Términos y Condiciones' },
|
|
{ slug: 'privacy-policy', en: 'Privacy Policy', es: 'Política de Privacidad' },
|
|
{ slug: 'refund-cancelation-policy', en: 'Refund Policy', es: 'Política de Reembolso' },
|
|
];
|
|
|
|
export default function Footer() {
|
|
const { t, locale } = useLanguage();
|
|
const currentYear = new Date().getFullYear();
|
|
const socialLinks = getSocialLinks();
|
|
|
|
return (
|
|
<footer className="bg-secondary-gray border-t border-secondary-light-gray">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
{/* Brand */}
|
|
<div className="col-span-1 md:col-span-2">
|
|
<Link href="/" className="inline-block">
|
|
<span className="text-2xl font-bold font-heading text-primary-dark">
|
|
Span<span className="text-primary-yellow">glish</span>
|
|
</span>
|
|
</Link>
|
|
<p className="mt-3 text-gray-600 max-w-md">
|
|
{t('footer.tagline')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Quick Links */}
|
|
<div>
|
|
<h3 className="font-semibold text-primary-dark mb-4">
|
|
{t('footer.links')}
|
|
</h3>
|
|
<ul className="space-y-2">
|
|
<li>
|
|
<Link
|
|
href="/events"
|
|
className="text-gray-600 hover:text-primary-dark transition-colors"
|
|
>
|
|
{t('nav.events')}
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/community"
|
|
className="text-gray-600 hover:text-primary-dark transition-colors"
|
|
>
|
|
{t('nav.community')}
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/contact"
|
|
className="text-gray-600 hover:text-primary-dark transition-colors"
|
|
>
|
|
{t('nav.contact')}
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/faq"
|
|
className="text-gray-600 hover:text-primary-dark transition-colors"
|
|
>
|
|
{t('nav.faq')}
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Social */}
|
|
{socialLinks.length > 0 && (
|
|
<div>
|
|
<h3 className="font-semibold text-primary-dark mb-4">
|
|
{t('footer.social')}
|
|
</h3>
|
|
<div className="flex flex-wrap gap-3">
|
|
{socialLinks.map((link) => (
|
|
<a
|
|
key={link.type}
|
|
href={link.url}
|
|
target={link.type === 'email' ? undefined : '_blank'}
|
|
rel={link.type === 'email' ? undefined : 'noopener noreferrer'}
|
|
className="w-10 h-10 flex items-center justify-center rounded-full bg-white shadow-sm hover:shadow-md hover:bg-primary-yellow/10 transition-all"
|
|
title={link.label}
|
|
>
|
|
{socialIcons[link.type]}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Legal Links */}
|
|
<div className="border-t border-secondary-light-gray mt-10 pt-8">
|
|
<div className="flex flex-wrap justify-center gap-4 md:gap-6 mb-4">
|
|
{legalLinks.map((link) => (
|
|
<Link
|
|
key={link.slug}
|
|
href={`/legal/${link.slug}`}
|
|
className="text-gray-500 hover:text-primary-dark transition-colors text-sm"
|
|
>
|
|
{locale === 'es' ? link.es : link.en}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div className="text-center text-gray-500 text-sm">
|
|
{t('footer.copyright', { year: currentYear })}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|