feat(footer, header, landing): enhance UI components and improve navigation
- Updated Footer component with new links and dynamic year display. - Refactored Header component to improve mobile navigation and theme toggling. - Enhanced DonationSection and Features components with improved layout and animations. - Updated HowItWorks and Impact sections for better user engagement and clarity. - Improved product page layout and error handling in API interactions. - General UI refinements across various components for a cohesive user experience.
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
b0f95704e1
commit
f98c648311
21 files changed
+3335
-12057
No files matched your search
+108
-130
@@ -1,3 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import {
|
||||
ExternalLink,
|
||||
Github,
|
||||
@@ -5,171 +10,144 @@ import {
|
||||
Globe,
|
||||
Shield,
|
||||
ScanLine,
|
||||
Database,
|
||||
Lock,
|
||||
} from "lucide-react";
|
||||
|
||||
const FOOTER_LINKS = {
|
||||
navigation: [
|
||||
{ href: "/#como-funciona", label: "Protocolo" },
|
||||
{ href: "/#recursos", label: "Recursos" },
|
||||
{ href: "/sobre", label: "Sobre o Projeto" },
|
||||
{ href: "/produto/exemplo", label: "Sandbox (Exemplo)" },
|
||||
],
|
||||
resources: [
|
||||
{ icon: Shield, label: "Dados Colaborativos" },
|
||||
{ icon: Globe, label: "Rede Global" },
|
||||
{ icon: ScanLine, label: "Algoritmo de Busca" },
|
||||
],
|
||||
};
|
||||
|
||||
export function Footer() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<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">
|
||||
<img
|
||||
src="/apple-touch-icon.png"
|
||||
alt="NutriScan Logo"
|
||||
className="w-10 h-10 rounded-xl"
|
||||
/>
|
||||
<footer className="bg-[#030712] text-gray-400 border-t border-gray-800/50 transition-colors duration-500">
|
||||
<div className="max-w-7xl mx-auto px-6 py-20">
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 mb-20">
|
||||
|
||||
{/* Brand Identity - 4 Colunas */}
|
||||
<div className="lg:col-span-4 space-y-8">
|
||||
<Link href="/" className="flex items-center gap-3 group">
|
||||
<div className="relative w-10 h-10 bg-blue-600 rounded-xl overflow-hidden shadow-lg shadow-blue-500/10">
|
||||
<Image src="/icon.png" alt="Logo" fill className="object-contain p-2" priority />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold">NutriScan</h3>
|
||||
<p className="text-sm text-gray-400">
|
||||
Informações nutricionais
|
||||
<h3 className="text-xl font-black text-white tracking-tighter leading-none">
|
||||
NUTRI<span className="text-blue-500">SCAN</span>
|
||||
</h3>
|
||||
<p className="text-[10px] font-bold text-gray-500 uppercase tracking-[0.2em] mt-1">
|
||||
Data Sovereignty
|
||||
</p>
|
||||
</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.
|
||||
</Link>
|
||||
|
||||
<p className="text-sm leading-relaxed max-w-sm">
|
||||
Soberania alimentar através da transparência. Extraímos metadados nutricionais complexos para devolver o poder de escolha ao cidadão.
|
||||
</p>
|
||||
<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 className="flex items-center gap-2 text-[11px] font-mono uppercase tracking-widest text-gray-500">
|
||||
<Heart className="w-3 h-3 text-red-500 animate-pulse" />
|
||||
<span>Engineered in Garuva, SC</span>
|
||||
</div>
|
||||
</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>
|
||||
{/* Navigation - 2 Colunas */}
|
||||
<div className="lg:col-span-2">
|
||||
<h4 className="text-white font-bold text-sm uppercase tracking-widest mb-6">Sitemap</h4>
|
||||
<ul className="space-y-4">
|
||||
{FOOTER_LINKS.navigation.map((link) => (
|
||||
<li key={link.href}>
|
||||
<Link href={link.href} className="text-sm hover:text-blue-400 transition-colors">
|
||||
{link.label}
|
||||
</Link>
|
||||
</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 colaborativos</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>
|
||||
{/* Logic/Features - 2 Colunas */}
|
||||
<div className="lg:col-span-2">
|
||||
<h4 className="text-white font-bold text-sm uppercase tracking-widest mb-6">Infraestrutura</h4>
|
||||
<ul className="space-y-4">
|
||||
{FOOTER_LINKS.resources.map((item) => (
|
||||
<li key={item.label} className="flex items-center gap-3 text-sm">
|
||||
<item.icon className="w-4 h-4 text-gray-600" />
|
||||
<span>{item.label}</span>
|
||||
</li>
|
||||
))}
|
||||
<li className="text-[11px] font-mono text-blue-500/80">Nutri-Score v2.1</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>
|
||||
{/* Data Source Card - 4 Colunas */}
|
||||
<div className="lg:col-span-4">
|
||||
<div className="bg-gray-900/50 border border-gray-800 p-6 rounded-2xl backdrop-blur-sm">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="p-2 bg-blue-500/10 rounded-lg">
|
||||
<Database className="w-5 h-5 text-blue-500" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold">Open Food Facts</h4>
|
||||
</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 className="text-xs leading-relaxed text-gray-500 mb-6">
|
||||
A maior base de dados colaborativa de alimentos do mundo. Dados sob licença ODbL (Open Database License).
|
||||
</p>
|
||||
<a
|
||||
href="https://world.openfoodfacts.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-400 hover:text-blue-300 text-sm transition-colors"
|
||||
className="inline-flex items-center gap-2 text-xs font-black text-blue-500 uppercase tracking-widest hover:text-blue-400 transition-all"
|
||||
>
|
||||
Visitar Open Food Facts →
|
||||
Protocolo de Dados <ExternalLink size={12} />
|
||||
</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>
|
||||
|
||||
{/* Disclaimer */}
|
||||
<div className="bg-gray-800 rounded-lg p-6 my-12">
|
||||
<p className="text-xs text-gray-400 text-center leading-relaxed">
|
||||
<strong>Disclaimer:</strong> Os dados apresentados são fornecidos
|
||||
pelo Open Food Facts, uma base de dados colaborativa. Não garantimos
|
||||
a precisão, completude ou atualidade das informações. Sempre
|
||||
verifique as informações na embalagem do produto.
|
||||
</p>
|
||||
{/* Disclaimer Técnico - Estilo "Regulatory" */}
|
||||
<div className="border-t border-gray-800/50 pt-12">
|
||||
<div className="bg-gray-900/30 border border-gray-800/50 p-6 rounded-2xl flex flex-col md:flex-row items-center gap-6">
|
||||
<Lock className="w-8 h-8 text-gray-700 shrink-0" />
|
||||
<p className="text-[10px] md:text-xs text-gray-500 leading-relaxed text-center md:text-left">
|
||||
<strong className="text-gray-400 uppercase tracking-widest">Aviso Legal (Disclaimer):</strong> Os dados são extraídos de fontes colaborativas. Não garantimos a integridade absoluta das informações nutricionais em comparação com a embalagem física. O uso desta ferramenta é consultivo e não substitui orientação médica ou nutricional profissional.
|
||||
</p>
|
||||
</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.
|
||||
<br />
|
||||
<span className="text-xs">
|
||||
Desenvolvido por{" "}
|
||||
<a
|
||||
href="https://evandro.dev.br"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-400 hover:text-blue-300 transition-colors"
|
||||
>
|
||||
evandro.dev.br
|
||||
</a>{" "}
|
||||
e mantido por NutriScan
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-6 text-sm text-gray-400">
|
||||
<a href="#" className="hover:text-white transition-colors">
|
||||
Privacidade
|
||||
{/* Bottom Bar */}
|
||||
<div className="mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<div className="text-[11px] font-mono text-gray-600 text-center md:text-left space-y-1">
|
||||
<p>© {currentYear} NutriScan Systems. Open Source Initiative.</p>
|
||||
<p>
|
||||
Lead Architect:{" "}
|
||||
<a href="https://evandro.dev.br" target="_blank" className="text-blue-500 hover:underline">
|
||||
evandro.dev.br
|
||||
</a>
|
||||
<a href="#" className="hover:text-white transition-colors">
|
||||
Termos
|
||||
</a>
|
||||
<a href="#" className="hover:text-white transition-colors">
|
||||
Contato
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/privacidade" className="text-[11px] font-black uppercase tracking-widest hover:text-white transition-colors">Privacidade</Link>
|
||||
<Link href="/termos" className="text-[11px] font-black uppercase tracking-widest hover:text-white transition-colors">Termos</Link>
|
||||
</div>
|
||||
<a href="https://github.com" target="_blank" className="p-2 bg-gray-900 rounded-full hover:bg-gray-800 transition-colors">
|
||||
<Github className="w-4 h-4 text-white" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
}
|
||||
+113
-105
@@ -1,139 +1,147 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { useTheme } from "next-themes";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Sun, Moon, Menu, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Image from "next/image"
|
||||
|
||||
// 1. Definição de Dados Centralizada (SSOT - Single Source of Truth)
|
||||
const NAV_LINKS = [
|
||||
{ href: "/", label: "Como funciona" },
|
||||
{ href: "/#recursos", label: "Recursos" },
|
||||
{ href: "/sobre", label: "Sobre" },
|
||||
];
|
||||
|
||||
export function Header() {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const { theme, setTheme } = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
// Prevenção de Hydration Mismatch
|
||||
useEffect(() => setMounted(true), []);
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme(theme === "dark" ? "light" : "dark");
|
||||
};
|
||||
|
||||
const toggleMenu = () => {
|
||||
setIsMenuOpen(!isMenuOpen);
|
||||
};
|
||||
const toggleTheme = () => setTheme(theme === "dark" ? "light" : "dark");
|
||||
|
||||
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-14 sm:h-16">
|
||||
{/* Logo - compacto em mobile */}
|
||||
<div className="flex items-center gap-2 sm:gap-3">
|
||||
<img
|
||||
src="/apple-touch-icon.png"
|
||||
alt="NutriScan Logo"
|
||||
className="w-8 h-8 sm:w-10 sm:h-10 rounded-xl"
|
||||
/>
|
||||
<div className="hidden sm:block">
|
||||
<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>
|
||||
<header className="sticky top-0 z-[100] w-full bg-white/70 dark:bg-gray-900/70 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 transition-colors duration-500">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
|
||||
{/* Logo Section - Unificada */}
|
||||
<Link href="/" className="flex items-center gap-3 group">
|
||||
{/* Container do Logo com Referencial Relativo */}
|
||||
<div className="w-10 h-10 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/20 group-hover:rotate-6 transition-transform relative overflow-hidden">
|
||||
<Image
|
||||
src="/apple-touch-icon.png"
|
||||
alt="NutriScan Logo"
|
||||
fill // Ocupa todo o container pai
|
||||
priority // CRÍTICO: Carrega o logo antes de tudo para melhorar o LCP
|
||||
sizes="40px" // Dica para o browser sobre o tamanho real em pixels
|
||||
className="object-contain p-2" // Mantém a proporção e adiciona respiro interno
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-lg font-black tracking-tighter text-gray-900 dark:text-white leading-none">
|
||||
NUTRI<span className="text-blue-500">SCAN</span>
|
||||
</span>
|
||||
<span className="text-[10px] font-bold text-gray-500 uppercase tracking-widest leading-none mt-1">
|
||||
Data Engineering
|
||||
</span>
|
||||
</div>
|
||||
{/* Logo compacto para mobile */}
|
||||
<div className="sm:hidden">
|
||||
<h1 className="text-base font-bold text-gray-900 dark:text-white">
|
||||
NutriScan
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center gap-8">
|
||||
<a
|
||||
href="/"
|
||||
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="/sobre"
|
||||
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
||||
>
|
||||
Sobre
|
||||
</a>
|
||||
{/* Desktop Nav - Com micro-interações */}
|
||||
<nav className="hidden md:flex items-center gap-1">
|
||||
{NAV_LINKS.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="px-4 py-2 text-sm font-semibold text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-all"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Theme Toggle */}
|
||||
{/* Ações e Mobile Toggle */}
|
||||
<div className="flex items-center gap-2">
|
||||
{mounted && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
size="icon"
|
||||
onClick={toggleTheme}
|
||||
className="w-10 h-10 p-0"
|
||||
suppressHydrationWarning
|
||||
className="rounded-full w-10 h-10 border border-gray-200 dark:border-gray-800"
|
||||
>
|
||||
{theme === "dark" ? (
|
||||
<Sun className="w-5 h-5" />
|
||||
) : (
|
||||
<Moon className="w-5 h-5" />
|
||||
)}
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={{ rotate: theme === "dark" ? 0 : 180, scale: 1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
{theme === "dark" ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
|
||||
</motion.div>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={toggleMenu}
|
||||
className="md:hidden w-10 h-10 p-0"
|
||||
size="icon"
|
||||
className="md:hidden rounded-full"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
{isMenuOpen ? (
|
||||
<X className="w-5 h-5" />
|
||||
) : (
|
||||
<Menu className="w-5 h-5" />
|
||||
)}
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={isMenuOpen ? "close" : "open"}
|
||||
initial={{ opacity: 0, rotate: -90 }}
|
||||
animate={{ opacity: 1, rotate: 0 }}
|
||||
exit={{ opacity: 0, rotate: 90 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
{isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</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="/"
|
||||
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="/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>
|
||||
|
||||
{/* Mobile Menu - Animado com AnimatePresence */}
|
||||
<AnimatePresence>
|
||||
{isMenuOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: "auto" }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden"
|
||||
>
|
||||
<nav className="flex flex-col p-6 gap-4">
|
||||
{NAV_LINKS.map((link, i) => (
|
||||
<motion.div
|
||||
key={link.href}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
>
|
||||
<Link
|
||||
href={link.href}
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="text-xl font-bold text-gray-900 dark:text-white hover:text-blue-500 transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
<div className="pt-4 border-t border-gray-100 dark:border-gray-800">
|
||||
<p className="text-[10px] font-black text-gray-400 uppercase tracking-[0.3em]">
|
||||
NutriScan v2.0
|
||||
</p>
|
||||
</div>
|
||||
</nav>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,96 +1,97 @@
|
||||
import { Heart, Check, Code } from "lucide-react";
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Heart, Coffee, ShieldCheck, Server, Globe, Code2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export function DonationSection() {
|
||||
return (
|
||||
<section className="py-20 bg-white dark:bg-gray-900">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
||||
Apoie a Transparência Alimentar
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-400">
|
||||
Este projeto é mantido por desenvolvedores independentes que
|
||||
acreditam que informação sobre saúde deve ser acessível a todos, sem
|
||||
custo.
|
||||
</p>
|
||||
</div>
|
||||
<section className="py-24 bg-white dark:bg-[#030712] relative overflow-hidden">
|
||||
{/* Background Decor sutil */}
|
||||
<div className="absolute top-0 right-0 w-1/3 h-1/3 bg-blue-500/5 blur-[120px] rounded-full pointer-events-none" />
|
||||
|
||||
{/* Benefícios da Doação */}
|
||||
<div className="bg-gradient-to-br from-blue-50 to-green-50 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-8 mb-8">
|
||||
<h3 className="text-2xl font-bold mb-6">Sua doação garante:</h3>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<Check className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<p>Servidores sempre disponíveis para consultas instantâneas</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<Check className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<p>Novas funcionalidades baseadas em feedback da comunidade</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-purple-500 flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<Check className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<p>Manutenção contínua e atualizações de segurança</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-orange-500 flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<Check className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<p>Expansão do acesso a informações para mais pessoas</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Humanização - História do Projeto */}
|
||||
<div className="bg-gray-50 dark:bg-gray-800 rounded-2xl p-8 mb-8">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-green-500 flex items-center justify-center">
|
||||
<Code className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-lg">
|
||||
Ideia nascida de um estudante
|
||||
</h4>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Mantido por NutriScan
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
O que começou como uma ideia de um estudante de Engenharia da
|
||||
Computação se tornou uma ferramenta que democratiza o acesso à
|
||||
informação nutricional. Cada doação ajuda a manter este projeto vivo
|
||||
e acessível para todos.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* CTA de Doação */}
|
||||
<div className="text-center">
|
||||
<a
|
||||
href="https://buymeacoffee.com/evandrotruuta"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-block"
|
||||
<div className="max-w-5xl mx-auto px-6 relative z-10">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
|
||||
{/* Lado Esquerdo: A Missão (Copywriting Técnico) */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-gradient-to-r from-blue-600 to-green-600 text-white px-8 py-6 text-lg hover:shadow-2xl transition-all"
|
||||
>
|
||||
<Heart className="w-5 h-5 mr-2" />
|
||||
Doe/Donate
|
||||
</Button>
|
||||
</a>
|
||||
<p className="mt-4 text-sm text-gray-500">
|
||||
Qualquer valor faz diferença 💛
|
||||
</p>
|
||||
<h2 className="text-4xl md:text-5xl font-black text-gray-900 dark:text-white mb-6 tracking-tighter leading-tight">
|
||||
Mantenha a <span className="text-blue-600">Engenharia</span> Livre de Interesses.
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 mb-8 leading-relaxed">
|
||||
O NutriScan é um projeto de código aberto nascido em Garuva, SC. Operamos sem anúncios e sem venda de dados. Nosso único combustível é o apoio da comunidade que acredita na democratização da saúde.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ icon: Server, text: "Manutenção de Servidores e API de Alta Latência" },
|
||||
{ icon: ShieldCheck, text: "Segurança de Dados e Auditoria Open Source" },
|
||||
{ icon: Globe, text: "Expansão da Base de Dados Internacional" },
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-center gap-3 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
<div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
|
||||
<item.icon className="w-4 h-4 text-blue-600" />
|
||||
</div>
|
||||
{item.text}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Lado Direito: O Card de Doação (Psychological Anchoring) */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-100 dark:border-gray-800 p-8 rounded-[2.5rem] shadow-2xl backdrop-blur-sm">
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-2xl flex items-center justify-center shadow-lg shadow-orange-500/20">
|
||||
<Coffee className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-gray-900 dark:text-white">Apoie com um Café</h4>
|
||||
<p className="text-xs text-gray-500 uppercase tracking-widest font-mono">Status: Sistema Online</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<blockquote className="italic text-gray-600 dark:text-gray-400 text-sm border-l-2 border-blue-500 pl-4 mb-8">
|
||||
"Como desenvolvedor independente, cada contribuição me permite dedicar mais horas à refatoração e novas features para o NutriScan."
|
||||
</blockquote>
|
||||
|
||||
<a
|
||||
href="https://buymeacoffee.com/evandrotruuta"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block group"
|
||||
>
|
||||
<Button className="w-full h-16 bg-blue-600 hover:bg-blue-700 text-white rounded-2xl font-bold text-lg transition-all group-hover:scale-[1.02] active:scale-95 shadow-xl shadow-blue-500/25">
|
||||
<Heart className="w-5 h-5 mr-3 fill-white group-hover:animate-pulse" />
|
||||
Contribuir agora
|
||||
</Button>
|
||||
</a>
|
||||
|
||||
<div className="mt-6 flex justify-center gap-4">
|
||||
<div className="flex items-center gap-1.5 text-[10px] font-bold text-gray-400 uppercase tracking-tighter">
|
||||
<Code2 size={12} /> Engenharia Brasileira
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Elemento Decorativo: Floating Badge */}
|
||||
<div className="absolute -bottom-6 -right-6 bg-white dark:bg-gray-800 p-4 rounded-2xl shadow-xl border border-gray-100 dark:border-gray-700 animate-bounce">
|
||||
<p className="text-[10px] font-black text-blue-600 uppercase">Qualquer valor ajuda!</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,26 @@
|
||||
import { Shield, Zap, Sparkles, Heart, CheckCircle } from "lucide-react";
|
||||
"use client";
|
||||
|
||||
const features = [
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion"; // ESSENCIAL: Evita erros de referência
|
||||
import { Shield, Zap, Sparkles, Heart, CheckCircle } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// Definição de Tipos para garantir integridade no TS
|
||||
interface Feature {
|
||||
icon: React.ElementType;
|
||||
title: string;
|
||||
description: string;
|
||||
color: string;
|
||||
bgColor: string;
|
||||
iconBg: string;
|
||||
benefit: string;
|
||||
}
|
||||
|
||||
const features: Feature[] = [
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Dados da Comunidade Open Food Facts",
|
||||
description:
|
||||
"Informações fornecidas pela maior base de dados colaborativa de alimentos do mundo, mantida por uma comunidade global de colaboradores voluntários.",
|
||||
title: "Dados da Comunidade",
|
||||
description: "Informações fornecidas pela Open Food Facts, a maior base colaborativa global mantida por voluntários.",
|
||||
color: "text-blue-600 dark:text-blue-400",
|
||||
bgColor: "bg-blue-50 dark:bg-blue-900/20",
|
||||
iconBg: "bg-blue-100 dark:bg-blue-900/40",
|
||||
@@ -13,81 +28,120 @@ const features = [
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Atualizações em Tempo Real",
|
||||
description:
|
||||
"Novos produtos são adicionados a cada minuto. Quando a indústria muda fórmulas, a comunidade atualiza — e você tem acesso instantâneo às informações mais recentes.",
|
||||
title: "Atualização Contínua",
|
||||
description: "Novos produtos e fórmulas atualizados a cada minuto pela comunidade. Dados sempre frescos no seu dispositivo.",
|
||||
color: "text-green-600 dark:text-green-400",
|
||||
bgColor: "bg-green-50 dark:bg-green-900/20",
|
||||
iconBg: "bg-green-100 dark:bg-green-900/40",
|
||||
benefit: "Atualizado continuamente",
|
||||
benefit: "Atualizado em tempo real",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Interface Intuitiva, Resultado Imediato",
|
||||
description:
|
||||
"Desenvolvido pensando em quem não tem tempo a perder. Digitalize, veja os dados e tome sua decisão em menos de 10 segundos.",
|
||||
title: "Velocidade de Resposta",
|
||||
description: "Interface otimizada para decisões rápidas. Escaneie e obtenha o diagnóstico nutricional em poucos segundos.",
|
||||
color: "text-purple-600 dark:text-purple-400",
|
||||
bgColor: "bg-purple-50 dark:bg-purple-900/20",
|
||||
iconBg: "bg-purple-100 dark:bg-purple-900/40",
|
||||
benefit: "Resultados em <10 segundos",
|
||||
benefit: "Resultados em <10s",
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
title: "100% Gratuito, Para Sempre",
|
||||
description:
|
||||
"Construído sobre dados open source, o NutriScan nunca cobrará pelo acesso à informação. Porque conhecimento sobre saúde deve ser universal, não um privilégio.",
|
||||
title: "Filosofia Open Source",
|
||||
description: "O NutriScan é e sempre será gratuito. Conhecimento sobre saúde deve ser um direito universal.",
|
||||
color: "text-orange-600 dark:text-orange-400",
|
||||
bgColor: "bg-orange-50 dark:bg-orange-900/20",
|
||||
iconBg: "bg-orange-100 dark:bg-orange-900/40",
|
||||
benefit: "Sempre gratuito, sem truques",
|
||||
benefit: "Gratuito para sempre",
|
||||
},
|
||||
];
|
||||
|
||||
// Variantes de animação para o container pai (Stagger effect)
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: 0.15 },
|
||||
},
|
||||
};
|
||||
|
||||
// Variantes para cada card individual
|
||||
const cardVariants = {
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
transition: { type: "spring", stiffness: 100 },
|
||||
},
|
||||
};
|
||||
|
||||
export function Features() {
|
||||
return (
|
||||
<section className="py-20 bg-gray-50 dark:bg-gray-800">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Por que milhares confiam no NutriScan
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-400">
|
||||
Transparência que transforma alimentação
|
||||
</p>
|
||||
</div>
|
||||
<section className="py-24 bg-white dark:bg-[#030712] relative overflow-hidden">
|
||||
{/* Background Decor: Sutil gradiente para profundidade */}
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-blue-500/5 via-transparent to-transparent pointer-events-none" />
|
||||
|
||||
{/* Features Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
||||
{/* Header com Motion */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-20"
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl font-black text-gray-900 dark:text-white mb-6 tracking-tighter">
|
||||
Por que confiar no <span className="text-blue-600">NutriScan</span>
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto font-medium">
|
||||
Engenharia de dados a serviço da sua saúde, com transparência total e zero custo.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Features Grid com Stagger */}
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
className="grid grid-cols-1 md:grid-cols-2 gap-8"
|
||||
>
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
<motion.div
|
||||
key={index}
|
||||
className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-shadow"
|
||||
variants={cardVariants}
|
||||
whileHover={{ y: -5, transition: { duration: 0.2 } }}
|
||||
className="group relative bg-gray-50 dark:bg-gray-900/50 rounded-3xl p-8 border border-gray-100 dark:border-gray-800 hover:border-blue-500/30 transition-colors"
|
||||
>
|
||||
{/* Icon */}
|
||||
{/* Icon Container */}
|
||||
<div
|
||||
className={`${feature.iconBg} w-12 h-12 rounded-lg flex items-center justify-center mb-4`}
|
||||
className={cn(
|
||||
feature.iconBg,
|
||||
"w-14 h-14 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"
|
||||
)}
|
||||
>
|
||||
<feature.icon className={`w-6 h-6 ${feature.color}`} />
|
||||
<feature.icon className={cn("w-7 h-7", feature.color)} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<h3 className={`text-2xl font-bold mb-3 ${feature.color}`}>
|
||||
{/* Text Content */}
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 tracking-tight">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-8 leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
|
||||
{/* Benefit */}
|
||||
<div className="flex items-center text-sm text-blue-600">
|
||||
<CheckCircle className="w-4 h-4 mr-2" />
|
||||
{/* Benefit Badge */}
|
||||
<div className={cn(
|
||||
"inline-flex items-center px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest",
|
||||
feature.bgColor,
|
||||
feature.color
|
||||
)}>
|
||||
<CheckCircle className="w-3.5 h-3.5 mr-2" />
|
||||
<span>{feature.benefit}</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
+223
-208
@@ -1,246 +1,261 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
import React, { useState, useMemo } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Search, ScanLine, Sparkles, Globe } from "lucide-react";
|
||||
import { Search, ScanLine, Globe, Activity, Database, Zap, Moon, Sun } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { detectUserCountry } from "@/lib/geolocation";
|
||||
import { detectSearchType, isValidBarcode } from "@/lib/openFoodFactsApi";
|
||||
import { useGeolocation } from "@/hooks/use-geolocation";
|
||||
import { useSearchLogic } from "@/hooks/use-search-logic";
|
||||
import { useTheme } from "next-themes";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
export function Hero() {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [userCountry, setUserCountry] = useState<string | null>(null);
|
||||
const [searchType, setSearchType] = useState<"auto" | "barcode" | "name">(
|
||||
"auto"
|
||||
);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const router = useRouter();
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const { countryCode, isMounted } = useGeolocation();
|
||||
const { searchType, isValid, loading, setLoading } = useSearchLogic(searchQuery);
|
||||
const { theme } = useTheme();
|
||||
|
||||
// Detectar país do usuário ao carregar
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
|
||||
const detectCountry = async () => {
|
||||
try {
|
||||
// Forçar nova detecção para garantir país correto
|
||||
const country = await detectUserCountry(true);
|
||||
setUserCountry(country.code);
|
||||
} catch {
|
||||
setUserCountry("br"); // Fallback para Brasil
|
||||
}
|
||||
};
|
||||
|
||||
detectCountry();
|
||||
}, []);
|
||||
|
||||
// Detectar tipo de busca baseado na entrada
|
||||
useEffect(() => {
|
||||
if (searchQuery.trim()) {
|
||||
const detectedType = detectSearchType(searchQuery);
|
||||
setSearchType(detectedType);
|
||||
} else {
|
||||
setSearchType("auto");
|
||||
const searchConfig = useMemo(() => ({
|
||||
barcode: {
|
||||
placeholder: "Insira o código EAN/UPC (ex: 789...)",
|
||||
button: "Analisar Produto",
|
||||
icon: <ScanLine className="w-5 h-5" />,
|
||||
subtext: "Protocolo: Detecção de Código de Barras",
|
||||
color: "blue",
|
||||
gradient: "from-blue-600 via-cyan-500 to-blue-400"
|
||||
},
|
||||
name: {
|
||||
placeholder: "Qual alimento deseja investigar?",
|
||||
button: "Consultar Banco",
|
||||
icon: <Search className="w-5 h-5" />,
|
||||
subtext: "Protocolo: Pesquisa em Base Colaborativa",
|
||||
color: "emerald",
|
||||
gradient: "from-emerald-600 via-teal-500 to-green-400"
|
||||
},
|
||||
auto: {
|
||||
placeholder: "Digite o nome ou aponte o código...",
|
||||
button: "Buscar",
|
||||
icon: <Activity className="w-5 h-5" />,
|
||||
subtext: "Aguardando input do operador...",
|
||||
color: "slate",
|
||||
gradient: "from-slate-600 via-blue-500 to-slate-400"
|
||||
}
|
||||
}, [searchQuery]);
|
||||
}), []);
|
||||
|
||||
const current = searchConfig[searchType];
|
||||
|
||||
const handleSearch = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
|
||||
if (!searchQuery.trim()) {
|
||||
setError("Digite nome do produto");
|
||||
return;
|
||||
}
|
||||
|
||||
const query = searchQuery.trim();
|
||||
const detectedType = detectSearchType(query);
|
||||
|
||||
if (detectedType === "barcode") {
|
||||
if (!isValidBarcode(query)) {
|
||||
setError("Código de barras deve ter entre 8 e 13 dígitos");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
// Redirecionar para página do produto
|
||||
router.push(`/produto/${query}`);
|
||||
} else {
|
||||
setLoading(true);
|
||||
// Redirecionar para página de resultados
|
||||
const countryParam = userCountry ? `&country=${userCountry}` : "";
|
||||
router.push(`/resultados?q=${encodeURIComponent(query)}${countryParam}`);
|
||||
}
|
||||
};
|
||||
|
||||
const getPlaceholder = () => {
|
||||
if (searchType === "barcode") {
|
||||
return "Digite o código de barras (ex: 7896004713588)";
|
||||
} else if (searchType === "name") {
|
||||
return "Digite o nome do produto (ex: coca cola)";
|
||||
}
|
||||
return "Digite nome do produto";
|
||||
};
|
||||
|
||||
const getSearchButtonText = () => {
|
||||
if (loading) return "Buscando...";
|
||||
if (searchType === "barcode") return "Buscar Produto";
|
||||
if (searchType === "name") return "Buscar Produtos";
|
||||
return "Buscar";
|
||||
if (!searchQuery.trim()) return;
|
||||
setLoading(true);
|
||||
|
||||
const target = searchType === "barcode" && isValid
|
||||
? `/produto/${searchQuery.trim()}`
|
||||
: `/resultados?q=${encodeURIComponent(searchQuery.trim())}${countryCode ? `&country=${countryCode}` : ""}`;
|
||||
|
||||
router.push(target);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="relative min-h-[calc(100vh-4rem)] flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-green-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 overflow-hidden py-12 sm:py-16 lg:py-20">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%230055ff%22%20fill-opacity%3D%220.05%22%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%222%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-40"></div>
|
||||
<section className="relative min-h-[90vh] flex flex-col items-center justify-center px-6 py-20 overflow-hidden bg-white dark:bg-[#030712] transition-colors duration-500">
|
||||
|
||||
{/* 1. INFRAESTRUTURA VISUAL: Background de Engenharia */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
{/* Grid de Coordenadas */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#e2e8f0_1px,transparent_1px),linear-gradient(to_bottom,#e2e8f0_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#1e293b_1px,transparent_1px),linear-gradient(to_bottom,#1e293b_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] opacity-20 dark:opacity-20 transition-opacity duration-500" />
|
||||
|
||||
{/* Glow de Fundo Reativo */}
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: searchQuery ? 1.2 : 1,
|
||||
opacity: searchQuery ? (theme === "dark" ? 0.15 : 0.08) : (theme === "dark" ? 0.05 : 0.02)
|
||||
}}
|
||||
className={cn(
|
||||
"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[500px] rounded-full blur-[120px] transition-colors duration-700",
|
||||
searchType === "barcode" ? "bg-blue-600 dark:bg-blue-600" : searchType === "name" ? "bg-emerald-600 dark:bg-emerald-600" : "bg-blue-400 dark:bg-blue-900"
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
{/* Badge */}
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-sm font-medium mb-6 sm:mb-8">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
Desenvolvido por{" "}
|
||||
<a
|
||||
href="https://evandro.dev.br"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-semibold hover:underline transition-all hover:text-blue-800 dark:hover:text-blue-200"
|
||||
>
|
||||
evandrodevbr
|
||||
</a>
|
||||
{" • "}Dados do Open Food Facts
|
||||
</div>
|
||||
{/* Elemento Decorativo Lua/Sol */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 1, delay: 0.5 }}
|
||||
className="absolute top-16 right-8 md:top-24 md:right-16 lg:top-32 lg:right-24 z-0 pointer-events-none"
|
||||
>
|
||||
<AnimatePresence mode="wait">
|
||||
{theme === "dark" ? (
|
||||
<motion.div
|
||||
key="moon"
|
||||
initial={{ opacity: 0, rotate: -90 }}
|
||||
animate={{ opacity: 1, rotate: 0 }}
|
||||
exit={{ opacity: 0, rotate: 90 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<Moon className="w-24 h-24 md:w-32 md:h-32 lg:w-40 lg:h-40 text-blue-400/20 transition-colors duration-500" />
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="sun"
|
||||
initial={{ opacity: 0, rotate: 90 }}
|
||||
animate={{ opacity: 1, rotate: 0 }}
|
||||
exit={{ opacity: 0, rotate: -90 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<Sun className="w-24 h-24 md:w-32 md:h-32 lg:w-40 lg:h-40 text-yellow-400/30 transition-colors duration-500" />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Main Heading */}
|
||||
<h1 className="text-3xl sm:text-4xl lg:text-5xl xl:text-6xl font-bold text-gray-900 dark:text-white mb-4 sm:mb-6 leading-tight">
|
||||
Descubra o que a comunidade alimentar sabe sobre{" "}
|
||||
<span className="bg-gradient-to-r from-blue-600 to-green-600 bg-clip-text text-transparent">
|
||||
seus alimentos
|
||||
<div className="relative z-10 max-w-5xl mx-auto text-center">
|
||||
|
||||
{/* 2. BADGE DE STATUS DO SISTEMA */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-gray-100/80 dark:bg-white/5 border border-gray-200 dark:border-white/10 backdrop-blur-md mb-12 transition-colors duration-500"
|
||||
>
|
||||
<div className="flex -space-x-2">
|
||||
<div className="w-6 h-6 rounded-full border-2 border-white dark:border-[#030712] bg-blue-500 flex items-center justify-center">
|
||||
<Database size={10} className="text-white" />
|
||||
</div>
|
||||
<div className="w-6 h-6 rounded-full border-2 border-white dark:border-[#030712] bg-emerald-500 flex items-center justify-center">
|
||||
<Zap size={10} className="text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-600 dark:text-slate-400 transition-colors duration-500">
|
||||
NutriScan Protocol <span className="text-blue-600 dark:text-blue-500">v2.1</span> • {isMounted ? countryCode?.toUpperCase() : "INTL"}
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
{/* 3. HEADLINE DE ALTA DENSIDADE */}
|
||||
<h1 className="text-5xl md:text-8xl font-black text-gray-900 dark:text-white mb-8 tracking-tighter leading-[0.85] perspective-1000 transition-colors duration-500">
|
||||
A verdade sobre <br />
|
||||
<span className={cn(
|
||||
"text-transparent bg-clip-text bg-gradient-to-r transition-all duration-700",
|
||||
current.gradient
|
||||
)}>
|
||||
seus alimentos.
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<p className="text-lg sm:text-xl lg:text-2xl text-gray-600 dark:text-gray-300 mb-4 max-w-3xl mx-auto leading-relaxed">
|
||||
Transparência total, zero custo, milhões de dados colaborativos ao seu
|
||||
alcance.
|
||||
<p className="text-gray-600 dark:text-slate-400 text-lg md:text-xl max-w-2xl mx-auto mb-16 leading-relaxed font-medium transition-colors duration-500">
|
||||
Engenharia de dados aplicada à transparência nutricional.
|
||||
Descriptografamos rótulos para que você tome decisões soberanas.
|
||||
</p>
|
||||
|
||||
<p className="text-base sm:text-lg text-gray-500 dark:text-gray-400 mb-8 sm:mb-12 max-w-4xl mx-auto leading-relaxed">
|
||||
Consulte informações nutricionais completas, ingredientes e
|
||||
classificações de qualidade — tudo baseado no{" "}
|
||||
<span className="font-semibold text-blue-600">Open Food Facts</span>,
|
||||
a maior base de dados colaborativa do mundo.
|
||||
</p>
|
||||
{/* 4. O TERMINAL DE BUSCA (A PEÇA CENTRAL) */}
|
||||
<form onSubmit={handleSearch} className="relative max-w-3xl mx-auto group">
|
||||
{/* Efeito de Borda Neon Reativa */}
|
||||
<div className={cn(
|
||||
"absolute -inset-[2px] rounded-[2rem] blur-sm opacity-20 group-focus-within:opacity-100 transition-all duration-500 bg-gradient-to-r",
|
||||
current.gradient
|
||||
)} />
|
||||
|
||||
{/* Estatísticas Visuais */}
|
||||
<div className="flex justify-center gap-6 sm:gap-8 mb-8 sm:mb-12 text-center">
|
||||
<div className="animate-fadeIn">
|
||||
<div className="text-2xl sm:text-3xl font-bold text-blue-600">
|
||||
2M+
|
||||
</div>
|
||||
<div className="text-xs sm:text-sm text-gray-500">
|
||||
produtos no banco
|
||||
</div>
|
||||
</div>
|
||||
<div className="animate-fadeIn" style={{ animationDelay: "0.2s" }}>
|
||||
<div className="text-2xl sm:text-3xl font-bold text-green-600">
|
||||
100+
|
||||
</div>
|
||||
<div className="text-xs sm:text-sm text-gray-500">
|
||||
países cobertos
|
||||
</div>
|
||||
</div>
|
||||
<div className="animate-fadeIn" style={{ animationDelay: "0.4s" }}>
|
||||
<div className="text-2xl sm:text-3xl font-bold text-purple-600">
|
||||
24/7
|
||||
</div>
|
||||
<div className="text-xs sm:text-sm text-gray-500">disponível</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Form */}
|
||||
<form
|
||||
onSubmit={handleSearch}
|
||||
className="max-w-2xl mx-auto mb-10 sm:mb-12"
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="flex items-center bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden focus-within:ring-2 focus-within:ring-blue-500 transition-all duration-200">
|
||||
<div className="flex-1 relative">
|
||||
{searchType === "barcode" ? (
|
||||
<ScanLine className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 pointer-events-none" />
|
||||
) : (
|
||||
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 pointer-events-none" />
|
||||
)}
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={getPlaceholder()}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-12 pr-4 py-4 text-lg border-0 bg-transparent focus:ring-0 focus:outline-none focus:border-transparent focus:shadow-none focus-visible:ring-0 placeholder:text-gray-400 w-full"
|
||||
/>
|
||||
<div className="relative flex items-center bg-white/90 dark:bg-slate-900/90 backdrop-blur-2xl rounded-[1.8rem] border border-gray-200 dark:border-white/10 p-2 shadow-2xl transition-colors duration-500">
|
||||
<div className="flex-1 relative flex items-center">
|
||||
{/* Ícone de Estado Animado */}
|
||||
<div className="absolute left-6">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={searchType}
|
||||
initial={{ rotate: -90, opacity: 0, scale: 0.5 }}
|
||||
animate={{ rotate: 0, opacity: 1, scale: 1 }}
|
||||
exit={{ rotate: 90, opacity: 0, scale: 0.5 }}
|
||||
className={cn(
|
||||
"transition-colors duration-500",
|
||||
searchType === "barcode" ? "text-blue-600 dark:text-blue-400" : searchType === "name" ? "text-emerald-600 dark:text-emerald-400" : "text-gray-400 dark:text-slate-500"
|
||||
)}
|
||||
>
|
||||
{current.icon}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="m-2 px-6 sm:px-8 py-4 bg-gradient-to-r from-blue-600 to-green-600 hover:from-blue-700 hover:to-green-700 text-white font-semibold rounded-xl transition-all duration-200 transform hover:scale-105 disabled:opacity-50 flex-shrink-0"
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
Buscando...
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<Search className="w-5 h-5" />
|
||||
{getSearchButtonText()}
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={current.placeholder}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-16 pr-4 py-9 text-xl border-0 bg-transparent focus-visible:ring-0 w-full text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-slate-600 font-medium tracking-tight transition-colors duration-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className={cn(
|
||||
"h-14 px-10 rounded-[1.2rem] font-black uppercase tracking-widest text-xs transition-all duration-500 active:scale-95 shadow-xl",
|
||||
searchType === "barcode" ? "bg-blue-600 hover:bg-blue-500 shadow-blue-500/20" : "bg-emerald-600 hover:bg-emerald-500 shadow-emerald-500/20"
|
||||
)}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{current.button}</span>
|
||||
<ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" />
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Search Type Indicator */}
|
||||
{searchQuery && (
|
||||
<div className="flex items-center justify-center gap-2 mt-3">
|
||||
{searchType === "barcode" && (
|
||||
<div className="flex items-center gap-1 text-sm text-blue-600 dark:text-blue-400">
|
||||
<ScanLine className="w-4 h-4" />
|
||||
<span>Busca por código de barras</span>
|
||||
</div>
|
||||
)}
|
||||
{searchType === "name" && (
|
||||
<div className="flex items-center gap-1 text-sm text-green-600 dark:text-green-400">
|
||||
<Search className="w-4 h-4" />
|
||||
<span>Busca por nome do produto</span>
|
||||
{mounted && userCountry && (
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500">
|
||||
<Globe className="w-3 h-3" />
|
||||
<span>Priorizando {userCountry}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* 5. METADADOS DA OPERAÇÃO */}
|
||||
<div className="flex items-center justify-between px-6 mt-6">
|
||||
<div className={cn(
|
||||
"flex items-center gap-2 font-mono text-[10px] font-bold uppercase tracking-[0.2em] transition-colors duration-500",
|
||||
searchType === "barcode" ? "text-blue-500" : searchType === "name" ? "text-emerald-500" : "text-slate-600"
|
||||
)}>
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-current opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-current"></span>
|
||||
</span>
|
||||
{current.subtext}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<p className="text-red-500 text-sm mt-3 text-left">{error}</p>
|
||||
)}
|
||||
{isMounted && countryCode && (
|
||||
<div className="flex items-center gap-2 text-gray-600 dark:text-slate-500 bg-gray-100 dark:bg-white/5 px-3 py-1 rounded-full border border-gray-200 dark:border-white/10 transition-colors duration-500">
|
||||
<Globe size={12} />
|
||||
<span className="text-[10px] font-bold uppercase">Region: {countryCode.toUpperCase()}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Dica sobre código de barras */}
|
||||
<p className="text-center text-sm text-gray-500 dark:text-gray-400 mb-8">
|
||||
💡 Dica: O código de barras está na parte de trás da embalagem
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Scroll Indicator */}
|
||||
<div className="absolute bottom-4 sm:bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce mt-12 sm:mt-16">
|
||||
<div className="w-6 h-10 border-2 border-gray-400 dark:border-gray-500 rounded-full flex justify-center">
|
||||
<div className="w-1 h-3 bg-gray-400 dark:bg-gray-500 rounded-full mt-2 animate-pulse"></div>
|
||||
{/* 6. INDICADOR DE MÉTRICAS (Bottom Shelf) */}
|
||||
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 w-full max-w-4xl px-6 hidden md:block">
|
||||
<div className="grid grid-cols-3 gap-12 border-t border-gray-200 dark:border-white/5 pt-10 opacity-60 dark:opacity-40 grayscale hover:grayscale-0 transition-all duration-700">
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<span className="text-2xl font-mono font-bold text-gray-900 dark:text-white tracking-tighter transition-colors duration-500">2M+</span>
|
||||
<span className="text-[9px] uppercase tracking-[0.3em] font-black text-gray-500 dark:text-slate-500 transition-colors duration-500">Dataset Entries</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-1 border-x border-gray-200 dark:border-white/5">
|
||||
<span className="text-2xl font-mono font-bold text-gray-900 dark:text-white tracking-tighter transition-colors duration-500">100%</span>
|
||||
<span className="text-[9px] uppercase tracking-[0.3em] font-black text-gray-500 dark:text-slate-500 transition-colors duration-500">Open Source</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<span className="text-2xl font-mono font-bold text-gray-900 dark:text-white tracking-tighter transition-colors duration-500">< 10s</span>
|
||||
<span className="text-[9px] uppercase tracking-[0.3em] font-black text-gray-500 dark:text-slate-500 transition-colors duration-500">Analysis Speed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// Sub-componente auxiliar para ícone
|
||||
function ArrowRight({ size, className }: { size: number, className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" className={className}
|
||||
>
|
||||
<path d="M5 12h14m-7-7 7 7-7 7"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,205 +1,180 @@
|
||||
"use client";
|
||||
|
||||
import { ScanLine, Search, BarChart3, CheckCircle } from "lucide-react";
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { ScanLine, Search, BarChart3, CheckCircle, Globe, Zap } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const steps = [
|
||||
interface Step {
|
||||
number: string;
|
||||
icon: React.ElementType;
|
||||
title: string;
|
||||
description: string;
|
||||
color: string;
|
||||
glow: string;
|
||||
}
|
||||
|
||||
const steps: Step[] = [
|
||||
{
|
||||
number: "01",
|
||||
icon: ScanLine,
|
||||
title: "Digitalize sem complicação",
|
||||
description:
|
||||
"Encontre o código de barras na embalagem e escaneie instantaneamente. Nossa tecnologia reconhece produtos de mais de 100 países em segundos.",
|
||||
color: "text-blue-600 dark:text-blue-400",
|
||||
bgColor: "bg-blue-50 dark:bg-blue-900/20",
|
||||
iconBg: "bg-blue-100 dark:bg-blue-900/40",
|
||||
title: "Digitalize",
|
||||
description: "Reconhecimento instantâneo de códigos em mais de 100 países com tecnologia de baixa latência.",
|
||||
color: "text-blue-500",
|
||||
glow: "shadow-blue-500/20",
|
||||
},
|
||||
{
|
||||
number: "02",
|
||||
icon: Search,
|
||||
title: "Acesso a milhões de dados colaborativos",
|
||||
description:
|
||||
"Conectamos você diretamente ao Open Food Facts, a Wikipedia dos alimentos — onde a comunidade global contribui com informações sobre produtos.",
|
||||
color: "text-green-600 dark:text-green-400",
|
||||
bgColor: "bg-green-50 dark:bg-green-900/20",
|
||||
iconBg: "bg-green-100 dark:bg-green-900/40",
|
||||
title: "Consulte",
|
||||
description: "Conexão direta ao Open Food Facts, a base de dados colaborativa global (Wikipedia dos alimentos).",
|
||||
color: "text-green-500",
|
||||
glow: "shadow-green-500/20",
|
||||
},
|
||||
{
|
||||
number: "03",
|
||||
icon: BarChart3,
|
||||
title: "Informações que fazem diferença",
|
||||
description:
|
||||
"Receba dados nutricionais detalhados, alertas de alérgenos e classificações Nutri-Score. Informações fornecidas pela base de dados Open Food Facts.",
|
||||
color: "text-purple-600 dark:text-purple-400",
|
||||
bgColor: "bg-purple-50 dark:bg-purple-900/20",
|
||||
iconBg: "bg-purple-100 dark:bg-purple-900/40",
|
||||
title: "Analise",
|
||||
description: "Processamento de Nutri-Score, graus de processamento NOVA e alertas de alérgenos críticos.",
|
||||
color: "text-purple-500",
|
||||
glow: "shadow-purple-500/20",
|
||||
},
|
||||
{
|
||||
number: "04",
|
||||
icon: CheckCircle,
|
||||
title: "Decisões mais inteligentes, saúde melhor",
|
||||
description:
|
||||
"Use informações transparentes para escolher alimentos alinhados aos seus objetivos. Sem interesses comerciais, sem dados manipulados.",
|
||||
color: "text-orange-600 dark:text-orange-400",
|
||||
bgColor: "bg-orange-50 dark:bg-orange-900/20",
|
||||
iconBg: "bg-orange-100 dark:bg-orange-900/40",
|
||||
},
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: "Dados Nutricionais",
|
||||
items: [
|
||||
"Calorias por 100g",
|
||||
"Proteínas, carboidratos e gorduras",
|
||||
"Vitaminas e minerais",
|
||||
"Fibra alimentar",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Classificações",
|
||||
items: [
|
||||
"Nutri-Score (A a E)",
|
||||
"NOVA (processamento)",
|
||||
"Alérgenos identificados",
|
||||
"Aditivos alimentares",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Ingredientes",
|
||||
items: [
|
||||
"Lista completa de ingredientes",
|
||||
"Ordem de quantidade",
|
||||
"Alérgenos destacados",
|
||||
"Origem dos ingredientes",
|
||||
],
|
||||
title: "Decida",
|
||||
description: "Informação técnica pura e sem vieses comerciais para decisões alinhadas à sua saúde.",
|
||||
color: "text-orange-500",
|
||||
glow: "shadow-orange-500/20",
|
||||
},
|
||||
];
|
||||
|
||||
export function HowItWorks() {
|
||||
return (
|
||||
<section className="py-20 bg-white dark:bg-gray-800">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Alimentação consciente em 4 passos simples
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||
Descubra como milhares de pessoas já tomam decisões alimentares mais
|
||||
conscientes com informações transparentes e confiáveis.
|
||||
<section className="py-24 bg-white dark:bg-[#030712] transition-colors duration-500">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
|
||||
{/* Header - Foco em Valor Técnico */}
|
||||
<div className="text-center mb-24">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
className="text-4xl md:text-5xl font-black text-gray-900 dark:text-white mb-6 tracking-tighter"
|
||||
>
|
||||
Pipeline de <span className="text-blue-600">Consciência Alimentar</span>
|
||||
</motion.h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto font-medium">
|
||||
Quatro estágios de processamento de dados para transformar um código de barras em inteligência nutricional.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Steps */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8 mb-20">
|
||||
{/* Steps Grid - O "Motor" da Seção */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 relative">
|
||||
{steps.map((step, index) => (
|
||||
<div key={index} className="relative">
|
||||
{/* Arrow (desktop only) */}
|
||||
<motion.div
|
||||
key={step.number}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: index * 0.15 }}
|
||||
className="relative group"
|
||||
>
|
||||
{/* Conector Visual (Desktop) */}
|
||||
{index < steps.length - 1 && (
|
||||
<div className="hidden lg:flex absolute top-1/2 -right-4 transform -translate-y-1/2 z-10">
|
||||
<svg
|
||||
width="32"
|
||||
height="24"
|
||||
viewBox="0 0 32 24"
|
||||
fill="none"
|
||||
className="text-gray-400 dark:text-gray-600"
|
||||
>
|
||||
<path
|
||||
d="M0 12H30M30 12L20 2M30 12L20 22"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="hidden lg:block absolute top-12 -right-8 w-16 h-[2px] bg-gradient-to-r from-gray-200 to-transparent dark:from-gray-800 z-0" />
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`${step.bgColor} p-8 rounded-2xl border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-all duration-300 group`}
|
||||
>
|
||||
{/* Number */}
|
||||
<div className="text-6xl font-bold text-gray-200 dark:text-gray-600 mb-4">
|
||||
{step.number}
|
||||
<div className={cn(
|
||||
"relative z-10 p-8 rounded-3xl bg-gray-50 dark:bg-gray-900/50 border border-gray-100 dark:border-gray-800 transition-all duration-500 hover:border-blue-500/30",
|
||||
"group-hover:translate-y-[-8px] group-hover:shadow-2xl",
|
||||
step.glow
|
||||
)}>
|
||||
{/* Badge de Número em Estilo Industrial */}
|
||||
<span className="absolute top-4 right-6 text-sm font-black font-mono text-gray-300 dark:text-gray-700">
|
||||
STEP_{step.number}
|
||||
</span>
|
||||
|
||||
<div className={cn(
|
||||
"w-14 h-14 rounded-2xl flex items-center justify-center mb-8 bg-white dark:bg-gray-800 shadow-sm transition-transform duration-500 group-hover:rotate-[10deg]",
|
||||
step.color
|
||||
)}>
|
||||
<step.icon className="w-7 h-7" />
|
||||
</div>
|
||||
|
||||
{/* Icon */}
|
||||
<div
|
||||
className={`${step.iconBg} w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}
|
||||
>
|
||||
<step.icon className={`w-8 h-8 ${step.color}`} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
|
||||
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4 tracking-tight">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed font-medium">
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Features Grid */}
|
||||
<div className="bg-gray-50 dark:bg-gray-900 rounded-2xl p-8">
|
||||
<div className="text-center mb-12">
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
O que você vai encontrar?
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-300">
|
||||
Informações detalhadas e confiáveis sobre cada produto
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<h4 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
{feature.title}
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
{feature.items.map((item, itemIndex) => (
|
||||
<li
|
||||
key={itemIndex}
|
||||
className="flex items-center gap-2 text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
<CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0" />
|
||||
<span className="text-sm">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
{/* Technical Datasheet (O que você vai encontrar) */}
|
||||
<div className="mt-32 mb-12 flex justify-center">
|
||||
<div className="relative w-full max-w-2xl h-64 rounded-2xl overflow-hidden shadow-2xl">
|
||||
<Image
|
||||
src="/images/nut-facts.webp"
|
||||
alt="Lista de ingredientes e informações nutricionais de produto alimentar"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-32 p-10 rounded-[2.5rem] bg-slate-900 text-white relative overflow-hidden shadow-3xl">
|
||||
<div className="absolute top-0 right-0 p-10 opacity-10">
|
||||
<BarChart3 size={200} />
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<div className="text-center mt-16">
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
const input = document.querySelector(
|
||||
'input[placeholder*="código de barras"]'
|
||||
) as HTMLInputElement;
|
||||
input?.focus();
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-green-600 text-white rounded-full font-semibold hover:shadow-lg transition-all duration-300 hover:scale-105 cursor-pointer"
|
||||
>
|
||||
<ScanLine className="w-5 h-5" />
|
||||
Começar agora
|
||||
</a>
|
||||
<p className="text-gray-500 dark:text-gray-400 text-sm mt-4">
|
||||
É rápido, fácil e totalmente gratuito
|
||||
</p>
|
||||
<div className="relative z-10 grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||
<div className="lg:col-span-1">
|
||||
<h3 className="text-3xl font-black mb-4 tracking-tighter">Data Specification</h3>
|
||||
<p className="text-slate-400 text-sm leading-relaxed mb-6">
|
||||
Extração de metadados via Open Food Facts API v2. Suporte a protocolos Nutri-Score e classificações NOVA.
|
||||
</p>
|
||||
<div className="flex items-center gap-4 text-xs font-mono text-blue-400 uppercase tracking-widest">
|
||||
<Globe size={14} /> Open Source Database
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{/* Lista de Features Refinada */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-blue-500 font-bold text-xs uppercase tracking-widest">Bio-Markers & Macros</h4>
|
||||
<ul className="space-y-3">
|
||||
{["Calorias (Kcal/100g)", "Perfil Lipídico e Glicêmico", "Micronutrientes & Fibras"].map(item => (
|
||||
<li key={item} className="flex items-center gap-3 text-sm text-slate-300">
|
||||
<Zap size={12} className="text-blue-500" /> {item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="relative w-full h-48 rounded-xl overflow-hidden">
|
||||
<Image
|
||||
src="/images/nutscore.webp"
|
||||
alt="Sistema de classificação Nutri-Score"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-green-500 font-bold text-xs uppercase tracking-widest">Compliance & Alerta</h4>
|
||||
<ul className="space-y-3">
|
||||
{["Identificação de Alérgenos", "Aditivos e Conservantes", "Classificação de Processamento"].map(item => (
|
||||
<li key={item} className="flex items-center gap-3 text-sm text-slate-300">
|
||||
<CheckCircle size={12} className="text-green-500" /> {item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user