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

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "WillLuke.nextjs.addTypesOnSave": true,
+  "WillLuke.nextjs.hasPrompted": true
+}

app/api/location/route.ts

@@ -0,0 +1,97 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(request: NextRequest) {
+  try {
+    let ip: string | null = null;
+
+    // 1. Tentar obter IP dos headers (produção com proxy/CDN)
+    const forwarded = request.headers.get("x-forwarded-for");
+    const realIp = request.headers.get("x-real-ip");
+
+    if (forwarded) {
+      ip = forwarded.split(",")[0].trim();
+    } else if (realIp) {
+      ip = realIp;
+    }
+
+    // 2. Se não conseguiu IP dos headers (localhost), usar serviço externo
+    if (
+      !ip ||
+      ip === "::1" ||
+      ip === "127.0.0.1" ||
+      ip.startsWith("192.168.") ||
+      ip.startsWith("10.")
+    ) {
+      console.log(
+        "IP local detectado, obtendo IP público via api.ipify.org..."
+      );
+
+      try {
+        const ipifyResponse = await fetch("https://api.ipify.org?format=json", {
+          headers: {
+            "User-Agent": "NutriScan/1.0 (https://nutriscan.com.br)",
+          },
+        });
+
+        if (ipifyResponse.ok) {
+          const ipifyData = await ipifyResponse.json();
+          ip = ipifyData.ip;
+          console.log(`IP público obtido: ${ip}`);
+        }
+      } catch (ipifyError) {
+        console.warn("Erro ao obter IP via ipify:", ipifyError);
+      }
+    }
+
+    // 3. Se ainda não tem IP, usar fallback
+    if (!ip) {
+      console.warn("Não foi possível detectar IP, usando fallback");
+      return NextResponse.json({
+        country: "Brazil",
+        countryCode: "br",
+      });
+    }
+
+    console.log(`Detectando localização para IP: ${ip}`);
+
+    // 4. Consultar API de geolocalização ip-api.com
+    const response = await fetch(
+      `http://ip-api.com/json/${ip}?fields=status,country,countryCode`,
+      {
+        headers: {
+          "User-Agent": "NutriScan/1.0 (https://nutriscan.com.br)",
+        },
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error(`IP API returned ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    // 5. Verificar se a API retornou sucesso
+    if (data.status === "fail") {
+      console.warn("IP API failed, using fallback");
+      return NextResponse.json({
+        country: "Brazil",
+        countryCode: "br",
+      });
+    }
+
+    console.log(`País detectado: ${data.country} (${data.countryCode})`);
+
+    return NextResponse.json({
+      country: data.country,
+      countryCode: data.countryCode.toLowerCase(),
+    });
+  } catch (error) {
+    console.error("Erro ao detectar localização:", error);
+
+    // Fallback para Brasil em caso de erro
+    return NextResponse.json({
+      country: "Brazil",
+      countryCode: "br",
+    });
+  }
+}

app/api/products/[barcode]/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const USER_AGENT = "NutriScan/1.0 (https://nutriscan.com.br)";
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { barcode: string } }
+) {
+  const { barcode } = params;
+
+  // Validar código de barras
+  const cleanBarcode = barcode.replace(/\D/g, "");
+  if (cleanBarcode.length < 8 || cleanBarcode.length > 13) {
+    return NextResponse.json(
+      { error: "Código de barras inválido" },
+      { status: 400 }
+    );
+  }
+
+  try {
+    const response = await fetch(
+      `https://world.openfoodfacts.org/api/v2/product/${cleanBarcode}.json`,
+      {
+        headers: {
+          "User-Agent": USER_AGENT,
+          Accept: "application/json",
+        },
+      }
+    );
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: "Produto não encontrado" },
+        { status: 404 }
+      );
+    }
+
+    const data = await response.json();
+
+    if (data.status === 0) {
+      return NextResponse.json(
+        { error: "Produto não encontrado" },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json(data.product);
+  } catch (error) {
+    console.error("Erro ao buscar produto:", error);
+    return NextResponse.json(
+      { error: "Erro ao buscar produto" },
+      { status: 500 }
+    );
+  }
+}

app/api/search/route.ts

@@ -0,0 +1,209 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const USER_AGENT = "NutriScan/1.0 (https://nutriscan.com.br)";
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const query = searchParams.get("q");
+  const country = searchParams.get("country");
+  const page = searchParams.get("page") || "1";
+  const pageSize = searchParams.get("page_size") || "20";
+
+  if (!query) {
+    return NextResponse.json(
+      { error: "Query parameter is required" },
+      { status: 400 }
+    );
+  }
+
+  // Validar parâmetros
+  const pageNum = parseInt(page);
+  const pageSizeNum = parseInt(pageSize);
+
+  if (isNaN(pageNum) || pageNum < 1) {
+    return NextResponse.json(
+      { error: "Invalid page parameter" },
+      { status: 400 }
+    );
+  }
+
+  if (isNaN(pageSizeNum) || pageSizeNum < 1 || pageSizeNum > 50) {
+    return NextResponse.json(
+      { error: "Invalid page_size parameter (max 50)" },
+      { status: 400 }
+    );
+  }
+
+  const params = new URLSearchParams({
+    search_terms: query,
+    page_size: pageSize,
+    page: page,
+    json: "true",
+    fields: [
+      "code",
+      "product_name",
+      "brands",
+      "categories",
+      "ingredients_text",
+      "nutriments",
+      "nutrition_grades",
+      "nova_group",
+      "image_url",
+      "image_small_url",
+      "image_front_url",
+      "image_front_small_url",
+      "countries",
+      "countries_tags",
+      "allergens_tags",
+      "additives_tags",
+    ].join(","),
+  });
+
+  // Filtros básicos
+  if (country) {
+    params.append("countries_tags_en", country);
+  }
+
+  // Filtros de classificação nutricional
+  const nutritionGrades = searchParams.get("nutrition_grades");
+  if (nutritionGrades) {
+    params.append("nutrition_grades_tags", nutritionGrades);
+  }
+
+  const novaGroups = searchParams.get("nova_groups");
+  if (novaGroups) {
+    params.append("nova_groups", novaGroups);
+  }
+
+  // Filtros de categoria e marca
+  const categories = searchParams.get("categories");
+  if (categories) {
+    params.append("categories_tags", categories);
+  }
+
+  const brands = searchParams.get("brands");
+  if (brands) {
+    params.append("brands", brands);
+  }
+
+  // Filtros de alérgenos
+  const allergens = searchParams.get("allergens");
+  if (allergens) {
+    params.append("allergens_tags", allergens);
+  }
+
+  const excludeAllergens = searchParams.get("exclude_allergens");
+  if (excludeAllergens) {
+    params.append("exclude_allergens_tags", excludeAllergens);
+  }
+
+  // Filtros de aditivos
+  const additives = searchParams.get("additives");
+  if (additives) {
+    params.append("additives_tags", additives);
+  }
+
+  const excludeAdditives = searchParams.get("exclude_additives");
+  if (excludeAdditives) {
+    params.append("exclude_additives_tags", excludeAdditives);
+  }
+
+  const noAdditives = searchParams.get("no_additives");
+  if (noAdditives === "true") {
+    params.append("additives_tags", "without-additives");
+  }
+
+  // Filtros de países
+  const countries = searchParams.get("countries");
+  if (countries) {
+    params.append("countries_tags", countries);
+  }
+
+  // Filtros nutricionais (valores por 100g)
+  const nutritionFilters = [
+    "energy_min",
+    "energy_max",
+    "fat_min",
+    "fat_max",
+    "carbohydrates_min",
+    "carbohydrates_max",
+    "proteins_min",
+    "proteins_max",
+    "sugars_min",
+    "sugars_max",
+    "fiber_min",
+    "fiber_max",
+    "sodium_min",
+    "sodium_max",
+  ];
+
+  nutritionFilters.forEach((filter) => {
+    const value = searchParams.get(filter);
+    if (value) {
+      params.append(filter, value);
+    }
+  });
+
+  // Ordenação
+  const sortBy = searchParams.get("sort_by");
+  const sortOrder = searchParams.get("sort_order") || "asc";
+
+  if (sortBy) {
+    let sortField = "";
+    switch (sortBy) {
+      case "nutrition_grade":
+        sortField = "nutrition_grades";
+        break;
+      case "name":
+        sortField = "product_name";
+        break;
+      case "brand":
+        sortField = "brands";
+        break;
+      case "energy":
+        sortField = "nutriments.energy_100g";
+        break;
+      case "fat":
+        sortField = "nutriments.fat_100g";
+        break;
+      case "sugars":
+        sortField = "nutriments.sugars_100g";
+        break;
+      default:
+        sortField = "popularity";
+    }
+
+    if (sortField) {
+      params.append("sort_by", sortField);
+      params.append("sort_order", sortOrder);
+    }
+  }
+
+  try {
+    const response = await fetch(
+      `https://world.openfoodfacts.org/cgi/search.pl?${params.toString()}`,
+      {
+        headers: {
+          "User-Agent": USER_AGENT,
+          Accept: "application/json",
+        },
+      }
+    );
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: "Erro ao buscar produtos" },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error("Erro ao buscar produtos:", error);
+    return NextResponse.json(
+      { error: "Erro ao buscar produtos" },
+      { status: 500 }
+    );
+  }
+}

app/components/FilterBadge.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { X } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+interface FilterBadgeProps {
+  label: string;
+  onRemove: () => void;
+  variant?: "default" | "secondary" | "destructive" | "outline";
+  color?: string;
+}
+
+export function FilterBadge({
+  label,
+  onRemove,
+  variant = "secondary",
+  color,
+}: FilterBadgeProps) {
+  return (
+    <Badge
+      variant={variant}
+      className={`flex items-center gap-1.5 px-2 py-1 text-xs font-medium ${
+        color ? color : ""
+      }`}
+    >
+      <span>{label}</span>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-4 w-4 p-0 hover:bg-transparent"
+        onClick={onRemove}
+      >
+        <X className="h-3 w-3" />
+      </Button>
+    </Badge>
+  );
+}
+
+interface FilterBadgesProps {
+  filters: Record<string, unknown>;
+  onRemoveFilter: (key: string, value?: string) => void;
+  onClearAll: () => void;
+}
+
+export function FilterBadges({
+  filters,
+  onRemoveFilter,
+  onClearAll,
+}: FilterBadgesProps) {
+  const activeFilters = Object.entries(filters).filter(([, value]) => {
+    if (Array.isArray(value)) {
+      return value.length > 0;
+    }
+    if (typeof value === "object" && value !== null) {
+      return Object.values(value).some((v) => v !== undefined && v !== null);
+    }
+    return value !== undefined && value !== null && value !== "";
+  });
+
+  if (activeFilters.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+      <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+        Filtros ativos:
+      </span>
+
+      <div className="flex flex-wrap gap-2">
+        {activeFilters.map(([key, value]) => {
+          if (Array.isArray(value)) {
+            return value.map((item, index) => (
+              <FilterBadge
+                key={`${key}-${index}`}
+                label={getFilterLabel(key, item)}
+                onRemove={() => onRemoveFilter(key, item)}
+                color={getFilterColor(key, item)}
+              />
+            ));
+          }
+
+          if (typeof value === "object" && value !== null) {
+            return Object.entries(value)
+              .map(([rangeKey, rangeValue]) => {
+                const range = rangeValue as { min?: number; max?: number };
+                if (range?.min !== undefined || range?.max !== undefined) {
+                  return (
+                    <FilterBadge
+                      key={`${key}-${rangeKey}`}
+                      label={`${rangeKey}: ${range.min || 0}-${
+                        range.max || "∞"
+                      }`}
+                      onRemove={() => onRemoveFilter(key, rangeKey)}
+                    />
+                  );
+                }
+                return null;
+              })
+              .filter(Boolean);
+          }
+
+          return (
+            <FilterBadge
+              key={key}
+              label={getFilterLabel(key, value)}
+              onRemove={() => onRemoveFilter(key)}
+              color={getFilterColor(key, value)}
+            />
+          );
+        })}
+      </div>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={onClearAll}
+        className="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+      >
+        Limpar tudo
+      </Button>
+    </div>
+  );
+}
+
+function getFilterLabel(key: string, value: unknown): string {
+  const labels: Record<string, (v: unknown) => string> = {
+    nutrition_grades: (v) => `Nutri-Score ${String(v).toUpperCase()}`,
+    nova_groups: (v) => `NOVA ${v}`,
+    categories: (v) => String(v),
+    brands: (v) => String(v),
+    allergens: (v) => `Alérgeno: ${v}`,
+    exclude_allergens: (v) => `Sem: ${v}`,
+    additives: (v) => `Aditivo: ${v}`,
+    exclude_additives: (v) => `Sem aditivo: ${v}`,
+    no_additives: () => "Sem aditivos",
+    countries: (v) => String(v),
+    sort_by: (v) => `Ordenar por: ${v}`,
+    sort_order: (v) => (v === "asc" ? "Crescente" : "Decrescente"),
+  };
+
+  return labels[key] ? labels[key](value) : `${key}: ${value}`;
+}
+
+function getFilterColor(key: string, value: unknown): string {
+  if (key === "nutrition_grades") {
+    const colors: Record<string, string> = {
+      a: "bg-green-100 text-green-800 border-green-200",
+      b: "bg-green-100 text-green-800 border-green-200",
+      c: "bg-yellow-100 text-yellow-800 border-yellow-200",
+      d: "bg-orange-100 text-orange-800 border-orange-200",
+      e: "bg-red-100 text-red-800 border-red-200",
+    };
+    return colors[String(value)] || "";
+  }
+
+  if (key === "nova_groups") {
+    const colors: Record<string, string> = {
+      1: "bg-green-100 text-green-800 border-green-200",
+      2: "bg-yellow-100 text-yellow-800 border-yellow-200",
+      3: "bg-orange-100 text-orange-800 border-orange-200",
+      4: "bg-red-100 text-red-800 border-red-200",
+    };
+    return colors[String(value)] || "";
+  }
+
+  if (key === "allergens" || key === "exclude_allergens") {
+    return "bg-yellow-100 text-yellow-800 border-yellow-200";
+  }
+
+  if (
+    key === "additives" ||
+    key === "exclude_additives" ||
+    key === "no_additives"
+  ) {
+    return "bg-blue-100 text-blue-800 border-blue-200";
+  }
+
+  return "";
+}

app/components/FilterSidebar.tsx

