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
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user