first commit

2026-01-29 14:13:11 -03:00
commit 2302748c87
105 changed files with 93301 additions and 0 deletions
--- a/frontend/src/components/layout/Footer.tsx
+++ b/frontend/src/components/layout/Footer.tsx
@@ -0,0 +1,119 @@
+'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>
+  );
+}