@@ -0,0 +1,508 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Search, Filter, X, AlertTriangle, Zap } from "lucide-react";
+import * as LucideIcons from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Switch } from "@/components/ui/switch";
+import { Slider } from "@/components/ui/slider";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import {
+  ProductFilters,
+  NUTRITION_GRADES,
+  NOVA_GROUPS,
+  POPULAR_CATEGORIES,
+  POPULAR_CATEGORIES_WITH_ICONS,
+  COMMON_ALLERGENS,
+  COMMON_ADDITIVES,
+} from "@/lib/types";
+
+interface FilterSidebarProps {
+  filters: ProductFilters;
+  onFiltersChange: (filters: ProductFilters) => void;
+  onClearFilters: () => void;
+  isLoading?: boolean;
+  totalResults?: number;
+  className?: string;
+}
+
+export function FilterSidebar({
+  filters,
+  onFiltersChange,
+  onClearFilters,
+  isLoading = false,
+  totalResults = 0,
+  className = "",
+}: FilterSidebarProps) {
+  const [searchBrands, setSearchBrands] = useState("");
+  const [searchCategories, setSearchCategories] = useState("");
+  const [searchAllergens, setSearchAllergens] = useState("");
+
+  const updateFilter = (key: keyof ProductFilters, value: any) => {
+    onFiltersChange({ ...filters, [key]: value });
+  };
+
+  const updateArrayFilter = (
+    key: keyof ProductFilters,
+    value: string,
+    checked: boolean
+  ) => {
+    const currentArray = (filters[key] as string[]) || [];
+    const newArray = checked
+      ? [...currentArray, value]
+      : currentArray.filter((item) => item !== value);
+    updateFilter(key, newArray);
+  };
+
+  const updateNutritionRange = (
+    nutrient: string,
+    type: "min" | "max",
+    value: number
+  ) => {
+    const currentRanges = filters.nutritionRanges || {};
+    const currentRange =
+      currentRanges[nutrient as keyof typeof currentRanges] || {};
+
+    updateFilter("nutritionRanges", {
+      ...currentRanges,
+      [nutrient]: {
+        ...currentRange,
+        [type]: value,
+      },
+    });
+  };
+
+  const hasActiveFilters = Object.values(filters).some((value) => {
+    if (Array.isArray(value)) return value.length > 0;
+    if (typeof value === "object" && value !== null) {
+      return Object.values(value).some((v) => v !== undefined && v !== null);
+    }
+    return value !== undefined && value !== null && value !== "";
+  });
+
+  return (
+    <div className={`w-full max-w-sm space-y-6 ${className}`}>
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Filter className="h-5 w-5 text-primary" />
+          <h3 className="text-lg font-semibold">Filtros</h3>
+        </div>
+        {hasActiveFilters && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClearFilters}
+            className="text-xs text-muted-foreground hover:text-foreground"
+          >
+            <X className="h-4 w-4 mr-1" />
+            Limpar
+          </Button>
+        )}
+      </div>
+
+      {/* Resultados */}
+      {totalResults > 0 && (
+        <div className="text-sm text-muted-foreground">
+          {totalResults.toLocaleString()} produto{totalResults !== 1 ? "s" : ""}{" "}
+          encontrado{totalResults !== 1 ? "s" : ""}
+        </div>
+      )}
+
+      <Accordion
+        type="multiple"
+        defaultValue={["nutrition", "categories"]}
+        className="space-y-4"
+      >
+        {/* Nutri-Score */}
+        <AccordionItem
+          value="nutrition"
+          className="border border-gray-100 dark:border-gray-800 rounded-lg"
+        >
+          <AccordionTrigger className="px-4 py-3 hover:no-underline">
+            <div className="flex items-center gap-2">
+              <Zap className="h-4 w-4 text-green-500" />
+              <span className="font-medium">Classificação Nutricional</span>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-4 pb-4">
+            <div className="space-y-3">
+              <div className="text-sm font-medium mb-3">Nutri-Score</div>
+              <div className="space-y-2">
+                {NUTRITION_GRADES.map((grade) => (
+                  <div
+                    key={grade.grade}
+                    className="flex items-center space-x-3"
+                  >
+                    <Checkbox
+                      id={`nutrition-${grade.grade}`}
+                      checked={
+                        filters.nutritionGrades?.includes(grade.grade) || false
+                      }
+                      onCheckedChange={(checked) =>
+                        updateArrayFilter(
+                          "nutritionGrades",
+                          grade.grade,
+                          checked as boolean
+                        )
+                      }
+                    />
+                    <label
+                      htmlFor={`nutrition-${grade.grade}`}
+                      className="flex items-center gap-2 text-sm cursor-pointer"
+                    >
+                      <Badge className={`${grade.color} text-white text-xs`}>
+                        {grade.label}
+                      </Badge>
+                      <span className="text-muted-foreground">
+                        {grade.description}
+                      </span>
+                    </label>
+                  </div>
+                ))}
+              </div>
+
+              <Separator className="my-4" />
+
+              <div className="text-sm font-medium mb-3">
+                NOVA (Processamento)
+              </div>
+              <RadioGroup
+                value={filters.novaGroups?.[0]?.toString() || ""}
+                onValueChange={(value) =>
+                  updateFilter(
+                    "novaGroups",
+                    value ? [parseInt(value) as 1 | 2 | 3 | 4] : []
+                  )
+                }
+                className="space-y-2"
+              >
+                {NOVA_GROUPS.map((group) => (
+                  <div
+                    key={group.group}
+                    className="flex items-center space-x-3"
+                  >
+                    <RadioGroupItem
+                      value={group.group.toString()}
+                      id={`nova-${group.group}`}
+                    />
+                    <label
+                      htmlFor={`nova-${group.group}`}
+                      className="flex items-center gap-2 text-sm cursor-pointer flex-1"
+                    >
+                      <Badge className={`${group.color} text-white text-xs`}>
+                        {group.label}
+                      </Badge>
+                      <span className="text-muted-foreground text-xs">
+                        {group.description}
+                      </span>
+                    </label>
+                  </div>
+                ))}
+              </RadioGroup>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* Categorias */}
+        <AccordionItem
+          value="categories"
+          className="border border-gray-100 dark:border-gray-800 rounded-lg"
+        >
+          <AccordionTrigger className="px-4 py-3 hover:no-underline">
+            <div className="flex items-center gap-2">
+              <div className="h-4 w-4 rounded bg-blue-500" />
+              <span className="font-medium">Categorias</span>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-4 pb-4">
+            <div className="space-y-3">
+              <Input
+                placeholder="Buscar categorias..."
+                value={searchCategories}
+                onChange={(e) => setSearchCategories(e.target.value)}
+                className="h-8"
+              />
+              <div className="space-y-2 max-h-48 overflow-y-auto">
+                {POPULAR_CATEGORIES_WITH_ICONS.filter(
+                  (cat) =>
+                    cat.label
+                      .toLowerCase()
+                      .includes(searchCategories.toLowerCase()) ||
+                    cat.value
+                      .toLowerCase()
+                      .includes(searchCategories.toLowerCase())
+                ).map((category) => {
+                  const IconComponent =
+                    LucideIcons[category.icon as keyof typeof LucideIcons];
+                  return (
+                    <div
+                      key={category.value}
+                      className="flex items-center space-x-3"
+                    >
+                      <Checkbox
+                        id={`category-${category.value}`}
+                        checked={
+                          filters.categories?.includes(category.value) || false
+                        }
+                        onCheckedChange={(checked) =>
+                          updateArrayFilter(
+                            "categories",
+                            category.value,
+                            checked as boolean
+                          )
+                        }
+                      />
+                      <label
+                        htmlFor={`category-${category.value}`}
+                        className="text-sm cursor-pointer flex items-center gap-2"
+                      >
+                        {IconComponent && (
+                          <IconComponent className="w-4 h-4 text-gray-500" />
+                        )}
+                        {category.label}
+                      </label>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* Marcas */}
+        <AccordionItem
+          value="brands"
+          className="border border-gray-100 dark:border-gray-800 rounded-lg"
+        >
+          <AccordionTrigger className="px-4 py-3 hover:no-underline">
+            <div className="flex items-center gap-2">
+              <div className="h-4 w-4 rounded bg-purple-500" />
+              <span className="font-medium">Marcas</span>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-4 pb-4">
+            <div className="space-y-3">
+              <Input
+                placeholder="Buscar marcas..."
+                value={searchBrands}
+                onChange={(e) => setSearchBrands(e.target.value)}
+                className="h-8"
+              />
+              <div className="text-xs text-muted-foreground">
+                Digite o nome da marca para buscar
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* Alérgenos */}
+        <AccordionItem
+          value="allergens"
+          className="border border-gray-100 dark:border-gray-800 rounded-lg"
+        >
+          <AccordionTrigger className="px-4 py-3 hover:no-underline">
+            <div className="flex items-center gap-2">
+              <AlertTriangle className="h-4 w-4 text-yellow-500" />
+              <span className="font-medium">Alérgenos</span>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-4 pb-4">
+            <div className="space-y-3">
+              <Input
+                placeholder="Buscar alérgenos..."
+                value={searchAllergens}
+                onChange={(e) => setSearchAllergens(e.target.value)}
+                className="h-8"
+              />
+              <div className="space-y-2 max-h-48 overflow-y-auto">
+                {COMMON_ALLERGENS.filter((allergen) =>
+                  allergen.toLowerCase().includes(searchAllergens.toLowerCase())
+                ).map((allergen) => (
+                  <div key={allergen} className="flex items-center space-x-3">
+                    <Checkbox
+                      id={`allergen-${allergen}`}
+                      checked={filters.allergens?.includes(allergen) || false}
+                      onCheckedChange={(checked) =>
+                        updateArrayFilter(
+                          "allergens",
+                          allergen,
+                          checked as boolean
+                        )
+                      }
+                    />
+                    <label
+                      htmlFor={`allergen-${allergen}`}
+                      className="text-sm cursor-pointer capitalize"
+                    >
+                      {allergen}
+                    </label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* Aditivos */}
+        <AccordionItem
+          value="additives"
+          className="border border-gray-100 dark:border-gray-800 rounded-lg"
+        >
+          <AccordionTrigger className="px-4 py-3 hover:no-underline">
+            <div className="flex items-center gap-2">
+              <div className="h-4 w-4 rounded bg-orange-500" />
+              <span className="font-medium">Aditivos</span>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-4 pb-4">
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <label htmlFor="no-additives" className="text-sm font-medium">
+                  Sem aditivos
+                </label>
+                <Switch
+                  id="no-additives"
+                  checked={filters.noAdditives || false}
+                  onCheckedChange={(checked) =>
+                    updateFilter("noAdditives", checked)
+                  }
+                />
+              </div>
+
+              <div className="text-xs text-muted-foreground">
+                Mostrar apenas produtos sem aditivos
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* Valores Nutricionais */}
+        <AccordionItem
+          value="nutrition-values"
+          className="border border-gray-100 dark:border-gray-800 rounded-lg"
+        >
+          <AccordionTrigger className="px-4 py-3 hover:no-underline">
+            <div className="flex items-center gap-2">
+              <div className="h-4 w-4 rounded bg-green-500" />
+              <span className="font-medium">Valores Nutricionais</span>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-4 pb-4">
+            <div className="space-y-4">
+              {/* Energia */}
+              <div className="space-y-2">
+                <label className="text-sm font-medium">
+                  Energia (kcal/100g)
+                </label>
+                <div className="px-3">
+                  <Slider
+                    value={[
+                      filters.nutritionRanges?.energy?.min || 0,
+                      filters.nutritionRanges?.energy?.max || 500,
+                    ]}
+                    onValueChange={([min, max]) => {
+                      updateNutritionRange("energy", "min", min);
+                      updateNutritionRange("energy", "max", max);
+                    }}
+                    max={500}
+                    step={10}
+                    className="w-full"
+                  />
+                  <div className="flex justify-between text-xs text-muted-foreground mt-1">
+                    <span>
+                      {filters.nutritionRanges?.energy?.min || 0} kcal
+                    </span>
+                    <span>
+                      {filters.nutritionRanges?.energy?.max || 500} kcal
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Açúcares */}
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Açúcares (g/100g)</label>
+                <div className="px-3">
+                  <Slider
+                    value={[
+                      filters.nutritionRanges?.sugars?.min || 0,
+                      filters.nutritionRanges?.sugars?.max || 50,
+                    ]}
+                    onValueChange={([min, max]) => {
+                      updateNutritionRange("sugars", "min", min);
+                      updateNutritionRange("sugars", "max", max);
+                    }}
+                    max={50}
+                    step={1}
+                    className="w-full"
+                  />
+                  <div className="flex justify-between text-xs text-muted-foreground mt-1">
+                    <span>{filters.nutritionRanges?.sugars?.min || 0}g</span>
+                    <span>{filters.nutritionRanges?.sugars?.max || 50}g</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Sódio */}
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Sódio (g/100g)</label>
+                <div className="px-3">
+                  <Slider
+                    value={[
+                      filters.nutritionRanges?.sodium?.min || 0,
+                      filters.nutritionRanges?.sodium?.max || 3,
+                    ]}
+                    onValueChange={([min, max]) => {
+                      updateNutritionRange("sodium", "min", min);
+                      updateNutritionRange("sodium", "max", max);
+                    }}
+                    max={3}
+                    step={0.1}
+                    className="w-full"
+                  />
+                  <div className="flex justify-between text-xs text-muted-foreground mt-1">
+                    <span>{filters.nutritionRanges?.sodium?.min || 0}g</span>
+                    <span>{filters.nutritionRanges?.sodium?.max || 3}g</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+
+      {/* Botões de ação */}
+      <div className="flex gap-2 pt-4 border-t border-gray-100 dark:border-gray-800">
+        <Button
+          onClick={onClearFilters}
+          variant="outline"
+          className="flex-1"
+          disabled={!hasActiveFilters}
+        >
+          Limpar Filtros
+        </Button>
+        <Button
+          onClick={() => {
+            /* Aplicar filtros é automático */
+          }}
+          className="flex-1"
+          disabled={isLoading}
+        >
+          {isLoading ? "Aplicando..." : "Aplicar"}
+        </Button>
+      </div>
+    </div>
+  );
+}

app/components/Footer.tsx

@@ -1,34 +1,150 @@
-import Link from "next/link";
+import {
+  ScanLine,
+  ExternalLink,
+  Github,
+  Heart,
+  Globe,
+  Shield,
+} from "lucide-react";
 
 export function Footer() {
   return (
-    <footer className="mt-16 pb-6 text-center">
-      <Link 
-        href="https://evandro.dev.br"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="inline-flex items-center gap-2 px-4 py-2 rounded-full 
-          bg-gradient-to-r from-slate-900 to-slate-700 
-          dark:from-slate-200 dark:to-slate-400 
-          text-white dark:text-slate-900 
-          hover:shadow-lg transition-all duration-300 
-          transform hover:scale-105 hover:-translate-y-0.5"
-      >
-        <span className="font-medium tracking-wide">evandro.dev.br</span>
-        <svg 
-          className="w-4 h-4 transform transition-transform group-hover:translate-x-1" 
-          fill="none" 
-          stroke="currentColor" 
-          viewBox="0 0 24 24"
-        >
-          <path 
-            strokeLinecap="round" 
-            strokeLinejoin="round" 
-            strokeWidth={2} 
-            d="M14 5l7 7m0 0l-7 7m7-7H3" 
-          />
-        </svg>
-      </Link>
+    <footer className="bg-gray-900 dark:bg-black text-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          {/* Brand */}
+          <div className="md:col-span-1">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="w-10 h-10 bg-gradient-to-r from-blue-600 to-green-600 rounded-xl flex items-center justify-center">
+                <ScanLine className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <h3 className="text-xl font-bold">NutriScan</h3>
+                <p className="text-sm text-gray-400">
+                  Informações nutricionais
+                </p>
+              </div>
+            </div>
+            <p className="text-gray-400 text-sm leading-relaxed mb-6">
+              Descubra informações nutricionais completas de milhares de
+              produtos alimentícios com apenas um código de barras.
+            </p>
+            <div className="flex items-center gap-2 text-sm text-gray-400">
+              <Heart className="w-4 h-4 text-red-500" />
+              <span>Feito com amor para uma alimentação mais consciente</span>
+            </div>
+          </div>
+
+          {/* Links */}
+          <div>
+            <h4 className="text-lg font-semibold mb-4">Navegação</h4>
+            <ul className="space-y-3">
+              <li>
+                <a
+                  href="#como-funciona"
+                  className="text-gray-400 hover:text-white transition-colors"
+                >
+                  Como funciona
+                </a>
+              </li>
+              <li>
+                <a
+                  href="#recursos"
+                  className="text-gray-400 hover:text-white transition-colors"
+                >
+                  Recursos
+                </a>
+              </li>
+              <li>
+                <a
+                  href="#sobre"
+                  className="text-gray-400 hover:text-white transition-colors"
+                >
+                  Sobre
+                </a>
+              </li>
+              <li>
+                <a
+                  href="/produto/exemplo"
+                  className="text-gray-400 hover:text-white transition-colors"
+                >
+                  Exemplo de produto
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          {/* Recursos */}
+          <div>
+            <h4 className="text-lg font-semibold mb-4">Recursos</h4>
+            <ul className="space-y-3">
+              <li className="flex items-center gap-2 text-gray-400">
+                <Shield className="w-4 h-4" />
+                <span>Dados verificados</span>
+              </li>
+              <li className="flex items-center gap-2 text-gray-400">
+                <Globe className="w-4 h-4" />
+                <span>Banco global</span>
+              </li>
+              <li className="flex items-center gap-2 text-gray-400">
+                <ScanLine className="w-4 h-4" />
+                <span>Busca por código</span>
+              </li>
+              <li className="text-gray-400">
+                <span>Nutri-Score & NOVA</span>
+              </li>
+            </ul>
+          </div>
+
+          {/* Open Food Facts */}
+          <div>
+            <h4 className="text-lg font-semibold mb-4">Fonte de Dados</h4>
+            <div className="bg-gray-800 rounded-lg p-4 mb-4">
+              <div className="flex items-center gap-2 mb-2">
+                <ExternalLink className="w-4 h-4 text-blue-400" />
+                <span className="font-medium">Fonte de Dados</span>
+              </div>
+              <p className="text-sm text-gray-400 mb-3">
+                Dados fornecidos pelo Open Food Facts - a maior base de dados
+                colaborativa de produtos alimentícios do mundo.
+              </p>
+              <a
+                href="https://world.openfoodfacts.org"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-400 hover:text-blue-300 text-sm transition-colors"
+              >
+                Visitar Open Food Facts →
+              </a>
+            </div>
+
+            <div className="flex items-center gap-2 text-sm text-gray-400">
+              <Github className="w-4 h-4" />
+              <span>Código aberto</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom */}
+        <div className="border-t border-gray-800 mt-12 pt-8">
+          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+            <div className="text-sm text-gray-400">
+              © 2024 NutriScan. Todos os direitos reservados.
+            </div>
+            <div className="flex items-center gap-6 text-sm text-gray-400">
+              <a href="#" className="hover:text-white transition-colors">
+                Privacidade
+              </a>
+              <a href="#" className="hover:text-white transition-colors">
+                Termos
+              </a>
+              <a href="#" className="hover:text-white transition-colors">
+                Contato
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
     </footer>
   );
-}
+}

app/components/NutritionChart.tsx

