99 lines
3.4 KiB
TypeScript
99 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
const STEPS = [
|
|
{
|
|
id: "01",
|
|
title: "Captura de Dados",
|
|
description:
|
|
"Input instantâneo via scanner óptico ou entrada manual do código de barras do produto.",
|
|
features: ["OCR de alta precisão", "Busca por código EAN", "Detecção automática"],
|
|
},
|
|
{
|
|
id: "02",
|
|
title: "Análise de Base",
|
|
description:
|
|
"Cruzamento com o dataset global Open Food Facts em milissegundos. Dados validados por curadoria colaborativa.",
|
|
features: ["Nutri-Score v2.0", "Grau NOVA", "Alertas de alérgenos"],
|
|
},
|
|
{
|
|
id: "03",
|
|
title: "Veredito Claro",
|
|
description:
|
|
"Saída de dados interpretada para uma tomada de decisão consciente, sem jargões técnicos.",
|
|
features: ["Sugestões saudáveis", "Histórico local", "Comparativo nutricional"],
|
|
},
|
|
];
|
|
|
|
export function HowItWorksSection() {
|
|
return (
|
|
<section className="bg-base section-py">
|
|
<div className="container-editorial">
|
|
|
|
{/* Section header */}
|
|
<div className="section-header">
|
|
<span className="eyebrow">Como Funciona</span>
|
|
<h2 className="font-display">
|
|
A inteligência por trás do{" "}
|
|
<em className="font-display-i italic">scan.</em>
|
|
</h2>
|
|
<p>
|
|
Três etapas simples entre o código de barras e uma escolha informada.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Step rows — editorial numbered layout */}
|
|
<div className="divide-y divide-[var(--border-subtle)] border-y border-[var(--border-subtle)] mb-20">
|
|
{STEPS.map((step) => (
|
|
<div
|
|
key={step.id}
|
|
className="group grid grid-cols-1 lg:grid-cols-[5rem_1fr_1fr] gap-8 py-12 hover-lift cursor-default"
|
|
>
|
|
{/* Step number */}
|
|
<div className="step-number">{step.id}</div>
|
|
|
|
{/* Title + description */}
|
|
<div>
|
|
<h3 className="font-display text-display-sm text-[var(--fg-primary)] mb-3">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-[var(--fg-secondary)] leading-relaxed">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Features list */}
|
|
<ul className="space-y-3 lg:pt-1">
|
|
{step.features.map((f) => (
|
|
<li
|
|
key={f}
|
|
className="flex items-center gap-3 text-sm text-[var(--fg-muted)]"
|
|
>
|
|
<span className="w-1.5 h-px bg-[var(--border-strong)] flex-shrink-0" />
|
|
{f}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Bottom stat strip */}
|
|
<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">
|
|
{[
|
|
{ val: "2M+", label: "Alimentos globais" },
|
|
{ val: "100%", label: "Gratuito" },
|
|
{ val: "< 10s", label: "Por consulta" },
|
|
{ val: "Offline", label: "Cache inteligente" },
|
|
].map((item) => (
|
|
<div key={item.label} className="bg-elevated px-8 py-8 stat-cell items-start">
|
|
<span className="stat-value">{item.val}</span>
|
|
<span className="stat-label">{item.label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|