feat(ui): enhance footer with NutriScan branding and fix database path

- Redesigned Footer.tsx with comprehensive layout including brand section, navigation links, social media icons, and contact info to improve user engagement and brand visibility
- Updated DATABASE_URL in .env to correct Prisma database path for proper configuration and connectivity
- Updated dependencies to support new UI components and ensure compatibility with enhanced features

app/components/landing/BarcodeScanner.tsx

@@ -0,0 +1,237 @@
+"use client";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { X, Camera, AlertCircle, CheckCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface BarcodeScannerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onScan: (barcode: string) => void;
+}
+
+export function BarcodeScanner({
+  isOpen,
+  onClose,
+  onScan,
+}: BarcodeScannerProps) {
+  const [isScanning, setIsScanning] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+  const scannerRef = useRef<HTMLDivElement>(null);
+  const qrCodeScanner = useRef<any>(null);
+
+  // Verificar se é mobile
+  const isMobile =
+    typeof window !== "undefined" &&
+    /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+
+  // Verificar se é HTTPS ou localhost
+  const isSecure =
+    typeof window !== "undefined" &&
+    (window.location.protocol === "https:" ||
+      window.location.hostname === "localhost");
+
+  const startScanner = useCallback(async () => {
+    try {
+      setError(null);
+      setIsScanning(true);
+
+      // Dynamic import para carregar apenas quando necessário
+      const { Html5QrcodeScanner } = await import("html5-qrcode");
+
+      if (!scannerRef.current) return;
+
+      qrCodeScanner.current = new Html5QrcodeScanner(
+        scannerRef.current.id,
+        {
+          fps: 10,
+          qrbox: { width: 250, height: 250 },
+          aspectRatio: 1.0,
+        },
+        false
+      );
+
+      qrCodeScanner.current.render(
+        (decodedText: string) => {
+          // Validar se é um código de barras válido
+          if (isValidBarcode(decodedText)) {
+            setSuccess(true);
+            setTimeout(() => {
+              onScan(decodedText);
+              onClose();
+            }, 1000);
+          } else {
+            setError("Código de barras inválido. Tente novamente.");
+          }
+        },
+        (error: string) => {
+          // Ignorar erros de "No QR code found" para não spam
+          if (!error.includes("No QR code found")) {
+            console.warn("Erro do scanner:", error);
+          }
+        }
+      );
+    } catch (err) {
+      console.error("Erro ao iniciar scanner:", err);
+      setError("Erro ao acessar a câmera. Verifique as permissões.");
+      setIsScanning(false);
+    }
+  }, [onScan, onClose]);
+
+  useEffect(() => {
+    if (isOpen && isMobile && isSecure) {
+      startScanner();
+    } else if (isOpen && !isMobile) {
+      setError("Scanner de câmera disponível apenas em dispositivos móveis");
+    } else if (isOpen && !isSecure) {
+      setError("Scanner de câmera requer conexão segura (HTTPS)");
+    }
+
+    return () => {
+      stopScanner();
+    };
+  }, [isOpen, isMobile, isSecure, startScanner]);
+
+  const stopScanner = () => {
+    if (qrCodeScanner.current) {
+      qrCodeScanner.current.clear().catch((err: unknown) => {
+        console.warn("Erro ao parar scanner:", err);
+      });
+      qrCodeScanner.current = null;
+    }
+    setIsScanning(false);
+  };
+
+  const isValidBarcode = (code: string): boolean => {
+    const cleanCode = code.replace(/\D/g, "");
+    return cleanCode.length >= 8 && cleanCode.length <= 13;
+  };
+
+  const handleClose = () => {
+    stopScanner();
+    setError(null);
+    setSuccess(false);
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4">
+      <div className="bg-white dark:bg-gray-800 rounded-2xl w-full max-w-md mx-auto overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex items-center gap-2">
+            <Camera className="w-5 h-5 text-blue-600" />
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              Scanner de Código de Barras
+            </h3>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleClose}
+            className="w-8 h-8 p-0"
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+
+        {/* Content */}
+        <div className="p-4">
+          {!isMobile && (
+            <div className="text-center py-8">
+              <AlertCircle className="w-12 h-12 text-yellow-500 mx-auto mb-4" />
+              <p className="text-gray-600 dark:text-gray-300 mb-4">
+                Scanner de câmera disponível apenas em dispositivos móveis
+              </p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Use o campo de busca para digitar o código de barras manualmente
+              </p>
+            </div>
+          )}
+
+          {!isSecure && (
+            <div className="text-center py-8">
+              <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
+              <p className="text-gray-600 dark:text-gray-300 mb-4">
+                Scanner de câmera requer conexão segura (HTTPS)
+              </p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Use o campo de busca para digitar o código de barras manualmente
+              </p>
+            </div>
+          )}
+
+          {isMobile && isSecure && (
+            <div className="space-y-4">
+              {error && (
+                <div className="flex items-center gap-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+                  <AlertCircle className="w-4 h-4 text-red-500 flex-shrink-0" />
+                  <p className="text-sm text-red-600 dark:text-red-400">
+                    {error}
+                  </p>
+                </div>
+              )}
+
+              {success && (
+                <div className="flex items-center gap-2 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
+                  <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0" />
+                  <p className="text-sm text-green-600 dark:text-green-400">
+                    Código de barras detectado com sucesso!
+                  </p>
+                </div>
+              )}
+
+              <div className="text-center">
+                <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+                  Aponte a câmera para o código de barras do produto
+                </p>
+
+                {/* Scanner Container */}
+                <div
+                  id="barcode-scanner"
+                  ref={scannerRef}
+                  className="w-full h-64 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center"
+                >
+                  {!isScanning && !error && (
+                    <div className="text-center">
+                      <Camera className="w-8 h-8 text-gray-400 mx-auto mb-2" />
+                      <p className="text-sm text-gray-500">
+                        Iniciando câmera...
+                      </p>
+                    </div>
+                  )}
+                </div>
+
+                <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
+                  Mantenha o código de barras dentro da área destacada
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex gap-3 mt-6">
+            <Button variant="outline" onClick={handleClose} className="flex-1">
+              Cancelar
+            </Button>
+            {isMobile && isSecure && (
+              <Button
+                onClick={() => {
+                  setError(null);
+                  setSuccess(false);
+                  startScanner();
+                }}
+                className="flex-1"
+                disabled={isScanning}
+              >
+                {isScanning ? "Escaneando..." : "Tentar Novamente"}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/landing/Features.tsx

@@ -0,0 +1,175 @@
+import {
+  BarChart3,
+  Shield,
+  List,
+  Globe,
+  Zap,
+  Heart,
+  AlertTriangle,
+  CheckCircle,
+} from "lucide-react";
+
+const features = [
+  {
+    icon: BarChart3,
+    title: "Informações Nutricionais Completas",
+    description:
+      "Calorias, proteínas, carboidratos, gorduras e muito mais. Dados precisos para cada produto.",
+    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",
+  },
+  {
+    icon: Shield,
+    title: "Nutri-Score e NOVA",
+    description:
+      "Classificações oficiais de qualidade nutricional para ajudar você a fazer escolhas mais saudáveis.",
+    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",
+  },
+  {
+    icon: List,
+    title: "Ingredientes Detalhados",
+    description:
+      "Lista completa de ingredientes, incluindo alérgenos e aditivos alimentares.",
+    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",
+  },
+  {
+    icon: Globe,
+    title: "Banco de Dados Global",
+    description:
+      "Acesso a milhões de produtos do Open Food Facts, a maior base de dados alimentar do mundo.",
+    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",
+  },
+  {
+    icon: Zap,
+    title: "Busca Instantânea",
+    description:
+      "Resultados em segundos. Digite o código de barras e obtenha informações imediatamente.",
+    color: "text-yellow-600 dark:text-yellow-400",
+    bgColor: "bg-yellow-50 dark:bg-yellow-900/20",
+    iconBg: "bg-yellow-100 dark:bg-yellow-900/40",
+  },
+  {
+    icon: Heart,
+    title: "Alimentação Consciente",
+    description:
+      "Tome decisões mais informadas sobre sua alimentação com dados confiáveis e atualizados.",
+    color: "text-red-600 dark:text-red-400",
+    bgColor: "bg-red-50 dark:bg-red-900/20",
+    iconBg: "bg-red-100 dark:bg-red-900/40",
+  },
+];
+
+const benefits = [
+  {
+    icon: CheckCircle,
+    text: "Dados verificados por especialistas",
+    color: "text-green-600 dark:text-green-400",
+  },
+  {
+    icon: CheckCircle,
+    text: "Atualizações em tempo real",
+    color: "text-green-600 dark:text-green-400",
+  },
+  {
+    icon: CheckCircle,
+    text: "Interface simples e intuitiva",
+    color: "text-green-600 dark:text-green-400",
+  },
+  {
+    icon: CheckCircle,
+    text: "Totalmente gratuito",
+    color: "text-green-600 dark:text-green-400",
+  },
+];
+
+export function Features() {
+  return (
+    <section className="py-20 bg-gray-50 dark:bg-gray-900">
+      <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 escolher o NutriScan?
+          </h2>
+          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+            Descubra todas as informações que você precisa sobre seus alimentos
+            de forma rápida, precisa e confiável.
+          </p>
+        </div>
+
+        {/* Features Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+          {features.map((feature, index) => (
+            <div
+              key={index}
+              className={`${feature.bgColor} p-8 rounded-2xl border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-all duration-300 hover:scale-105 group`}
+            >
+              <div
+                className={`${feature.iconBg} w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}
+              >
+                <feature.icon className={`w-8 h-8 ${feature.color}`} />
+              </div>
+              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+                {feature.title}
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {/* Benefits Section */}
+        <div className="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg border border-gray-200 dark:border-gray-700">
+          <div className="text-center mb-8">
+            <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+              Vantagens do NutriScan
+            </h3>
+            <p className="text-gray-600 dark:text-gray-300">
+              Tudo que você precisa para uma alimentação mais consciente
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {benefits.map((benefit, index) => (
+              <div key={index} className="flex items-center gap-3">
+                <benefit.icon
+                  className={`w-6 h-6 ${benefit.color} flex-shrink-0`}
+                />
+                <span className="text-gray-700 dark:text-gray-300 font-medium">
+                  {benefit.text}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* CTA Section */}
+        <div className="text-center mt-16">
+          <div className="bg-gradient-to-r from-blue-600 to-green-600 rounded-2xl p-8 text-white">
+            <h3 className="text-2xl font-bold mb-4">
+              Pronto para descobrir seus alimentos?
+            </h3>
+            <p className="text-blue-100 mb-6 max-w-2xl mx-auto">
+              Comece agora mesmo digitando o código de barras de qualquer
+              produto e descubra todas as informações nutricionais disponíveis.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+              <div className="text-sm text-blue-200">
+                <AlertTriangle className="w-4 h-4 inline mr-1" />
+                Dica: O código de barras está na embalagem do produto
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

app/components/landing/Hero.tsx

@@ -0,0 +1,270 @@
+"use client";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Search, ScanLine, Sparkles, Camera, Globe } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { BarcodeScanner } from "./BarcodeScanner";
+import { detectUserCountry } from "@/lib/geolocation";
+import { detectSearchType, isValidBarcode } from "@/lib/openFoodFactsApi";
+
+export function Hero() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [isScannerOpen, setIsScannerOpen] = 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();
+
+  // 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);
+        console.log("País detectado:", country.code, country.name);
+      } catch (error) {
+        console.warn("Erro ao detectar país:", error);
+        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");
+    }
+  }, [searchQuery]);
+
+  const handleSearch = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    if (!searchQuery.trim()) {
+      setError("Digite um código de barras ou 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
+      setTimeout(() => {
+        router.push(`/produto/${query}`);
+      }, 1000);
+    } else {
+      setLoading(true);
+      // Redirecionar para página de resultados
+      const countryParam = userCountry ? `&country=${userCountry}` : "";
+      setTimeout(() => {
+        router.push(
+          `/resultados?q=${encodeURIComponent(query)}${countryParam}`
+        );
+      }, 1000);
+    }
+  };
+
+  const handleScannerResult = (barcode: string) => {
+    setSearchQuery(barcode);
+    setIsScannerOpen(false);
+    // Disparar busca automaticamente
+    setTimeout(() => {
+      router.push(`/produto/${barcode}`);
+    }, 500);
+  };
+
+  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 o código de barras ou nome do produto";
+  };
+
+  const getSearchButtonText = () => {
+    if (loading) return "Buscando...";
+    if (searchType === "barcode") return "Buscar Produto";
+    if (searchType === "name") return "Buscar Produtos";
+    return "Buscar";
+  };
+
+  return (
+    <section className="relative min-h-screen 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">
+      {/* 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>
+
+      <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-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>
+
+        {/* Main Heading */}
+        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
+          Descubra tudo sobre seus{" "}
+          <span className="bg-gradient-to-r from-blue-600 to-green-600 bg-clip-text text-transparent">
+            alimentos
+          </span>
+        </h1>
+
+        {/* Subtitle */}
+        <p className="text-xl sm:text-2xl text-gray-600 dark:text-gray-300 mb-12 max-w-3xl mx-auto leading-relaxed">
+          Consulte informações nutricionais completas, ingredientes e
+          classificações de qualidade de milhares de produtos alimentícios com
+          apenas um código de barras.
+        </p>
+
+        {/* Search Form */}
+        <form onSubmit={handleSearch} className="max-w-2xl mx-auto mb-12">
+          <div className="relative">
+            <div className="flex items-center bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+              <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" />
+                ) : (
+                  <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+                )}
+                <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 placeholder:text-gray-400"
+                />
+              </div>
+
+              {/* Scanner Button (Mobile only) */}
+              <Button
+                type="button"
+                onClick={() => setIsScannerOpen(true)}
+                className="m-2 px-3 py-4 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-600 dark:text-gray-300 rounded-xl transition-all duration-200"
+                title="Escanear código de barras"
+              >
+                <Camera className="w-5 h-5" />
+              </Button>
+
+              <Button
+                type="submit"
+                disabled={loading}
+                className="m-2 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"
+              >
+                {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>
+            </div>
+          </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>
+              )}
+            </div>
+          )}
+
+          {error && (
+            <p className="text-red-500 text-sm mt-3 text-left">{error}</p>
+          )}
+        </form>
+
+        {/* Barcode Scanner Modal */}
+        <BarcodeScanner
+          isOpen={isScannerOpen}
+          onClose={() => setIsScannerOpen(false)}
+          onScan={handleScannerResult}
+        />
+
+        {/* Quick Stats */}
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-8 max-w-4xl mx-auto">
+          <div className="text-center">
+            <div className="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-2">
+              2M+
+            </div>
+            <div className="text-gray-600 dark:text-gray-400">
+              Produtos no banco
+            </div>
+          </div>
+          <div className="text-center">
+            <div className="text-3xl font-bold text-green-600 dark:text-green-400 mb-2">
+              100+
+            </div>
+            <div className="text-gray-600 dark:text-gray-400">
+              Países cobertos
+            </div>
+          </div>
+          <div className="text-center">
+            <div className="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">
+              24/7
+            </div>
+            <div className="text-gray-600 dark:text-gray-400">
+              Disponível sempre
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Scroll Indicator */}
+      <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
+        <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>
+        </div>
+      </div>
+    </section>
+  );
+}

