feat(footer, header, landing): enhance UI components and improve navigation

- Updated Footer component with new links and dynamic year display.
- Refactored Header component to improve mobile navigation and theme toggling.
- Enhanced DonationSection and Features components with improved layout and animations.
- Updated HowItWorks and Impact sections for better user engagement and clarity.
- Improved product page layout and error handling in API interactions.
- General UI refinements across various components for a cohesive user experience.

app/components/landing/DonationSection.tsx

@@ -1,96 +1,97 @@
-import { Heart, Check, Code } from "lucide-react";
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+import { Heart, Coffee, ShieldCheck, Server, Globe, Code2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
 export function DonationSection() {
   return (
-    <section className="py-20 bg-white dark:bg-gray-900">
-      <div className="max-w-4xl mx-auto px-4">
-        <div className="text-center mb-12">
-          <h2 className="text-3xl md:text-4xl font-bold mb-4">
-            Apoie a Transparência Alimentar
-          </h2>
-          <p className="text-xl text-gray-600 dark:text-gray-400">
-            Este projeto é mantido por desenvolvedores independentes que
-            acreditam que informação sobre saúde deve ser acessível a todos, sem
-            custo.
-          </p>
-        </div>
+    <section className="py-24 bg-white dark:bg-[#030712] relative overflow-hidden">
+      {/* Background Decor sutil */}
+      <div className="absolute top-0 right-0 w-1/3 h-1/3 bg-blue-500/5 blur-[120px] rounded-full pointer-events-none" />
 
-        {/* Benefícios da Doação */}
-        <div className="bg-gradient-to-br from-blue-50 to-green-50 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-8 mb-8">
-          <h3 className="text-2xl font-bold mb-6">Sua doação garante:</h3>
-          <div className="grid md:grid-cols-2 gap-4">
-            <div className="flex items-start gap-3">
-              <div className="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center flex-shrink-0 mt-1">
-                <Check className="w-4 h-4 text-white" />
-              </div>
-              <p>Servidores sempre disponíveis para consultas instantâneas</p>
-            </div>
-            <div className="flex items-start gap-3">
-              <div className="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0 mt-1">
-                <Check className="w-4 h-4 text-white" />
-              </div>
-              <p>Novas funcionalidades baseadas em feedback da comunidade</p>
-            </div>
-            <div className="flex items-start gap-3">
-              <div className="w-6 h-6 rounded-full bg-purple-500 flex items-center justify-center flex-shrink-0 mt-1">
-                <Check className="w-4 h-4 text-white" />
-              </div>
-              <p>Manutenção contínua e atualizações de segurança</p>
-            </div>
-            <div className="flex items-start gap-3">
-              <div className="w-6 h-6 rounded-full bg-orange-500 flex items-center justify-center flex-shrink-0 mt-1">
-                <Check className="w-4 h-4 text-white" />
-              </div>
-              <p>Expansão do acesso a informações para mais pessoas</p>
-            </div>
-          </div>
-        </div>
-
-        {/* Humanização - História do Projeto */}
-        <div className="bg-gray-50 dark:bg-gray-800 rounded-2xl p-8 mb-8">
-          <div className="flex items-center gap-4 mb-4">
-            <div className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-green-500 flex items-center justify-center">
-              <Code className="w-8 h-8 text-white" />
-            </div>
-            <div>
-              <h4 className="font-bold text-lg">
-                Ideia nascida de um estudante
-              </h4>
-              <p className="text-sm text-gray-600 dark:text-gray-400">
-                Mantido por NutriScan
-              </p>
-            </div>
-          </div>
-          <p className="text-gray-600 dark:text-gray-400">
-            O que começou como uma ideia de um estudante de Engenharia da
-            Computação se tornou uma ferramenta que democratiza o acesso à
-            informação nutricional. Cada doação ajuda a manter este projeto vivo
-            e acessível para todos.
-          </p>
-        </div>
-
-        {/* CTA de Doação */}
-        <div className="text-center">
-          <a
-            href="https://buymeacoffee.com/evandrotruuta"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-block"
+      <div className="max-w-5xl mx-auto px-6 relative z-10">
+        <div className="grid lg:grid-cols-2 gap-16 items-center">
+          
+          {/* Lado Esquerdo: A Missão (Copywriting Técnico) */}
+          <motion.div 
+            initial={{ opacity: 0, x: -20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
           >
-            <Button
-              size="lg"
-              className="bg-gradient-to-r from-blue-600 to-green-600 text-white px-8 py-6 text-lg hover:shadow-2xl transition-all"
-            >
-              <Heart className="w-5 h-5 mr-2" />
-              Doe/Donate
-            </Button>
-          </a>
-          <p className="mt-4 text-sm text-gray-500">
-            Qualquer valor faz diferença 💛
-          </p>
+            <h2 className="text-4xl md:text-5xl font-black text-gray-900 dark:text-white mb-6 tracking-tighter leading-tight">
+              Mantenha a <span className="text-blue-600">Engenharia</span> Livre de Interesses.
+            </h2>
+            <p className="text-lg text-gray-600 dark:text-gray-400 mb-8 leading-relaxed">
+              O NutriScan é um projeto de código aberto nascido em Garuva, SC. Operamos sem anúncios e sem venda de dados. Nosso único combustível é o apoio da comunidade que acredita na democratização da saúde.
+            </p>
+
+            <div className="space-y-4">
+              {[
+                { icon: Server, text: "Manutenção de Servidores e API de Alta Latência" },
+                { icon: ShieldCheck, text: "Segurança de Dados e Auditoria Open Source" },
+                { icon: Globe, text: "Expansão da Base de Dados Internacional" },
+              ].map((item, i) => (
+                <div key={i} className="flex items-center gap-3 text-sm font-medium text-gray-700 dark:text-gray-300">
+                  <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
+                    <item.icon className="w-4 h-4 text-blue-600" />
+                  </div>
+                  {item.text}
+                </div>
+              ))}
+            </div>
+          </motion.div>
+
+          {/* Lado Direito: O Card de Doação (Psychological Anchoring) */}
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            className="relative"
+          >
+            <div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-100 dark:border-gray-800 p-8 rounded-[2.5rem] shadow-2xl backdrop-blur-sm">
+              <div className="flex items-center gap-4 mb-8">
+                <div className="w-12 h-12 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-2xl flex items-center justify-center shadow-lg shadow-orange-500/20">
+                  <Coffee className="w-6 h-6 text-white" />
+                </div>
+                <div>
+                  <h4 className="font-bold text-gray-900 dark:text-white">Apoie com um Café</h4>
+                  <p className="text-xs text-gray-500 uppercase tracking-widest font-mono">Status: Sistema Online</p>
+                </div>
+              </div>
+
+              <blockquote className="italic text-gray-600 dark:text-gray-400 text-sm border-l-2 border-blue-500 pl-4 mb-8">
+                &quot;Como desenvolvedor independente, cada contribuição me permite dedicar mais horas à refatoração e novas features para o NutriScan.&quot;
+              </blockquote>
+
+              <a
+                href="https://buymeacoffee.com/evandrotruuta"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block group"
+              >
+                <Button className="w-full h-16 bg-blue-600 hover:bg-blue-700 text-white rounded-2xl font-bold text-lg transition-all group-hover:scale-[1.02] active:scale-95 shadow-xl shadow-blue-500/25">
+                  <Heart className="w-5 h-5 mr-3 fill-white group-hover:animate-pulse" />
+                  Contribuir agora
+                </Button>
+              </a>
+
+              <div className="mt-6 flex justify-center gap-4">
+                <div className="flex items-center gap-1.5 text-[10px] font-bold text-gray-400 uppercase tracking-tighter">
+                  <Code2 size={12} /> Engenharia Brasileira
+                </div>
+              </div>
+            </div>
+            
+            {/* Elemento Decorativo: Floating Badge */}
+            <div className="absolute -bottom-6 -right-6 bg-white dark:bg-gray-800 p-4 rounded-2xl shadow-xl border border-gray-100 dark:border-gray-700 animate-bounce">
+               <p className="text-[10px] font-black text-blue-600 uppercase">Qualquer valor ajuda!</p>
+            </div>
+          </motion.div>
+
         </div>
       </div>
     </section>
   );
-}
+}

app/components/landing/Features.tsx

@@ -1,11 +1,26 @@
-import { Shield, Zap, Sparkles, Heart, CheckCircle } from "lucide-react";
+"use client";
 
-const features = [
+import React from "react";
+import { motion } from "framer-motion"; // ESSENCIAL: Evita erros de referência
+import { Shield, Zap, Sparkles, Heart, CheckCircle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// Definição de Tipos para garantir integridade no TS
+interface Feature {
+  icon: React.ElementType;
+  title: string;
+  description: string;
+  color: string;
+  bgColor: string;
+  iconBg: string;
+  benefit: string;
+}
+
+const features: Feature[] = [
   {
     icon: Shield,
-    title: "Dados da Comunidade Open Food Facts",
-    description:
-      "Informações fornecidas pela maior base de dados colaborativa de alimentos do mundo, mantida por uma comunidade global de colaboradores voluntários.",
+    title: "Dados da Comunidade",
+    description: "Informações fornecidas pela Open Food Facts, a maior base colaborativa global mantida por voluntários.",
     color: "text-blue-600 dark:text-blue-400",
     bgColor: "bg-blue-50 dark:bg-blue-900/20",
     iconBg: "bg-blue-100 dark:bg-blue-900/40",
@@ -13,81 +28,120 @@ const features = [
   },
   {
     icon: Zap,
-    title: "Atualizações em Tempo Real",
-    description:
-      "Novos produtos são adicionados a cada minuto. Quando a indústria muda fórmulas, a comunidade atualiza — e você tem acesso instantâneo às informações mais recentes.",
+    title: "Atualização Contínua",
+    description: "Novos produtos e fórmulas atualizados a cada minuto pela comunidade. Dados sempre frescos no seu dispositivo.",
     color: "text-green-600 dark:text-green-400",
     bgColor: "bg-green-50 dark:bg-green-900/20",
     iconBg: "bg-green-100 dark:bg-green-900/40",
-    benefit: "Atualizado continuamente",
+    benefit: "Atualizado em tempo real",
   },
   {
     icon: Sparkles,
-    title: "Interface Intuitiva, Resultado Imediato",
-    description:
-      "Desenvolvido pensando em quem não tem tempo a perder. Digitalize, veja os dados e tome sua decisão em menos de 10 segundos.",
+    title: "Velocidade de Resposta",
+    description: "Interface otimizada para decisões rápidas. Escaneie e obtenha o diagnóstico nutricional em poucos segundos.",
     color: "text-purple-600 dark:text-purple-400",
     bgColor: "bg-purple-50 dark:bg-purple-900/20",
     iconBg: "bg-purple-100 dark:bg-purple-900/40",
-    benefit: "Resultados em <10 segundos",
+    benefit: "Resultados em <10s",
   },
   {
     icon: Heart,
-    title: "100% Gratuito, Para Sempre",
-    description:
-      "Construído sobre dados open source, o NutriScan nunca cobrará pelo acesso à informação. Porque conhecimento sobre saúde deve ser universal, não um privilégio.",
+    title: "Filosofia Open Source",
+    description: "O NutriScan é e sempre será gratuito. Conhecimento sobre saúde deve ser um direito universal.",
     color: "text-orange-600 dark:text-orange-400",
     bgColor: "bg-orange-50 dark:bg-orange-900/20",
     iconBg: "bg-orange-100 dark:bg-orange-900/40",
-    benefit: "Sempre gratuito, sem truques",
+    benefit: "Gratuito para sempre",
   },
 ];
 
+// Variantes de animação para o container pai (Stagger effect)
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.15 },
+  },
+};
+
+// Variantes para cada card individual
+const cardVariants = {
+  hidden: { y: 20, opacity: 0 },
+  visible: {
+    y: 0,
+    opacity: 1,
+    transition: { type: "spring", stiffness: 100 },
+  },
+};
+
 export function Features() {
   return (
-    <section className="py-20 bg-gray-50 dark:bg-gray-800">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        {/* Header */}
-        <div className="text-center mb-16">
-          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
-            Por que milhares confiam no NutriScan
-          </h2>
-          <p className="text-xl text-gray-600 dark:text-gray-400">
-            Transparência que transforma alimentação
-          </p>
-        </div>
+    <section className="py-24 bg-white dark:bg-[#030712] relative overflow-hidden">
+      {/* Background Decor: Sutil gradiente para profundidade */}
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-blue-500/5 via-transparent to-transparent pointer-events-none" />
 
-        {/* Features Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+      <div className="max-w-7xl mx-auto px-6 relative z-10">
+        {/* Header com Motion */}
+        <motion.div 
+          initial={{ opacity: 0, y: -20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="text-center mb-20"
+        >
+          <h2 className="text-4xl md:text-5xl font-black text-gray-900 dark:text-white mb-6 tracking-tighter">
+            Por que confiar no <span className="text-blue-600">NutriScan</span>
+          </h2>
+          <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto font-medium">
+            Engenharia de dados a serviço da sua saúde, com transparência total e zero custo.
+          </p>
+        </motion.div>
+
+        {/* Features Grid com Stagger */}
+        <motion.div 
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-100px" }}
+          className="grid grid-cols-1 md:grid-cols-2 gap-8"
+        >
           {features.map((feature, index) => (
-            <div
+            <motion.div
               key={index}
-              className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-shadow"
+              variants={cardVariants}
+              whileHover={{ y: -5, transition: { duration: 0.2 } }}
+              className="group relative bg-gray-50 dark:bg-gray-900/50 rounded-3xl p-8 border border-gray-100 dark:border-gray-800 hover:border-blue-500/30 transition-colors"
             >
-              {/* Icon */}
+              {/* Icon Container */}
               <div
-                className={`${feature.iconBg} w-12 h-12 rounded-lg flex items-center justify-center mb-4`}
+                className={cn(
+                  feature.iconBg,
+                  "w-14 h-14 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"
+                )}
               >
-                <feature.icon className={`w-6 h-6 ${feature.color}`} />
+                <feature.icon className={cn("w-7 h-7", feature.color)} />
               </div>
 
-              {/* Content */}
-              <h3 className={`text-2xl font-bold mb-3 ${feature.color}`}>
+              {/* Text Content */}
+              <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 tracking-tight">
                 {feature.title}
               </h3>
-              <p className="text-gray-600 dark:text-gray-400 mb-4">
+              <p className="text-gray-600 dark:text-gray-400 mb-8 leading-relaxed">
                 {feature.description}
               </p>
 
-              {/* Benefit */}
-              <div className="flex items-center text-sm text-blue-600">
-                <CheckCircle className="w-4 h-4 mr-2" />
+              {/* Benefit Badge */}
+              <div className={cn(
+                "inline-flex items-center px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest",
+                feature.bgColor,
+                feature.color
+              )}>
+                <CheckCircle className="w-3.5 h-3.5 mr-2" />
                 <span>{feature.benefit}</span>
               </div>
-            </div>
+            </motion.div>
           ))}
-        </div>
+        </motion.div>
       </div>
     </section>
   );
-}
+}

app/components/landing/Hero.tsx

@@ -1,246 +1,261 @@
 "use client";
-import { useState, useEffect } from "react";
+
+import React, { useState, useMemo } from "react";
 import { useRouter } from "next/navigation";
-import { Search, ScanLine, Sparkles, Globe } from "lucide-react";
+import { Search, ScanLine, Globe, Activity, Database, Zap, Moon, Sun } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { detectUserCountry } from "@/lib/geolocation";
-import { detectSearchType, isValidBarcode } from "@/lib/openFoodFactsApi";
+import { useGeolocation } from "@/hooks/use-geolocation";
+import { useSearchLogic } from "@/hooks/use-search-logic";
+import { useTheme } from "next-themes";
+import { cn } from "@/lib/utils";
+import { motion, AnimatePresence } from "framer-motion";
 
 export function Hero() {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [error, setError] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [userCountry, setUserCountry] = useState<string | null>(null);
-  const [searchType, setSearchType] = useState<"auto" | "barcode" | "name">(
-    "auto"
-  );
-  const [mounted, setMounted] = useState(false);
   const router = useRouter();
+  const [searchQuery, setSearchQuery] = useState("");
+  const { countryCode, isMounted } = useGeolocation();
+  const { searchType, isValid, loading, setLoading } = useSearchLogic(searchQuery);
+  const { theme } = useTheme();
 
-  // Detectar país do usuário ao carregar
-  useEffect(() => {
-    setMounted(true);
-
-    const detectCountry = async () => {
-      try {
-        // Forçar nova detecção para garantir país correto
-        const country = await detectUserCountry(true);
-        setUserCountry(country.code);
-      } catch {
-        setUserCountry("br"); // Fallback para Brasil
-      }
-    };
-
-    detectCountry();
-  }, []);
-
-  // Detectar tipo de busca baseado na entrada
-  useEffect(() => {
-    if (searchQuery.trim()) {
-      const detectedType = detectSearchType(searchQuery);
-      setSearchType(detectedType);
-    } else {
-      setSearchType("auto");
+  const searchConfig = useMemo(() => ({
+    barcode: {
+      placeholder: "Insira o código EAN/UPC (ex: 789...)",
+      button: "Analisar Produto",
+      icon: <ScanLine className="w-5 h-5" />,
+      subtext: "Protocolo: Detecção de Código de Barras",
+      color: "blue",
+      gradient: "from-blue-600 via-cyan-500 to-blue-400"
+    },
+    name: {
+      placeholder: "Qual alimento deseja investigar?",
+      button: "Consultar Banco",
+      icon: <Search className="w-5 h-5" />,
+      subtext: "Protocolo: Pesquisa em Base Colaborativa",
+      color: "emerald",
+      gradient: "from-emerald-600 via-teal-500 to-green-400"
+    },
+    auto: {
+      placeholder: "Digite o nome ou aponte o código...",
+      button: "Buscar",
+      icon: <Activity className="w-5 h-5" />,
+      subtext: "Aguardando input do operador...",
+      color: "slate",
+      gradient: "from-slate-600 via-blue-500 to-slate-400"
     }
-  }, [searchQuery]);
+  }), []);
+
+  const current = searchConfig[searchType];
 
   const handleSearch = async (e: React.FormEvent) => {
     e.preventDefault();
-    setError("");
-
-    if (!searchQuery.trim()) {
-      setError("Digite nome do produto");
-      return;
-    }
-
-    const query = searchQuery.trim();
-    const detectedType = detectSearchType(query);
-
-    if (detectedType === "barcode") {
-      if (!isValidBarcode(query)) {
-        setError("Código de barras deve ter entre 8 e 13 dígitos");
-        return;
-      }
-
-      setLoading(true);
-      // Redirecionar para página do produto
-      router.push(`/produto/${query}`);
-    } else {
-      setLoading(true);
-      // Redirecionar para página de resultados
-      const countryParam = userCountry ? `&country=${userCountry}` : "";
-      router.push(`/resultados?q=${encodeURIComponent(query)}${countryParam}`);
-    }
-  };
-
-  const getPlaceholder = () => {
-    if (searchType === "barcode") {
-      return "Digite o código de barras (ex: 7896004713588)";
-    } else if (searchType === "name") {
-      return "Digite o nome do produto (ex: coca cola)";
-    }
-    return "Digite nome do produto";
-  };
-
-  const getSearchButtonText = () => {
-    if (loading) return "Buscando...";
-    if (searchType === "barcode") return "Buscar Produto";
-    if (searchType === "name") return "Buscar Produtos";
-    return "Buscar";
+    if (!searchQuery.trim()) return;
+    setLoading(true);
+    
+    const target = searchType === "barcode" && isValid 
+      ? `/produto/${searchQuery.trim()}` 
+      : `/resultados?q=${encodeURIComponent(searchQuery.trim())}${countryCode ? `&country=${countryCode}` : ""}`;
+    
+    router.push(target);
   };
 
   return (
-    <section className="relative min-h-[calc(100vh-4rem)] flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-green-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 overflow-hidden py-12 sm:py-16 lg:py-20">
-      {/* Background Pattern */}
-      <div className="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%230055ff%22%20fill-opacity%3D%220.05%22%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%222%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-40"></div>
+    <section className="relative min-h-[90vh] flex flex-col items-center justify-center px-6 py-20 overflow-hidden bg-white dark:bg-[#030712] transition-colors duration-500">
+      
+      {/* 1. INFRAESTRUTURA VISUAL: Background de Engenharia */}
+      <div className="absolute inset-0 z-0">
+        {/* Grid de Coordenadas */}
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#e2e8f0_1px,transparent_1px),linear-gradient(to_bottom,#e2e8f0_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#1e293b_1px,transparent_1px),linear-gradient(to_bottom,#1e293b_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] opacity-20 dark:opacity-20 transition-opacity duration-500" />
+        
+        {/* Glow de Fundo Reativo */}
+        <motion.div 
+          animate={{ 
+            scale: searchQuery ? 1.2 : 1,
+            opacity: searchQuery ? (theme === "dark" ? 0.15 : 0.08) : (theme === "dark" ? 0.05 : 0.02)
+          }}
+          className={cn(
+            "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[500px] rounded-full blur-[120px] transition-colors duration-700",
+            searchType === "barcode" ? "bg-blue-600 dark:bg-blue-600" : searchType === "name" ? "bg-emerald-600 dark:bg-emerald-600" : "bg-blue-400 dark:bg-blue-900"
+          )}
+        />
 
-      <div className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-        {/* Badge */}
-        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-sm font-medium mb-6 sm:mb-8">
-          <Sparkles className="w-4 h-4" />
-          Desenvolvido por{" "}
-          <a
-            href="https://evandro.dev.br"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="font-semibold hover:underline transition-all hover:text-blue-800 dark:hover:text-blue-200"
-          >
-            evandrodevbr
-          </a>
-          {" • "}Dados do Open Food Facts
-        </div>
+        {/* Elemento Decorativo Lua/Sol */}
+        <motion.div
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 1, delay: 0.5 }}
+          className="absolute top-16 right-8 md:top-24 md:right-16 lg:top-32 lg:right-24 z-0 pointer-events-none"
+        >
+          <AnimatePresence mode="wait">
+            {theme === "dark" ? (
+              <motion.div
+                key="moon"
+                initial={{ opacity: 0, rotate: -90 }}
+                animate={{ opacity: 1, rotate: 0 }}
+                exit={{ opacity: 0, rotate: 90 }}
+                transition={{ duration: 0.5 }}
+              >
+                <Moon className="w-24 h-24 md:w-32 md:h-32 lg:w-40 lg:h-40 text-blue-400/20 transition-colors duration-500" />
+              </motion.div>
+            ) : (
+              <motion.div
+                key="sun"
+                initial={{ opacity: 0, rotate: 90 }}
+                animate={{ opacity: 1, rotate: 0 }}
+                exit={{ opacity: 0, rotate: -90 }}
+                transition={{ duration: 0.5 }}
+              >
+                <Sun className="w-24 h-24 md:w-32 md:h-32 lg:w-40 lg:h-40 text-yellow-400/30 transition-colors duration-500" />
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </motion.div>
+      </div>
 
-        {/* Main Heading */}
-        <h1 className="text-3xl sm:text-4xl lg:text-5xl xl:text-6xl font-bold text-gray-900 dark:text-white mb-4 sm:mb-6 leading-tight">
-          Descubra o que a comunidade alimentar sabe sobre{" "}
-          <span className="bg-gradient-to-r from-blue-600 to-green-600 bg-clip-text text-transparent">
-            seus alimentos
+      <div className="relative z-10 max-w-5xl mx-auto text-center">
+        
+        {/* 2. BADGE DE STATUS DO SISTEMA */}
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-gray-100/80 dark:bg-white/5 border border-gray-200 dark:border-white/10 backdrop-blur-md mb-12 transition-colors duration-500"
+        >
+          <div className="flex -space-x-2">
+            <div className="w-6 h-6 rounded-full border-2 border-white dark:border-[#030712] bg-blue-500 flex items-center justify-center">
+              <Database size={10} className="text-white" />
+            </div>
+            <div className="w-6 h-6 rounded-full border-2 border-white dark:border-[#030712] bg-emerald-500 flex items-center justify-center">
+              <Zap size={10} className="text-white" />
+            </div>
+          </div>
+          <span className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-600 dark:text-slate-400 transition-colors duration-500">
+            NutriScan Protocol <span className="text-blue-600 dark:text-blue-500">v2.1</span> • {isMounted ? countryCode?.toUpperCase() : "INTL"}
+          </span>
+        </motion.div>
+
+        {/* 3. HEADLINE DE ALTA DENSIDADE */}
+        <h1 className="text-5xl md:text-8xl font-black text-gray-900 dark:text-white mb-8 tracking-tighter leading-[0.85] perspective-1000 transition-colors duration-500">
+          A verdade sobre <br />
+          <span className={cn(
+            "text-transparent bg-clip-text bg-gradient-to-r transition-all duration-700",
+            current.gradient
+          )}>
+            seus alimentos.
           </span>
         </h1>
 
-        {/* Subtitle */}
-        <p className="text-lg sm:text-xl lg:text-2xl text-gray-600 dark:text-gray-300 mb-4 max-w-3xl mx-auto leading-relaxed">
-          Transparência total, zero custo, milhões de dados colaborativos ao seu
-          alcance.
+        <p className="text-gray-600 dark:text-slate-400 text-lg md:text-xl max-w-2xl mx-auto mb-16 leading-relaxed font-medium transition-colors duration-500">
+          Engenharia de dados aplicada à transparência nutricional. 
+          Descriptografamos rótulos para que você tome decisões soberanas.
         </p>
 
-        <p className="text-base sm:text-lg text-gray-500 dark:text-gray-400 mb-8 sm:mb-12 max-w-4xl mx-auto leading-relaxed">
-          Consulte informações nutricionais completas, ingredientes e
-          classificações de qualidade — tudo baseado no{" "}
-          <span className="font-semibold text-blue-600">Open Food Facts</span>,
-          a maior base de dados colaborativa do mundo.
-        </p>
+        {/* 4. O TERMINAL DE BUSCA (A PEÇA CENTRAL) */}
+        <form onSubmit={handleSearch} className="relative max-w-3xl mx-auto group">
+          {/* Efeito de Borda Neon Reativa */}
+          <div className={cn(
+            "absolute -inset-[2px] rounded-[2rem] blur-sm opacity-20 group-focus-within:opacity-100 transition-all duration-500 bg-gradient-to-r",
+            current.gradient
+          )} />
 
-        {/* Estatísticas Visuais */}
-        <div className="flex justify-center gap-6 sm:gap-8 mb-8 sm:mb-12 text-center">
-          <div className="animate-fadeIn">
-            <div className="text-2xl sm:text-3xl font-bold text-blue-600">
-              2M+
-            </div>
-            <div className="text-xs sm:text-sm text-gray-500">
-              produtos no banco
-            </div>
-          </div>
-          <div className="animate-fadeIn" style={{ animationDelay: "0.2s" }}>
-            <div className="text-2xl sm:text-3xl font-bold text-green-600">
-              100+
-            </div>
-            <div className="text-xs sm:text-sm text-gray-500">
-              países cobertos
-            </div>
-          </div>
-          <div className="animate-fadeIn" style={{ animationDelay: "0.4s" }}>
-            <div className="text-2xl sm:text-3xl font-bold text-purple-600">
-              24/7
-            </div>
-            <div className="text-xs sm:text-sm text-gray-500">disponível</div>
-          </div>
-        </div>
-
-        {/* Search Form */}
-        <form
-          onSubmit={handleSearch}
-          className="max-w-2xl mx-auto mb-10 sm:mb-12"
-        >
-          <div className="relative">
-            <div className="flex items-center bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden focus-within:ring-2 focus-within:ring-blue-500 transition-all duration-200">
-              <div className="flex-1 relative">
-                {searchType === "barcode" ? (
-                  <ScanLine className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 pointer-events-none" />
-                ) : (
-                  <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 pointer-events-none" />
-                )}
-                <Input
-                  type="text"
-                  placeholder={getPlaceholder()}
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-12 pr-4 py-4 text-lg border-0 bg-transparent focus:ring-0 focus:outline-none focus:border-transparent focus:shadow-none focus-visible:ring-0 placeholder:text-gray-400 w-full"
-                />
+          <div className="relative flex items-center bg-white/90 dark:bg-slate-900/90 backdrop-blur-2xl rounded-[1.8rem] border border-gray-200 dark:border-white/10 p-2 shadow-2xl transition-colors duration-500">
+            <div className="flex-1 relative flex items-center">
+              {/* Ícone de Estado Animado */}
+              <div className="absolute left-6">
+                <AnimatePresence mode="wait">
+                  <motion.div
+                    key={searchType}
+                    initial={{ rotate: -90, opacity: 0, scale: 0.5 }}
+                    animate={{ rotate: 0, opacity: 1, scale: 1 }}
+                    exit={{ rotate: 90, opacity: 0, scale: 0.5 }}
+                    className={cn(
+                      "transition-colors duration-500",
+                      searchType === "barcode" ? "text-blue-600 dark:text-blue-400" : searchType === "name" ? "text-emerald-600 dark:text-emerald-400" : "text-gray-400 dark:text-slate-500"
+                    )}
+                  >
+                    {current.icon}
+                  </motion.div>
+                </AnimatePresence>
               </div>
 
-              <Button
-                type="submit"
-                disabled={loading}
-                className="m-2 px-6 sm:px-8 py-4 bg-gradient-to-r from-blue-600 to-green-600 hover:from-blue-700 hover:to-green-700 text-white font-semibold rounded-xl transition-all duration-200 transform hover:scale-105 disabled:opacity-50 flex-shrink-0"
-              >
-                {loading ? (
-                  <div className="flex items-center gap-2">
-                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                    Buscando...
-                  </div>
-                ) : (
-                  <div className="flex items-center gap-2">
-                    <Search className="w-5 h-5" />
-                    {getSearchButtonText()}
-                  </div>
-                )}
-              </Button>
+              <Input
+                type="text"
+                placeholder={current.placeholder}
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-16 pr-4 py-9 text-xl border-0 bg-transparent focus-visible:ring-0 w-full text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-slate-600 font-medium tracking-tight transition-colors duration-500"
+              />
             </div>
+
+            <Button
+              type="submit"
+              disabled={loading}
+              className={cn(
+                "h-14 px-10 rounded-[1.2rem] font-black uppercase tracking-widest text-xs transition-all duration-500 active:scale-95 shadow-xl",
+                searchType === "barcode" ? "bg-blue-600 hover:bg-blue-500 shadow-blue-500/20" : "bg-emerald-600 hover:bg-emerald-500 shadow-emerald-500/20"
+              )}
+            >
+              {loading ? (
+                <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+              ) : (
+                <div className="flex items-center gap-2">
+                  <span>{current.button}</span>
+                  <ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" />
+                </div>
+              )}
+            </Button>
           </div>
 
-          {/* Search Type Indicator */}
-          {searchQuery && (
-            <div className="flex items-center justify-center gap-2 mt-3">
-              {searchType === "barcode" && (
-                <div className="flex items-center gap-1 text-sm text-blue-600 dark:text-blue-400">
-                  <ScanLine className="w-4 h-4" />
-                  <span>Busca por código de barras</span>
-                </div>
-              )}
-              {searchType === "name" && (
-                <div className="flex items-center gap-1 text-sm text-green-600 dark:text-green-400">
-                  <Search className="w-4 h-4" />
-                  <span>Busca por nome do produto</span>
-                  {mounted && userCountry && (
-                    <div className="flex items-center gap-1 text-xs text-gray-500">
-                      <Globe className="w-3 h-3" />
-                      <span>Priorizando {userCountry}</span>
-                    </div>
-                  )}
-                </div>
-              )}
+          {/* 5. METADADOS DA OPERAÇÃO */}
+          <div className="flex items-center justify-between px-6 mt-6">
+            <div className={cn(
+              "flex items-center gap-2 font-mono text-[10px] font-bold uppercase tracking-[0.2em] transition-colors duration-500",
+              searchType === "barcode" ? "text-blue-500" : searchType === "name" ? "text-emerald-500" : "text-slate-600"
+            )}>
+              <span className="relative flex h-2 w-2">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-current opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-2 w-2 bg-current"></span>
+              </span>
+              {current.subtext}
             </div>
-          )}
 
-          {error && (
-            <p className="text-red-500 text-sm mt-3 text-left">{error}</p>
-          )}
+            {isMounted && countryCode && (
+              <div className="flex items-center gap-2 text-gray-600 dark:text-slate-500 bg-gray-100 dark:bg-white/5 px-3 py-1 rounded-full border border-gray-200 dark:border-white/10 transition-colors duration-500">
+                <Globe size={12} />
+                <span className="text-[10px] font-bold uppercase">Region: {countryCode.toUpperCase()}</span>
+              </div>
+            )}
+          </div>
         </form>
-
-        {/* Dica sobre código de barras */}
-        <p className="text-center text-sm text-gray-500 dark:text-gray-400 mb-8">
-          💡 Dica: O código de barras está na parte de trás da embalagem
-        </p>
       </div>
 
-      {/* Scroll Indicator */}
-      <div className="absolute bottom-4 sm:bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce mt-12 sm:mt-16">
-        <div className="w-6 h-10 border-2 border-gray-400 dark:border-gray-500 rounded-full flex justify-center">
-          <div className="w-1 h-3 bg-gray-400 dark:bg-gray-500 rounded-full mt-2 animate-pulse"></div>
+      {/* 6. INDICADOR DE MÉTRICAS (Bottom Shelf) */}
+      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 w-full max-w-4xl px-6 hidden md:block">
+        <div className="grid grid-cols-3 gap-12 border-t border-gray-200 dark:border-white/5 pt-10 opacity-60 dark:opacity-40 grayscale hover:grayscale-0 transition-all duration-700">
+           <div className="flex flex-col items-center gap-1">
+              <span className="text-2xl font-mono font-bold text-gray-900 dark:text-white tracking-tighter transition-colors duration-500">2M+</span>
+              <span className="text-[9px] uppercase tracking-[0.3em] font-black text-gray-500 dark:text-slate-500 transition-colors duration-500">Dataset Entries</span>
+           </div>
+           <div className="flex flex-col items-center gap-1 border-x border-gray-200 dark:border-white/5">
+              <span className="text-2xl font-mono font-bold text-gray-900 dark:text-white tracking-tighter transition-colors duration-500">100%</span>
+              <span className="text-[9px] uppercase tracking-[0.3em] font-black text-gray-500 dark:text-slate-500 transition-colors duration-500">Open Source</span>
+           </div>
+           <div className="flex flex-col items-center gap-1">
+              <span className="text-2xl font-mono font-bold text-gray-900 dark:text-white tracking-tighter transition-colors duration-500">&lt; 10s</span>
+              <span className="text-[9px] uppercase tracking-[0.3em] font-black text-gray-500 dark:text-slate-500 transition-colors duration-500">Analysis Speed</span>
+           </div>
         </div>
       </div>
     </section>
   );
 }
+
+// Sub-componente auxiliar para ícone
+function ArrowRight({ size, className }: { size: number, className?: string }) {
+  return (
+    <svg 
+      width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" className={className}
+    >
+      <path d="M5 12h14m-7-7 7 7-7 7"/>
+    </svg>
+  );
+}

app/components/landing/HowItWorks.tsx

@@ -1,205 +1,180 @@
 "use client";
 
-import { ScanLine, Search, BarChart3, CheckCircle } from "lucide-react";
+import React from "react";
+import { motion } from "framer-motion";
+import { ScanLine, Search, BarChart3, CheckCircle, Globe, Zap } from "lucide-react";
+import Image from "next/image";
+import { cn } from "@/lib/utils";
 
-const steps = [
+interface Step {
+  number: string;
+  icon: React.ElementType;
+  title: string;
+  description: string;
+  color: string;
+  glow: string;
+}
+
+const steps: Step[] = [
   {
     number: "01",
     icon: ScanLine,
-    title: "Digitalize sem complicação",
-    description:
-      "Encontre o código de barras na embalagem e escaneie instantaneamente. Nossa tecnologia reconhece produtos de mais de 100 países em segundos.",
-    color: "text-blue-600 dark:text-blue-400",
-    bgColor: "bg-blue-50 dark:bg-blue-900/20",
-    iconBg: "bg-blue-100 dark:bg-blue-900/40",
+    title: "Digitalize",
+    description: "Reconhecimento instantâneo de códigos em mais de 100 países com tecnologia de baixa latência.",
+    color: "text-blue-500",
+    glow: "shadow-blue-500/20",
   },
   {
     number: "02",
     icon: Search,
-    title: "Acesso a milhões de dados colaborativos",
-    description:
-      "Conectamos você diretamente ao Open Food Facts, a Wikipedia dos alimentos — onde a comunidade global contribui com informações sobre produtos.",
-    color: "text-green-600 dark:text-green-400",
-    bgColor: "bg-green-50 dark:bg-green-900/20",
-    iconBg: "bg-green-100 dark:bg-green-900/40",
+    title: "Consulte",
+    description: "Conexão direta ao Open Food Facts, a base de dados colaborativa global (Wikipedia dos alimentos).",
+    color: "text-green-500",
+    glow: "shadow-green-500/20",
   },
   {
     number: "03",
     icon: BarChart3,
-    title: "Informações que fazem diferença",
-    description:
-      "Receba dados nutricionais detalhados, alertas de alérgenos e classificações Nutri-Score. Informações fornecidas pela base de dados Open Food Facts.",
-    color: "text-purple-600 dark:text-purple-400",
-    bgColor: "bg-purple-50 dark:bg-purple-900/20",
-    iconBg: "bg-purple-100 dark:bg-purple-900/40",
+    title: "Analise",
+    description: "Processamento de Nutri-Score, graus de processamento NOVA e alertas de alérgenos críticos.",
+    color: "text-purple-500",
+    glow: "shadow-purple-500/20",
   },
   {
     number: "04",
     icon: CheckCircle,
-    title: "Decisões mais inteligentes, saúde melhor",
-    description:
-      "Use informações transparentes para escolher alimentos alinhados aos seus objetivos. Sem interesses comerciais, sem dados manipulados.",
-    color: "text-orange-600 dark:text-orange-400",
-    bgColor: "bg-orange-50 dark:bg-orange-900/20",
-    iconBg: "bg-orange-100 dark:bg-orange-900/40",
-  },
-];
-
-const features = [
-  {
-    title: "Dados Nutricionais",
-    items: [
-      "Calorias por 100g",
-      "Proteínas, carboidratos e gorduras",
-      "Vitaminas e minerais",
-      "Fibra alimentar",
-    ],
-  },
-  {
-    title: "Classificações",
-    items: [
-      "Nutri-Score (A a E)",
-      "NOVA (processamento)",
-      "Alérgenos identificados",
-      "Aditivos alimentares",
-    ],
-  },
-  {
-    title: "Ingredientes",
-    items: [
-      "Lista completa de ingredientes",
-      "Ordem de quantidade",
-      "Alérgenos destacados",
-      "Origem dos ingredientes",
-    ],
+    title: "Decida",
+    description: "Informação técnica pura e sem vieses comerciais para decisões alinhadas à sua saúde.",
+    color: "text-orange-500",
+    glow: "shadow-orange-500/20",
   },
 ];
 
 export function HowItWorks() {
   return (
-    <section className="py-20 bg-white dark:bg-gray-800">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        {/* Header */}
-        <div className="text-center mb-16">
-          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
-            Alimentação consciente em 4 passos simples
-          </h2>
-          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
-            Descubra como milhares de pessoas já tomam decisões alimentares mais
-            conscientes com informações transparentes e confiáveis.
+    <section className="py-24 bg-white dark:bg-[#030712] transition-colors duration-500">
+      <div className="max-w-7xl mx-auto px-6">
+        
+        {/* Header - Foco em Valor Técnico */}
+        <div className="text-center mb-24">
+          <motion.h2 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            className="text-4xl md:text-5xl font-black text-gray-900 dark:text-white mb-6 tracking-tighter"
+          >
+            Pipeline de <span className="text-blue-600">Consciência Alimentar</span>
+          </motion.h2>
+          <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto font-medium">
+            Quatro estágios de processamento de dados para transformar um código de barras em inteligência nutricional.
           </p>
         </div>
 
-        {/* Steps */}
-        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 mb-20">
+        {/* Steps Grid - O "Motor" da Seção */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 relative">
           {steps.map((step, index) => (
-            <div key={index} className="relative">
-              {/* Arrow (desktop only) */}
+            <motion.div
+              key={step.number}
+              initial={{ opacity: 0, x: -20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              transition={{ delay: index * 0.15 }}
+              className="relative group"
+            >
+              {/* Conector Visual (Desktop) */}
               {index < steps.length - 1 && (
-                <div className="hidden lg:flex absolute top-1/2 -right-4 transform -translate-y-1/2 z-10">
-                  <svg
-                    width="32"
-                    height="24"
-                    viewBox="0 0 32 24"
-                    fill="none"
-                    className="text-gray-400 dark:text-gray-600"
-                  >
-                    <path
-                      d="M0 12H30M30 12L20 2M30 12L20 22"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
-                </div>
+                <div className="hidden lg:block absolute top-12 -right-8 w-16 h-[2px] bg-gradient-to-r from-gray-200 to-transparent dark:from-gray-800 z-0" />
               )}
 
-              <div
-                className={`${step.bgColor} p-8 rounded-2xl border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-all duration-300 group`}
-              >
-                {/* Number */}
-                <div className="text-6xl font-bold text-gray-200 dark:text-gray-600 mb-4">
-                  {step.number}
+              <div className={cn(
+                "relative z-10 p-8 rounded-3xl bg-gray-50 dark:bg-gray-900/50 border border-gray-100 dark:border-gray-800 transition-all duration-500 hover:border-blue-500/30",
+                "group-hover:translate-y-[-8px] group-hover:shadow-2xl",
+                step.glow
+              )}>
+                {/* Badge de Número em Estilo Industrial */}
+                <span className="absolute top-4 right-6 text-sm font-black font-mono text-gray-300 dark:text-gray-700">
+                  STEP_{step.number}
+                </span>
+
+                <div className={cn(
+                  "w-14 h-14 rounded-2xl flex items-center justify-center mb-8 bg-white dark:bg-gray-800 shadow-sm transition-transform duration-500 group-hover:rotate-[10deg]",
+                  step.color
+                )}>
+                  <step.icon className="w-7 h-7" />
                 </div>
 
-                {/* Icon */}
-                <div
-                  className={`${step.iconBg} w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}
-                >
-                  <step.icon className={`w-8 h-8 ${step.color}`} />
-                </div>
-
-                {/* Content */}
-                <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4 tracking-tight">
                   {step.title}
                 </h3>
-                <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
+                <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed font-medium">
                   {step.description}
                 </p>
               </div>
-            </div>
+            </motion.div>
           ))}
         </div>
 
-        {/* Features Grid */}
-        <div className="bg-gray-50 dark:bg-gray-900 rounded-2xl p-8">
-          <div className="text-center mb-12">
-            <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
-              O que você vai encontrar?
-            </h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Informações detalhadas e confiáveis sobre cada produto
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            {features.map((feature, index) => (
-              <div
-                key={index}
-                className="bg-white dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700"
-              >
-                <h4 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
-                  {feature.title}
-                </h4>
-                <ul className="space-y-2">
-                  {feature.items.map((item, itemIndex) => (
-                    <li
-                      key={itemIndex}
-                      className="flex items-center gap-2 text-gray-600 dark:text-gray-300"
-                    >
-                      <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0" />
-                      <span className="text-sm">{item}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
+        {/* Technical Datasheet (O que você vai encontrar) */}
+        <div className="mt-32 mb-12 flex justify-center">
+          <div className="relative w-full max-w-2xl h-64 rounded-2xl overflow-hidden shadow-2xl">
+            <Image
+              src="/images/nut-facts.webp"
+              alt="Lista de ingredientes e informações nutricionais de produto alimentar"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
+            />
           </div>
         </div>
+        <div className="mt-32 p-10 rounded-[2.5rem] bg-slate-900 text-white relative overflow-hidden shadow-3xl">
+          <div className="absolute top-0 right-0 p-10 opacity-10">
+             <BarChart3 size={200} />
+          </div>
 
-        {/* Bottom CTA */}
-        <div className="text-center mt-16">
-          <a
-            href="#"
-            onClick={(e) => {
-              e.preventDefault();
-              const input = document.querySelector(
-                'input[placeholder*="código de barras"]'
-              ) as HTMLInputElement;
-              input?.focus();
-              window.scrollTo({ top: 0, behavior: "smooth" });
-            }}
-            className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-green-600 text-white rounded-full font-semibold hover:shadow-lg transition-all duration-300 hover:scale-105 cursor-pointer"
-          >
-            <ScanLine className="w-5 h-5" />
-            Começar agora
-          </a>
-          <p className="text-gray-500 dark:text-gray-400 text-sm mt-4">
-            É rápido, fácil e totalmente gratuito
-          </p>
+          <div className="relative z-10 grid grid-cols-1 lg:grid-cols-3 gap-12">
+            <div className="lg:col-span-1">
+              <h3 className="text-3xl font-black mb-4 tracking-tighter">Data Specification</h3>
+              <p className="text-slate-400 text-sm leading-relaxed mb-6">
+                Extração de metadados via Open Food Facts API v2. Suporte a protocolos Nutri-Score e classificações NOVA.
+              </p>
+              <div className="flex items-center gap-4 text-xs font-mono text-blue-400 uppercase tracking-widest">
+                <Globe size={14} /> Open Source Database
+              </div>
+            </div>
+
+            <div className="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-8">
+               {/* Lista de Features Refinada */}
+               <div className="space-y-4">
+                  <h4 className="text-blue-500 font-bold text-xs uppercase tracking-widest">Bio-Markers & Macros</h4>
+                  <ul className="space-y-3">
+                    {["Calorias (Kcal/100g)", "Perfil Lipídico e Glicêmico", "Micronutrientes & Fibras"].map(item => (
+                      <li key={item} className="flex items-center gap-3 text-sm text-slate-300">
+                        <Zap size={12} className="text-blue-500" /> {item}
+                      </li>
+                    ))}
+                  </ul>
+               </div>
+               <div className="relative w-full h-48 rounded-xl overflow-hidden">
+                 <Image
+                   src="/images/nutscore.webp"
+                   alt="Sistema de classificação Nutri-Score"
+                   fill
+                   className="object-cover"
+                   sizes="(max-width: 768px) 100vw, 50vw"
+                 />
+               </div>
+               <div className="space-y-4">
+                  <h4 className="text-green-500 font-bold text-xs uppercase tracking-widest">Compliance & Alerta</h4>
+                  <ul className="space-y-3">
+                    {["Identificação de Alérgenos", "Aditivos e Conservantes", "Classificação de Processamento"].map(item => (
+                      <li key={item} className="flex items-center gap-3 text-sm text-slate-300">
+                        <CheckCircle size={12} className="text-green-500" /> {item}
+                      </li>
+                    ))}
+                  </ul>
+               </div>
+            </div>
+          </div>
         </div>
       </div>
     </section>
   );
-}
+}