102 lines
4.4 KiB
TypeScript
102 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
export function ImpactSection() {
|
|
return (
|
|
<section className="bg-base section-py">
|
|
<div className="container-editorial">
|
|
|
|
{/* Section header */}
|
|
<div className="section-header">
|
|
<span className="eyebrow">Impacto</span>
|
|
<h2 className="font-display">
|
|
Escala global. Escolha individual.
|
|
</h2>
|
|
<p>
|
|
Métricas da maior rede colaborativa de transparência alimentar do planeta.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Stats grid — editorial warm cards */}
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-px bg-[var(--border-subtle)] border border-[var(--border-subtle)] rounded-lg overflow-hidden mb-20">
|
|
{[
|
|
{ val: "2.0M+", label: "Alimentos indexados", sub: "Dataset global" },
|
|
{ val: "100+", label: "Países cobertos", sub: "Rede distribuída" },
|
|
{ val: "24/7", label: "Disponibilidade", sub: "Alta redundância" },
|
|
{ val: "218k", label: "Cache local", sub: "Acesso offline" },
|
|
].map((stat) => (
|
|
<div key={stat.label} className="bg-elevated px-8 py-10 hover-lift group cursor-default">
|
|
<div className="font-display text-display-md text-[var(--fg-primary)] mb-1 group-hover:text-accent transition-colors duration-300">
|
|
{stat.val}
|
|
</div>
|
|
<div className="label text-[var(--fg-primary)] mb-1 block">{stat.label}</div>
|
|
<div className="text-xs text-[var(--fg-faint)]">{stat.sub}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Two-column impact breakdown */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
{/* Individual impact */}
|
|
<div className="card-warm p-10">
|
|
<span className="label text-accent mb-6 block">Protocolo Individual</span>
|
|
<div className="space-y-6">
|
|
{[
|
|
{
|
|
label: "Eficiência Cognitiva",
|
|
text: "Redução de 80% no tempo de análise de rótulos via consulta direta à base estruturada.",
|
|
},
|
|
{
|
|
label: "Soberania de Dados",
|
|
text: "Usuários com controle total sobre o histórico de consumo local, sem rastreamento.",
|
|
},
|
|
{
|
|
label: "Camada de Segurança",
|
|
text: "Detecção imediata de alérgenos via cruzamento com base colaborativa validada.",
|
|
},
|
|
].map((item) => (
|
|
<div key={item.label} className="grid grid-cols-[1px_1fr] gap-5 items-start">
|
|
<div className="w-px self-stretch bg-[var(--accent)] mt-1" />
|
|
<p className="text-sm text-[var(--fg-secondary)] leading-relaxed">
|
|
<span className="font-semibold text-[var(--fg-primary)]">{item.label}:</span>{" "}
|
|
{item.text}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Collective impact */}
|
|
<div className="card-warm p-10">
|
|
<span className="label text-accent mb-6 block">Governança Coletiva</span>
|
|
<div className="space-y-6">
|
|
{[
|
|
{
|
|
label: "Transparência de Mercado",
|
|
text: "Pressão por rótulos honestos e dados auditáveis — o escrutínio coletivo como regulador.",
|
|
},
|
|
{
|
|
label: "Inteligência Colaborativa",
|
|
text: "Milhares de contribuições diárias validando a integridade da base de dados.",
|
|
},
|
|
{
|
|
label: "Acesso Universal",
|
|
text: "Democratização da informação nutricional de alta fidelidade, sem paywalls.",
|
|
},
|
|
].map((item) => (
|
|
<div key={item.label} className="grid grid-cols-[1px_1fr] gap-5 items-start">
|
|
<div className="w-px self-stretch bg-[var(--border-strong)] mt-1" />
|
|
<p className="text-sm text-[var(--fg-secondary)] leading-relaxed">
|
|
<span className="font-semibold text-[var(--fg-primary)]">{item.label}:</span>{" "}
|
|
{item.text}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|