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
|
||||
</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"
|
||||
>
|
||||
Sobre
|
||||
@@ -124,7 +124,7 @@ export function Header() {
|
||||
Recursos
|
||||
</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"
|
||||
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