feat: complete NutriScan redesign
This commit is contained in:
evandrodevbr committed
1 parent
c1fe4af997
commit
f71cd167b3
163 files changed
+30802
-14169
No files matched your search
@@ -1,104 +1,79 @@
|
||||
"use client";
|
||||
|
||||
import { ShoppingCart, AlertTriangle, Clock, Users } from "lucide-react";
|
||||
|
||||
export function ProblemSection() {
|
||||
const problems = [
|
||||
{
|
||||
num: "01",
|
||||
title: "Rótulos Confusos",
|
||||
body: "Tabelas nutricionais complexas e listas de ingredientes intermináveis projetadas para desorientar.",
|
||||
},
|
||||
{
|
||||
num: "02",
|
||||
title: "Alérgenos Escondidos",
|
||||
body: "Substâncias alergênicas disfarçadas em nomenclaturas técnicas inacessíveis ao consumidor comum.",
|
||||
},
|
||||
{
|
||||
num: "03",
|
||||
title: "Tempo Perdido",
|
||||
body: "Minutos preciosos gastos tentando decifrar o que realmente compõe cada embalagem.",
|
||||
},
|
||||
{
|
||||
num: "04",
|
||||
title: "Desinformação",
|
||||
body: "Marketing enganoso e informações inconsistentes que obscurecem a verdade nutricional.",
|
||||
},
|
||||
];
|
||||
|
||||
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?
|
||||
<section id="problema" className="bg-surface section-py">
|
||||
<div className="container-editorial">
|
||||
|
||||
{/* Section header */}
|
||||
<div className="section-header">
|
||||
<span className="eyebrow">O Problema</span>
|
||||
<h2 className="font-display">
|
||||
Você já se sentiu perdido 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>
|
||||
Não está sozinho. 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" />
|
||||
{/* Problem list — editorial numbered rows */}
|
||||
<div className="divide-y divide-[var(--border-subtle)] border-y border-[var(--border-subtle)]">
|
||||
{problems.map((p) => (
|
||||
<div
|
||||
key={p.num}
|
||||
className="group grid grid-cols-[3rem_1fr_1fr] gap-8 py-8 hover-lift cursor-default"
|
||||
>
|
||||
<span className="step-number leading-none">{p.num}</span>
|
||||
<h3 className="font-display text-display-sm text-[var(--fg-primary)] self-center">
|
||||
{p.title}
|
||||
</h3>
|
||||
<p className="text-[var(--fg-secondary)] leading-relaxed self-center text-sm">
|
||||
{p.body}
|
||||
</p>
|
||||
</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>
|
||||
{/* Statistics — hairline grid */}
|
||||
<div className="mt-20 grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-[var(--border-subtle)] border border-[var(--border-subtle)] rounded-lg overflow-hidden bg-elevated">
|
||||
{[
|
||||
{ value: "73%", label: "Dificuldade com rótulos", desc: "das pessoas não conseguem interpretar tabelas nutricionais" },
|
||||
{ value: "85%", label: "Alérgenos invisíveis", desc: "não identificam alérgenos escondidos em nomes técnicos" },
|
||||
{ value: "3 min", label: "Tempo médio perdido", desc: "por produto tentando compreender uma embalagem" },
|
||||
].map((s) => (
|
||||
<div key={s.label} className="px-10 py-10">
|
||||
<div className="font-display text-display-lg text-[var(--fg-primary)] mb-2">
|
||||
{s.value}
|
||||
</div>
|
||||
<div className="label text-accent mb-3 block">{s.label}</div>
|
||||
<p className="text-sm text-[var(--fg-muted)] leading-relaxed">{s.desc}</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>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user