feat: complete NutriScan redesign

app/components/Footer.tsx

@@ -3,73 +3,75 @@
 import React from "react";
 import Link from "next/link";
 import Image from "next/image";
-import {
-  ExternalLink,
-  Github,
-  Heart,
-  Globe,
-  Shield,
-  ScanLine,
-  Database,
-  Lock,
-} from "lucide-react";
+import { ExternalLink, Github, Heart, Shield, Globe, ScanLine, Database, Lock } from "lucide-react";
 
 const FOOTER_LINKS = {
   navigation: [
-    { href: "/#como-funciona", label: "Protocolo" },
-    { href: "/#recursos", label: "Recursos" },
-    { href: "/sobre", label: "Sobre o Projeto" },
-    { href: "/produto/exemplo", label: "Sandbox (Exemplo)" },
+    { href: "/#como-funciona", label: "Como funciona" },
+    { href: "/#recursos",      label: "Recursos" },
+    { href: "/sobre",          label: "Sobre o Projeto" },
+    { href: "/produto/exemplo", label: "Produto (demo)" },
   ],
-  resources: [
-    { icon: Shield, label: "Dados Colaborativos" },
-    { icon: Globe, label: "Rede Global" },
+  infrastructure: [
+    { icon: Shield,   label: "Dados Colaborativos" },
+    { icon: Globe,    label: "Rede Global" },
     { icon: ScanLine, label: "Algoritmo de Busca" },
   ],
 };
 
 export function Footer() {
-  const currentYear = new Date().getFullYear();
+  const year = new Date().getFullYear();
 
   return (
-    <footer className="bg-[#030712] text-gray-400 border-t border-gray-800/50 transition-colors duration-500">
-      <div className="max-w-7xl mx-auto px-6 py-20">
-        
+    <footer className="bg-[var(--fg-primary)] text-[var(--fg-faint)]">
+      <div className="container-editorial pt-20 pb-10">
+
+        {/* ── Top grid ─────────────────────────────────────────────────── */}
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 mb-20">
-          
-          {/* Brand Identity - 4 Colunas */}
-          <div className="lg:col-span-4 space-y-8">
-            <Link href="/" className="flex items-center gap-3 group">
-              <div className="relative w-10 h-10 bg-blue-600 rounded-xl overflow-hidden shadow-lg shadow-blue-500/10">
-                <Image src="/icon.png" alt="Logo" fill className="object-contain p-2" priority />
-              </div>
+
+          {/* Brand */}
+          <div className="lg:col-span-4 space-y-6">
+            <Link href="/" className="flex items-center gap-3">
+              <Image
+                src="/icon.png"
+                alt="NutriScan"
+                width={36}
+                height={36}
+                className="rounded object-contain"
+                priority
+              />
               <div>
-                <h3 className="text-xl font-black text-white tracking-tighter leading-none">
-                  NUTRI<span className="text-blue-500">SCAN</span>
-                </h3>
-                <p className="text-[10px] font-bold text-gray-500 uppercase tracking-[0.2em] mt-1">
-                  Data Sovereignty
+                <p className="font-sans font-semibold text-base text-[var(--bg-base)] leading-none">
+                  NutriScan
+                </p>
+                <p className="label text-[var(--fg-faint)] mt-1">
+                  Dados Nutricionais
                 </p>
               </div>
             </Link>
-            
-            <p className="text-sm leading-relaxed max-w-sm">
-              Soberania alimentar através da transparência. Extraímos metadados nutricionais complexos para devolver o poder de escolha ao cidadão.
+
+            <p className="text-sm leading-relaxed max-w-xs">
+              Soberania alimentar através da transparência. Extraímos
+              metadados nutricionais para devolver o poder de escolha ao
+              cidadão.
             </p>
 
-            <div className="flex items-center gap-2 text-[11px] font-mono uppercase tracking-widest text-gray-500">
-              <Heart className="w-3 h-3 text-red-500 animate-pulse" />
-              <span>Engineered in Garuva, SC</span>
+            <div className="flex items-center gap-1.5 label">
+              <Heart className="w-3 h-3 text-red-400" strokeWidth={1.5} />
+              <span>Feito em Garuva, SC</span>
             </div>
           </div>
 
-          {/* Navigation - 2 Colunas */}
+          {/* Navigation */}
           <div className="lg:col-span-2">
-            <h4 className="text-white font-bold text-sm uppercase tracking-widest mb-6">Sitemap</h4>
+            <h4 className="label text-[var(--bg-surface)] mb-6">Páginas</h4>
             <ul className="space-y-4">
               {FOOTER_LINKS.navigation.map((link) => (
                 <li key={link.href}>
-                  <Link href={link.href} className="text-sm hover:text-blue-400 transition-colors">
+                  <Link
+                    href={link.href}
+                    className="text-sm hover:text-[var(--bg-base)] transition-colors duration-200"
+                  >
                     {link.label}
                   </Link>
                 </li>
@@ -77,77 +79,102 @@ export function Footer() {
             </ul>
           </div>
 
-          {/* Logic/Features - 2 Colunas */}
+          {/* Infrastructure */}
           <div className="lg:col-span-2">
-            <h4 className="text-white font-bold text-sm uppercase tracking-widest mb-6">Infraestrutura</h4>
+            <h4 className="label text-[var(--bg-surface)] mb-6">Infraestrutura</h4>
             <ul className="space-y-4">
-              {FOOTER_LINKS.resources.map((item) => (
-                <li key={item.label} className="flex items-center gap-3 text-sm">
-                  <item.icon className="w-4 h-4 text-gray-600" />
-                  <span>{item.label}</span>
+              {FOOTER_LINKS.infrastructure.map(({ icon: Icon, label }) => (
+                <li key={label} className="flex items-center gap-3 text-sm">
+                  <Icon className="w-4 h-4 text-[var(--fg-faint)]" strokeWidth={1.5} />
+                  <span>{label}</span>
                 </li>
               ))}
-              <li className="text-[11px] font-mono text-blue-500/80">Nutri-Score v2.1</li>
+              <li className="label text-[var(--accent)]">Nutri-Score v2.1</li>
             </ul>
           </div>
 
-          {/* Data Source Card - 4 Colunas */}
+          {/* Data source */}
           <div className="lg:col-span-4">
-            <div className="bg-gray-900/50 border border-gray-800 p-6 rounded-2xl backdrop-blur-sm">
+            <div
+              className="rounded-xl p-6"
+              style={{ border: "1px solid rgba(255,255,255,0.08)", background: "rgba(255,255,255,0.04)" }}
+            >
               <div className="flex items-center gap-3 mb-4">
-                <div className="p-2 bg-blue-500/10 rounded-lg">
-                  <Database className="w-5 h-5 text-blue-500" />
-                </div>
-                <h4 className="text-white font-bold">Open Food Facts</h4>
+                <Database className="w-5 h-5 text-[var(--accent)]" strokeWidth={1.5} />
+                <h4 className="font-sans font-semibold text-[var(--bg-base)] text-sm">
+                  Open Food Facts
+                </h4>
               </div>
-              <p className="text-xs leading-relaxed text-gray-500 mb-6">
-                A maior base de dados colaborativa de alimentos do mundo. Dados sob licença ODbL (Open Database License).
+              <p className="text-xs leading-relaxed mb-6">
+                A maior base de dados colaborativa de alimentos do mundo.
+                Licença ODbL (Open Database License).
               </p>
               <a
                 href="https://world.openfoodfacts.org"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 text-xs font-black text-blue-500 uppercase tracking-widest hover:text-blue-400 transition-all"
+                className="inline-flex items-center gap-1.5 label text-[var(--accent)] hover:opacity-80 transition-opacity"
               >
-                Protocolo de Dados <ExternalLink size={12} />
+                Ver base de dados
+                <ExternalLink className="w-3 h-3" strokeWidth={1.5} />
               </a>
             </div>
           </div>
         </div>
 
-        {/* Disclaimer Técnico - Estilo "Regulatory" */}
-        <div className="border-t border-gray-800/50 pt-12">
-          <div className="bg-gray-900/30 border border-gray-800/50 p-6 rounded-2xl flex flex-col md:flex-row items-center gap-6">
-            <Lock className="w-8 h-8 text-gray-700 shrink-0" />
-            <p className="text-[10px] md:text-xs text-gray-500 leading-relaxed text-center md:text-left">
-              <strong className="text-gray-400 uppercase tracking-widest">Aviso Legal (Disclaimer):</strong> Os dados são extraídos de fontes colaborativas. Não garantimos a integridade absoluta das informações nutricionais em comparação com a embalagem física. O uso desta ferramenta é consultivo e não substitui orientação médica ou nutricional profissional.
+        {/* ── Hairline ─────────────────────────────────────────────────── */}
+        <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)" }} className="pt-10">
+          {/* Legal disclaimer */}
+          <div
+            className="rounded-xl p-5 mb-10 flex gap-4 items-start"
+            style={{ border: "1px solid rgba(255,255,255,0.06)", background: "rgba(255,255,255,0.02)" }}
+          >
+            <Lock className="w-4 h-4 shrink-0 mt-0.5 text-[var(--fg-faint)]" strokeWidth={1.5} />
+            <p className="text-xs leading-relaxed">
+              <strong className="text-[var(--fg-faint)] label mr-1 not-italic">Aviso Legal:</strong>
+              Os dados são extraídos de fontes colaborativas. Não garantimos
+              a integridade absoluta das informações nutricionais em
+              comparação com a embalagem física. O uso desta ferramenta é
+              consultivo e não substitui orientação médica ou nutricional
+              profissional.
             </p>
           </div>
-        </div>
 
-        {/* Bottom Bar */}
-        <div className="mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-6">
-          <div className="text-[11px] font-mono text-gray-600 text-center md:text-left space-y-1">
-            <p>© {currentYear} NutriScan Systems. Open Source Initiative.</p>
-            <p>
-              Lead Architect:{" "}
-              <a href="https://evandro.dev.br" target="_blank" className="text-blue-500 hover:underline">
+          {/* Bottom bar */}
+          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+            <p className="label">
+              © {year} NutriScan ·{" "}
+              <a
+                href="https://evandro.dev.br"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hover:text-[var(--bg-base)] transition-colors"
+              >
                 evandro.dev.br
               </a>
             </p>
-          </div>
-          
-          <div className="flex items-center gap-8">
-            <div className="flex items-center gap-4">
-              <Link href="/privacidade" className="text-[11px] font-black uppercase tracking-widest hover:text-white transition-colors">Privacidade</Link>
-              <Link href="/termos" className="text-[11px] font-black uppercase tracking-widest hover:text-white transition-colors">Termos</Link>
+
+            <div className="flex items-center gap-6">
+              <Link href="/privacidade" className="label hover:text-[var(--bg-base)] transition-colors">
+                Privacidade
+              </Link>
+              <Link href="/termos" className="label hover:text-[var(--bg-base)] transition-colors">
+                Termos
+              </Link>
+              <a
+                href="https://github.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-8 h-8 flex items-center justify-center rounded"
+                style={{ border: "1px solid rgba(255,255,255,0.10)" }}
+                aria-label="GitHub"
+              >
+                <Github className="w-3.5 h-3.5 text-[var(--fg-faint)]" strokeWidth={1.5} />
+              </a>
             </div>
-            <a href="https://github.com" target="_blank" className="p-2 bg-gray-900 rounded-full hover:bg-gray-800 transition-colors">
-              <Github className="w-4 h-4 text-white" />
-            </a>
           </div>
         </div>
       </div>
     </footer>
   );
-}
+}