app/components/landing/HowItWorks.tsx

@@ -0,0 +1,184 @@
+import {
+  ScanLine,
+  Search,
+  BarChart3,
+  CheckCircle,
+  ArrowRight,
+} from "lucide-react";
+
+const steps = [
+  {
+    number: "01",
+    icon: ScanLine,
+    title: "Digite o código de barras",
+    description:
+      "Encontre o código de barras na embalagem do produto e digite-o na nossa busca.",
+    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",
+  },
+  {
+    number: "02",
+    icon: Search,
+    title: "Buscamos no banco de dados",
+    description:
+      "Nossa ferramenta consulta milhões de produtos do Open Food Facts em segundos.",
+    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",
+  },
+  {
+    number: "03",
+    icon: BarChart3,
+    title: "Veja informações detalhadas",
+    description:
+      "Receba dados nutricionais completos, ingredientes e classificações de qualidade.",
+    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",
+  },
+  {
+    number: "04",
+    icon: CheckCircle,
+    title: "Faça escolhas conscientes",
+    description:
+      "Use as informações para tomar decisões mais saudáveis sobre sua alimentação.",
+    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",
+    ],
+  },
+];
+
+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">
+            Como funciona?
+          </h2>
+          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+            Em apenas 4 passos simples, você terá acesso a todas as informações
+            nutricionais de qualquer produto alimentício.
+          </p>
+        </div>
+
+        {/* Steps */}
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 mb-20">
+          {steps.map((step, index) => (
+            <div key={index} className="relative">
+              {/* Arrow (desktop only) */}
+              {index < steps.length - 1 && (
+                <div className="hidden lg:block absolute top-16 left-full w-8 h-0.5 bg-gray-300 dark:bg-gray-600 transform translate-x-4">
+                  <ArrowRight className="absolute -right-2 -top-1.5 w-3 h-3 text-gray-400" />
+                </div>
+              )}
+
+              <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>
+
+                {/* 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">
+                  {step.title}
+                </h3>
+                <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
+                  {step.description}
+                </p>
+              </div>
+            </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>
+            ))}
+          </div>
+        </div>
+
+        {/* Bottom CTA */}
+        <div className="text-center mt-16">
+          <div 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">
+            <ScanLine className="w-5 h-5" />
+            Começar agora
+          </div>
+          <p className="text-gray-500 dark:text-gray-400 text-sm mt-4">
+            É rápido, fácil e totalmente gratuito
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

app/components/landing/SearchBar.tsx

@@ -0,0 +1,164 @@
+"use client";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Search, ScanLine, AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+interface SearchBarProps {
+  variant?: "hero" | "compact" | "floating";
+  placeholder?: string;
+  className?: string;
+}
+
+export function SearchBar({
+  variant = "hero",
+  placeholder = "Digite o código de barras (ex: 7896004713588)",
+  className = "",
+}: SearchBarProps) {
+  const [barcode, setBarcode] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const validateBarcode = (code: string) => {
+    const cleanCode = code.replace(/\D/g, "");
+    return cleanCode.length >= 8 && cleanCode.length <= 13;
+  };
+
+  const handleSearch = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    if (!barcode.trim()) {
+      setError("Digite um código de barras válido");
+      return;
+    }
+
+    if (!validateBarcode(barcode)) {
+      setError("Código de barras deve ter entre 8 e 13 dígitos");
+      return;
+    }
+
+    setLoading(true);
+
+    // Simula busca (futuramente será integração com API)
+    setTimeout(() => {
+      router.push(`/produto/${barcode.trim()}`);
+    }, 1000);
+  };
+
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "compact":
+        return {
+          container: "max-w-md mx-auto",
+          input: "text-base py-3",
+          button: "px-6 py-3",
+        };
+      case "floating":
+        return {
+          container:
+            "fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50 max-w-sm w-full mx-4",
+          input: "text-sm py-3",
+          button: "px-4 py-3",
+        };
+      default: // hero
+        return {
+          container: "max-w-2xl mx-auto",
+          input: "text-lg py-4",
+          button: "px-8 py-4",
+        };
+    }
+  };
+
+  const styles = getVariantStyles();
+
+  if (variant === "floating") {
+    return (
+      <div className={`${styles.container} ${className}`}>
+        <form onSubmit={handleSearch} className="relative">
+          <div className="flex items-center bg-white dark:bg-gray-800 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+            <div className="flex-1 relative">
+              <ScanLine className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+              <Input
+                type="text"
+                placeholder={placeholder}
+                value={barcode}
+                onChange={(e) => setBarcode(e.target.value)}
+                className={`pl-12 pr-4 ${styles.input} border-0 bg-transparent focus:ring-0 placeholder:text-gray-400`}
+              />
+            </div>
+            <Button
+              type="submit"
+              disabled={loading}
+              className={`m-2 ${styles.button} 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`}
+            >
+              {loading ? (
+                <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+              ) : (
+                <Search className="w-5 h-5" />
+              )}
+            </Button>
+          </div>
+
+          {error && (
+            <div className="absolute top-full left-0 right-0 mt-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl shadow-lg">
+              <div className="flex items-center gap-2 text-red-600 dark:text-red-400 text-sm">
+                <AlertCircle className="w-4 h-4 flex-shrink-0" />
+                {error}
+              </div>
+            </div>
+          )}
+        </form>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${styles.container} ${className}`}>
+      <form onSubmit={handleSearch}>
+        <div className="relative">
+          <div className="flex items-center bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+            <div className="flex-1 relative">
+              <ScanLine className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+              <Input
+                type="text"
+                placeholder={placeholder}
+                value={barcode}
+                onChange={(e) => setBarcode(e.target.value)}
+                className={`pl-12 pr-4 ${styles.input} border-0 bg-transparent focus:ring-0 placeholder:text-gray-400`}
+              />
+            </div>
+            <Button
+              type="submit"
+              disabled={loading}
+              className={`m-2 ${styles.button} 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`}
+            >
+              {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" />
+                  Buscar
+                </div>
+              )}
+            </Button>
+          </div>
+        </div>
+
+        {error && (
+          <div className="mt-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl">
+            <div className="flex items-center gap-2 text-red-600 dark:text-red-400 text-sm">
+              <AlertCircle className="w-4 h-4 flex-shrink-0" />
+              {error}
+            </div>
+          </div>
+        )}
+      </form>
+    </div>
+  );
+}