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
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
8d6cbeb0bb
commit
9a4e4c762e
51 files changed
+7389
-218
No files matched your search
@@ -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 "";
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
+145
-29
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
+248
-62
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
+143
-8
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user