first commit

components/layout/Footer.tsx

@@ -0,0 +1,46 @@
+"use client";
+import Link from "next/link";
+import { useLanguage } from "@/context/LanguageContext";
+
+export const Footer = () => {
+  const { t } = useLanguage();
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="w-full bg-white pt-20 pb-10 border-t border-crisp mt-auto">
+      <div className="max-w-7xl mx-auto px-6 lg:px-12">
+        
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center  pb-12 mb-8">
+          {/* Logo / Brand */}
+          <div className="text-[32px] font-extrabold text-navy tracking-tight mb-8 md:mb-0">
+            ITEM OPINA.
+          </div>
+          
+          {/* Nav Links Traducidos */}
+          <div className="flex flex-col sm:flex-row gap-6 sm:gap-12 text-[14px] font-bold text-navy/60">
+            <Link href="/legal" className="hover:text-ocean transition-colors">
+              {t.footer.legal}
+            </Link>
+            <Link href="/privacidad" className="hover:text-ocean transition-colors">
+              {t.footer.privacy}
+            </Link>
+            <Link href="/cookies" className="hover:text-ocean transition-colors">
+              {t.footer.cookies}
+            </Link>
+            <Link href="/contacto" className="hover:text-ocean transition-colors">
+              {t.footer.contact}
+            </Link>
+          </div>
+        </div>
+        
+        {/* Bottom Credits Traducidos */}
+        <div className="flex flex-col sm:flex-row justify-between items-center text-[13px] text-navy/40 font-semibold uppercase tracking-wider">
+          <p>
+            {t.footer.rights.replace("2026", currentYear.toString())}
+          </p>
+          
+        </div>
+      </div>
+    </footer>
+  );
+};