refactor: update header links from anchors to paths
Changed href attributes in header.tsx from '#sobre' to '/sobre' for consistent routing and improved navigation.
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
d9b99c9340
commit
4afec0ddd8
11 files changed
+1438
-2
No files matched your search
@@ -63,7 +63,7 @@ export function Header() {
|
|||||||
Recursos
|
Recursos
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#sobre"
|
href="/sobre"
|
||||||
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
||||||
>
|
>
|
||||||
Sobre
|
Sobre
|
||||||
@@ -124,7 +124,7 @@ export function Header() {
|
|||||||
Recursos
|
Recursos
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#sobre"
|
href="/sobre"
|
||||||
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-2"
|
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-2"
|
||||||
onClick={() => setIsMenuOpen(false)}
|
onClick={() => setIsMenuOpen(false)}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -0,0 +1,160 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ArrowRight, Heart, Users, Globe } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export function CTASection() {
|
||||||
|
return (
|
||||||
|
<section className="py-20 bg-gradient-to-br from-blue-600 via-purple-600 to-green-600 relative 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%23ffffff%22%20fill-opacity%3D%220.1%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-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||||
|
{/* Main CTA */}
|
||||||
|
<div className="mb-16">
|
||||||
|
<h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6">
|
||||||
|
Mais que uma ferramenta,
|
||||||
|
<br />
|
||||||
|
<span className="bg-gradient-to-r from-yellow-300 to-orange-300 bg-clip-text text-transparent">
|
||||||
|
um movimento
|
||||||
|
</span>
|
||||||
|
<br />
|
||||||
|
por transparência
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-blue-100 max-w-3xl mx-auto mb-12 leading-relaxed">
|
||||||
|
Junte-se a milhares de pessoas que já transformaram a forma como
|
||||||
|
escolhem seus alimentos. Sua jornada por uma alimentação mais
|
||||||
|
consciente começa agora.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* CTA Buttons */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
|
||||||
|
<Link href="/">
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
className="bg-white text-blue-600 hover:bg-blue-50 hover:text-blue-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1"
|
||||||
|
>
|
||||||
|
<span className="mr-2">Comece Agora</span>
|
||||||
|
<ArrowRight className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="https://github.com/evandrodevbr/lista-compras"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="lg"
|
||||||
|
className="border-white text-white hover:bg-white hover:text-blue-600 transition-all duration-300"
|
||||||
|
>
|
||||||
|
<span className="mr-2">Contribua</span>
|
||||||
|
<Heart className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Community Stats */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
|
||||||
|
<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6">
|
||||||
|
<div className="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Users className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl font-bold text-white mb-2">Milhares</div>
|
||||||
|
<p className="text-blue-100">
|
||||||
|
de usuários ativos fazendo escolhas mais conscientes
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6">
|
||||||
|
<div className="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Globe className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl font-bold text-white mb-2">Global</div>
|
||||||
|
<p className="text-blue-100">
|
||||||
|
comunidade internacional comprometida com transparência
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6">
|
||||||
|
<div className="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Heart className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl font-bold text-white mb-2">Crescendo</div>
|
||||||
|
<p className="text-blue-100">
|
||||||
|
movimento que não para de expandir e impactar vidas
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Final Message */}
|
||||||
|
<div className="bg-white/10 backdrop-blur-sm rounded-3xl p-8 max-w-4xl mx-auto">
|
||||||
|
<blockquote className="text-2xl sm:text-3xl font-medium text-white italic mb-6">
|
||||||
|
“Porque alimentação é mais que nutrição. É autocuidado, é
|
||||||
|
conexão, é vida.”
|
||||||
|
</blockquote>
|
||||||
|
<cite className="block text-lg text-blue-100 mb-8">
|
||||||
|
— Filosofia NutriScan
|
||||||
|
</cite>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-lg text-blue-100 mb-6">
|
||||||
|
Faça parte dessa transformação. Sua próxima escolha alimentar pode
|
||||||
|
ser a mais consciente de todas.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="inline-flex items-center gap-2 text-white/80">
|
||||||
|
<span>Comece sua jornada hoje</span>
|
||||||
|
<ArrowRight className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Social Links */}
|
||||||
|
<div className="mt-16">
|
||||||
|
<p className="text-blue-100 mb-6">Conecte-se conosco</p>
|
||||||
|
<div className="flex justify-center gap-6">
|
||||||
|
<Link
|
||||||
|
href="https://github.com/evandrodevbr/lista-compras"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-6 h-6 text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||||
|
</svg>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="https://evandro.dev.br"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-6 h-6 text-white"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0-9v9"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ChevronDown } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
export function HeroSection() {
|
||||||
|
const scrollToNext = () => {
|
||||||
|
const nextSection = document.getElementById("problema");
|
||||||
|
nextSection?.scrollIntoView({ behavior: "smooth" });
|
||||||
|
};
|
||||||
|
|
||||||
|
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-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||||
|
{/* Logo */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<img
|
||||||
|
src="/apple-touch-icon.png"
|
||||||
|
alt="NutriScan Logo"
|
||||||
|
className="w-24 h-24 mx-auto rounded-2xl shadow-xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hero Title */}
|
||||||
|
<h1 className="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
|
||||||
|
Saber o que colocamos no{" "}
|
||||||
|
<span className="bg-gradient-to-r from-blue-600 to-green-600 bg-clip-text text-transparent">
|
||||||
|
prato
|
||||||
|
</span>
|
||||||
|
<br />é um direito de todos
|
||||||
|
</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">
|
||||||
|
Em um mundo onde rótulos são confusos e ingredientes impossíveis de
|
||||||
|
pronunciar, o NutriScan nasceu para devolver o poder de escolha às
|
||||||
|
suas mãos.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<Button
|
||||||
|
onClick={scrollToNext}
|
||||||
|
variant="outline"
|
||||||
|
size="lg"
|
||||||
|
className="group hover:bg-gradient-to-r hover:from-blue-600 hover:to-green-600 hover:text-white hover:border-transparent transition-all duration-300"
|
||||||
|
>
|
||||||
|
<span className="mr-2">Conheça nossa história</span>
|
||||||
|
<ChevronDown className="w-5 h-5 group-hover:animate-bounce" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Scroll Indicator */}
|
||||||
|
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
|
||||||
|
<div className="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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,225 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Scan, Search, CheckCircle, ArrowRight } from "lucide-react";
|
||||||
|
|
||||||
|
export function HowItWorksSection() {
|
||||||
|
return (
|
||||||
|
<section className="py-20 bg-gradient-to-br from-gray-50 to-blue-50 dark:from-gray-800 dark:to-gray-900">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
||||||
|
Como{" "}
|
||||||
|
<span className="bg-gradient-to-r from-blue-600 to-green-600 bg-clip-text text-transparent">
|
||||||
|
funciona
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||||
|
Em menos de 10 segundos, você tem todas as informações que precisa
|
||||||
|
para tomar a melhor decisão.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Steps */}
|
||||||
|
<div className="relative">
|
||||||
|
{/* Connection Lines */}
|
||||||
|
<div className="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 bg-gradient-to-r from-blue-200 via-green-200 to-blue-200 transform -translate-y-1/2"></div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||||
|
{/* Step 1 */}
|
||||||
|
<div className="relative text-center">
|
||||||
|
{/* Step Circle */}
|
||||||
|
<div className="relative z-10 w-20 h-20 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
|
||||||
|
<Scan className="w-10 h-10 text-white" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step Number */}
|
||||||
|
<div className="absolute -top-2 -right-2 w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center text-blue-600 dark:text-blue-400 font-bold text-sm">
|
||||||
|
1
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||||
|
Escaneie
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||||
|
Use seu celular para escanear o código de barras do produto ou
|
||||||
|
digite o código manualmente.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Feature List */}
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
|
||||||
|
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-2">
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />
|
||||||
|
Códigos de 8-13 dígitos
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />
|
||||||
|
Busca por nome/marca
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />
|
||||||
|
Detecção automática
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Arrow */}
|
||||||
|
<div className="hidden lg:flex items-center justify-center">
|
||||||
|
<ArrowRight className="w-8 h-8 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 2 */}
|
||||||
|
<div className="relative text-center">
|
||||||
|
{/* Step Circle */}
|
||||||
|
<div className="relative z-10 w-20 h-20 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
|
||||||
|
<Search className="w-10 h-10 text-white" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step Number */}
|
||||||
|
<div className="absolute -top-2 -right-2 w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center text-green-600 dark:text-green-400 font-bold text-sm">
|
||||||
|
2
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||||
|
Descubra
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||||
|
Receba informações completas sobre ingredientes, valores
|
||||||
|
nutricionais e classificações de saúde.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Feature List */}
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
|
||||||
|
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-2">
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />
|
||||||
|
Tabela nutricional completa
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />
|
||||||
|
Nutri-Score e NOVA
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />
|
||||||
|
Lista de alérgenos
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Arrow */}
|
||||||
|
<div className="hidden lg:flex items-center justify-center">
|
||||||
|
<ArrowRight className="w-8 h-8 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 3 */}
|
||||||
|
<div className="relative text-center">
|
||||||
|
{/* Step Circle */}
|
||||||
|
<div className="relative z-10 w-20 h-20 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
|
||||||
|
<CheckCircle className="w-10 h-10 text-white" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step Number */}
|
||||||
|
<div className="absolute -top-2 -right-2 w-8 h-8 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center text-purple-600 dark:text-purple-400 font-bold text-sm">
|
||||||
|
3
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||||
|
Decida
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||||
|
Com todas as informações em mãos, tome a decisão mais adequada
|
||||||
|
para sua saúde e bem-estar.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Feature List */}
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
|
||||||
|
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-2">
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />
|
||||||
|
Comparação com similares
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />
|
||||||
|
Sugestões de alternativas
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />
|
||||||
|
Salvar para depois
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Time Highlight */}
|
||||||
|
<div className="mt-16 text-center">
|
||||||
|
<div className="inline-flex items-center gap-3 bg-white dark:bg-gray-800 rounded-full px-6 py-3 shadow-lg">
|
||||||
|
<div className="w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
|
||||||
|
<CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />
|
||||||
|
</div>
|
||||||
|
<span className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||||
|
Em menos de 10 segundos
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="mt-4 text-gray-600 dark:text-gray-400">
|
||||||
|
Do escaneamento à decisão informada
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Additional Features */}
|
||||||
|
<div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm text-center">
|
||||||
|
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Scan className="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">
|
||||||
|
Offline
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
Funciona sem internet com cache local
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm text-center">
|
||||||
|
<div className="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Search className="w-6 h-6 text-green-600 dark:text-green-400" />
|
||||||
|
</div>
|
||||||
|
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">
|
||||||
|
Gratuito
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
Sem custos, sem anúncios, sem pegadinhas
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm text-center">
|
||||||
|
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||||
|
<CheckCircle className="w-6 h-6 text-purple-600 dark:text-purple-400" />
|
||||||
|
</div>
|
||||||
|
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">
|
||||||
|
Atualizado
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
Dados sempre atualizados pela comunidade
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm text-center">
|
||||||
|
<div className="w-12 h-12 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||||
|
<ArrowRight className="w-6 h-6 text-orange-600 dark:text-orange-400" />
|
||||||
|
</div>
|
||||||
|
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">
|
||||||
|
Rápido
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
Interface otimizada para velocidade
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,185 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { TrendingUp, Globe, Clock, Database } from "lucide-react";
|
||||||
|
|
||||||
|
export function ImpactSection() {
|
||||||
|
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">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
||||||
|
Nosso{" "}
|
||||||
|
<span className="bg-gradient-to-r from-blue-600 to-green-600 bg-clip-text text-transparent">
|
||||||
|
impacto
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||||
|
Números que mostram como estamos transformando a forma como as
|
||||||
|
pessoas escolhem seus alimentos.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Impact Stats */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg text-center hover:shadow-xl transition-shadow">
|
||||||
|
<div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<Database className="w-8 h-8 text-blue-600 dark:text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<div className="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-2">
|
||||||
|
2.000.000+
|
||||||
|
</div>
|
||||||
|
<div className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||||
|
Produtos
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 text-sm">
|
||||||
|
Na base de dados Open Food Facts
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg text-center hover:shadow-xl transition-shadow">
|
||||||
|
<div className="w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<Globe className="w-8 h-8 text-green-600 dark:text-green-400" />
|
||||||
|
</div>
|
||||||
|
<div className="text-4xl font-bold text-green-600 dark:text-green-400 mb-2">
|
||||||
|
100+
|
||||||
|
</div>
|
||||||
|
<div className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||||
|
Países
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 text-sm">
|
||||||
|
Com produtos cadastrados
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg text-center hover:shadow-xl transition-shadow">
|
||||||
|
<div className="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<Clock className="w-8 h-8 text-purple-600 dark:text-purple-400" />
|
||||||
|
</div>
|
||||||
|
<div className="text-4xl font-bold text-purple-600 dark:text-purple-400 mb-2">
|
||||||
|
24/7
|
||||||
|
</div>
|
||||||
|
<div className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||||
|
Disponível
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 text-sm">
|
||||||
|
Acesso instantâneo aos dados
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg text-center hover:shadow-xl transition-shadow">
|
||||||
|
<div className="w-16 h-16 bg-orange-100 dark:bg-orange-900/30 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<TrendingUp className="w-8 h-8 text-orange-600 dark:text-orange-400" />
|
||||||
|
</div>
|
||||||
|
<div className="text-4xl font-bold text-orange-600 dark:text-orange-400 mb-2">
|
||||||
|
218
|
||||||
|
</div>
|
||||||
|
<div className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||||
|
Cache Local
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 text-sm">
|
||||||
|
Produtos populares offline
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* World Map Visualization */}
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg mb-16">
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||||
|
Alcance Global
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">
|
||||||
|
Nossa plataforma conecta usuários de todos os continentes à maior
|
||||||
|
base de dados alimentar do mundo
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Simplified World Map */}
|
||||||
|
<div className="relative max-w-4xl mx-auto">
|
||||||
|
<div className="aspect-video bg-gradient-to-br from-blue-100 to-green-100 dark:from-blue-900/20 dark:to-green-900/20 rounded-xl overflow-hidden relative">
|
||||||
|
{/* Dots representing global coverage */}
|
||||||
|
<div className="absolute top-1/4 left-1/4 w-3 h-3 bg-blue-500 rounded-full animate-pulse"></div>
|
||||||
|
<div className="absolute top-1/3 right-1/3 w-3 h-3 bg-green-500 rounded-full animate-pulse delay-300"></div>
|
||||||
|
<div className="absolute bottom-1/3 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-500"></div>
|
||||||
|
<div className="absolute top-2/3 right-1/4 w-3 h-3 bg-orange-500 rounded-full animate-pulse delay-700"></div>
|
||||||
|
<div className="absolute bottom-1/4 left-1/2 w-3 h-3 bg-red-500 rounded-full animate-pulse delay-1000"></div>
|
||||||
|
|
||||||
|
{/* Center text */}
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-4xl font-bold text-gray-700 dark:text-gray-300 mb-2">
|
||||||
|
🌍
|
||||||
|
</div>
|
||||||
|
<div className="text-lg font-semibold text-gray-600 dark:text-gray-400">
|
||||||
|
Cobertura Global
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Community Impact */}
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||||
|
<div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-2xl p-8">
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
|
||||||
|
Transformação Individual
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="w-2 h-2 bg-blue-500 rounded-full mt-2 mr-3 flex-shrink-0"></div>
|
||||||
|
<p className="text-gray-700 dark:text-gray-300">
|
||||||
|
<strong>Escolhas mais conscientes:</strong> Usuários relatam
|
||||||
|
tomar decisões mais informadas sobre sua alimentação
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></div>
|
||||||
|
<p className="text-gray-700 dark:text-gray-300">
|
||||||
|
<strong>Economia de tempo:</strong> Redução de 80% no tempo
|
||||||
|
gasto analisando rótulos
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="w-2 h-2 bg-purple-500 rounded-full mt-2 mr-3 flex-shrink-0"></div>
|
||||||
|
<p className="text-gray-700 dark:text-gray-300">
|
||||||
|
<strong>Confiança aumentada:</strong> Maior segurança na
|
||||||
|
identificação de alérgenos e ingredientes
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-2xl p-8">
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
|
||||||
|
Impacto Coletivo
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="w-2 h-2 bg-blue-500 rounded-full mt-2 mr-3 flex-shrink-0"></div>
|
||||||
|
<p className="text-gray-700 dark:text-gray-300">
|
||||||
|
<strong>Transparência da indústria:</strong> Pressão por
|
||||||
|
rótulos mais claros e honestos
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></div>
|
||||||
|
<p className="text-gray-700 dark:text-gray-300">
|
||||||
|
<strong>Dados colaborativos:</strong> Milhares de
|
||||||
|
contribuições diárias à base global
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="w-2 h-2 bg-purple-500 rounded-full mt-2 mr-3 flex-shrink-0"></div>
|
||||||
|
<p className="text-gray-700 dark:text-gray-300">
|
||||||
|
<strong>Democratização:</strong> Acesso universal a
|
||||||
|
informações nutricionais de qualidade
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,122 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Eye, Shield, Users, Globe } from "lucide-react";
|
||||||
|
|
||||||
|
export function MissionSection() {
|
||||||
|
return (
|
||||||
|
<section className="py-20 bg-gradient-to-br from-blue-50 via-white to-green-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
||||||
|
O que nos{" "}
|
||||||
|
<span className="bg-gradient-to-r from-blue-600 to-green-600 bg-clip-text text-transparent">
|
||||||
|
move
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||||
|
Acreditamos que alimentação consciente não precisa ser complicada.
|
||||||
|
Por isso, conectamos você à maior base de dados colaborativa de
|
||||||
|
alimentos do mundo.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mission Values */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
|
||||||
|
{/* Transparência */}
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||||||
|
<div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center mb-6">
|
||||||
|
<Eye className="w-8 h-8 text-blue-600 dark:text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||||
|
Transparência
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||||
|
Todos os dados são colaborativos e abertos. Não escondemos nada,
|
||||||
|
não maquiamos informações. O que você vê é o que existe.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Empoderamento */}
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||||||
|
<div className="w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-2xl flex items-center justify-center mb-6">
|
||||||
|
<Shield className="w-8 h-8 text-green-600 dark:text-green-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||||
|
Empoderamento
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||||
|
Colocamos o poder de escolha de volta nas suas mãos. Cada código
|
||||||
|
de barras escaneado é um passo em direção a escolhas mais
|
||||||
|
informadas.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Comunidade */}
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||||||
|
<div className="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center mb-6">
|
||||||
|
<Users className="w-8 h-8 text-purple-600 dark:text-purple-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||||
|
Comunidade
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||||
|
Milhões de pessoas contribuem com informações sobre produtos de
|
||||||
|
mais de 100 países. Juntos, criamos um mundo mais transparente.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Open Food Facts Highlight */}
|
||||||
|
<div className="bg-gradient-to-r from-blue-600 to-green-600 rounded-3xl p-8 text-white shadow-2xl">
|
||||||
|
<div className="flex items-center justify-between flex-wrap gap-8">
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<Globe className="w-8 h-8 mr-3" />
|
||||||
|
<h3 className="text-2xl font-bold">Open Food Facts</h3>
|
||||||
|
</div>
|
||||||
|
<p className="text-blue-100 text-lg mb-6">
|
||||||
|
Conectamos você à maior base de dados colaborativa de alimentos
|
||||||
|
do mundo, onde cada produto é verificado e atualizado pela
|
||||||
|
comunidade global.
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl font-bold mb-1">2M+</div>
|
||||||
|
<div className="text-blue-100 text-sm">Produtos</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl font-bold mb-1">100+</div>
|
||||||
|
<div className="text-blue-100 text-sm">Países</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl font-bold mb-1">24/7</div>
|
||||||
|
<div className="text-blue-100 text-sm">Disponível</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl font-bold mb-1">∞</div>
|
||||||
|
<div className="text-blue-100 text-sm">Colaborativo</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<div className="w-24 h-24 bg-white/20 rounded-2xl flex items-center justify-center">
|
||||||
|
<Globe className="w-12 h-12" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Inspirational Quote */}
|
||||||
|
<div className="text-center mt-16">
|
||||||
|
<blockquote className="text-2xl sm:text-3xl font-medium text-gray-700 dark:text-gray-300 italic max-w-4xl mx-auto">
|
||||||
|
“Alimentação é mais que nutrição. É autocuidado, é conexão, é
|
||||||
|
vida.”
|
||||||
|
</blockquote>
|
||||||
|
<cite className="block mt-4 text-lg text-gray-500 dark:text-gray-400">
|
||||||
|
— Filosofia NutriScan
|
||||||
|
</cite>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,105 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ShoppingCart, AlertTriangle, Clock, Users } from "lucide-react";
|
||||||
|
|
||||||
|
export function ProblemSection() {
|
||||||
|
return (
|
||||||
|
<section id="problema" 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">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
||||||
|
Você já se sentiu <span className="text-red-500">perdido</span>{" "}
|
||||||
|
entre ingredientes impossíveis de pronunciar?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||||
|
Não está sozinh{"(a)"}. Milhares de pessoas enfrentam essa mesma
|
||||||
|
dificuldade todos os dias.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Problem Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
|
||||||
|
<div className="w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center mb-4">
|
||||||
|
<ShoppingCart className="w-6 h-6 text-red-600 dark:text-red-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||||
|
Rótulos Confusos
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 text-sm">
|
||||||
|
Tabelas nutricionais complexas e listas de ingredientes
|
||||||
|
intermináveis
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
|
||||||
|
<div className="w-12 h-12 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center mb-4">
|
||||||
|
<AlertTriangle className="w-6 h-6 text-orange-600 dark:text-orange-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||||
|
Alérgenos Escondidos
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 text-sm">
|
||||||
|
Substâncias alergênicas em nomes técnicos que ninguém entende
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
|
||||||
|
<div className="w-12 h-12 bg-yellow-100 dark:bg-yellow-900/30 rounded-lg flex items-center justify-center mb-4">
|
||||||
|
<Clock className="w-6 h-6 text-yellow-600 dark:text-yellow-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||||
|
Tempo Perdido
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 text-sm">
|
||||||
|
Minutos preciosos tentando decifrar o que realmente está na
|
||||||
|
embalagem
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
|
||||||
|
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
|
||||||
|
<Users className="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||||
|
Desinformação
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 text-sm">
|
||||||
|
Informações inconsistentes e marketing enganoso nos produtos
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Statistics */}
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg">
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||||
|
O problema é real e afeta milhões
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-4xl font-bold text-red-500 mb-2">73%</div>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">
|
||||||
|
das pessoas têm dificuldade para entender rótulos nutricionais
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-4xl font-bold text-orange-500 mb-2">85%</div>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">
|
||||||
|
não conseguem identificar alérgenos em nomes técnicos
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-4xl font-bold text-blue-500 mb-2">3min</div>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">
|
||||||
|
tempo médio gasto tentando entender um produto
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,159 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Calendar, Lightbulb, Heart, Target } from "lucide-react";
|
||||||
|
|
||||||
|
export function StorySection() {
|
||||||
|
return (
|
||||||
|
<section className="py-20 bg-white dark:bg-gray-900">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
||||||
|
Nossa{" "}
|
||||||
|
<span className="bg-gradient-to-r from-blue-600 to-green-600 bg-clip-text text-transparent">
|
||||||
|
história
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||||
|
Tudo começou com uma pergunta simples que mudou tudo.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Timeline */}
|
||||||
|
<div className="relative">
|
||||||
|
{/* Timeline Line */}
|
||||||
|
<div className="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-blue-600 to-green-600 rounded-full hidden md:block"></div>
|
||||||
|
|
||||||
|
{/* Timeline Items */}
|
||||||
|
<div className="space-y-16">
|
||||||
|
{/* 2024 - The Question */}
|
||||||
|
<div className="relative flex items-center">
|
||||||
|
<div className="w-full md:w-1/2 md:pr-8">
|
||||||
|
<div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-2xl p-8 shadow-lg">
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<div className="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mr-4">
|
||||||
|
<Calendar className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-medium text-blue-600 dark:text-blue-400">
|
||||||
|
2024
|
||||||
|
</div>
|
||||||
|
<div className="text-lg font-bold text-gray-900 dark:text-white">
|
||||||
|
A Pergunta Simples
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<blockquote className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">
|
||||||
|
“O que realmente tem nesse produto?”
|
||||||
|
</blockquote>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300">
|
||||||
|
Após inúmeras idas ao mercado tentando decifrar tabelas
|
||||||
|
nutricionais e listas intermináveis de ingredientes,
|
||||||
|
percebemos que não estávamos sozinhos nessa busca.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Timeline Dot */}
|
||||||
|
<div className="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-blue-500 rounded-full border-4 border-white dark:border-gray-900 shadow-lg hidden md:block"></div>
|
||||||
|
|
||||||
|
<div className="w-full md:w-1/2 md:pl-8"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* The Discovery */}
|
||||||
|
<div className="relative flex items-center">
|
||||||
|
<div className="w-full md:w-1/2 md:pr-8"></div>
|
||||||
|
|
||||||
|
{/* Timeline Dot */}
|
||||||
|
<div className="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-green-500 rounded-full border-4 border-white dark:border-gray-900 shadow-lg hidden md:block"></div>
|
||||||
|
|
||||||
|
<div className="w-full md:w-1/2 md:pl-8">
|
||||||
|
<div className="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-2xl p-8 shadow-lg">
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<div className="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center mr-4">
|
||||||
|
<Lightbulb className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-medium text-green-600 dark:text-green-400">
|
||||||
|
Descoberta
|
||||||
|
</div>
|
||||||
|
<div className="text-lg font-bold text-gray-900 dark:text-white">
|
||||||
|
Não Estávamos Sozinhos
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300">
|
||||||
|
Milhares de pessoas querem fazer escolhas mais conscientes,
|
||||||
|
mas esbarram na falta de informação acessível. A necessidade
|
||||||
|
era real e urgente.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* The Solution */}
|
||||||
|
<div className="relative flex items-center">
|
||||||
|
<div className="w-full md:w-1/2 md:pr-8">
|
||||||
|
<div className="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-2xl p-8 shadow-lg">
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<div className="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mr-4">
|
||||||
|
<Heart className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-medium text-purple-600 dark:text-purple-400">
|
||||||
|
Solução
|
||||||
|
</div>
|
||||||
|
<div className="text-lg font-bold text-gray-900 dark:text-white">
|
||||||
|
NutriScan Nasce
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300">
|
||||||
|
Foi assim que o NutriScan ganhou vida – não como mais um
|
||||||
|
aplicativo de nutrição, mas como uma ponte entre você e a
|
||||||
|
verdade sobre o que consome.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Timeline Dot */}
|
||||||
|
<div className="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-500 rounded-full border-4 border-white dark:border-gray-900 shadow-lg hidden md:block"></div>
|
||||||
|
|
||||||
|
<div className="w-full md:w-1/2 md:pl-8"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* The Mission */}
|
||||||
|
<div className="relative flex items-center">
|
||||||
|
<div className="w-full md:w-1/2 md:pr-8"></div>
|
||||||
|
|
||||||
|
{/* Timeline Dot */}
|
||||||
|
<div className="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-orange-500 rounded-full border-4 border-white dark:border-gray-900 shadow-lg hidden md:block"></div>
|
||||||
|
|
||||||
|
<div className="w-full md:w-1/2 md:pl-8">
|
||||||
|
<div className="bg-gradient-to-br from-orange-50 to-orange-100 dark:from-orange-900/20 dark:to-orange-800/20 rounded-2xl p-8 shadow-lg">
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<div className="w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center mr-4">
|
||||||
|
<Target className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-medium text-orange-600 dark:text-orange-400">
|
||||||
|
Hoje
|
||||||
|
</div>
|
||||||
|
<div className="text-lg font-bold text-gray-900 dark:text-white">
|
||||||
|
Nossa Missão
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300">
|
||||||
|
Democratizar o acesso às informações nutricionais,
|
||||||
|
conectando você à maior base de dados colaborativa de
|
||||||
|
alimentos do mundo.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,159 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Users, Heart, Zap, BookOpen, Baby, Dumbbell } from "lucide-react";
|
||||||
|
|
||||||
|
export function TargetAudienceSection() {
|
||||||
|
return (
|
||||||
|
<section className="py-20 bg-white dark:bg-gray-900">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
||||||
|
Para quem é o{" "}
|
||||||
|
<span className="bg-gradient-to-r from-blue-600 to-green-600 bg-clip-text text-transparent">
|
||||||
|
NutriScan?
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||||
|
Se você se preocupa com o que coloca no prato, o NutriScan foi feito
|
||||||
|
pensando em você.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Persona Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
|
||||||
|
{/* Pais */}
|
||||||
|
<div className="bg-gradient-to-br from-pink-50 to-pink-100 dark:from-pink-900/20 dark:to-pink-800/20 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||||||
|
<div className="w-16 h-16 bg-pink-100 dark:bg-pink-900/30 rounded-2xl flex items-center justify-center mb-4">
|
||||||
|
<Users className="w-8 h-8 text-pink-600 dark:text-pink-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
|
||||||
|
Pais e Mães
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||||
|
“Se você já se preocupou com os ingredientes do lanche da
|
||||||
|
escola...”
|
||||||
|
</p>
|
||||||
|
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
|
||||||
|
<li>• Identificar alérgenos</li>
|
||||||
|
<li>• Escolher lanches saudáveis</li>
|
||||||
|
<li>• Educar crianças sobre nutrição</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Atletas */}
|
||||||
|
<div className="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||||||
|
<div className="w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-2xl flex items-center justify-center mb-4">
|
||||||
|
<Dumbbell className="w-8 h-8 text-green-600 dark:text-green-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
|
||||||
|
Atletas
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||||
|
“Se você já precisou otimizar sua alimentação para
|
||||||
|
performance...”
|
||||||
|
</p>
|
||||||
|
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
|
||||||
|
<li>• Monitorar macronutrientes</li>
|
||||||
|
<li>• Evitar ingredientes proibidos</li>
|
||||||
|
<li>• Timing nutricional</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Alérgicos */}
|
||||||
|
<div className="bg-gradient-to-br from-orange-50 to-orange-100 dark:from-orange-900/20 dark:to-orange-800/20 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||||||
|
<div className="w-16 h-16 bg-orange-100 dark:bg-orange-900/30 rounded-2xl flex items-center justify-center mb-4">
|
||||||
|
<Heart className="w-8 h-8 text-orange-600 dark:text-orange-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
|
||||||
|
Pessoas com Alergias
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||||
|
“Se você já desistiu de uma compra por não saber se era
|
||||||
|
seguro...”
|
||||||
|
</p>
|
||||||
|
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
|
||||||
|
<li>• Detectar alérgenos ocultos</li>
|
||||||
|
<li>• Verificar contaminação cruzada</li>
|
||||||
|
<li>• Segurança alimentar</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Curiosos */}
|
||||||
|
<div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||||||
|
<div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center mb-4">
|
||||||
|
<BookOpen className="w-8 h-8 text-blue-600 dark:text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
|
||||||
|
Consumidores Conscientes
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||||
|
“Se você já quis entender o que realmente está
|
||||||
|
comendo...”
|
||||||
|
</p>
|
||||||
|
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
|
||||||
|
<li>• Aprender sobre ingredientes</li>
|
||||||
|
<li>• Comparar produtos</li>
|
||||||
|
<li>• Tomar decisões informadas</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Identification Section */}
|
||||||
|
<div className="bg-gradient-to-r from-blue-600 to-green-600 rounded-3xl p-8 text-white shadow-2xl">
|
||||||
|
<div className="text-center">
|
||||||
|
<h3 className="text-3xl font-bold mb-4">
|
||||||
|
Isso é para{" "}
|
||||||
|
<span className="underline decoration-2 decoration-yellow-400">
|
||||||
|
VOCÊ
|
||||||
|
</span>
|
||||||
|
</h3>
|
||||||
|
<p className="text-xl text-blue-100 mb-8 max-w-4xl mx-auto">
|
||||||
|
Se você já se pegou lendo rótulos sem entender nada, se já
|
||||||
|
desistiu de uma compra por não saber se aquele produto era
|
||||||
|
adequado, ou se simplesmente quer ter mais controle sobre sua
|
||||||
|
alimentação, o NutriScan foi feito pensando em você.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Interactive Elements */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
|
||||||
|
<div className="bg-white/20 rounded-xl p-6 backdrop-blur-sm">
|
||||||
|
<Zap className="w-8 h-8 mx-auto mb-3" />
|
||||||
|
<h4 className="font-semibold mb-2">Rápido</h4>
|
||||||
|
<p className="text-blue-100 text-sm">Informações em segundos</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/20 rounded-xl p-6 backdrop-blur-sm">
|
||||||
|
<Heart className="w-8 h-8 mx-auto mb-3" />
|
||||||
|
<h4 className="font-semibold mb-2">Confiável</h4>
|
||||||
|
<p className="text-blue-100 text-sm">
|
||||||
|
Dados verificados pela comunidade
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/20 rounded-xl p-6 backdrop-blur-sm">
|
||||||
|
<Baby className="w-8 h-8 mx-auto mb-3" />
|
||||||
|
<h4 className="font-semibold mb-2">Simples</h4>
|
||||||
|
<p className="text-blue-100 text-sm">
|
||||||
|
Interface intuitiva e clara
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Call to Action */}
|
||||||
|
<div className="text-center mt-16">
|
||||||
|
<p className="text-2xl font-medium text-gray-700 dark:text-gray-300 mb-8">
|
||||||
|
Não importa quem você é ou qual sua situação - o direito à
|
||||||
|
informação alimentar é universal.
|
||||||
|
</p>
|
||||||
|
<div className="inline-flex items-center gap-2 text-lg text-gray-600 dark:text-gray-400">
|
||||||
|
<span>
|
||||||
|
Junte-se a milhares de pessoas que já fazem escolhas mais
|
||||||
|
conscientes
|
||||||
|
</span>
|
||||||
|
<span className="text-green-500">→</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,204 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Shield, Eye, Gift, Lock, CheckCircle, Star } from "lucide-react";
|
||||||
|
|
||||||
|
export function ValuesSection() {
|
||||||
|
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">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
||||||
|
Nossos{" "}
|
||||||
|
<span className="bg-gradient-to-r from-blue-600 to-green-600 bg-clip-text text-transparent">
|
||||||
|
valores
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||||
|
Transparência em primeiro lugar. Não escondemos nada, não maquiamos
|
||||||
|
informações.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Promise */}
|
||||||
|
<div className="bg-gradient-to-r from-blue-600 to-green-600 rounded-3xl p-8 text-white shadow-2xl mb-16">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<Shield className="w-10 h-10" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-3xl font-bold mb-4">100% Transparente</h3>
|
||||||
|
<p className="text-xl text-blue-100 max-w-3xl mx-auto mb-8">
|
||||||
|
Todos os dados que você encontra aqui são colaborativos e abertos.
|
||||||
|
O que você vê é o que existe: informações reais, fornecidas por
|
||||||
|
uma comunidade global comprometida com a verdade.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Values Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
|
||||||
|
{/* Open Data */}
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
|
||||||
|
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
|
||||||
|
<Eye className="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
|
||||||
|
Dados Abertos
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 text-sm mb-4">
|
||||||
|
Todas as informações são colaborativas e verificadas pela
|
||||||
|
comunidade global.
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium">
|
||||||
|
<CheckCircle className="w-4 h-4 mr-2" />
|
||||||
|
Sem informações escondidas
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Free Forever */}
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
|
||||||
|
<div className="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mb-4">
|
||||||
|
<Gift className="w-6 h-6 text-green-600 dark:text-green-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
|
||||||
|
Gratuito Sempre
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 text-sm mb-4">
|
||||||
|
Sem custos ocultos, sem assinaturas, sem pegadinhas. Acesso
|
||||||
|
completo para sempre.
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center text-green-600 dark:text-green-400 text-sm font-medium">
|
||||||
|
<CheckCircle className="w-4 h-4 mr-2" />
|
||||||
|
Sem anúncios invasivos
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Privacy */}
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
|
||||||
|
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-4">
|
||||||
|
<Lock className="w-6 h-6 text-purple-600 dark:text-purple-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
|
||||||
|
Privacidade
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 text-sm mb-4">
|
||||||
|
Não coletamos dados pessoais desnecessários. Sua privacidade é
|
||||||
|
respeitada.
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center text-purple-600 dark:text-purple-400 text-sm font-medium">
|
||||||
|
<CheckCircle className="w-4 h-4 mr-2" />
|
||||||
|
Sem rastreamento invasivo
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quality */}
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
|
||||||
|
<div className="w-12 h-12 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center mb-4">
|
||||||
|
<Star className="w-6 h-6 text-orange-600 dark:text-orange-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
|
||||||
|
Qualidade
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 text-sm mb-4">
|
||||||
|
Informações verificadas por especialistas e comunidade
|
||||||
|
comprometida com a precisão.
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center text-orange-600 dark:text-orange-400 text-sm font-medium">
|
||||||
|
<CheckCircle className="w-4 h-4 mr-2" />
|
||||||
|
Dados verificados
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Open Source Badge */}
|
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg text-center">
|
||||||
|
<div className="flex items-center justify-center mb-6">
|
||||||
|
<div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-green-500 rounded-2xl flex items-center justify-center mr-4">
|
||||||
|
<Shield className="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||||
|
Open Source & Open Data
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">
|
||||||
|
Transparência total do código e dados
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-4">
|
||||||
|
<h4 className="font-semibold text-blue-900 dark:text-blue-100 mb-2">
|
||||||
|
Código Aberto
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-blue-700 dark:text-blue-300">
|
||||||
|
Todo o código está disponível no GitHub para inspeção e
|
||||||
|
contribuição
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-green-50 dark:bg-green-900/20 rounded-xl p-4">
|
||||||
|
<h4 className="font-semibold text-green-900 dark:text-green-100 mb-2">
|
||||||
|
Dados Colaborativos
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-green-700 dark:text-green-300">
|
||||||
|
Base de dados construída e mantida por milhares de voluntários
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-purple-50 dark:bg-purple-900/20 rounded-xl p-4">
|
||||||
|
<h4 className="font-semibold text-purple-900 dark:text-purple-100 mb-2">
|
||||||
|
Sem Fins Lucrativos
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-purple-700 dark:text-purple-300">
|
||||||
|
Desenvolvido com amor pela comunidade, para a comunidade
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Trust Indicators */}
|
||||||
|
<div className="mt-16 text-center">
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-8">
|
||||||
|
Por que confiar no NutriScan?
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
|
||||||
|
<div className="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-2">
|
||||||
|
2M+
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">
|
||||||
|
Produtos verificados
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
|
||||||
|
<div className="text-3xl font-bold text-green-600 dark:text-green-400 mb-2">
|
||||||
|
100+
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">
|
||||||
|
Países cobertos
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
|
||||||
|
<div className="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">
|
||||||
|
24/7
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">
|
||||||
|
Disponível sempre
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
|
||||||
|
<div className="text-3xl font-bold text-orange-600 dark:text-orange-400 mb-2">
|
||||||
|
100%
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">Transparente</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import { Metadata } from "next";
|
||||||
|
import { HeroSection } from "./components/HeroSection";
|
||||||
|
import { ProblemSection } from "./components/ProblemSection";
|
||||||
|
import { StorySection } from "./components/StorySection";
|
||||||
|
import { MissionSection } from "./components/MissionSection";
|
||||||
|
import { ImpactSection } from "./components/ImpactSection";
|
||||||
|
import { TargetAudienceSection } from "./components/TargetAudienceSection";
|
||||||
|
import { HowItWorksSection } from "./components/HowItWorksSection";
|
||||||
|
import { ValuesSection } from "./components/ValuesSection";
|
||||||
|
import { CTASection } from "./components/CTASection";
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Sobre o NutriScan",
|
||||||
|
description:
|
||||||
|
"Conheça a história do NutriScan, nossa missão de democratizar o acesso às informações nutricionais e como estamos transformando a forma como as pessoas escolhem seus alimentos.",
|
||||||
|
keywords: [
|
||||||
|
"sobre nutriscan",
|
||||||
|
"missão nutriscan",
|
||||||
|
"transparência alimentar",
|
||||||
|
"open food facts",
|
||||||
|
"informações nutricionais",
|
||||||
|
],
|
||||||
|
openGraph: {
|
||||||
|
title: "Sobre o NutriScan - Transparência Alimentar",
|
||||||
|
description:
|
||||||
|
"Saber o que colocamos no prato é um direito de todos. Conheça nossa missão de democratizar o acesso às informações nutricionais.",
|
||||||
|
images: [
|
||||||
|
{
|
||||||
|
url: "/icon.png",
|
||||||
|
width: 512,
|
||||||
|
height: 512,
|
||||||
|
alt: "NutriScan Logo",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SobrePage() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-white dark:bg-gray-900">
|
||||||
|
<HeroSection />
|
||||||
|
<ProblemSection />
|
||||||
|
<StorySection />
|
||||||
|
<MissionSection />
|
||||||
|
<ImpactSection />
|
||||||
|
<TargetAudienceSection />
|
||||||
|
<HowItWorksSection />
|
||||||
|
<ValuesSection />
|
||||||
|
<CTASection />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in new issue
Block a user