@@ -0,0 +1,299 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+interface NutritionData {
+  energy?: number;
+  fat?: number;
+  carbohydrates?: number;
+  proteins?: number;
+  sugars?: number;
+  fiber?: number;
+  sodium?: number;
+}
+
+interface NutritionChartProps {
+  data: NutritionData;
+  className?: string;
+}
+
+export function NutritionChart({ data, className = "" }: NutritionChartProps) {
+  const nutritionItems = [
+    {
+      key: "energy",
+      label: "Energia",
+      value: data.energy,
+      unit: "kcal",
+      color: "bg-orange-500",
+      maxValue: 500,
+    },
+    {
+      key: "fat",
+      label: "Gorduras",
+      value: data.fat,
+      unit: "g",
+      color: "bg-red-500",
+      maxValue: 30,
+    },
+    {
+      key: "carbohydrates",
+      label: "Carboidratos",
+      value: data.carbohydrates,
+      unit: "g",
+      color: "bg-blue-500",
+      maxValue: 60,
+    },
+    {
+      key: "proteins",
+      label: "Proteínas",
+      value: data.proteins,
+      unit: "g",
+      color: "bg-green-500",
+      maxValue: 25,
+    },
+    {
+      key: "sugars",
+      label: "Açúcares",
+      value: data.sugars,
+      unit: "g",
+      color: "bg-pink-500",
+      maxValue: 25,
+    },
+    {
+      key: "fiber",
+      label: "Fibras",
+      value: data.fiber,
+      unit: "g",
+      color: "bg-purple-500",
+      maxValue: 10,
+    },
+    {
+      key: "sodium",
+      label: "Sódio",
+      value: data.sodium,
+      unit: "mg",
+      color: "bg-yellow-500",
+      maxValue: 2,
+    },
+  ];
+
+  const getBarWidth = (value: number, maxValue: number) => {
+    const percentage = Math.min((value / maxValue) * 100, 100);
+    return `${percentage}%`;
+  };
+
+  const getBarColor = (value: number, maxValue: number, color: string) => {
+    const percentage = (value / maxValue) * 100;
+    if (percentage > 80) return "bg-red-500";
+    if (percentage > 60) return "bg-orange-500";
+    if (percentage > 40) return "bg-yellow-500";
+    return color;
+  };
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="text-lg font-semibold">
+          Informação Nutricional (por 100g)
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {nutritionItems.map((item) => {
+          if (item.value === undefined || item.value === null) {
+            return (
+              <div key={item.key} className="flex items-center justify-between">
+                <span className="text-sm font-medium text-muted-foreground">
+                  {item.label}
+                </span>
+                <Badge variant="outline" className="text-xs">
+                  N/A
+                </Badge>
+              </div>
+            );
+          }
+
+          const barWidth = getBarWidth(item.value, item.maxValue);
+          const barColor = getBarColor(item.value, item.maxValue, item.color);
+
+          return (
+            <div key={item.key} className="space-y-2">
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium">{item.label}</span>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-semibold">
+                    {item.value.toFixed(1)}
+                    {item.unit}
+                  </span>
+                  <Badge
+                    variant="outline"
+                    className={`text-xs ${
+                      item.value / item.maxValue > 0.8
+                        ? "border-red-200 text-red-700"
+                        : item.value / item.maxValue > 0.6
+                        ? "border-orange-200 text-orange-700"
+                        : "border-green-200 text-green-700"
+                    }`}
+                  >
+                    {((item.value / item.maxValue) * 100).toFixed(0)}%
+                  </Badge>
+                </div>
+              </div>
+
+              <div className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                <div
+                  className={`h-full transition-all duration-500 ${barColor}`}
+                  style={{ width: barWidth }}
+                />
+              </div>
+
+              <div className="flex justify-between text-xs text-muted-foreground">
+                <span>0{item.unit}</span>
+                <span>
+                  {item.maxValue}
+                  {item.unit}
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+}
+
+interface NutritionSummaryProps {
+  data: NutritionData;
+  className?: string;
+}
+
+export function NutritionSummary({
+  data,
+  className = "",
+}: NutritionSummaryProps) {
+  const getNutritionScore = () => {
+    if (!data.energy || !data.fat || !data.sugars || !data.sodium) {
+      return null;
+    }
+
+    // Cálculo simplificado do Nutri-Score
+    let score = 0;
+
+    // Pontos negativos
+    if (data.energy > 335) score += 1;
+    if (data.energy > 670) score += 2;
+    if (data.energy > 1005) score += 3;
+    if (data.energy > 1340) score += 4;
+    if (data.energy > 1675) score += 5;
+    if (data.energy > 2010) score += 6;
+    if (data.energy > 2345) score += 7;
+    if (data.energy > 2680) score += 8;
+    if (data.energy > 3015) score += 9;
+    if (data.energy > 3350) score += 10;
+
+    if (data.sugars > 4.5) score += 1;
+    if (data.sugars > 9) score += 2;
+    if (data.sugars > 13.5) score += 3;
+    if (data.sugars > 18) score += 4;
+    if (data.sugars > 22.5) score += 5;
+    if (data.sugars > 27) score += 6;
+    if (data.sugars > 31) score += 7;
+    if (data.sugars > 36) score += 8;
+    if (data.sugars > 40) score += 9;
+    if (data.sugars > 45) score += 10;
+
+    if (data.fat > 1) score += 1;
+    if (data.fat > 2) score += 2;
+    if (data.fat > 3) score += 3;
+    if (data.fat > 4) score += 4;
+    if (data.fat > 5) score += 5;
+    if (data.fat > 6) score += 6;
+    if (data.fat > 7) score += 7;
+    if (data.fat > 8) score += 8;
+    if (data.fat > 9) score += 9;
+    if (data.fat > 10) score += 10;
+
+    if (data.sodium > 0.3) score += 1;
+    if (data.sodium > 0.6) score += 2;
+    if (data.sodium > 0.9) score += 3;
+    if (data.sodium > 1.2) score += 4;
+    if (data.sodium > 1.5) score += 5;
+    if (data.sodium > 1.8) score += 6;
+    if (data.sodium > 2.1) score += 7;
+    if (data.sodium > 2.4) score += 8;
+    if (data.sodium > 2.7) score += 9;
+    if (data.sodium > 3) score += 10;
+
+    // Pontos positivos
+    if (data.fiber && data.fiber > 0.9) score -= 1;
+    if (data.fiber && data.fiber > 1.9) score -= 2;
+    if (data.fiber && data.fiber > 2.8) score -= 3;
+    if (data.fiber && data.fiber > 3.7) score -= 4;
+    if (data.fiber && data.fiber > 4.7) score -= 5;
+
+    if (data.proteins && data.proteins > 1.6) score -= 1;
+    if (data.proteins && data.proteins > 3.2) score -= 2;
+    if (data.proteins && data.proteins > 4.8) score -= 3;
+    if (data.proteins && data.proteins > 6.4) score -= 4;
+    if (data.proteins && data.proteins > 8) score -= 5;
+
+    // Converter para letra
+    if (score <= -1) return "A";
+    if (score <= 2) return "B";
+    if (score <= 10) return "C";
+    if (score <= 18) return "D";
+    return "E";
+  };
+
+  const nutritionScore = getNutritionScore();
+
+  return (
+    <div className={`space-y-3 ${className}`}>
+      <div className="flex items-center justify-between">
+        <span className="text-sm font-medium">Nutri-Score Estimado</span>
+        {nutritionScore && (
+          <Badge
+            className={`${
+              nutritionScore === "A"
+                ? "bg-green-500 text-white"
+                : nutritionScore === "B"
+                ? "bg-green-400 text-white"
+                : nutritionScore === "C"
+                ? "bg-yellow-500 text-white"
+                : nutritionScore === "D"
+                ? "bg-orange-500 text-white"
+                : "bg-red-500 text-white"
+            }`}
+          >
+            {nutritionScore}
+          </Badge>
+        )}
+      </div>
+
+      <div className="grid grid-cols-2 gap-2 text-xs">
+        <div className="flex justify-between">
+          <span>Energia:</span>
+          <span className="font-medium">
+            {data.energy?.toFixed(0) || "N/A"} kcal
+          </span>
+        </div>
+        <div className="flex justify-between">
+          <span>Gorduras:</span>
+          <span className="font-medium">{data.fat?.toFixed(1) || "N/A"}g</span>
+        </div>
+        <div className="flex justify-between">
+          <span>Carboidratos:</span>
+          <span className="font-medium">
+            {data.carbohydrates?.toFixed(1) || "N/A"}g
+          </span>
+        </div>
+        <div className="flex justify-between">
+          <span>Proteínas:</span>
+          <span className="font-medium">
+            {data.proteins?.toFixed(1) || "N/A"}g
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/ProductCard.tsx

@@ -1,71 +1,257 @@
-'use client'
-import { Button } from "@/components/ui/button";
-import { Check } from "lucide-react";
-import { DeleteButton } from "./DeleteButton";
-import { toggleComprado } from "../actions";
-import { useRouter } from "next/navigation";
+"use client";
 
-interface Produto {
-    id: number;
-    nome: string;
-    qtd: number;
-    tipoUN: string;
-    comprado: boolean;
-    listaId: string;
-    createdAt: Date;
-    updatedAt: Date;
-}
+import { useRouter } from "next/navigation";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Product } from "@/lib/openFoodFactsApi";
+import {
+  Heart,
+  AlertTriangle,
+  Zap,
+  Star,
+  Plus,
+  Eye,
+  TrendingUp,
+} from "lucide-react";
+import { formatNutritionData } from "@/lib/openFoodFactsApi";
 
 interface ProductCardProps {
-    produto: Produto;
-    listaId: string;
+  product: Product;
+  className?: string;
 }
 
-export function ProductCard({ produto, listaId }: ProductCardProps) {
-    const router = useRouter();
+const NUTRI_SCORE_CONFIG = {
+  a: {
+    label: "A",
+    className: "bg-green-500 text-white border-green-500",
+    description: "Muito bom",
+  },
+  b: {
+    label: "B",
+    className: "bg-green-400 text-white border-green-400",
+    description: "Bom",
+  },
+  c: {
+    label: "C",
+    className: "bg-yellow-500 text-white border-yellow-500",
+    description: "Regular",
+  },
+  d: {
+    label: "D",
+    className: "bg-orange-500 text-white border-orange-500",
+    description: "Ruim",
+  },
+  e: {
+    label: "E",
+    className: "bg-red-500 text-white border-red-500",
+    description: "Muito ruim",
+  },
+};
 
-    const handleToggleComprado = async () => {
-        await toggleComprado(produto.id, listaId);
-        router.refresh();
-    };
+const NOVA_CONFIG = {
+  1: {
+    label: "1",
+    className: "bg-green-500 text-white",
+    description: "Minimamente processado",
+  },
+  2: {
+    label: "2",
+    className: "bg-yellow-500 text-white",
+    description: "Ingrediente culinário",
+  },
+  3: {
+    label: "3",
+    className: "bg-orange-500 text-white",
+    description: "Processado",
+  },
+  4: {
+    label: "4",
+    className: "bg-red-500 text-white",
+    description: "Ultraprocessado",
+  },
+};
 
+export function ProductCard({ product, className = "" }: ProductCardProps) {
+  const router = useRouter();
+
+  const getProductImageUrl = (): string => {
     return (
-        <div className={`card bg-white dark:bg-gray-800 shadow-lg rounded-lg hover:shadow-xl transition-duration-300 
-            ${produto.comprado ? 'border-2 border-green-500 dark:border-green-400 bg-green-50 dark:bg-green-900/20' : ''}`}
-        >
-            <div className="card-body p-6">
-                <div className="flex justify-between items-start">
-                    <h2 className="card-title text-xl font-bold mb-2 dark:text-white">
-                        {produto.nome}
-                    </h2>
-                    <div className="flex gap-2">
-                        <Button
-                            onClick={handleToggleComprado}
-                            variant="outline"
-                            size="icon"
-                            className={`${produto.comprado
-                                    ? 'bg-green-500 dark:bg-green-600 text-white hover:bg-green-600 dark:hover:bg-green-700'
-                                    : 'text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/30'
-                                }`}
-                        >
-                            <Check className="h-4 w-4" />
-                        </Button>
-                        <DeleteButton
-                            produtoId={produto.id}
-                            produtoNome={produto.nome}
-                            listaId={listaId}
-                        />
-                    </div>
-                </div>
-                <div className="space-y-2">
-                    <p className="text-gray-600 dark:text-gray-300">
-                        Quantidade: <span className="font-semibold">{produto.qtd}</span>
-                    </p>
-                    <p className="text-gray-600 dark:text-gray-300">
-                        Tipo: <span className="font-semibold">{produto.tipoUN}</span>
-                    </p>
-                </div>
-            </div>
-        </div>
+      product.image_front_url ||
+      product.image_front_small_url ||
+      product.image_url ||
+      product.image_small_url ||
+      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect fill='%23f3f4f6' width='400' height='400'/%3E%3Ctext fill='%239ca3af' font-family='sans-serif' font-size='48' x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle'%3ESem Imagem%3C/text%3E%3C/svg%3E"
     );
-}
+  };
+
+  const getNutritionGrade = () => {
+    if (!product.nutrition_grades) return null;
+    const grade = product.nutrition_grades.toLowerCase();
+    return NUTRI_SCORE_CONFIG[grade as keyof typeof NUTRI_SCORE_CONFIG] || null;
+  };
+
+  const getNovaGroup = () => {
+    if (!product.nova_group) return null;
+    return NOVA_CONFIG[product.nova_group as keyof typeof NOVA_CONFIG] || null;
+  };
+
+  const nutritionGrade = getNutritionGrade();
+  const novaGroup = getNovaGroup();
+  const imageUrl = getProductImageUrl();
+  const nutritionData = formatNutritionData(product);
+
+  // Verificar se tem alérgenos comuns
+  const hasCommonAllergens =
+    product.allergens_tags?.some((allergen) =>
+      ["gluten", "milk", "eggs", "nuts", "peanuts", "soy"].some((common) =>
+        allergen.toLowerCase().includes(common)
+      )
+    ) || false;
+
+  return (
+    <Card
+      className={`group relative overflow-hidden hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 ${className}`}
+    >
+      {/* Imagem do Produto */}
+      <div className="relative h-56 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 overflow-hidden">
+        <img
+          src={imageUrl}
+          alt={product.product_name || "Produto"}
+          className="w-full h-full object-contain p-6 group-hover:scale-110 transition-transform duration-500"
+          loading="lazy"
+        />
+
+        {/* Overlay com badges */}
+        <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+        {/* Badge Nutri-Score */}
+        {nutritionGrade && (
+          <div className="absolute top-3 right-3">
+            <Badge
+              className={`${nutritionGrade.className} shadow-lg text-xs font-bold px-2 py-1`}
+            >
+              <Zap className="w-3 h-3 mr-1" />
+              {nutritionGrade.label}
+            </Badge>
+          </div>
+        )}
+
+        {/* Badge NOVA */}
+        {novaGroup && (
+          <div className="absolute top-3 left-3">
+            <Badge
+              className={`${novaGroup.className} shadow-lg text-xs font-bold px-2 py-1`}
+            >
+              NOVA {novaGroup.label}
+            </Badge>
+          </div>
+        )}
+
+        {/* Ícone de alérgenos */}
+        {hasCommonAllergens && (
+          <div className="absolute bottom-3 right-3">
+            <div className="bg-yellow-500 text-white rounded-full p-1.5 shadow-lg">
+              <AlertTriangle className="w-3 h-3" />
+            </div>
+          </div>
+        )}
+
+        {/* Botão de favorito */}
+        <div className="absolute bottom-3 left-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+          <Button
+            size="sm"
+            variant="secondary"
+            className="h-8 w-8 p-0 rounded-full bg-white/90 hover:bg-white shadow-lg"
+          >
+            <Heart className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+
+      <CardContent className="p-5 space-y-4">
+        {/* Nome do Produto */}
+        <div className="space-y-2">
+          <h3 className="font-semibold text-lg leading-tight line-clamp-2 min-h-[2.5rem] text-gray-900 dark:text-white group-hover:text-primary transition-colors">
+            {product.product_name || "Nome não disponível"}
+          </h3>
+
+          {/* Marca */}
+          {product.brands && (
+            <p className="text-sm text-gray-600 dark:text-gray-400 font-medium">
+              {product.brands}
+            </p>
+          )}
+        </div>
+
+        {/* Informações nutricionais resumidas */}
+        {nutritionData && (
+          <div className="grid grid-cols-2 gap-2 text-xs">
+            <div className="flex justify-between">
+              <span className="text-gray-500">Energia:</span>
+              <span className="font-medium">{nutritionData.energy}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-500">Gorduras:</span>
+              <span className="font-medium">{nutritionData.fat}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-500">Açúcares:</span>
+              <span className="font-medium">{nutritionData.sugars}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-500">Sódio:</span>
+              <span className="font-medium">{nutritionData.sodium}</span>
+            </div>
+          </div>
+        )}
+
+        {/* Categorias */}
+        {product.categories && (
+          <div className="flex flex-wrap gap-1.5">
+            {product.categories
+              .split(",")
+              .slice(0, 2)
+              .map((cat, i) => (
+                <Badge
+                  key={i}
+                  variant="outline"
+                  className="text-xs font-normal bg-gray-50 dark:bg-gray-800 border-gray-100 dark:border-gray-800"
+                >
+                  {cat.trim()}
+                </Badge>
+              ))}
+          </div>
+        )}
+
+        {/* Alérgenos */}
+        {hasCommonAllergens && (
+          <div className="flex items-center gap-1 text-xs text-yellow-600 dark:text-yellow-400">
+            <AlertTriangle className="w-3 h-3" />
+            <span>Contém alérgenos</span>
+          </div>
+        )}
+
+        {/* Botões de ação */}
+        <div className="flex gap-2 pt-2">
+          <Button
+            variant="outline"
+            className="flex-1 group-hover:bg-primary group-hover:text-primary-foreground group-hover:border-primary transition-all duration-200"
+            onClick={() => router.push(`/produto/${product.code}`)}
+          >
+            <Eye className="w-4 h-4 mr-2" />
+            Ver Detalhes
+          </Button>
+
+          <Button
+            size="sm"
+            variant="secondary"
+            className="px-3 group-hover:bg-primary group-hover:text-primary-foreground transition-all duration-200"
+          >
+            <Plus className="w-4 h-4" />
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

app/components/ProductCardSkeleton.tsx

@@ -0,0 +1,29 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function ProductCardSkeleton() {
+  return (
+    <Card className="overflow-hidden">
+      {/* Imagem Skeleton */}
+      <Skeleton className="h-48 w-full" />
+
+      <CardContent className="p-4">
+        {/* Nome do Produto */}
+        <Skeleton className="h-6 w-full mb-2" />
+        <Skeleton className="h-6 w-3/4 mb-3" />
+
+        {/* Marca */}
+        <Skeleton className="h-4 w-1/2 mb-3" />
+
+        {/* Categorias */}
+        <div className="flex gap-1.5 mb-4">
+          <Skeleton className="h-5 w-16" />
+          <Skeleton className="h-5 w-20" />
+        </div>
+
+        {/* Botão */}
+        <Skeleton className="h-10 w-full" />
+      </CardContent>
+    </Card>
+  );
+}

app/components/SortDropdown.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import {
+  ChevronDown,
+  TrendingUp,
+  Zap,
+  AlphabeticalOrder,
+  Building2,
+  Flame,
+  Droplet,
+  Candy,
+  FileCheck,
+  Image,
+  Activity,
+  Leaf,
+  Layers,
+  Check,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { SORT_OPTIONS, SortOption } from "@/lib/types";
+
+// Mapear ícones para cada opção
+const SORT_ICONS: Record<string, any> = {
+  relevance: TrendingUp,
+  nutrition_grade: Zap,
+  name: AlphabeticalOrder,
+  brand: Building2,
+  energy: Flame,
+  fat: Droplet,
+  sugars: Candy,
+  completeness: FileCheck,
+  with_images: Image,
+  with_nutrition: Activity,
+  eco_score: Leaf,
+  nova_group: Layers,
+};
+
+interface SortDropdownProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  className?: string;
+}
+
+export function SortDropdown({
+  value,
+  onValueChange,
+  className = "",
+}: SortDropdownProps) {
+  const selectedOption =
+    SORT_OPTIONS.find((option) => option.value === value) || SORT_OPTIONS[0];
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          className={`flex items-center gap-2 ${className}`}
+        >
+          <span className="text-sm font-medium">
+            Ordenar por: {selectedOption.label}
+          </span>
+          <ChevronDown className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end" className="w-72">
+        {SORT_OPTIONS.map((option) => {
+          const IconComponent = SORT_ICONS[option.value];
+          return (
+            <DropdownMenuItem
+              key={option.value}
+              onClick={() => onValueChange(option.value)}
+              className={`flex items-start gap-3 p-3 ${
+                value === option.value ? "bg-accent" : ""
+              }`}
+            >
+              {/* Ícone */}
+              <div className="mt-0.5">
+                {IconComponent && (
+                  <IconComponent className="w-4 h-4 text-muted-foreground" />
+                )}
+              </div>
+
+              {/* Conteúdo */}
+              <div className="flex-1">
+                <div className="flex items-center justify-between">
+                  <span className="font-medium">{option.label}</span>
+                  {value === option.value && (
+                    <Check className="w-4 h-4 text-primary" />
+                  )}
+                </div>
+                {option.description && (
+                  <span className="text-xs text-muted-foreground mt-1 block">
+                    {option.description}
+                  </span>
+                )}
+              </div>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+interface SortToggleProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  className?: string;
+}
+
+export function SortToggle({
+  value,
+  onValueChange,
+  className = "",
+}: SortToggleProps) {
+  const isAscending = value === "asc";
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={() => onValueChange(isAscending ? "desc" : "asc")}
+      className={`flex items-center gap-2 ${className}`}
+    >
+      <span className="text-sm">{isAscending ? "↑" : "↓"}</span>
+      <span className="text-sm">
+        {isAscending ? "Crescente" : "Decrescente"}
+      </span>
+    </Button>
+  );
+}

app/components/header.tsx

@@ -1,9 +1,144 @@
-export function Header(){
-    return (
-        <div className="flex justify-center">
-            <p className="font-bold text-5xl">
-                RESENHA ITAPOA
-            </p>
+"use client";
+import { useState, useEffect } from "react";
+import { useTheme } from "next-themes";
+import { Sun, Moon, Menu, X, ScanLine, Info } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const toggleTheme = () => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  };
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  return (
+    <header className="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo */}
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-gradient-to-r from-blue-600 to-green-600 rounded-xl flex items-center justify-center">
+              <ScanLine className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+                NutriScan
+              </h1>
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                Informações nutricionais
+              </p>
+            </div>
+          </div>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center gap-8">
+            <a
+              href="#como-funciona"
+              className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+            >
+              Como funciona
+            </a>
+            <a
+              href="#recursos"
+              className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+            >
+              Recursos
+            </a>
+            <a
+              href="/pricing"
+              className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+            >
+              Preços
+            </a>
+            <a
+              href="#sobre"
+              className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+            >
+              Sobre
+            </a>
+          </nav>
+
+          {/* Actions */}
+          <div className="flex items-center gap-4">
+            {/* Theme Toggle */}
+            {mounted && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={toggleTheme}
+                className="w-10 h-10 p-0"
+                suppressHydrationWarning
+              >
+                {theme === "dark" ? (
+                  <Sun className="w-5 h-5" />
+                ) : (
+                  <Moon className="w-5 h-5" />
+                )}
+              </Button>
+            )}
+
+            {/* Mobile Menu Button */}
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={toggleMenu}
+              className="md:hidden w-10 h-10 p-0"
+            >
+              {isMenuOpen ? (
+                <X className="w-5 h-5" />
+              ) : (
+                <Menu className="w-5 h-5" />
+              )}
+            </Button>
+          </div>
         </div>
-    )
-}
+
+        {/* Mobile Menu */}
+        {isMenuOpen && (
+          <div className="md:hidden border-t border-gray-200 dark:border-gray-700 py-4">
+            <nav className="flex flex-col gap-4">
+              <a
+                href="#como-funciona"
+                className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-2"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Como funciona
+              </a>
+              <a
+                href="#recursos"
+                className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-2"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Recursos
+              </a>
+              <a
+                href="/pricing"
+                className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-2"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Preços
+              </a>
+              <a
+                href="#sobre"
+                className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-2"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Sobre
+              </a>
+            </nav>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}

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>
+  );
+}

app/components/pricing/BillingToggle.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+
+interface BillingToggleProps {
+  isAnnual: boolean;
+  onToggle: (isAnnual: boolean) => void;
+  className?: string;
+}
+
+export function BillingToggle({
+  isAnnual,
+  onToggle,
+  className = "",
+}: BillingToggleProps) {
+  return (
+    <div className={`flex items-center justify-center ${className}`}>
+      <div className="relative inline-flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1">
+        {/* Toggle Background */}
+        <div
+          className={`absolute top-1 bottom-1 w-1/2 bg-white dark:bg-gray-700 rounded-md shadow-sm transition-transform duration-200 ${
+            isAnnual ? "translate-x-full" : "translate-x-0"
+          }`}
+        />
+
+        {/* Monthly Option */}
+        <button
+          onClick={() => onToggle(false)}
+          className={`relative z-10 px-6 py-2 text-sm font-medium rounded-md transition-colors duration-200 ${
+            !isAnnual
+              ? "text-gray-900 dark:text-white"
+              : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+          }`}
+        >
+          Mensal
+        </button>
+
+        {/* Annual Option */}
+        <button
+          onClick={() => onToggle(true)}
+          className={`relative z-10 px-6 py-2 text-sm font-medium rounded-md transition-colors duration-200 ${
+            isAnnual
+              ? "text-gray-900 dark:text-white"
+              : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+          }`}
+        >
+          Anual
+        </button>
+      </div>
+
+      {/* Save Badge */}
+      {isAnnual && (
+        <Badge className="ml-3 bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300">
+          Economize 20%
+        </Badge>
+      )}
+    </div>
+  );
+}

app/components/pricing/PricingCard.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import {
+  CheckCircle2,
+  XCircle,
+  Zap,
+  BarChart3,
+  GitCompare,
+  Download,
+  Code,
+  MessageSquare,
+  Shield,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+
+interface Feature {
+  text: string;
+  included: boolean;
+  highlight?: boolean;
+  note?: string;
+}
+
+interface PricingCardProps {
+  plan: "basic" | "premium" | "free";
+  isAnnual?: boolean;
+  className?: string;
+}
+
+const planData = {
+  basic: {
+    name: "Básico",
+    monthlyPrice: 5,
+    annualPrice: 4,
+    description: "Perfeito para uso pessoal e pequenas consultas",
+    badge: null,
+    features: [
+      { text: "Até 100 consultas/mês", included: true },
+      { text: "Busca por código de barras", included: true },
+      { text: "Busca por nome", included: true },
+      { text: "Informações nutricionais completas", included: true },
+      { text: "Histórico (últimas 10)", included: true },
+      { text: "Filtros avançados", included: false },
+      { text: "Listas de compras", included: false },
+      { text: "Comparação de produtos", included: false },
+      { text: "Exportação de dados", included: false },
+      { text: "API de acesso", included: false },
+      { text: "Suporte prioritário", included: false },
+    ],
+  },
+  premium: {
+    name: "Premium",
+    monthlyPrice: 10,
+    annualPrice: 8,
+    description: "Ideal para profissionais e uso intensivo",
+    badge: "Popular",
+    features: [
+      { text: "Até 500 consultas/mês", included: true },
+      { text: "Busca por código de barras", included: true },
+      { text: "Busca por nome", included: true },
+      { text: "Informações nutricionais completas", included: true },
+      { text: "Histórico ilimitado", included: true },
+      { text: "Filtros avançados", included: true },
+      { text: "Listas de compras ilimitadas", included: true },
+      { text: "Comparação de produtos (até 5)", included: true },
+      { text: "Exportação de dados (CSV/JSON)", included: true },
+      { text: "API de acesso (1000 req/mês)", included: true },
+      { text: "Suporte prioritário", included: true },
+    ],
+  },
+  free: {
+    name: "Free Beta",
+    monthlyPrice: 0,
+    annualPrice: 0,
+    description: "Acesso completo durante fase beta",
+    badge: "Beta",
+    features: [
+      { text: "Consultas ilimitadas", included: true, highlight: true },
+      { text: "Busca por código de barras", included: true },
+      { text: "Busca por nome", included: true },
+      { text: "Informações nutricionais completas", included: true },
+      { text: "Histórico ilimitado", included: true },
+      { text: "Filtros avançados", included: true },
+      { text: "Listas de compras ilimitadas", included: true },
+      { text: "Comparação de produtos", included: true },
+      { text: "Exportação de dados", included: true },
+      { text: "Badge Beta Tester", included: true, highlight: true },
+      { text: "Acesso temporário", included: true, note: "Durante fase beta" },
+    ],
+  },
+};
+
+const featureIcons: Record<string, any> = {
+  consultas: Zap,
+  filtros: BarChart3,
+  comparação: GitCompare,
+  exportação: Download,
+  api: Code,
+  suporte: MessageSquare,
+  beta: Shield,
+};
+
+export function PricingCard({
+  plan,
+  isAnnual = false,
+  className = "",
+}: PricingCardProps) {
+  const data = planData[plan];
+  const price = isAnnual ? data.annualPrice : data.monthlyPrice;
+  const isPopular = plan === "premium";
+  const isFree = plan === "free";
+
+  const getFeatureIcon = (featureText: string) => {
+    if (featureText.includes("consultas") || featureText.includes("API"))
+      return Zap;
+    if (featureText.includes("filtros")) return BarChart3;
+    if (featureText.includes("comparação")) return GitCompare;
+    if (featureText.includes("exportação")) return Download;
+    if (featureText.includes("suporte")) return MessageSquare;
+    if (featureText.includes("Beta")) return Shield;
+    return CheckCircle2;
+  };
+
+  return (
+    <Card
+      className={`relative overflow-hidden transition-all duration-300 hover:shadow-xl ${
+        isPopular
+          ? "bg-gradient-to-br from-blue-600 to-blue-700 text-white scale-105 border-2 border-blue-500 shadow-2xl"
+          : isFree
+          ? "border-blue-200 dark:border-blue-800 bg-white dark:bg-gray-900"
+          : "bg-white dark:bg-gray-900 border-gray-100 dark:border-gray-800"
+      } ${className}`}
+    >
+      {/* Badge */}
+      {data.badge && (
+        <div className="absolute top-0 right-0">
+          <Badge
+            className={`${
+              isPopular
+                ? "bg-[#19A7A7] text-white"
+                : isFree
+                ? "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300"
+                : "bg-gray-100 text-gray-700"
+            } rounded-l-none rounded-br-lg`}
+          >
+            {data.badge}
+          </Badge>
+        </div>
+      )}
+
+      <CardHeader className="pb-4">
+        <div className="text-center">
+          <h3
+            className={`text-2xl font-bold ${
+              isPopular ? "text-white" : "text-gray-900 dark:text-white"
+            }`}
+          >
+            {data.name}
+          </h3>
+          <p
+            className={`text-sm mt-2 ${
+              isPopular ? "text-blue-100" : "text-gray-600 dark:text-gray-400"
+            }`}
+          >
+            {data.description}
+          </p>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-6">
+        {/* Preço */}
+        <div className="text-center">
+          <div className="flex items-baseline justify-center">
+            <span
+              className={`text-5xl font-bold ${
+                isPopular ? "text-white" : "text-gray-900 dark:text-white"
+              }`}
+            >
+              ${price}
+            </span>
+            {!isFree && (
+              <span
+                className={`text-sm ml-1 ${
+                  isPopular ? "text-blue-100" : "text-gray-500"
+                }`}
+              >
+                /mês
+              </span>
+            )}
+          </div>
+          {isAnnual && !isFree && (
+            <p
+              className={`text-xs mt-1 ${
+                isPopular ? "text-blue-100" : "text-green-600"
+              }`}
+            >
+              Economize ${(data.monthlyPrice - data.annualPrice) * 12}/ano
+            </p>
+          )}
+        </div>
+
+        {/* Botões */}
+        <div className="space-y-3">
+          <Button
+            className={`w-full ${
+              isPopular
+                ? "bg-[#19A7A7] hover:bg-teal-600 text-white"
+                : isFree
+                ? "bg-[#0055FF] hover:bg-blue-600 text-white"
+                : "bg-[#0055FF] hover:bg-blue-600 text-white"
+            }`}
+            size="lg"
+          >
+            {isFree ? "Começar Grátis" : "Começar Agora"}
+          </Button>
+          <Button
+            variant="outline"
+            className={`w-full ${
+              isPopular
+                ? "border-blue-400 text-blue-100 hover:bg-blue-500/20"
+                : "border-gray-300 text-gray-700 hover:bg-gray-50"
+            }`}
+          >
+            Falar com Vendas
+          </Button>
+        </div>
+
+        {/* Features */}
+        <div className="space-y-3">
+          {data.features.map((feature, index) => {
+            const IconComponent = getFeatureIcon(feature.text);
+            return (
+              <div key={index} className="flex items-start space-x-3">
+                <div className="flex-shrink-0 mt-0.5">
+                  {feature.included ? (
+                    <CheckCircle2
+                      className={`w-4 h-4 ${
+                        feature.highlight
+                          ? "text-green-500"
+                          : isPopular
+                          ? "text-green-400"
+                          : "text-green-500"
+                      }`}
+                    />
+                  ) : (
+                    <XCircle
+                      className={`w-4 h-4 ${
+                        isPopular ? "text-red-400" : "text-gray-400"
+                      }`}
+                    />
+                  )}
+                </div>
+                <div className="flex-1">
+                  <span
+                    className={`text-sm ${
+                      feature.highlight
+                        ? "font-semibold text-green-600 dark:text-green-400"
+                        : isPopular
+                        ? "text-white"
+                        : "text-gray-700 dark:text-gray-300"
+                    }`}
+                  >
+                    {feature.text}
+                  </span>
+                  {feature.note && (
+                    <p
+                      className={`text-xs mt-1 ${
+                        isPopular ? "text-blue-100" : "text-gray-500"
+                      }`}
+                    >
+                      {feature.note}
+                    </p>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

app/components/pricing/PricingFAQ.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+interface PricingFAQProps {
+  className?: string;
+}
+
+const faqData = [
+  {
+    question: "Como funciona o período de teste?",
+    answer:
+      "Oferecemos acesso gratuito durante nossa fase beta, sem limitações de tempo ou funcionalidades. Você pode usar todas as funcionalidades do Premium sem custo algum.",
+  },
+  {
+    question: "Posso mudar de plano a qualquer momento?",
+    answer:
+      "Sim! Você pode fazer upgrade ou downgrade do seu plano a qualquer momento. As mudanças são aplicadas imediatamente e os valores são calculados proporcionalmente.",
+  },
+  {
+    question: "O que acontece quando eu atingo o limite de consultas?",
+    answer:
+      "Quando você atinge o limite mensal de consultas, você pode fazer upgrade para um plano superior ou aguardar o próximo ciclo de cobrança. Também oferecemos pacotes adicionais de consultas.",
+  },
+  {
+    question: "Como faço para cancelar minha assinatura?",
+    answer:
+      "Você pode cancelar sua assinatura a qualquer momento através da sua conta. O cancelamento é efetivado no final do período de cobrança atual, e você mantém acesso até lá.",
+  },
+  {
+    question: "Vocês oferecem reembolso?",
+    answer:
+      "Sim! Oferecemos reembolso completo nos primeiros 30 dias após a assinatura. Entre em contato conosco se não estiver satisfeito com o serviço.",
+  },
+  {
+    question: "Os dados são seguros e privados?",
+    answer:
+      "Absolutamente! Todos os dados são criptografados e armazenados de forma segura. Não compartilhamos suas informações pessoais ou histórico de consultas com terceiros.",
+  },
+  {
+    question: "A API está disponível em todos os planos?",
+    answer:
+      "A API está disponível apenas nos planos Premium e Free Beta. O plano Básico não inclui acesso à API, mas você pode fazer upgrade a qualquer momento.",
+  },
+  {
+    question: "Há suporte técnico disponível?",
+    answer:
+      "Sim! Oferecemos suporte por email para todos os usuários e suporte prioritário (email + chat) para usuários Premium. Nossa equipe responde em até 24 horas.",
+  },
+];
+
+export function PricingFAQ({ className = "" }: PricingFAQProps) {
+  return (
+    <div className={`max-w-4xl mx-auto ${className}`}>
+      <div className="text-center mb-12">
+        <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
+          Perguntas Frequentes
+        </h2>
+        <p className="text-lg text-gray-600 dark:text-gray-400">
+          Tire suas dúvidas sobre nossos planos e funcionalidades
+        </p>
+      </div>
+
+      <Accordion type="single" collapsible className="space-y-4">
+        {faqData.map((item, index) => (
+          <AccordionItem
+            key={index}
+            value={`item-${index}`}
+            className="border border-gray-100 dark:border-gray-800 rounded-lg px-6"
+          >
+            <AccordionTrigger className="text-left hover:no-underline py-6">
+              <span className="text-lg font-medium text-gray-900 dark:text-white">
+                {item.question}
+              </span>
+            </AccordionTrigger>
+            <AccordionContent className="pb-6">
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                {item.answer}
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+}

app/components/pricing/PricingHero.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+interface PricingHeroProps {
+  className?: string;
+}
+
+export function PricingHero({ className = "" }: PricingHeroProps) {
+  return (
+    <div className={`text-center ${className}`}>
+      <h1 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
+        Escolha o plano perfeito para você
+      </h1>
+      <p className="text-lg md:text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
+        Acesse informações nutricionais completas de milhares de produtos. Desde
+        uso pessoal até profissional, temos a solução ideal para suas
+        necessidades.
+      </p>
+    </div>
+  );
+}

app/layout.tsx

@@ -1,65 +1,70 @@
-import "./globals.css"
-import { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import { ThemeProvider } from '@/app/providers'
+import "./globals.css";
+import { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { ThemeProvider } from "@/app/providers";
 
 // Use Inter como fallback já que é uma fonte similar à Geist
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  metadataBase: new URL('https://resenhaitapoa.com.br'),
+  metadataBase: new URL("https://nutriscan.com.br"),
   title: {
-    default: 'Resenha Itapoá - Gerenciador de Listas de Compras',
-    template: '%s | Resenha Itapoá'
+    default: "NutriScan - Informações Nutricionais de Alimentos",
+    template: "%s | NutriScan",
   },
-  description: 'Gerencie suas listas de compras de forma simples e eficiente. Compartilhe listas, acompanhe itens em tempo real.',
-  keywords: ['lista de compras', 'gerenciador de compras', 'Itapoá', 'compras colaborativas', 'organização de compras'],
-  authors: [{ name: 'Evandro', url: 'https://evandro.dev.br' }],
-  creator: 'Evandro',
+  description:
+    "Descubra informações nutricionais completas de milhares de produtos alimentícios. Consulte Nutri-Score, ingredientes e valores nutricionais.",
+  keywords: [
+    "informações nutricionais",
+    "nutri-score",
+    "ingredientes",
+    "alimentação saudável",
+    "open food facts",
+    "código de barras",
+    "nutrição",
+  ],
+  authors: [{ name: "Evandro", url: "https://evandro.dev.br" }],
+  creator: "Evandro",
   openGraph: {
-    type: 'website',
-    locale: 'pt_BR',
-    url: 'https://resenhaitapoa.com.br',
-    title: 'Resenha Itapoá - Gerenciador de Listas de Compras',
-    description: 'Gerencie suas listas de compras de forma simples e eficiente.',
-    siteName: 'Resenha Itapoá',
+    type: "website",
+    locale: "pt_BR",
+    url: "https://nutriscan.com.br",
+    title: "NutriScan - Informações Nutricionais de Alimentos",
+    description:
+      "Descubra informações nutricionais completas de milhares de produtos alimentícios.",
+    siteName: "NutriScan",
   },
   twitter: {
-    card: 'summary_large_image',
-    title: 'Resenha Itapoá - Gerenciador de Listas de Compras',
-    description: 'Gerencie suas listas de compras de forma simples e eficiente.',
-    creator: '@evandrodev',
+    card: "summary_large_image",
+    title: "NutriScan - Informações Nutricionais de Alimentos",
+    description:
+      "Descubra informações nutricionais completas de milhares de produtos alimentícios.",
+    creator: "@evandrodev",
   },
-  manifest: '/manifest.json',
+  manifest: "/manifest.json",
   robots: {
     index: true,
     follow: true,
     googleBot: {
       index: true,
       follow: true,
-      'max-video-preview': -1,
-      'max-image-preview': 'large',
-      'max-snippet': -1,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1,
     },
   },
-}
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
-    <html
-      lang="pt-BR"
-      suppressHydrationWarning
-      className={inter.className}
-    >
+    <html lang="pt-BR" suppressHydrationWarning className={inter.className}>
       <body className="min-h-screen bg-background antialiased">
-        <ThemeProvider>
-          {children}
-        </ThemeProvider>
+        <ThemeProvider>{children}</ThemeProvider>
       </body>
     </html>
-  )
-}
+  );
+}

app/page.tsx

@@ -1,5 +1,23 @@
-import { IdInput } from './components/IdInput';
+import { Header } from "./components/header";
+import { Footer } from "./components/Footer";
+import { Hero } from "./components/landing/Hero";
+import { Features } from "./components/landing/Features";
+import { HowItWorks } from "./components/landing/HowItWorks";
 
 export default function Home() {
-  return <IdInput />;
-}
+  return (
+    <div className="min-h-screen bg-white dark:bg-gray-900">
+      <Header />
+      <main>
+        <Hero />
+        <section id="recursos">
+          <Features />
+        </section>
+        <section id="como-funciona">
+          <HowItWorks />
+        </section>
+      </main>
+      <Footer />
+    </div>
+  );
+}

app/pricing/page.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import { useState } from "react";
+import { Header } from "@/app/components/header";
+import { Footer } from "@/app/components/Footer";
+import { PricingHero } from "@/app/components/pricing/PricingHero";
+import { BillingToggle } from "@/app/components/pricing/BillingToggle";
+import { PricingCard } from "@/app/components/pricing/PricingCard";
+import { PricingFAQ } from "@/app/components/pricing/PricingFAQ";
+import { Button } from "@/components/ui/button";
+import { ArrowRight, CheckCircle2 } from "lucide-react";
+
+export default function PricingPage() {
+  const [isAnnual, setIsAnnual] = useState(false);
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-gray-900">
+      <Header />
+
+      <main>
+        {/* Hero Section */}
+        <section className="py-16 md:py-24">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <PricingHero />
+          </div>
+        </section>
+
+        {/* Billing Toggle */}
+        <section className="pb-12">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <BillingToggle
+              isAnnual={isAnnual}
+              onToggle={setIsAnnual}
+              className="mb-8"
+            />
+          </div>
+        </section>
+
+        {/* Pricing Cards */}
+        <section className="pb-16 md:pb-24">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
+              <PricingCard
+                plan="basic"
+                isAnnual={isAnnual}
+                className="md:order-1"
+              />
+              <PricingCard
+                plan="premium"
+                isAnnual={isAnnual}
+                className="md:order-2"
+              />
+              <PricingCard
+                plan="free"
+                isAnnual={isAnnual}
+                className="md:order-3"
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Features Comparison */}
+        <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="text-center mb-12">
+              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
+                Compare os Planos
+              </h2>
+              <p className="text-lg text-gray-600 dark:text-gray-400">
+                Veja todas as funcionalidades disponíveis em cada plano
+              </p>
+            </div>
+
+            <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-lg overflow-hidden">
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead className="bg-gray-50 dark:bg-gray-800">
+                    <tr>
+                      <th className="px-6 py-4 text-left text-sm font-medium text-gray-900 dark:text-white">
+                        Funcionalidades
+                      </th>
+                      <th className="px-6 py-4 text-center text-sm font-medium text-gray-900 dark:text-white">
+                        Básico
+                      </th>
+                      <th className="px-6 py-4 text-center text-sm font-medium text-gray-900 dark:text-white">
+                        Premium
+                      </th>
+                      <th className="px-6 py-4 text-center text-sm font-medium text-gray-900 dark:text-white">
+                        Free Beta
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+                    {[
+                      {
+                        feature: "Consultas por mês",
+                        basic: "100",
+                        premium: "500",
+                        free: "Ilimitadas",
+                      },
+                      {
+                        feature: "Busca por código de barras",
+                        basic: true,
+                        premium: true,
+                        free: true,
+                      },
+                      {
+                        feature: "Busca por nome",
+                        basic: true,
+                        premium: true,
+                        free: true,
+                      },
+                      {
+                        feature: "Informações nutricionais",
+                        basic: true,
+                        premium: true,
+                        free: true,
+                      },
+                      {
+                        feature: "Filtros avançados",
+                        basic: false,
+                        premium: true,
+                        free: true,
+                      },
+                      {
+                        feature: "Listas de compras",
+                        basic: false,
+                        premium: true,
+                        free: true,
+                      },
+                      {
+                        feature: "Comparação de produtos",
+                        basic: false,
+                        premium: "Até 5",
+                        free: "Ilimitada",
+                      },
+                      {
+                        feature: "Exportação de dados",
+                        basic: false,
+                        premium: true,
+                        free: true,
+                      },
+                      {
+                        feature: "API de acesso",
+                        basic: false,
+                        premium: "1000 req/mês",
+                        free: "Ilimitada",
+                      },
+                      {
+                        feature: "Suporte prioritário",
+                        basic: false,
+                        premium: true,
+                        free: false,
+                      },
+                      {
+                        feature: "Histórico de consultas",
+                        basic: "Últimas 10",
+                        premium: "Ilimitado",
+                        free: "Ilimitado",
+                      },
+                    ].map((row, index) => (
+                      <tr
+                        key={index}
+                        className="hover:bg-gray-50 dark:hover:bg-gray-800"
+                      >
+                        <td className="px-6 py-4 text-sm text-gray-900 dark:text-white">
+                          {row.feature}
+                        </td>
+                        <td className="px-6 py-4 text-center">
+                          {typeof row.basic === "boolean" ? (
+                            <CheckCircle2
+                              className={`w-5 h-5 mx-auto ${
+                                row.basic ? "text-green-500" : "text-gray-400"
+                              }`}
+                            />
+                          ) : (
+                            <span className="text-sm text-gray-900 dark:text-white">
+                              {row.basic}
+                            </span>
+                          )}
+                        </td>
+                        <td className="px-6 py-4 text-center">
+                          {typeof row.premium === "boolean" ? (
+                            <CheckCircle2
+                              className={`w-5 h-5 mx-auto ${
+                                row.premium ? "text-green-500" : "text-gray-400"
+                              }`}
+                            />
+                          ) : (
+                            <span className="text-sm text-gray-900 dark:text-white">
+                              {row.premium}
+                            </span>
+                          )}
+                        </td>
+                        <td className="px-6 py-4 text-center">
+                          {typeof row.free === "boolean" ? (
+                            <CheckCircle2
+                              className={`w-5 h-5 mx-auto ${
+                                row.free ? "text-green-500" : "text-gray-400"
+                              }`}
+                            />
+                          ) : (
+                            <span className="text-sm text-gray-900 dark:text-white">
+                              {row.free}
+                            </span>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* FAQ Section */}
+        <section className="py-16 md:py-24">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <PricingFAQ />
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section className="py-16 md:py-24 bg-gradient-to-r from-blue-600 to-blue-700">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
+              Pronto para começar?
+            </h2>
+            <p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
+              Junte-se a milhares de usuários que já confiam no NutriScan para
+              suas consultas nutricionais.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Button
+                size="lg"
+                className="bg-white text-blue-600 hover:bg-gray-100"
+              >
+                Começar Grátis Agora
+                <ArrowRight className="ml-2 w-4 h-4" />
+              </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white text-white hover:bg-white hover:text-blue-600"
+              >
+                Falar com Vendas
+              </Button>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

app/produto/[barcode]/page.tsx

@@ -0,0 +1,452 @@
+"use client";
+import { useState, useEffect } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { ArrowLeft, Loader2, AlertCircle, Globe, Star } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  searchByBarcode,
+  Product,
+  formatNutritionData,
+} from "@/lib/openFoodFactsApi";
+import Link from "next/link";
+
+export default function ProdutoPage() {
+  const params = useParams();
+  const router = useRouter();
+  const barcode = params.barcode as string;
+
+  const [product, setProduct] = useState<Product | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (barcode) {
+      searchProduct();
+    }
+  }, [barcode]);
+
+  const searchProduct = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const result = await searchByBarcode(barcode);
+      if (result) {
+        setProduct(result);
+      } else {
+        setError("Produto não encontrado");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Erro ao buscar produto");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getProductImageUrl = (product: Product): string | null => {
+    return (
+      product.image_front_url ||
+      product.image_front_small_url ||
+      product.image_url ||
+      product.image_small_url ||
+      null
+    );
+  };
+
+  const getNutritionGrade = (grade?: string) => {
+    if (!grade) return null;
+
+    const grades = {
+      a: {
+        label: "A",
+        color: "bg-green-500",
+        textColor: "text-green-700",
+        description: "Muito bom",
+      },
+      b: {
+        label: "B",
+        color: "bg-green-400",
+        textColor: "text-green-700",
+        description: "Bom",
+      },
+      c: {
+        label: "C",
+        color: "bg-yellow-500",
+        textColor: "text-yellow-700",
+        description: "Regular",
+      },
+      d: {
+        label: "D",
+        color: "bg-orange-500",
+        textColor: "text-orange-700",
+        description: "Ruim",
+      },
+      e: {
+        label: "E",
+        color: "bg-red-500",
+        textColor: "text-red-700",
+        description: "Muito ruim",
+      },
+    };
+
+    return grades[grade.toLowerCase() as keyof typeof grades] || null;
+  };
+
+  const getNovaGroup = (group?: number) => {
+    if (!group) return null;
+
+    const groups = {
+      1: {
+        label: "1",
+        color: "bg-green-500",
+        textColor: "text-green-700",
+        description: "Alimentos não processados ou minimamente processados",
+      },
+      2: {
+        label: "2",
+        color: "bg-yellow-500",
+        textColor: "text-yellow-700",
+        description: "Ingredientes culinários processados",
+      },
+      3: {
+        label: "3",
+        color: "bg-orange-500",
+        textColor: "text-orange-700",
+        description: "Alimentos processados",
+      },
+      4: {
+        label: "4",
+        color: "bg-red-500",
+        textColor: "text-red-700",
+        description: "Alimentos ultraprocessados",
+      },
+    };
+
+    return groups[group as keyof typeof groups] || null;
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center">
+        <div className="text-center">
+          <Loader2 className="w-8 h-8 animate-spin text-blue-600 mx-auto mb-4" />
+          <p className="text-gray-600 dark:text-gray-300">
+            Carregando produto...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !product) {
+    return (
+      <div className="min-h-screen bg-white dark:bg-gray-900">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="text-center py-12">
+            <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+              Produto não encontrado
+            </h1>
+            <p className="text-gray-600 dark:text-gray-300 mb-6">
+              {error ||
+                "O produto com este código de barras não foi encontrado na base de dados."}
+            </p>
+            <div className="flex gap-4 justify-center">
+              <Link href="/">
+                <Button>Nova Busca</Button>
+              </Link>
+              <Button variant="outline" onClick={() => router.back()}>
+                Voltar
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const imageUrl = getProductImageUrl(product);
+  const nutritionGrade = getNutritionGrade(product.nutrition_grades);
+  const novaGroup = getNovaGroup(product.nova_group);
+  const nutritionData = formatNutritionData(product);
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-gray-900">
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center gap-4">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => router.back()}
+              className="flex items-center gap-2"
+            >
+              <ArrowLeft className="w-4 h-4" />
+              Voltar
+            </Button>
+
+            <div className="flex-1">
+              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+                {product.product_name || "Produto"}
+              </h1>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Código: {product.code}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          {/* Product Image */}
+          <div className="space-y-4">
+            <div className="relative w-full max-w-2xl mx-auto bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
+              <div className="aspect-square bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 p-8">
+                {imageUrl ? (
+                  <img
+                    src={imageUrl}
+                    alt={product.product_name}
+                    className="w-full h-full object-contain"
+                  />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center text-gray-400">
+                    <div className="text-center">
+                      <Star className="w-16 h-16 mx-auto mb-4" />
+                      <p className="text-lg">Sem imagem disponível</p>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Basic Info */}
+            <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
+              <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
+                Informações Básicas
+              </h3>
+              <div className="space-y-2 text-sm">
+                {product.brands && (
+                  <div>
+                    <span className="font-medium text-gray-600 dark:text-gray-400">
+                      Marca:
+                    </span>
+                    <span className="ml-2 text-gray-900 dark:text-white">
+                      {product.brands}
+                    </span>
+                  </div>
+                )}
+                {product.categories && (
+                  <div>
+                    <span className="font-medium text-gray-600 dark:text-gray-400">
+                      Categoria:
+                    </span>
+                    <span className="ml-2 text-gray-900 dark:text-white">
+                      {product.categories}
+                    </span>
+                  </div>
+                )}
+                {product.countries && (
+                  <div>
+                    <span className="font-medium text-gray-600 dark:text-gray-400">
+                      Países:
+                    </span>
+                    <span className="ml-2 text-gray-900 dark:text-white">
+                      {product.countries}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Product Details */}
+          <div className="space-y-6">
+            {/* Nutrition Grades */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              {nutritionGrade && (
+                <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                  <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
+                    Nutri-Score
+                  </h3>
+                  <div className="flex items-center gap-3">
+                    <div
+                      className={`w-12 h-12 rounded-full ${nutritionGrade.color} flex items-center justify-center`}
+                    >
+                      <span
+                        className={`text-lg font-bold ${nutritionGrade.textColor}`}
+                      >
+                        {nutritionGrade.label}
+                      </span>
+                    </div>
+                    <div>
+                      <p className="font-medium text-gray-900 dark:text-white">
+                        {nutritionGrade.description}
+                      </p>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        Classificação nutricional
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {novaGroup && (
+                <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                  <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
+                    NOVA
+                  </h3>
+                  <div className="flex items-center gap-3">
+                    <div
+                      className={`w-12 h-12 rounded-full ${novaGroup.color} flex items-center justify-center`}
+                    >
+                      <span
+                        className={`text-lg font-bold ${novaGroup.textColor}`}
+                      >
+                        {novaGroup.label}
+                      </span>
+                    </div>
+                    <div>
+                      <p className="font-medium text-gray-900 dark:text-white">
+                        Grupo {novaGroup.label}
+                      </p>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        Nível de processamento
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Nutritional Information */}
+            {nutritionData && (
+              <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <h3 className="font-semibold text-gray-900 dark:text-white mb-4">
+                  Informação Nutricional (por 100g)
+                </h3>
+                <div className="grid grid-cols-2 gap-4 text-sm">
+                  <div className="flex justify-between">
+                    <span className="text-gray-600 dark:text-gray-400">
+                      Energia:
+                    </span>
+                    <span className="font-medium text-gray-900 dark:text-white">
+                      {nutritionData.energy}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600 dark:text-gray-400">
+                      Gorduras:
+                    </span>
+                    <span className="font-medium text-gray-900 dark:text-white">
+                      {nutritionData.fat}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600 dark:text-gray-400">
+                      Carboidratos:
+                    </span>
+                    <span className="font-medium text-gray-900 dark:text-white">
+                      {nutritionData.carbohydrates}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600 dark:text-gray-400">
+                      Proteínas:
+                    </span>
+                    <span className="font-medium text-gray-900 dark:text-white">
+                      {nutritionData.proteins}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600 dark:text-gray-400">
+                      Açúcares:
+                    </span>
+                    <span className="font-medium text-gray-900 dark:text-white">
+                      {nutritionData.sugars}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600 dark:text-gray-400">
+                      Fibras:
+                    </span>
+                    <span className="font-medium text-gray-900 dark:text-white">
+                      {nutritionData.fiber}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600 dark:text-gray-400">
+                      Sódio:
+                    </span>
+                    <span className="font-medium text-gray-900 dark:text-white">
+                      {nutritionData.sodium}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Ingredients */}
+            {product.ingredients_text && (
+              <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
+                  Ingredientes
+                </h3>
+                <p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
+                  {product.ingredients_text}
+                </p>
+              </div>
+            )}
+
+            {/* Allergens */}
+            {product.allergens_tags && product.allergens_tags.length > 0 && (
+              <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+                <h3 className="font-semibold text-yellow-800 dark:text-yellow-200 mb-2">
+                  Alérgenos
+                </h3>
+                <div className="flex flex-wrap gap-2">
+                  {product.allergens_tags.map((allergen, index) => (
+                    <span
+                      key={index}
+                      className="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 text-xs rounded-full"
+                    >
+                      {allergen.replace("en:", "").replace("pt:", "")}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Additives */}
+            {product.additives_tags && product.additives_tags.length > 0 && (
+              <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+                <h3 className="font-semibold text-blue-800 dark:text-blue-200 mb-2">
+                  Aditivos
+                </h3>
+                <div className="flex flex-wrap gap-2">
+                  {product.additives_tags
+                    .slice(0, 10)
+                    .map((additive, index) => (
+                      <span
+                        key={index}
+                        className="px-2 py-1 bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 text-xs rounded-full"
+                      >
+                        {additive.replace("en:", "").replace("pt:", "")}
+                      </span>
+                    ))}
+                  {product.additives_tags.length > 10 && (
+                    <span className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded-full">
+                      +{product.additives_tags.length - 10} mais
+                    </span>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/resultados/page.tsx

@@ -0,0 +1,399 @@
+"use client";
+import { useState, useEffect } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import {
+  Search,
+  ArrowLeft,
+  Loader2,
+  Filter,
+  Grid,
+  List,
+  SlidersHorizontal,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { searchByName, Product, sortProducts } from "@/lib/openFoodFactsApi";
+import { ProductCard } from "@/app/components/ProductCard";
+import { ProductCardSkeleton } from "@/app/components/ProductCardSkeleton";
+import { FilterSidebar } from "@/app/components/FilterSidebar";
+import { FilterBadges } from "@/app/components/FilterBadge";
+import { SortDropdown } from "@/app/components/SortDropdown";
+import { useProductFilters } from "@/hooks/useProductFilters";
+import { detectUserCountry } from "@/lib/geolocation";
+import Link from "next/link";
+
+export default function ResultadosPage() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const query = searchParams.get("q") || "";
+  const countryParam = searchParams.get("country") || "";
+
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [detectedCountry, setDetectedCountry] = useState<string>("");
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+
+  // Hook de filtros
+  const {
+    filters,
+    updateFilters,
+    clearFilters,
+    hasActiveFilters,
+    setTotalResults,
+    setIsLoading,
+  } = useProductFilters();
+
+  // Detectar país do usuário
+  useEffect(() => {
+    const detectCountry = async () => {
+      try {
+        const country = await detectUserCountry(true);
+        setDetectedCountry(country.code);
+      } catch (error) {
+        console.warn("Erro ao detectar país:", error);
+        setDetectedCountry("br");
+      }
+    };
+
+    detectCountry();
+  }, []);
+
+  useEffect(() => {
+    if (query) {
+      loadProducts(1);
+    }
+  }, [query, countryParam, detectedCountry, filters]);
+
+  const loadProducts = async (pageNum: number) => {
+    try {
+      if (pageNum === 1) {
+        setLoading(true);
+      } else {
+        setLoadingMore(true);
+      }
+      setError(null);
+      setIsLoading(true);
+
+      const countryToUse = detectedCountry || countryParam || "br";
+
+      // Construir parâmetros de busca com filtros
+      const searchParams = new URLSearchParams({
+        q: query,
+        country: countryToUse,
+        page: pageNum.toString(),
+        page_size: "20",
+      });
+
+      // Adicionar filtros à URL
+      Object.entries(filters).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== "") {
+          if (Array.isArray(value)) {
+            if (value.length > 0) {
+              searchParams.set(key, value.join(","));
+            }
+          } else if (typeof value === "object" && value !== null) {
+            Object.entries(value).forEach(([rangeKey, rangeValue]) => {
+              if (rangeValue?.min !== undefined) {
+                searchParams.set(`${rangeKey}_min`, rangeValue.min.toString());
+              }
+              if (rangeValue?.max !== undefined) {
+                searchParams.set(`${rangeKey}_max`, rangeValue.max.toString());
+              }
+            });
+          } else {
+            searchParams.set(key, value.toString());
+          }
+        }
+      });
+
+      const result = await searchByName(query, countryToUse, pageNum, 20);
+
+      // Aplicar ordenação se especificada
+      let sortedProducts = result.products;
+      if (filters.sortBy) {
+        sortedProducts = sortProducts(
+          result.products,
+          filters.sortBy,
+          filters.sortOrder || "asc"
+        );
+      }
+
+      setProducts(
+        pageNum === 1 ? sortedProducts : [...products, ...sortedProducts]
+      );
+      setHasMore(result.products.length === 20);
+      setPage(pageNum);
+      setTotalResults(result.count || result.products.length);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Erro ao buscar produtos");
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+      setIsLoading(false);
+    }
+  };
+
+  const handleLoadMore = () => {
+    loadProducts(page + 1);
+  };
+
+  const handleSortChange = (sortBy: string) => {
+    updateFilters({ sortBy: sortBy as any });
+  };
+
+  if (!query) {
+    return (
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
+        <div className="text-center">
+          <Search className="w-16 h-16 text-gray-400 mx-auto mb-4" />
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+            Nenhuma busca realizada
+          </h1>
+          <p className="text-gray-600 dark:text-gray-300 mb-6">
+            Digite um termo de busca para encontrar produtos
+          </p>
+          <Button onClick={() => router.push("/")}>Voltar para o início</Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-800 sticky top-0 z-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center gap-4">
+            <Link href="/">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="flex items-center gap-2"
+              >
+                <ArrowLeft className="w-4 h-4" />
+                Voltar
+              </Button>
+            </Link>
+
+            <div className="flex-1">
+              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+                Resultados para "{query}"
+              </h1>
+              {!loading && products.length > 0 && (
+                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                  {products.length} produto{products.length !== 1 ? "s" : ""}{" "}
+                  encontrado{products.length !== 1 ? "s" : ""}
+                  {detectedCountry && ` em ${detectedCountry}`}
+                </p>
+              )}
+            </div>
+
+            {/* Controles de visualização - Desktop */}
+            <div className="hidden lg:flex items-center gap-3">
+              <SortDropdown
+                value={filters.sortBy || "relevance"}
+                onValueChange={handleSortChange}
+              />
+
+              <div className="flex items-center border border-gray-100 dark:border-gray-800 rounded-lg">
+                <Button
+                  variant={viewMode === "grid" ? "default" : "ghost"}
+                  size="sm"
+                  onClick={() => setViewMode("grid")}
+                  className="rounded-r-none"
+                >
+                  <Grid className="w-4 h-4" />
+                </Button>
+                <Button
+                  variant={viewMode === "list" ? "default" : "ghost"}
+                  size="sm"
+                  onClick={() => setViewMode("list")}
+                  className="rounded-l-none"
+                >
+                  <List className="w-4 h-4" />
+                </Button>
+              </div>
+            </div>
+
+            {/* Filtros Mobile */}
+            <div className="lg:hidden">
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button variant="outline" size="sm">
+                    <SlidersHorizontal className="w-4 h-4 mr-2" />
+                    Filtros
+                    {hasActiveFilters && (
+                      <div className="w-2 h-2 bg-primary rounded-full ml-2" />
+                    )}
+                  </Button>
+                </SheetTrigger>
+                <SheetContent side="left" className="w-80">
+                  <FilterSidebar
+                    filters={filters}
+                    onFiltersChange={updateFilters}
+                    onClearFilters={clearFilters}
+                    isLoading={loading}
+                    totalResults={products.length}
+                  />
+                </SheetContent>
+              </Sheet>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Filtros ativos */}
+      {hasActiveFilters && (
+        <div className="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-800">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
+            <FilterBadges
+              filters={filters}
+              onRemoveFilter={(key, value) => {
+                if (value) {
+                  const currentArray =
+                    (filters[key as keyof typeof filters] as string[]) || [];
+                  updateFilters({
+                    [key]: currentArray.filter((item) => item !== value),
+                  });
+                } else {
+                  updateFilters({ [key]: undefined });
+                }
+              }}
+              onClearAll={clearFilters}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Layout principal */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="flex gap-8">
+          {/* Sidebar de filtros - Desktop */}
+          <div className="hidden lg:block w-80 flex-shrink-0">
+            <div className="sticky top-24">
+              <FilterSidebar
+                filters={filters}
+                onFiltersChange={updateFilters}
+                onClearFilters={clearFilters}
+                isLoading={loading}
+                totalResults={products.length}
+              />
+            </div>
+          </div>
+
+          {/* Conteúdo principal */}
+          <div className="flex-1 min-w-0">
+            {/* Loading Inicial */}
+            {loading && (
+              <div
+                className={`grid gap-6 ${
+                  viewMode === "grid"
+                    ? "grid-cols-1 sm:grid-cols-2 xl:grid-cols-3"
+                    : "grid-cols-1"
+                }`}
+              >
+                {[...Array(8)].map((_, i) => (
+                  <ProductCardSkeleton key={i} />
+                ))}
+              </div>
+            )}
+
+            {/* Erro */}
+            {error && !loading && (
+              <div className="text-center py-12">
+                <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-6 max-w-md mx-auto">
+                  <h2 className="text-xl font-semibold text-red-800 dark:text-red-200 mb-2">
+                    Erro ao buscar produtos
+                  </h2>
+                  <p className="text-red-600 dark:text-red-300 mb-4">{error}</p>
+                  <Button onClick={() => loadProducts(1)} variant="outline">
+                    Tentar novamente
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            {/* Sem Resultados */}
+            {!loading && !error && products.length === 0 && (
+              <div className="text-center py-12">
+                <Search className="w-16 h-16 text-gray-400 mx-auto mb-4" />
+                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                  Nenhum produto encontrado
+                </h2>
+                <p className="text-gray-600 dark:text-gray-300 mb-6">
+                  Tente ajustar os filtros ou buscar com outros termos
+                </p>
+                <div className="flex gap-3 justify-center">
+                  <Button onClick={() => router.push("/")}>Nova Busca</Button>
+                  {hasActiveFilters && (
+                    <Button onClick={clearFilters} variant="outline">
+                      Limpar Filtros
+                    </Button>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Grid de Produtos */}
+            {!loading && products.length > 0 && (
+              <>
+                <div
+                  className={`grid gap-6 mb-8 ${
+                    viewMode === "grid"
+                      ? "grid-cols-1 sm:grid-cols-2 xl:grid-cols-3"
+                      : "grid-cols-1"
+                  }`}
+                >
+                  {products.map((product, index) => (
+                    <div
+                      key={product.code}
+                      className="animate-in fade-in-0 slide-in-from-bottom-4"
+                      style={{ animationDelay: `${index * 50}ms` }}
+                    >
+                      <ProductCard product={product} />
+                    </div>
+                  ))}
+                </div>
+
+                {/* Botão Carregar Mais */}
+                {hasMore && (
+                  <div className="text-center">
+                    <Button
+                      onClick={handleLoadMore}
+                      disabled={loadingMore}
+                      size="lg"
+                      className="min-w-[200px]"
+                    >
+                      {loadingMore ? (
+                        <>
+                          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                          Carregando...
+                        </>
+                      ) : (
+                        "Carregar Mais"
+                      )}
+                    </Button>
+                  </div>
+                )}
+
+                {/* Contador de Resultados */}
+                {!hasMore && products.length > 0 && (
+                  <div className="text-center mt-8">
+                    <p className="text-sm text-gray-500 dark:text-gray-400">
+                      Todos os {products.length} produto
+                      {products.length !== 1 ? "s" : ""} foram carregados
+                    </p>
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/ui/accordion.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

components/ui/radio-group.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-3.5 w-3.5 fill-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }

components/ui/separator.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

components/ui/sheet.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

components/ui/slider.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

docs/openFoodFacts.md

@@ -0,0 +1,285 @@
+# Documentação de Uso da API Open Food Facts em JavaScript
+
+A Open Food Facts fornece uma API completa para consultar e adicionar dados de produtos alimentícios, com suporte oficial através de um SDK em JavaScript/TypeScript.[1][2]
+
+## Instalação
+
+### Via NPM
+
+```bash
+npm install @openfoodfacts/openfoodfacts-nodejs
+```
+
+### Via Git (versão mais recente)
+
+```bash
+npm install git+https://github.com/openfoodfacts/openfoodfacts-js.git
+```
+
+## Configuração Básica
+
+### Inicializando o Cliente
+
+```javascript
+import { OpenFoodFacts } from "@openfoodfacts/openfoodfacts-nodejs";
+
+// Para navegador
+const client = new OpenFoodFacts(window.fetch);
+
+// Para Node.js
+const client = new OpenFoodFacts(globalThis.fetch);
+
+// Com implementação customizada do fetch
+import fetch from "node-fetch";
+const client = new OpenFoodFacts(fetch);
+```
+
+## Endpoints Principais
+
+### Buscar Produto por Código de Barras
+
+A API permite consultar produtos específicos através do código de barras EAN :[3][1]
+
+```javascript
+// Usando o SDK
+const { data, error } = await client.getProduct("5000112546415");
+if (!data) {
+  console.error("Erro ao buscar produto:", error);
+  return;
+}
+console.log("Dados do produto:", data);
+```
+
+```javascript
+// Usando Fetch diretamente
+const response = await fetch(
+  "https://world.openfoodfacts.org/api/v2/product/737628064502.json",
+  {
+    headers: {
+      "User-Agent": "MeuApp/1.0 ([email protected])",
+    },
+  }
+);
+const produto = await response.json();
+```
+
+### Buscar Produtos por Categoria
+
+É possível filtrar produtos por categorias específicas como bebidas, laticínios, etc :[4][3]
+
+```javascript
+const response = await fetch(
+  "https://world.openfoodfacts.org/api/v0/category/dairy.json"
+);
+const categorias = await response.json();
+```
+
+### Pesquisa com Filtros
+
+A API v2 permite pesquisas avançadas com múltiplos filtros :[5][4]
+
+```javascript
+// Buscar sucos de laranja com Nutri-Score C
+const url =
+  "https://world.openfoodfacts.org/api/v2/search?" +
+  "categories_tags_en=Orange Juice&" +
+  "nutrition_grades_tags=c&" +
+  "fields=code,product_name,nutrition_grades,categories_tags_en";
+
+const response = await fetch(url);
+const resultados = await response.json();
+```
+
+### Pesquisa por Palavras-chave
+
+```javascript
+// Buscar produtos que contenham "chicken"
+const response = await fetch(
+  "https://world.openfoodfacts.org/api/v0/products.json?search=chicken"
+);
+const produtos = await response.json();
+```
+
+## Estrutura de Resposta
+
+### Objeto de Produto
+
+Um produto retornado pela API contém as seguintes informações principais :[6][1]
+
+```javascript
+{
+  "code": "3017620422003",
+  "product_name": "Nutella",
+  "brands": "Ferrero",
+  "categories": "Spreads, Sweet spreads, Chocolate spreads",
+  "ingredients_text": "Açúcar, Óleo de palma, Avelãs...",
+  "nutriments": {
+    "energy_100g": 2252,
+    "fat_100g": 30.9,
+    "carbohydrates_100g": 57.5,
+    "proteins_100g": 6.3
+  },
+  "nutrition_grades": "d",
+  "nova_group": 4
+}
+```
+
+## Parâmetros de Pesquisa
+
+A API suporta diversos parâmetros para filtrar resultados :[6][5]
+
+| Parâmetro             | Tipo   | Descrição                               |
+| --------------------- | ------ | --------------------------------------- |
+| search_terms          | string | Termo de busca geral                    |
+| brands                | string | Filtrar por marca                       |
+| categories            | string | Filtrar por categoria                   |
+| code                  | string | Filtrar por código de barras            |
+| countries             | string | Filtrar por país                        |
+| page                  | number | Número da página (padrão: 1)            |
+| pageSize              | number | Resultados por página (padrão: 20)      |
+| fields                | string | Campos específicos a retornar           |
+| nutrition_grades_tags | string | Filtrar por Nutri-Score (a, b, c, d, e) |
+
+## Autenticação
+
+### Operações de Leitura
+
+Não requerem autenticação, apenas um User-Agent customizado :[1]
+
+```javascript
+fetch(url, {
+  headers: {
+    "User-Agent": "MeuApp/1.0 ([email protected])",
+  },
+});
+```
+
+### Operações de Escrita
+
+Requerem autenticação via credenciais ou sessão cookie :[1]
+
+```javascript
+// Login para obter cookie de sessão
+const formData = new FormData();
+formData.append("user_id", "seu_usuario");
+formData.append("password", "sua_senha");
+
+await fetch("https://world.openfoodfacts.org/cgi/session.pl", {
+  method: "POST",
+  body: formData,
+});
+```
+
+## Limites de Taxa
+
+A API impõe os seguintes limites para proteção da infraestrutura :[1]
+
+- **100 requisições/minuto** para consultas de produtos (GET)
+- **10 requisições/minuto** para pesquisas avançadas
+- **2 requisições/minuto** para consultas de facetas (categorias, labels)
+
+## Ambientes
+
+### Produção
+
+```
+https://world.openfoodfacts.org
+```
+
+### Staging (testes)
+
+```
+https://world.openfoodfacts.net
+```
+
+Para o ambiente de staging, use autenticação básica HTTP com usuário `off` e senha `off` :[1]
+
+```javascript
+fetch("https://world.openfoodfacts.net/api/v2/product/3274080005003.json", {
+  method: "GET",
+  headers: {
+    Authorization: "Basic " + btoa("off:off"),
+  },
+})
+  .then((response) => response.json())
+  .then((json) => console.log(json));
+```
+
+## Exemplos Práticos
+
+### Buscar Produtos Brasileiros
+
+```javascript
+const buscarProdutosBrasileiros = async (termo) => {
+  const url =
+    `https://world.openfoodfacts.org/api/v2/search?` +
+    `countries_tags_en=brazil&` +
+    `search_terms=${termo}&` +
+    `fields=code,product_name,brands,nutriments,nutrition_grades`;
+
+  const response = await fetch(url, {
+    headers: {
+      "User-Agent": "MeuApp/1.0 ([email protected])",
+    },
+  });
+
+  return await response.json();
+};
+
+// Exemplo: buscar arroz brasileiro
+const arroz = await buscarProdutosBrasileiros("arroz");
+```
+
+### Verificar Nutri-Score
+
+```javascript
+const verificarNutriScore = async (codigoBarras) => {
+  const { data } = await client.getProduct(codigoBarras);
+
+  if (data && data.product) {
+    return {
+      nome: data.product.product_name,
+      nutriScore: data.product.nutrition_grades,
+      novaGroup: data.product.nova_group,
+    };
+  }
+  return null;
+};
+```
+
+### Buscar por Ingredientes
+
+```javascript
+const buscarPorIngrediente = async (ingrediente) => {
+  const response = await fetch(
+    `https://world.openfoodfacts.org/api/v2/search?` +
+      `ingredients_text=${ingrediente}&` +
+      `page_size=50`
+  );
+
+  return await response.json();
+};
+```
+
+A documentação completa da API está disponível no formato OpenAPI e pode ser consultada para referência detalhada de todos os endpoints disponíveis.[2][1]
+
+[1](https://openfoodfacts.github.io/openfoodfacts-server/api/)
+[2](https://github.com/openfoodfacts/openfoodfacts-nodejs)
+[3](https://publicapi.dev/open-food-facts-api)
+[4](https://openfoodfacts.github.io/openfoodfacts-server/api/tutorial-off-api/)
+[5](https://wiki.openfoodfacts.org/Open_Food_Facts_Search_API_Version_2)
+[6](https://flows.nodered.org/node/node-red-contrib-open-food-facts)
+[7](https://wiki.openfoodfacts.org/API/Javascript)
+[8](https://wiki.openfoodfacts.org/API/Read/Product)
+[9](https://npmjs.com/package/@openfoodfacts/openfoodfacts-webcomponents)
+[10](https://github.com/openfoodfacts/openfoodfacts-dart)
+[11](https://www.npmjs.com/package/@jagjeevan/openfoodfacts-mcp)
+[12](https://wiki.openfoodfacts.org/Documentation)
+[13](https://www.npmjs.com/package/@openfoodfacts/openfoodfacts-nodejs?activeTab=versions)
+[14](https://github.com/openfoodfacts/api-documentation)
+[15](https://fdc.nal.usda.gov/api-guide)
+[16](https://www.jsdelivr.com/package/npm/openfoodfacts-nodejs)
+[17](https://pub.dev/documentation/openfoodfacts/latest/)
+[18](https://dlthub.com/workspace/source/open-food-facts)
+[19](https://www.reddit.com/r/nodered/comments/1k7jozb/built_nodered_nodes_for_open_food_facts_api/)
+[20](https://www.gigasheet.com/no-code-api/open-food-facts-api)

hooks/useProductFilters.ts

@@ -0,0 +1,255 @@
+"use client";
+
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { ProductFilters, FilterState } from "@/lib/types";
+
+interface UseProductFiltersOptions {
+  debounceMs?: number;
+  persistToLocalStorage?: boolean;
+  localStorageKey?: string;
+}
+
+export function useProductFilters(options: UseProductFiltersOptions = {}) {
+  const {
+    debounceMs = 300,
+    persistToLocalStorage = true,
+    localStorageKey = "product-filters",
+  } = options;
+
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const [filters, setFilters] = useState<ProductFilters>({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [totalResults, setTotalResults] = useState(0);
+
+  // Carregar filtros da URL e localStorage
+  useEffect(() => {
+    const urlFilters = parseFiltersFromURL(searchParams);
+    const savedFilters = persistToLocalStorage
+      ? loadFiltersFromStorage(localStorageKey)
+      : {};
+
+    const initialFilters = { ...savedFilters, ...urlFilters };
+    setFilters(initialFilters);
+  }, [searchParams, persistToLocalStorage, localStorageKey]);
+
+  // Salvar filtros no localStorage
+  useEffect(() => {
+    if (persistToLocalStorage && Object.keys(filters).length > 0) {
+      saveFiltersToStorage(localStorageKey, filters);
+    }
+  }, [filters, persistToLocalStorage, localStorageKey]);
+
+  // Sincronizar filtros com URL
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    const currentParams = new URLSearchParams(url.search);
+
+    // Remover parâmetros de filtro existentes
+    const filterParams = [
+      "nutrition_grades",
+      "nova_groups",
+      "categories",
+      "brands",
+      "allergens",
+      "exclude_allergens",
+      "additives",
+      "exclude_additives",
+      "no_additives",
+      "countries",
+      "sort_by",
+      "sort_order",
+      "energy_min",
+      "energy_max",
+      "fat_min",
+      "fat_max",
+      "sugars_min",
+      "sugars_max",
+      "sodium_min",
+      "sodium_max",
+    ];
+
+    filterParams.forEach((param) => {
+      currentParams.delete(param);
+    });
+
+    // Adicionar novos parâmetros de filtro
+    Object.entries(filters).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== "") {
+        if (Array.isArray(value)) {
+          if (value.length > 0) {
+            currentParams.set(key, value.join(","));
+          }
+        } else if (typeof value === "object" && value !== null) {
+          // Para nutritionRanges
+          Object.entries(value).forEach(([rangeKey, rangeValue]) => {
+            if (rangeValue?.min !== undefined) {
+              currentParams.set(`${rangeKey}_min`, rangeValue.min.toString());
+            }
+            if (rangeValue?.max !== undefined) {
+              currentParams.set(`${rangeKey}_max`, rangeValue.max.toString());
+            }
+          });
+        } else {
+          currentParams.set(key, value.toString());
+        }
+      }
+    });
+
+    // Atualizar URL sem recarregar a página
+    const newUrl = `${url.pathname}?${currentParams.toString()}`;
+    if (newUrl !== window.location.pathname + window.location.search) {
+      router.replace(newUrl, { scroll: false });
+    }
+  }, [filters, router]);
+
+  // Debounced update dos filtros
+  const debouncedUpdateFilters = useCallback(
+    debounce((newFilters: ProductFilters) => {
+      setFilters(newFilters);
+    }, debounceMs),
+    [debounceMs]
+  );
+
+  const updateFilters = useCallback(
+    (newFilters: Partial<ProductFilters>) => {
+      const updatedFilters = { ...filters, ...newFilters };
+      debouncedUpdateFilters(updatedFilters);
+    },
+    [filters, debouncedUpdateFilters]
+  );
+
+  const clearFilters = useCallback(() => {
+    setFilters({});
+    if (persistToLocalStorage) {
+      localStorage.removeItem(localStorageKey);
+    }
+  }, [persistToLocalStorage, localStorageKey]);
+
+  const hasActiveFilters = useMemo(() => {
+    return Object.values(filters).some((value) => {
+      if (Array.isArray(value)) {
+        return value.length > 0;
+      }
+      if (typeof value === "object" && value !== null) {
+        return Object.values(value).some((v) => v !== undefined && v !== null);
+      }
+      return value !== undefined && value !== null && value !== "";
+    });
+  }, [filters]);
+
+  const filterState: FilterState = {
+    filters,
+    isLoading,
+    hasActiveFilters,
+    totalResults,
+  };
+
+  return {
+    ...filterState,
+    updateFilters,
+    clearFilters,
+    setTotalResults,
+    setIsLoading,
+  };
+}
+
+// Funções auxiliares
+function parseFiltersFromURL(searchParams: URLSearchParams): ProductFilters {
+  const filters: ProductFilters = {};
+
+  // Arrays simples
+  const arrayParams = [
+    "nutrition_grades",
+    "nova_groups",
+    "categories",
+    "brands",
+    "allergens",
+    "exclude_allergens",
+    "additives",
+    "exclude_additives",
+    "countries",
+  ];
+  arrayParams.forEach((param) => {
+    const value = searchParams.get(param);
+    if (value) {
+      filters[param as keyof ProductFilters] = value.split(",") as any;
+    }
+  });
+
+  // Booleanos
+  const booleanParams = ["no_additives"];
+  booleanParams.forEach((param) => {
+    const value = searchParams.get(param);
+    if (value === "true") {
+      filters[param as keyof ProductFilters] = true as any;
+    }
+  });
+
+  // Strings simples
+  const stringParams = ["sort_by", "sort_order"];
+  stringParams.forEach((param) => {
+    const value = searchParams.get(param);
+    if (value) {
+      filters[param as keyof ProductFilters] = value as any;
+    }
+  });
+
+  // Nutrition ranges
+  const nutritionRanges: any = {};
+  const rangeParams = [
+    "energy",
+    "fat",
+    "carbohydrates",
+    "proteins",
+    "sugars",
+    "fiber",
+    "sodium",
+  ];
+  rangeParams.forEach((param) => {
+    const min = searchParams.get(`${param}_min`);
+    const max = searchParams.get(`${param}_max`);
+    if (min || max) {
+      nutritionRanges[param] = {
+        ...(min && { min: parseFloat(min) }),
+        ...(max && { max: parseFloat(max) }),
+      };
+    }
+  });
+
+  if (Object.keys(nutritionRanges).length > 0) {
+    filters.nutritionRanges = nutritionRanges;
+  }
+
+  return filters;
+}
+
+function loadFiltersFromStorage(key: string): ProductFilters {
+  try {
+    const stored = localStorage.getItem(key);
+    return stored ? JSON.parse(stored) : {};
+  } catch {
+    return {};
+  }
+}
+
+function saveFiltersToStorage(key: string, filters: ProductFilters): void {
+  try {
+    localStorage.setItem(key, JSON.stringify(filters));
+  } catch {
+    // Falha silenciosa se localStorage não estiver disponível
+  }
+}
+
+function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout;
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+}

lib/geolocation.ts

@@ -0,0 +1,145 @@
+/**
+ * Utilitário para detecção de país do usuário
+ * Usa detecção de IP server-side via API Route
+ */
+
+interface CountryInfo {
+  code: string;
+  name: string;
+}
+
+// Cache para evitar múltiplas requisições
+const CACHE_KEY = "nutriscan_user_country";
+const CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 horas
+
+/**
+ * Verifica se o cache ainda é válido
+ */
+function isCacheValid(): boolean {
+  if (typeof window === "undefined") return false;
+
+  try {
+    const cached = localStorage.getItem(CACHE_KEY);
+    if (!cached) return false;
+
+    const { timestamp } = JSON.parse(cached);
+    return Date.now() - timestamp < CACHE_DURATION;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Obtém país do cache
+ */
+function getCachedCountry(): CountryInfo | null {
+  if (typeof window === "undefined") return null;
+
+  try {
+    const cached = localStorage.getItem(CACHE_KEY);
+    if (!cached) return null;
+
+    const { data } = JSON.parse(cached);
+    return data;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Salva país no cache
+ */
+function saveToCache(country: CountryInfo): void {
+  if (typeof window === "undefined") return;
+
+  try {
+    localStorage.setItem(
+      CACHE_KEY,
+      JSON.stringify({
+        data: country,
+        timestamp: Date.now(),
+      })
+    );
+  } catch (error) {
+    console.warn("Erro ao salvar cache:", error);
+  }
+}
+
+/**
+ * Detecta o país do usuário usando detecção de IP server-side
+ * 1. Verifica cache local primeiro
+ * 2. Chama API Route /api/location que usa ip-api.com
+ * 3. Fallback para Brasil em caso de erro
+ */
+export async function detectUserCountry(
+  forceRefresh: boolean = false
+): Promise<CountryInfo> {
+  // 1. Verificar cache primeiro (a menos que forceRefresh seja true)
+  if (!forceRefresh && isCacheValid()) {
+    const cached = getCachedCountry();
+    if (cached) {
+      return cached;
+    }
+  }
+
+  try {
+    // 2. Chamar API Route que detecta país por IP
+    const response = await fetch("/api/location");
+
+    if (!response.ok) {
+      throw new Error(`API returned ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    const countryInfo: CountryInfo = {
+      code: data.countryCode,
+      name: data.country,
+    };
+
+    saveToCache(countryInfo);
+    return countryInfo;
+  } catch (error) {
+    console.warn("Country detection failed:", error);
+
+    // 3. Fallback: Brasil
+    const fallback: CountryInfo = { code: "br", name: "Brazil" };
+    saveToCache(fallback);
+    return fallback;
+  }
+}
+
+/**
+ * Limpa o cache de país
+ */
+export function clearCountryCache(): void {
+  if (typeof window === "undefined") return;
+  localStorage.removeItem(CACHE_KEY);
+}
+
+/**
+ * Obtém informações do país atual (síncrono)
+ * Retorna null se não houver cache
+ */
+export function getCurrentCountry(): CountryInfo | null {
+  if (isCacheValid()) {
+    return getCachedCountry();
+  }
+  return null;
+}
+
+/**
+ * Verifica se o usuário está no Brasil
+ */
+export function isBrazil(): boolean {
+  const country = getCurrentCountry();
+  return country?.code === "br" || country?.code === "brazil";
+}
+
+/**
+ * Obtém o código do país para a API Open Food Facts
+ */
+export function getCountryCodeForAPI(): string {
+  const country = getCurrentCountry();
+  return country?.code || "br";
+}

lib/openFoodFactsApi.ts

@@ -0,0 +1,434 @@
+/**
+ * Wrapper para a API Open Food Facts
+ * Centraliza todas as chamadas para a API e trata erros
+ */
+
+export interface Product {
+  code: string;
+  product_name: string;
+  brands?: string;
+  categories?: string;
+  ingredients_text?: string;
+  nutriments?: {
+    energy_100g?: number;
+    fat_100g?: number;
+    carbohydrates_100g?: number;
+    proteins_100g?: number;
+    sugars_100g?: number;
+    fiber_100g?: number;
+    sodium_100g?: number;
+  };
+  nutrition_grades?: string;
+  nova_group?: number;
+  image_url?: string;
+  image_small_url?: string;
+  image_front_url?: string;
+  image_front_small_url?: string;
+  countries?: string;
+  countries_tags?: string[];
+  allergens_tags?: string[];
+  additives_tags?: string[];
+}
+
+export interface SearchResult {
+  products: Product[];
+  count: number;
+  page: number;
+  page_size: number;
+  skip: number;
+}
+
+export interface ApiError {
+  message: string;
+  code?: string;
+  status?: number;
+}
+
+// Configurações da API - agora usando API Routes do Next.js
+const API_BASE_URL = ""; // Usar rotas relativas para API Routes
+
+/**
+ * Faz uma requisição para a API com tratamento de erros
+ */
+async function makeApiRequest<T>(endpoint: string): Promise<T> {
+  try {
+    const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+      headers: {
+        Accept: "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      throw new Error(
+        errorData.error || `HTTP ${response.status}: ${response.statusText}`
+      );
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Erro na API:", error);
+    throw new Error(
+      error instanceof Error
+        ? error.message
+        : "Erro desconhecido ao consultar a API"
+    );
+  }
+}
+
+/**
+ * Busca um produto específico por código de barras
+ */
+export async function searchByBarcode(
+  barcode: string
+): Promise<Product | null> {
+  try {
+    // Limpar código de barras (remover espaços e caracteres não numéricos)
+    const cleanBarcode = barcode.replace(/\D/g, "");
+
+    if (cleanBarcode.length < 8 || cleanBarcode.length > 13) {
+      throw new Error("Código de barras deve ter entre 8 e 13 dígitos");
+    }
+
+    const data = await makeApiRequest<Product>(`/api/products/${cleanBarcode}`);
+
+    return data || null;
+  } catch (error) {
+    console.error("Erro ao buscar produto por código:", error);
+    return null;
+  }
+}
+
+/**
+ * Busca produtos por nome
+ */
+export async function searchByName(
+  query: string,
+  country?: string,
+  page: number = 1,
+  pageSize: number = 20
+): Promise<SearchResult> {
+  try {
+    if (!query.trim()) {
+      throw new Error("Termo de busca não pode estar vazio");
+    }
+
+    // Construir parâmetros da URL para API Route
+    const params = new URLSearchParams({
+      q: query.trim(),
+      page: page.toString(),
+      page_size: pageSize.toString(),
+    });
+
+    // Adicionar filtro de país se especificado
+    if (country) {
+      params.append("country", country);
+    }
+
+    const data = await makeApiRequest<SearchResult>(
+      `/api/search?${params.toString()}`
+    );
+
+    return data;
+  } catch (error) {
+    console.error("Erro ao buscar produtos por nome:", error);
+    throw error;
+  }
+}
+
+/**
+ * Busca produtos por categoria
+ */
+export async function searchByCategory(
+  category: string,
+  country?: string,
+  page: number = 1,
+  pageSize: number = 20
+): Promise<SearchResult> {
+  try {
+    const params = new URLSearchParams({
+      categories_tags_en: category,
+      page_size: pageSize.toString(),
+      page: page.toString(),
+      json: "true",
+      fields: [
+        "code",
+        "product_name",
+        "brands",
+        "categories",
+        "image_url",
+        "image_small_url",
+        "nutrition_grades",
+        "nova_group",
+      ].join(","),
+    });
+
+    if (country) {
+      params.append("countries_tags_en", country);
+    }
+
+    // Chamada direta à API externa (temporária)
+    const response = await fetch(
+      `https://world.openfoodfacts.org/cgi/search.pl?${params.toString()}`,
+      {
+        headers: {
+          "User-Agent": "NutriScan/1.0 (https://nutriscan.com.br)",
+          Accept: "application/json",
+        },
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+
+    return data;
+  } catch (error) {
+    console.error("Erro ao buscar produtos por categoria:", error);
+    throw error;
+  }
+}
+
+/**
+ * Obtém categorias populares
+ */
+export async function getPopularCategories(
+  country?: string
+): Promise<string[]> {
+  try {
+    const params = new URLSearchParams({
+      json: "true",
+      fields: "categories_tags",
+    });
+
+    if (country) {
+      params.append("countries_tags_en", country);
+    }
+
+    // Chamada direta à API externa (temporária)
+    const response = await fetch(
+      `https://world.openfoodfacts.org/cgi/search.pl?${params.toString()}`,
+      {
+        headers: {
+          "User-Agent": "NutriScan/1.0 (https://nutriscan.com.br)",
+          Accept: "application/json",
+        },
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+
+    return (
+      data.facets?.categories_tags
+        ?.slice(0, 20)
+        .map((cat: { name: string; count: number }) => cat.name) || []
+    );
+  } catch (error) {
+    console.error("Erro ao obter categorias:", error);
+    return [];
+  }
+}
+
+/**
+ * Valida se um código de barras tem formato válido
+ */
+export function isValidBarcode(barcode: string): boolean {
+  const cleanBarcode = barcode.replace(/\D/g, "");
+  return cleanBarcode.length >= 8 && cleanBarcode.length <= 13;
+}
+
+/**
+ * Detecta o tipo de busca baseado na entrada do usuário
+ */
+export function detectSearchType(query: string): "barcode" | "name" {
+  const cleanQuery = query.trim();
+
+  // Se contém apenas números e tem 8-13 dígitos, é código de barras
+  if (/^\d{8,13}$/.test(cleanQuery)) {
+    return "barcode";
+  }
+
+  // Caso contrário, é busca por nome
+  return "name";
+}
+
+/**
+ * Formata dados nutricionais para exibição
+ */
+export function formatNutritionData(product: Product) {
+  const nutriments = product.nutriments;
+  if (!nutriments) return null;
+
+  // Função auxiliar para converter e formatar valores
+  const formatValue = (
+    value: number | undefined,
+    decimals: number = 1
+  ): string => {
+    if (value === undefined || value === null) return "N/A";
+    const numValue = typeof value === "string" ? parseFloat(value) : value;
+    if (isNaN(numValue)) return "N/A";
+    return decimals === 0
+      ? `${Math.round(numValue)}`
+      : `${numValue.toFixed(decimals)}`;
+  };
+
+  return {
+    energy: nutriments.energy_100g
+      ? `${formatValue(nutriments.energy_100g, 0)} kcal`
+      : "N/A",
+    fat: nutriments.fat_100g ? `${formatValue(nutriments.fat_100g)}g` : "N/A",
+    carbohydrates: nutriments.carbohydrates_100g
+      ? `${formatValue(nutriments.carbohydrates_100g)}g`
+      : "N/A",
+    proteins: nutriments.proteins_100g
+      ? `${formatValue(nutriments.proteins_100g)}g`
+      : "N/A",
+    sugars: nutriments.sugars_100g
+      ? `${formatValue(nutriments.sugars_100g)}g`
+      : "N/A",
+    fiber: nutriments.fiber_100g
+      ? `${formatValue(nutriments.fiber_100g)}g`
+      : "N/A",
+    sodium: nutriments.sodium_100g
+      ? `${formatValue(nutriments.sodium_100g)}g`
+      : "N/A",
+  };
+}
+
+/**
+ * Obtém a URL da imagem do produto (prioriza front, depois small)
+ */
+export function getProductImageUrl(product: Product): string | null {
+  return (
+    product.image_front_url ||
+    product.image_front_small_url ||
+    product.image_url ||
+    product.image_small_url ||
+    null
+  );
+}
+
+/**
+ * Calcula pontuação de completude de um produto
+ */
+function calculateCompletenessScore(product: Product): number {
+  let score = 0;
+  if (product.product_name) score += 10;
+  if (product.brands) score += 10;
+  if (product.image_front_url || product.image_url) score += 15;
+  if (product.nutriments?.energy_100g) score += 20;
+  if (product.nutrition_grades) score += 15;
+  if (product.nova_group) score += 10;
+  if (product.ingredients_text) score += 10;
+  if (product.categories) score += 10;
+  return score;
+}
+
+/**
+ * Ordena produtos com base em critérios especiais
+ */
+export function sortProducts(
+  products: Product[],
+  sortBy: string,
+  sortOrder: "asc" | "desc" = "asc"
+): Product[] {
+  const sorted = [...products].sort((a, b) => {
+    let comparison = 0;
+
+    switch (sortBy) {
+      case "with_images":
+        const aHasImage = !!(a.image_front_url || a.image_url);
+        const bHasImage = !!(b.image_front_url || b.image_url);
+        comparison = (bHasImage ? 1 : 0) - (aHasImage ? 1 : 0);
+        break;
+
+      case "with_nutrition":
+        const aHasNutrition = !!a.nutriments?.energy_100g;
+        const bHasNutrition = !!b.nutriments?.energy_100g;
+        comparison = (bHasNutrition ? 1 : 0) - (aHasNutrition ? 1 : 0);
+        break;
+
+      case "completeness":
+        const aScore = calculateCompletenessScore(a);
+        const bScore = calculateCompletenessScore(b);
+        comparison = bScore - aScore;
+        break;
+
+      case "nova_group":
+        comparison = (a.nova_group || 5) - (b.nova_group || 5);
+        break;
+
+      case "eco_score":
+        // Para eco_score, usar nutri-score como proxy (A = melhor eco)
+        const aGrade = a.nutrition_grades?.toLowerCase();
+        const bGrade = b.nutrition_grades?.toLowerCase();
+        const gradeOrder = { a: 1, b: 2, c: 3, d: 4, e: 5 };
+        const aGradeValue = gradeOrder[aGrade as keyof typeof gradeOrder] || 6;
+        const bGradeValue = gradeOrder[bGrade as keyof typeof gradeOrder] || 6;
+        comparison = aGradeValue - bGradeValue;
+        break;
+
+      case "relevance":
+        // Para relevância, usar completude + nutri-score
+        const aRelevance =
+          calculateCompletenessScore(a) + (a.nutrition_grades ? 20 : 0);
+        const bRelevance =
+          calculateCompletenessScore(b) + (b.nutrition_grades ? 20 : 0);
+        comparison = bRelevance - aRelevance;
+        break;
+
+      case "nutrition_grade":
+        const aNutriGrade = a.nutrition_grades?.toLowerCase();
+        const bNutriGrade = b.nutrition_grades?.toLowerCase();
+        const gradeOrderForNutri = { a: 1, b: 2, c: 3, d: 4, e: 5 };
+        const aNutriValue =
+          gradeOrderForNutri[aNutriGrade as keyof typeof gradeOrderForNutri] ||
+          6;
+        const bNutriValue =
+          gradeOrderForNutri[bNutriGrade as keyof typeof gradeOrderForNutri] ||
+          6;
+        comparison = aNutriValue - bNutriValue;
+        break;
+
+      case "name":
+        comparison = (a.product_name || "").localeCompare(b.product_name || "");
+        break;
+
+      case "brand":
+        comparison = (a.brands || "").localeCompare(b.brands || "");
+        break;
+
+      case "energy":
+        const aEnergy = a.nutriments?.energy_100g || 0;
+        const bEnergy = b.nutriments?.energy_100g || 0;
+        comparison = aEnergy - bEnergy;
+        break;
+
+      case "fat":
+        const aFat = a.nutriments?.fat_100g || 0;
+        const bFat = b.nutriments?.fat_100g || 0;
+        comparison = aFat - bFat;
+        break;
+
+      case "sugars":
+        const aSugars = a.nutriments?.sugars_100g || 0;
+        const bSugars = b.nutriments?.sugars_100g || 0;
+        comparison = aSugars - bSugars;
+        break;
+
+      default:
+        comparison = 0;
+    }
+
+    return sortOrder === "asc" ? comparison : -comparison;
+  });
+
+  return sorted;
+}

lib/types.ts

@@ -0,0 +1,282 @@
+/**
+ * Tipos para sistema de filtros de produtos
+ * Baseado na API do Open Food Facts
+ */
+
+export interface ProductFilters {
+  // Filtros de classificação nutricional
+  nutritionGrades?: ("a" | "b" | "c" | "d" | "e")[];
+  novaGroups?: (1 | 2 | 3 | 4)[];
+
+  // Filtros de categoria e marca
+  categories?: string[];
+  brands?: string[];
+
+  // Filtros de ingredientes e aditivos
+  allergens?: string[];
+  excludeAllergens?: string[];
+  additives?: string[];
+  excludeAdditives?: string[];
+  noAdditives?: boolean;
+
+  // Filtros nutricionais (valores por 100g)
+  nutritionRanges?: {
+    energy?: { min?: number; max?: number };
+    fat?: { min?: number; max?: number };
+    carbohydrates?: { min?: number; max?: number };
+    proteins?: { min?: number; max?: number };
+    sugars?: { min?: number; max?: number };
+    fiber?: { min?: number; max?: number };
+    sodium?: { min?: number; max?: number };
+  };
+
+  // Filtros de país
+  countries?: string[];
+
+  // Ordenação
+  sortBy?:
+    | "relevance"
+    | "nutrition_grade"
+    | "name"
+    | "brand"
+    | "energy"
+    | "fat"
+    | "sugars";
+  sortOrder?: "asc" | "desc";
+}
+
+export interface FilterOption {
+  value: string;
+  label: string;
+  count?: number;
+  color?: string;
+  description?: string;
+}
+
+export interface NutritionGrade {
+  grade: "a" | "b" | "c" | "d" | "e";
+  label: string;
+  color: string;
+  description: string;
+}
+
+export interface NovaGroup {
+  group: 1 | 2 | 3 | 4;
+  label: string;
+  color: string;
+  description: string;
+}
+
+export interface SortOption {
+  value: string;
+  label: string;
+  description?: string;
+  icon?: string;
+}
+
+export interface FilterState {
+  filters: ProductFilters;
+  isLoading: boolean;
+  hasActiveFilters: boolean;
+  totalResults: number;
+}
+
+export interface FilterSidebarProps {
+  filters: ProductFilters;
+  onFiltersChange: (filters: ProductFilters) => void;
+  onClearFilters: () => void;
+  isLoading?: boolean;
+  totalResults?: number;
+}
+
+// Constantes para configuração dos filtros
+export const NUTRITION_GRADES: NutritionGrade[] = [
+  {
+    grade: "a",
+    label: "A",
+    color: "bg-green-500",
+    description: "Muito bom",
+  },
+  {
+    grade: "b",
+    label: "B",
+    color: "bg-green-400",
+    description: "Bom",
+  },
+  {
+    grade: "c",
+    label: "C",
+    color: "bg-yellow-500",
+    description: "Regular",
+  },
+  {
+    grade: "d",
+    label: "D",
+    color: "bg-orange-500",
+    description: "Ruim",
+  },
+  {
+    grade: "e",
+    label: "E",
+    color: "bg-red-500",
+    description: "Muito ruim",
+  },
+];
+
+export const NOVA_GROUPS: NovaGroup[] = [
+  {
+    group: 1,
+    label: "1",
+    color: "bg-green-500",
+    description: "Alimentos não processados ou minimamente processados",
+  },
+  {
+    group: 2,
+    label: "2",
+    color: "bg-yellow-500",
+    description: "Ingredientes culinários processados",
+  },
+  {
+    group: 3,
+    label: "3",
+    color: "bg-orange-500",
+    description: "Alimentos processados",
+  },
+  {
+    group: 4,
+    label: "4",
+    color: "bg-red-500",
+    description: "Alimentos ultraprocessados",
+  },
+];
+
+export const SORT_OPTIONS: SortOption[] = [
+  {
+    value: "relevance",
+    label: "Relevância",
+    description: "Resultados mais relevantes primeiro",
+    icon: "TrendingUp",
+  },
+  {
+    value: "nutrition_grade",
+    label: "Nutri-Score",
+    description: "Melhor classificação nutricional primeiro",
+    icon: "Zap",
+  },
+  {
+    value: "name",
+    label: "Nome (A-Z)",
+    description: "Ordenar por nome do produto",
+    icon: "AlphabeticalOrder",
+  },
+  {
+    value: "brand",
+    label: "Marca (A-Z)",
+    description: "Ordenar por marca",
+    icon: "Building2",
+  },
+  {
+    value: "energy",
+    label: "Calorias",
+    description: "Menor valor energético primeiro",
+    icon: "Flame",
+  },
+  {
+    value: "fat",
+    label: "Gorduras",
+    description: "Menor teor de gordura primeiro",
+    icon: "Droplet",
+  },
+  {
+    value: "sugars",
+    label: "Açúcares",
+    description: "Menor teor de açúcar primeiro",
+    icon: "Candy",
+  },
+  {
+    value: "completeness",
+    label: "Completude",
+    description: "Produtos com mais informações primeiro",
+    icon: "FileCheck",
+  },
+  {
+    value: "with_images",
+    label: "Com Fotos",
+    description: "Produtos com imagens primeiro",
+    icon: "Image",
+  },
+  {
+    value: "with_nutrition",
+    label: "Com Info Nutricional",
+    description: "Produtos com dados nutricionais completos",
+    icon: "Activity",
+  },
+  {
+    value: "eco_score",
+    label: "Eco-Score",
+    description: "Melhor impacto ambiental primeiro",
+    icon: "Leaf",
+  },
+  {
+    value: "nova_group",
+    label: "Nível de Processamento",
+    description: "Menos processados primeiro",
+    icon: "Layers",
+  },
+];
+
+// Categorias populares para filtros
+export const POPULAR_CATEGORIES = [
+  "Beverages",
+  "Dairy",
+  "Snacks",
+  "Bakery",
+  "Meat",
+  "Fruits",
+  "Vegetables",
+  "Cereals",
+  "Sweets",
+  "Condiments",
+  "Frozen foods",
+  "Canned foods",
+];
+
+// Categorias com ícones para interface
+export const POPULAR_CATEGORIES_WITH_ICONS = [
+  { value: "Beverages", label: "Bebidas", icon: "Coffee" },
+  { value: "Dairy", label: "Laticínios", icon: "Milk" },
+  { value: "Snacks", label: "Snacks", icon: "Cookie" },
+  { value: "Bakery", label: "Padaria", icon: "Croissant" },
+  { value: "Meat", label: "Carnes", icon: "Beef" },
+  { value: "Fruits", label: "Frutas", icon: "Apple" },
+  { value: "Vegetables", label: "Vegetais", icon: "Carrot" },
+  { value: "Cereals", label: "Cereais", icon: "Wheat" },
+  { value: "Sweets", label: "Doces", icon: "Candy" },
+  { value: "Condiments", label: "Condimentos", icon: "Soup" },
+  { value: "Frozen foods", label: "Congelados", icon: "Snowflake" },
+  { value: "Canned foods", label: "Enlatados", icon: "Package" },
+];
+
+// Alérgenos comuns
+export const COMMON_ALLERGENS = [
+  "gluten",
+  "milk",
+  "eggs",
+  "nuts",
+  "peanuts",
+  "soy",
+  "fish",
+  "shellfish",
+  "sesame",
+];
+
+// Aditivos comuns
+export const COMMON_ADDITIVES = [
+  "preservatives",
+  "artificial colors",
+  "artificial flavors",
+  "sweeteners",
+  "emulsifiers",
+  "stabilizers",
+  "thickeners",
+];

package.json

@@ -14,19 +14,28 @@
   },
   "dependencies": {
     "@prisma/client": "^5.22.0",
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.2.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^11.12.0",
+    "html5-qrcode": "^2.3.8",
     "lucide-react": "^0.460.0",
     "next": "14.2.18",
     "next-themes": "^0.4.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7"
   },

pnpm-lock.yaml

@@ -10,22 +10,43 @@ importers:
     dependencies:
       '@prisma/client':
         specifier: ^5.22.0
-        version: 5.22.0
+        version: 5.22.0([email protected])
+      '@radix-ui/react-accordion':
+        specifier: ^1.2.12
+        version: 1.2.12(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
       '@radix-ui/react-alert-dialog':
         specifier: ^1.1.2
         version: 1.1.2(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-avatar':
+        specifier: ^1.1.10
+        version: 1.1.10(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-checkbox':
+        specifier: ^1.3.3
+        version: 1.3.3(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
       '@radix-ui/react-dialog':
         specifier: ^1.1.2
         version: 1.1.2(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.2
         version: 2.1.2(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-radio-group':
+        specifier: ^1.3.8
+        version: 1.3.8(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
       '@radix-ui/react-select':
         specifier: ^2.1.2
         version: 2.1.2(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-separator':
+        specifier: ^1.1.7
+        version: 1.1.7(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-slider':
+        specifier: ^1.3.6
+        version: 1.3.6(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
       '@radix-ui/react-slot':
         specifier: ^1.1.0
         version: 1.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-switch':
+        specifier: ^1.2.6
+        version: 1.2.6(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -35,6 +56,9 @@ importers:
       framer-motion:
         specifier: ^11.12.0
         version: 11.12.0([email protected]([email protected]))([email protected])
+      html5-qrcode:
+        specifier: ^2.3.8
+        version: 2.3.8
       lucide-react:
         specifier: ^0.460.0
         version: 0.460.0([email protected])
@@ -50,6 +74,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1([email protected])
+      react-icons:
+        specifier: ^5.5.0
+        version: 5.5.0([email protected])
       tailwind-merge:
         specifier: ^2.5.5
         version: 2.5.5
@@ -78,6 +105,9 @@ importers:
       postcss:
         specifier: ^8.4.49
         version: 8.4.49
+      prisma:
+        specifier: ^5.22.0
+        version: 5.22.0
       tailwindcss:
         specifier: ^3.4.15
         version: 3.4.15
@@ -281,12 +311,46 @@ packages:
       prisma:
         optional: true
 
+  '@prisma/[email protected]':
+    resolution: {integrity: sha512-AUt44v3YJeggO2ZU5BkXI7M4hu9BF2zzH2iF2V5pyXT/lRTyWiElZ7It+bRH1EshoMRxHgpYg4VB6rCM+mG5jQ==}
+
+  '@prisma/engines-version@5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2':
+    resolution: {integrity: sha512-2PTmxFR2yHW/eB3uqWtcgRcgAbG1rwG9ZriSvQw+nnb7c4uCr3RAcGMb6/zfE88SKlC1Nj2ziUvc96Z379mHgQ==}
+
+  '@prisma/[email protected]':
+    resolution: {integrity: sha512-UNjfslWhAt06kVL3CjkuYpHAWSO6L4kDCVPegV6itt7nD1kSJavd3vhgAEhjglLJJKEdJ7oIqDJ+yHk6qO8gPA==}
+
+  '@prisma/[email protected]':
+    resolution: {integrity: sha512-bkrD/Mc2fSvkQBV5EpoFcZ87AvOgDxbG99488a5cexp5Ccny+UM6MAe/UFkUC0wLYD9+9befNOqGiIJhhq+HbA==}
+
+  '@prisma/[email protected]':
+    resolution: {integrity: sha512-pHhpQdr1UPFpt+zFfnPazhulaZYCUqeIcPpJViYoq9R+D/yw4fjE+CtnsnKzPYm0ddUbeXUzjGVGIRVgPDCk4Q==}
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-eGSlLzPhKO+TErxkiGcCZGuvbVMnLA1MTnyBksGOeGRGkxHiiJUujsjmNTdWTm4iHVSRaUao9/4Ur671auMghQ==}
     peerDependencies:
@@ -313,6 +377,45 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==}
     peerDependencies:
@@ -326,6 +429,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
     peerDependencies:
@@ -335,6 +451,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==}
     peerDependencies:
@@ -353,6 +478,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==}
     peerDependencies:
@@ -375,6 +509,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==}
     peerDependencies:
@@ -432,6 +575,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-lZ0R4qR2Al6fZ4yCCZzu/ReTFrylHFxIqy7OezIpWF4bL0o9biKo0pFIvkaew3TyZ9Fy5gYVrR5zCGZBVbO1zg==}
     peerDependencies:
@@ -484,6 +636,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
     peerDependencies:
@@ -497,6 +662,32 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==}
     peerDependencies:
@@ -510,6 +701,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-rZJtWmorC7dFRi0owDmoijm6nSJH1tVw64QGiNIZ9PNLyBDtG+iAq+XGsya052At4BfarzY/Dhv9wrrUr6IMZA==}
     peerDependencies:
@@ -523,6 +727,32 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
     peerDependencies:
@@ -532,6 +762,28 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
     peerDependencies:
@@ -541,6 +793,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
     peerDependencies:
@@ -550,6 +811,24 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
     peerDependencies:
@@ -559,6 +838,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
     peerDependencies:
@@ -568,6 +856,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
     peerDependencies:
@@ -577,6 +874,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
     peerDependencies:
@@ -595,6 +901,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/[email protected]':
     resolution: {integrity: sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==}
     peerDependencies:
@@ -1362,6 +1677,9 @@ packages:
     resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
     engines: {node: '>=0.10.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ==}
+
   [email protected]:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -1855,6 +2173,11 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-vtpjW3XuYCSnMsNVBjLMNkTj6OZbudcPPTPYHqX0CJfpcdWciI1dM8uHETwmDxxiqEwCIE6WvXucWUetJgfu/A==}
+    engines: {node: '>=16.13'}
+    hasBin: true
+
   [email protected]:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
@@ -1870,6 +2193,11 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  [email protected]:
+    resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==}
+    peerDependencies:
+      react: '*'
+
   [email protected]:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -2198,6 +2526,11 @@ packages:
       '@types/react':
         optional: true
 
+  [email protected]:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   [email protected]:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -2442,12 +2775,56 @@ snapshots:
   '@pkgjs/[email protected]':
     optional: true
 
-  '@prisma/[email protected]': {}
+  '@prisma/[email protected]([email protected])':
+    optionalDependencies:
+      prisma: 5.22.0
+
+  '@prisma/[email protected]': {}
+
+  '@prisma/engines-version@5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2': {}
+
+  '@prisma/[email protected]':
+    dependencies:
+      '@prisma/debug': 5.22.0
+      '@prisma/engines-version': 5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2
+      '@prisma/fetch-engine': 5.22.0
+      '@prisma/get-platform': 5.22.0
+
+  '@prisma/[email protected]':
+    dependencies:
+      '@prisma/debug': 5.22.0
+      '@prisma/engines-version': 5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2
+      '@prisma/get-platform': 5.22.0
+
+  '@prisma/[email protected]':
+    dependencies:
+      '@prisma/debug': 5.22.0
 
   '@radix-ui/[email protected]': {}
 
+  '@radix-ui/[email protected]': {}
+
   '@radix-ui/[email protected]': {}
 
+  '@radix-ui/[email protected]': {}
+
+  '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collapsible': 1.1.12(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-collection': 1.1.7(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-direction': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-id': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-primitive': 2.1.3(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/[email protected])([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -2471,6 +2848,51 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-primitive': 2.1.3(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/[email protected])([email protected])
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
+  '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-presence': 1.1.5(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-primitive': 2.1.3(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/[email protected])([email protected])
+      '@radix-ui/react-use-previous': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-use-size': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
+  '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-id': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-presence': 1.1.5(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-primitive': 2.1.3(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/[email protected])([email protected])
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.0(@types/[email protected])([email protected])
@@ -2483,12 +2905,30 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-primitive': 2.1.3(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-slot': 1.2.3(@types/[email protected])([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/[email protected](@types/[email protected])([email protected])':
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/[email protected](@types/[email protected])([email protected])':
     dependencies:
       react: 18.3.1
@@ -2501,6 +2941,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -2529,6 +2975,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -2581,6 +3033,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -2645,6 +3104,16 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
     dependencies:
       '@radix-ui/react-slot': 1.1.0(@types/[email protected])([email protected])
@@ -2654,6 +3123,33 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/[email protected])([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
+  '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-direction': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-presence': 1.1.5(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-primitive': 2.1.3(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-roving-focus': 1.1.11(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/[email protected])([email protected])
+      '@radix-ui/react-use-previous': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-use-size': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -2671,6 +3167,23 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-direction': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-id': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-primitive': 2.1.3(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/[email protected])([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
     dependencies:
       '@radix-ui/number': 1.1.0
@@ -2700,6 +3213,34 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
+  '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-direction': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-primitive': 2.1.3(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/[email protected])([email protected])
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-use-previous': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-use-size': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/[email protected](@types/[email protected])([email protected])':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.0(@types/[email protected])([email protected])
@@ -2707,12 +3248,40 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
+  '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-primitive': 2.1.3(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/[email protected])([email protected])
+      '@radix-ui/react-use-previous': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-use-size': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/[email protected](@types/[email protected])([email protected])':
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/[email protected](@types/[email protected])([email protected])':
     dependencies:
       '@radix-ui/react-use-callback-ref': 1.1.0(@types/[email protected])([email protected])
@@ -2720,6 +3289,21 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/[email protected])([email protected])
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/[email protected](@types/[email protected])([email protected])':
     dependencies:
       '@radix-ui/react-use-callback-ref': 1.1.0(@types/[email protected])([email protected])
@@ -2727,18 +3311,37 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.3.1
+      use-sync-external-store: 1.6.0([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/[email protected](@types/[email protected])([email protected])':
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/[email protected](@types/[email protected])([email protected])':
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/[email protected](@types/[email protected])([email protected])':
     dependencies:
       '@radix-ui/rect': 1.1.0
@@ -2753,6 +3356,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/[email protected](@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])':
     dependencies:
       '@radix-ui/react-primitive': 2.0.0(@types/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
@@ -3738,6 +4348,8 @@ snapshots:
     dependencies:
       parse-passwd: 1.0.0
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]:
@@ -4200,6 +4812,12 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      '@prisma/engines': 5.22.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
   [email protected]:
     dependencies:
       loose-envify: 1.4.0
@@ -4216,6 +4834,10 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  [email protected]([email protected]):
+    dependencies:
+      react: 18.3.1
+
   [email protected]: {}
 
   [email protected](@types/[email protected])([email protected]):
@@ -4595,6 +5217,10 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  [email protected]([email protected]):
+    dependencies:
+      react: 18.3.1
+
   [email protected]: {}
 
   [email protected]:

pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+onlyBuiltDependencies:
+  - '@prisma/client'
+  - '@prisma/engines'
+  - prisma

prisma/schema.prisma

@@ -9,9 +9,9 @@ datasource db {
 
 model Lista {
   id        String     @id
-  produtos  Produtos[]
   createdAt DateTime   @default(now())
   updatedAt DateTime   @default(now()) @updatedAt
+  produtos  Produtos[]
 }
 
 model Produtos {
@@ -20,8 +20,8 @@ model Produtos {
   qtd       Float
   tipoUN    String
   comprado  Boolean  @default(false)
-  listaId   String   @default("default") // Valor padrão temporário
-  lista     Lista    @relation(fields: [listaId], references: [id])
+  listaId   String   @default("default")
   createdAt DateTime @default(now())
   updatedAt DateTime @default(now()) @updatedAt
+  lista     Lista    @relation(fields: [listaId], references: [id])
 }

public/manifest.json

@@ -1,21 +1,18 @@
 {
-    "name": "Resenha Itapoá",
-    "short_name": "Resenha",
-    "description": "Gerenciador de listas de compras",
-    "start_url": "/",
-    "display": "standalone",
-    "background_color": "#ffffff",
-    "theme_color": "#0055FF",
-    "icons": [
-      {
-        "src": "/icon-192.png",
-        "sizes": "192x192",
-        "type": "image/png"
-      },
-      {
-        "src": "/icon-512.png",
-        "sizes": "512x512",
-        "type": "image/png"
-      }
-    ]
-  }
+  "name": "NutriScan - Informações Nutricionais",
+  "short_name": "NutriScan",
+  "description": "Descubra informações nutricionais completas de milhares de produtos alimentícios",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#0055FF",
+  "categories": ["food", "nutrition", "health", "lifestyle"],
+  "lang": "pt-BR",
+  "icons": [
+    {
+      "src": "/favicon.ico",
+      "sizes": "any",
+      "type": "image/x-icon"
+    }
+  ]
+}

tailwind.config.ts

@@ -8,59 +8,84 @@ const config: Config = {
 		"./app/**/*.{js,ts,jsx,tsx,mdx}",
 	],
 	theme: {
-		extend: {
-			fontFamily: {
-				display: ['Poppins', 'sans-serif'],
-			},
-			colors: {
-				background: 'hsl(var(--background))',
-				foreground: 'hsl(var(--foreground))',
-				card: {
-					DEFAULT: 'hsl(var(--card))',
-					foreground: 'hsl(var(--card-foreground))'
-				},
-				popover: {
-					DEFAULT: 'hsl(var(--popover))',
-					foreground: 'hsl(var(--popover-foreground))'
-				},
-				primary: {
-					DEFAULT: 'hsl(var(--primary))',
-					foreground: 'hsl(var(--primary-foreground))'
-				},
-				secondary: {
-					DEFAULT: 'hsl(var(--secondary))',
-					foreground: 'hsl(var(--secondary-foreground))'
-				},
-				muted: {
-					DEFAULT: 'hsl(var(--muted))',
-					foreground: 'hsl(var(--muted-foreground))'
-				},
-				accent: {
-					DEFAULT: 'hsl(var(--accent))',
-					foreground: 'hsl(var(--accent-foreground))'
-				},
-				destructive: {
-					DEFAULT: 'hsl(var(--destructive))',
-					foreground: 'hsl(var(--destructive-foreground))'
-				},
-				border: 'hsl(var(--border))',
-				input: 'hsl(var(--input))',
-				ring: 'hsl(var(--ring))',
-				chart: {
-					'1': 'hsl(var(--chart-1))',
-					'2': 'hsl(var(--chart-2))',
-					'3': 'hsl(var(--chart-3))',
-					'4': 'hsl(var(--chart-4))',
-					'5': 'hsl(var(--chart-5))'
-				}
-			},
-			borderRadius: {
-				lg: 'var(--radius)',
-				md: 'calc(var(--radius) - 2px)',
-				sm: 'calc(var(--radius) - 4px)'
-			}
-		}
-	},
+    	extend: {
+    		fontFamily: {
+    			display: [
+    				'Poppins',
+    				'sans-serif'
+    			]
+    		},
+    		colors: {
+    			background: 'hsl(var(--background))',
+    			foreground: 'hsl(var(--foreground))',
+    			card: {
+    				DEFAULT: 'hsl(var(--card))',
+    				foreground: 'hsl(var(--card-foreground))'
+    			},
+    			popover: {
+    				DEFAULT: 'hsl(var(--popover))',
+    				foreground: 'hsl(var(--popover-foreground))'
+    			},
+    			primary: {
+    				DEFAULT: 'hsl(var(--primary))',
+    				foreground: 'hsl(var(--primary-foreground))'
+    			},
+    			secondary: {
+    				DEFAULT: 'hsl(var(--secondary))',
+    				foreground: 'hsl(var(--secondary-foreground))'
+    			},
+    			muted: {
+    				DEFAULT: 'hsl(var(--muted))',
+    				foreground: 'hsl(var(--muted-foreground))'
+    			},
+    			accent: {
+    				DEFAULT: 'hsl(var(--accent))',
+    				foreground: 'hsl(var(--accent-foreground))'
+    			},
+    			destructive: {
+    				DEFAULT: 'hsl(var(--destructive))',
+    				foreground: 'hsl(var(--destructive-foreground))'
+    			},
+    			border: 'hsl(var(--border))',
+    			input: 'hsl(var(--input))',
+    			ring: 'hsl(var(--ring))',
+    			chart: {
+    				'1': 'hsl(var(--chart-1))',
+    				'2': 'hsl(var(--chart-2))',
+    				'3': 'hsl(var(--chart-3))',
+    				'4': 'hsl(var(--chart-4))',
+    				'5': 'hsl(var(--chart-5))'
+    			}
+    		},
+    		borderRadius: {
+    			lg: 'var(--radius)',
+    			md: 'calc(var(--radius) - 2px)',
+    			sm: 'calc(var(--radius) - 4px)'
+    		},
+    		keyframes: {
+    			'accordion-down': {
+    				from: {
+    					height: '0'
+    				},
+    				to: {
+    					height: 'var(--radix-accordion-content-height)'
+    				}
+    			},
+    			'accordion-up': {
+    				from: {
+    					height: 'var(--radix-accordion-content-height)'
+    				},
+    				to: {
+    					height: '0'
+    				}
+    			}
+    		},
+    		animation: {
+    			'accordion-down': 'accordion-down 0.2s ease-out',
+    			'accordion-up': 'accordion-up 0.2s ease-out'
+    		}
+    	}
+    },
 	plugins: [require("tailwindcss-animate")],
 };
 export default config;