From 4afec0ddd87b10e3779747d47ab9ca9b7a8e0038 Mon Sep 17 00:00:00 2001 From: Evandro Fonseca Junior Date: Sat, 11 Oct 2025 15:47:39 -0300 Subject: [PATCH] refactor: update header links from anchors to paths Changed href attributes in header.tsx from '#sobre' to '/sobre' for consistent routing and improved navigation. --- app/components/header.tsx | 4 +- app/sobre/components/CTASection.tsx | 160 +++++++++++++ app/sobre/components/HeroSection.tsx | 65 +++++ app/sobre/components/HowItWorksSection.tsx | 225 ++++++++++++++++++ app/sobre/components/ImpactSection.tsx | 185 ++++++++++++++ app/sobre/components/MissionSection.tsx | 122 ++++++++++ app/sobre/components/ProblemSection.tsx | 105 ++++++++ app/sobre/components/StorySection.tsx | 159 +++++++++++++ .../components/TargetAudienceSection.tsx | 159 +++++++++++++ app/sobre/components/ValuesSection.tsx | 204 ++++++++++++++++ app/sobre/page.tsx | 52 ++++ 11 files changed, 1438 insertions(+), 2 deletions(-) create mode 100644 app/sobre/components/CTASection.tsx create mode 100644 app/sobre/components/HeroSection.tsx create mode 100644 app/sobre/components/HowItWorksSection.tsx create mode 100644 app/sobre/components/ImpactSection.tsx create mode 100644 app/sobre/components/MissionSection.tsx create mode 100644 app/sobre/components/ProblemSection.tsx create mode 100644 app/sobre/components/StorySection.tsx create mode 100644 app/sobre/components/TargetAudienceSection.tsx create mode 100644 app/sobre/components/ValuesSection.tsx create mode 100644 app/sobre/page.tsx diff --git a/app/components/header.tsx b/app/components/header.tsx index 43521d2..a4cfe31 100644 --- a/app/components/header.tsx +++ b/app/components/header.tsx @@ -63,7 +63,7 @@ export function Header() { Recursos Sobre @@ -124,7 +124,7 @@ export function Header() { Recursos setIsMenuOpen(false)} > diff --git a/app/sobre/components/CTASection.tsx b/app/sobre/components/CTASection.tsx new file mode 100644 index 0000000..c1d394d --- /dev/null +++ b/app/sobre/components/CTASection.tsx @@ -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 ( +
+ {/* Background Pattern */} +
+ +
+ {/* Main CTA */} +
+

+ Mais que uma ferramenta, +
+ + um movimento + +
+ por transparência +

+

+ 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. +

+ + {/* CTA Buttons */} +
+ + + + + + + +
+
+ + {/* Community Stats */} +
+
+
+ +
+
Milhares
+

+ de usuários ativos fazendo escolhas mais conscientes +

+
+ +
+
+ +
+
Global
+

+ comunidade internacional comprometida com transparência +

+
+ +
+
+ +
+
Crescendo
+

+ movimento que não para de expandir e impactar vidas +

+
+
+ + {/* Final Message */} +
+
+ “Porque alimentação é mais que nutrição. É autocuidado, é + conexão, é vida.” +
+ + — Filosofia NutriScan + + +
+

+ Faça parte dessa transformação. Sua próxima escolha alimentar pode + ser a mais consciente de todas. +

+ +
+ Comece sua jornada hoje + +
+
+
+ + {/* Social Links */} +
+

Conecte-se conosco

+
+ + + + + + + + + + + +
+
+
+
+ ); +} diff --git a/app/sobre/components/HeroSection.tsx b/app/sobre/components/HeroSection.tsx new file mode 100644 index 0000000..8e8a9e5 --- /dev/null +++ b/app/sobre/components/HeroSection.tsx @@ -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 ( +
+ {/* Background Pattern */} +
+ +
+ {/* Logo */} +
+ NutriScan Logo +
+ + {/* Hero Title */} +

+ Saber o que colocamos no{" "} + + prato + +
é um direito de todos +

+ + {/* Subtitle */} +

+ 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. +

+ + {/* CTA */} + +
+ + {/* Scroll Indicator */} +
+
+
+
+
+
+
+
+ ); +} diff --git a/app/sobre/components/HowItWorksSection.tsx b/app/sobre/components/HowItWorksSection.tsx new file mode 100644 index 0000000..bf7b102 --- /dev/null +++ b/app/sobre/components/HowItWorksSection.tsx @@ -0,0 +1,225 @@ +"use client"; + +import { Scan, Search, CheckCircle, ArrowRight } from "lucide-react"; + +export function HowItWorksSection() { + return ( +
+
+
+

+ Como{" "} + + funciona + +

+

+ Em menos de 10 segundos, você tem todas as informações que precisa + para tomar a melhor decisão. +

+
+ + {/* Steps */} +
+ {/* Connection Lines */} +
+ +
+ {/* Step 1 */} +
+ {/* Step Circle */} +
+ +
+ + {/* Step Number */} +
+ 1 +
+ +

+ Escaneie +

+

+ Use seu celular para escanear o código de barras do produto ou + digite o código manualmente. +

+ + {/* Feature List */} +
+
    +
  • + + Códigos de 8-13 dígitos +
    • +
  • + + Busca por nome/marca +
    • +
  • + + Detecção automática +
    • +
+
+
+ + {/* Arrow */} +
+ +
+ + {/* Step 2 */} +
+ {/* Step Circle */} +
+ +
+ + {/* Step Number */} +
+ 2 +
+ +

+ Descubra +

+

+ Receba informações completas sobre ingredientes, valores + nutricionais e classificações de saúde. +

+ + {/* Feature List */} +
+
    +
  • + + Tabela nutricional completa +
    • +
  • + + Nutri-Score e NOVA +
    • +
  • + + Lista de alérgenos +
    • +
+
+
+ + {/* Arrow */} +
+ +
+ + {/* Step 3 */} +
+ {/* Step Circle */} +
+ +
+ + {/* Step Number */} +
+ 3 +
+ +

+ Decida +

+

+ Com todas as informações em mãos, tome a decisão mais adequada + para sua saúde e bem-estar. +

+ + {/* Feature List */} +
+
    +
  • + + Comparação com similares +
    • +
  • + + Sugestões de alternativas +
    • +
  • + + Salvar para depois +
    • +
+
+
+
+
+ + {/* Time Highlight */} +
+
+
+ +
+ + Em menos de 10 segundos + +
+

+ Do escaneamento à decisão informada +

+
+ + {/* Additional Features */} +
+
+
+ +
+

+ Offline +

+

+ Funciona sem internet com cache local +

+
+ +
+
+ +
+

+ Gratuito +

+

+ Sem custos, sem anúncios, sem pegadinhas +

+
+ +
+
+ +
+

+ Atualizado +

+

+ Dados sempre atualizados pela comunidade +

+
+ +
+
+ +
+

+ Rápido +

+

+ Interface otimizada para velocidade +

+
+
+
+
+ ); +} diff --git a/app/sobre/components/ImpactSection.tsx b/app/sobre/components/ImpactSection.tsx new file mode 100644 index 0000000..61d94aa --- /dev/null +++ b/app/sobre/components/ImpactSection.tsx @@ -0,0 +1,185 @@ +"use client"; + +import { TrendingUp, Globe, Clock, Database } from "lucide-react"; + +export function ImpactSection() { + return ( +
+
+
+

+ Nosso{" "} + + impacto + +

+

+ Números que mostram como estamos transformando a forma como as + pessoas escolhem seus alimentos. +

+
+ + {/* Impact Stats */} +
+
+
+ +
+
+ 2.000.000+ +
+
+ Produtos +
+

+ Na base de dados Open Food Facts +

+
+ +
+
+ +
+
+ 100+ +
+
+ Países +
+

+ Com produtos cadastrados +

+
+ +
+
+ +
+
+ 24/7 +
+
+ Disponível +
+

+ Acesso instantâneo aos dados +

+
+ +
+
+ +
+
+ 218 +
+
+ Cache Local +
+

+ Produtos populares offline +

+
+
+ + {/* World Map Visualization */} +
+
+

+ Alcance Global +

+

+ Nossa plataforma conecta usuários de todos os continentes à maior + base de dados alimentar do mundo +

+
+ + {/* Simplified World Map */} +
+
+ {/* Dots representing global coverage */} +
+
+
+
+
+ + {/* Center text */} +
+
+
+ 🌍 +
+
+ Cobertura Global +
+
+
+
+
+
+ + {/* Community Impact */} +
+
+

+ Transformação Individual +

+
+
+
+

+ Escolhas mais conscientes: Usuários relatam + tomar decisões mais informadas sobre sua alimentação +

+
+
+
+

+ Economia de tempo: Redução de 80% no tempo + gasto analisando rótulos +

+
+
+
+

+ Confiança aumentada: Maior segurança na + identificação de alérgenos e ingredientes +

+
+
+
+ +
+

+ Impacto Coletivo +

+
+
+
+

+ Transparência da indústria: Pressão por + rótulos mais claros e honestos +

+
+
+
+

+ Dados colaborativos: Milhares de + contribuições diárias à base global +

+
+
+
+

+ Democratização: Acesso universal a + informações nutricionais de qualidade +

+
+
+
+
+
+
+ ); +} diff --git a/app/sobre/components/MissionSection.tsx b/app/sobre/components/MissionSection.tsx new file mode 100644 index 0000000..f56a96b --- /dev/null +++ b/app/sobre/components/MissionSection.tsx @@ -0,0 +1,122 @@ +"use client"; + +import { Eye, Shield, Users, Globe } from "lucide-react"; + +export function MissionSection() { + return ( +
+
+
+

+ O que nos{" "} + + move + +

+

+ Acreditamos que alimentação consciente não precisa ser complicada. + Por isso, conectamos você à maior base de dados colaborativa de + alimentos do mundo. +

+
+ + {/* Mission Values */} +
+ {/* Transparência */} +
+
+ +
+

+ Transparência +

+

+ Todos os dados são colaborativos e abertos. Não escondemos nada, + não maquiamos informações. O que você vê é o que existe. +

+
+ + {/* Empoderamento */} +
+
+ +
+

+ Empoderamento +

+

+ 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. +

+
+ + {/* Comunidade */} +
+
+ +
+

+ Comunidade +

+

+ Milhões de pessoas contribuem com informações sobre produtos de + mais de 100 países. Juntos, criamos um mundo mais transparente. +

+
+
+ + {/* Open Food Facts Highlight */} +
+
+
+
+ +

Open Food Facts

+
+

+ Conectamos você à maior base de dados colaborativa de alimentos + do mundo, onde cada produto é verificado e atualizado pela + comunidade global. +

+
+
+
2M+
+
Produtos
+
+
+
100+
+
Países
+
+
+
24/7
+
Disponível
+
+
+
∞
+
Colaborativo
+
+
+
+
+
+ +
+
+
+
+ + {/* Inspirational Quote */} +
+
+ “Alimentação é mais que nutrição. É autocuidado, é conexão, é + vida.” +
+ + — Filosofia NutriScan + +
+
+
+ ); +} diff --git a/app/sobre/components/ProblemSection.tsx b/app/sobre/components/ProblemSection.tsx new file mode 100644 index 0000000..614a83e --- /dev/null +++ b/app/sobre/components/ProblemSection.tsx @@ -0,0 +1,105 @@ +"use client"; + +import { ShoppingCart, AlertTriangle, Clock, Users } from "lucide-react"; + +export function ProblemSection() { + return ( +
+
+
+

+ Você já se sentiu perdido{" "} + entre ingredientes impossíveis de pronunciar? +

+

+ Não está sozinh{"(a)"}. Milhares de pessoas enfrentam essa mesma + dificuldade todos os dias. +

+
+ + {/* Problem Cards */} +
+
+
+ +
+

+ Rótulos Confusos +

+

+ Tabelas nutricionais complexas e listas de ingredientes + intermináveis +

+
+ +
+
+ +
+

+ Alérgenos Escondidos +

+

+ Substâncias alergênicas em nomes técnicos que ninguém entende +

+
+ +
+
+ +
+

+ Tempo Perdido +

+

+ Minutos preciosos tentando decifrar o que realmente está na + embalagem +

+
+ +
+
+ +
+

+ Desinformação +

+

+ Informações inconsistentes e marketing enganoso nos produtos +

+
+
+ + {/* Statistics */} +
+
+

+ O problema é real e afeta milhões +

+
+ +
+
+
73%
+

+ das pessoas têm dificuldade para entender rótulos nutricionais +

+
+
+
85%
+

+ não conseguem identificar alérgenos em nomes técnicos +

+
+
+
3min
+

+ tempo médio gasto tentando entender um produto +

+
+
+
+
+
+ ); +} diff --git a/app/sobre/components/StorySection.tsx b/app/sobre/components/StorySection.tsx new file mode 100644 index 0000000..9a949ca --- /dev/null +++ b/app/sobre/components/StorySection.tsx @@ -0,0 +1,159 @@ +"use client"; + +import { Calendar, Lightbulb, Heart, Target } from "lucide-react"; + +export function StorySection() { + return ( +
+
+
+

+ Nossa{" "} + + história + +

+

+ Tudo começou com uma pergunta simples que mudou tudo. +

+
+ + {/* Timeline */} +
+ {/* Timeline Line */} +
+ + {/* Timeline Items */} +
+ {/* 2024 - The Question */} +
+
+
+
+
+ +
+
+
+ 2024 +
+
+ A Pergunta Simples +
+
+
+
+ “O que realmente tem nesse produto?” +
+

+ 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. +

+
+
+ + {/* Timeline Dot */} +
+ +
+
+ + {/* The Discovery */} +
+
+ + {/* Timeline Dot */} +
+ +
+
+
+
+ +
+
+
+ Descoberta +
+
+ Não Estávamos Sozinhos +
+
+
+

+ Milhares de pessoas querem fazer escolhas mais conscientes, + mas esbarram na falta de informação acessível. A necessidade + era real e urgente. +

+
+
+
+ + {/* The Solution */} +
+
+
+
+
+ +
+
+
+ Solução +
+
+ NutriScan Nasce +
+
+
+

+ 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. +

+
+
+ + {/* Timeline Dot */} +
+ +
+
+ + {/* The Mission */} +
+
+ + {/* Timeline Dot */} +
+ +
+
+
+
+ +
+
+
+ Hoje +
+
+ Nossa Missão +
+
+
+

+ Democratizar o acesso às informações nutricionais, + conectando você à maior base de dados colaborativa de + alimentos do mundo. +

+
+
+
+
+
+
+
+ ); +} diff --git a/app/sobre/components/TargetAudienceSection.tsx b/app/sobre/components/TargetAudienceSection.tsx new file mode 100644 index 0000000..a25a995 --- /dev/null +++ b/app/sobre/components/TargetAudienceSection.tsx @@ -0,0 +1,159 @@ +"use client"; + +import { Users, Heart, Zap, BookOpen, Baby, Dumbbell } from "lucide-react"; + +export function TargetAudienceSection() { + return ( +
+
+
+

+ Para quem é o{" "} + + NutriScan? + +

+

+ Se você se preocupa com o que coloca no prato, o NutriScan foi feito + pensando em você. +

+
+ + {/* Persona Cards */} +
+ {/* Pais */} +
+
+ +
+

+ Pais e Mães +

+

+ “Se você já se preocupou com os ingredientes do lanche da + escola...” +

+
    +
  • • Identificar alérgenos
    • +
  • • Escolher lanches saudáveis
    • +
  • • Educar crianças sobre nutrição
    • +
+
+ + {/* Atletas */} +
+
+ +
+

+ Atletas +

+

+ “Se você já precisou otimizar sua alimentação para + performance...” +

+
    +
  • • Monitorar macronutrientes
    • +
  • • Evitar ingredientes proibidos
    • +
  • • Timing nutricional
    • +
+
+ + {/* Alérgicos */} +
+
+ +
+

+ Pessoas com Alergias +

+

+ “Se você já desistiu de uma compra por não saber se era + seguro...” +

+
    +
  • • Detectar alérgenos ocultos
    • +
  • • Verificar contaminação cruzada
    • +
  • • Segurança alimentar
    • +
+
+ + {/* Curiosos */} +
+
+ +
+

+ Consumidores Conscientes +

+

+ “Se você já quis entender o que realmente está + comendo...” +

+
    +
  • • Aprender sobre ingredientes
    • +
  • • Comparar produtos
    • +
  • • Tomar decisões informadas
    • +
+
+
+ + {/* Identification Section */} +
+
+

+ Isso é para{" "} + + VOCÊ + +

+

+ 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ê. +

+ + {/* Interactive Elements */} +
+
+ +

Rápido

+

Informações em segundos

+
+
+ +

Confiável

+

+ Dados verificados pela comunidade +

+
+
+ +

Simples

+

+ Interface intuitiva e clara +

+
+
+
+
+ + {/* Call to Action */} +
+

+ Não importa quem você é ou qual sua situação - o direito à + informação alimentar é universal. +

+
+ + Junte-se a milhares de pessoas que já fazem escolhas mais + conscientes + + → +
+
+
+
+ ); +} diff --git a/app/sobre/components/ValuesSection.tsx b/app/sobre/components/ValuesSection.tsx new file mode 100644 index 0000000..d5a695c --- /dev/null +++ b/app/sobre/components/ValuesSection.tsx @@ -0,0 +1,204 @@ +"use client"; + +import { Shield, Eye, Gift, Lock, CheckCircle, Star } from "lucide-react"; + +export function ValuesSection() { + return ( +
+
+
+

+ Nossos{" "} + + valores + +

+

+ Transparência em primeiro lugar. Não escondemos nada, não maquiamos + informações. +

+
+ + {/* Main Promise */} +
+
+
+ +
+

100% Transparente

+

+ 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. +

+
+
+ + {/* Values Grid */} +
+ {/* Open Data */} +
+
+ +
+

+ Dados Abertos +

+

+ Todas as informações são colaborativas e verificadas pela + comunidade global. +

+
+ + Sem informações escondidas +
+
+ + {/* Free Forever */} +
+
+ +
+

+ Gratuito Sempre +

+

+ Sem custos ocultos, sem assinaturas, sem pegadinhas. Acesso + completo para sempre. +

+
+ + Sem anúncios invasivos +
+
+ + {/* Privacy */} +
+
+ +
+

+ Privacidade +

+

+ Não coletamos dados pessoais desnecessários. Sua privacidade é + respeitada. +

+
+ + Sem rastreamento invasivo +
+
+ + {/* Quality */} +
+
+ +
+

+ Qualidade +

+

+ Informações verificadas por especialistas e comunidade + comprometida com a precisão. +

+
+ + Dados verificados +
+
+
+ + {/* Open Source Badge */} +
+
+
+ +
+
+

+ Open Source & Open Data +

+

+ Transparência total do código e dados +

+
+
+ +
+
+

+ Código Aberto +

+

+ Todo o código está disponível no GitHub para inspeção e + contribuição +

+
+ +
+

+ Dados Colaborativos +

+

+ Base de dados construída e mantida por milhares de voluntários +

+
+ +
+

+ Sem Fins Lucrativos +

+

+ Desenvolvido com amor pela comunidade, para a comunidade +

+
+
+
+ + {/* Trust Indicators */} +
+

+ Por que confiar no NutriScan? +

+ +
+
+
+ 2M+ +
+

+ Produtos verificados +

+
+ +
+
+ 100+ +
+

+ Países cobertos +

+
+ +
+
+ 24/7 +
+

+ Disponível sempre +

+
+ +
+
+ 100% +
+

Transparente

+
+
+
+
+
+ ); +} diff --git a/app/sobre/page.tsx b/app/sobre/page.tsx new file mode 100644 index 0000000..dc500ed --- /dev/null +++ b/app/sobre/page.tsx @@ -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 ( +
+ + + + + + + + + +
+ ); +}