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