85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
interface StoryStep {
|
|
year: string;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
const STORY_DATA: StoryStep[] = [
|
|
{
|
|
year: "2024",
|
|
title: "A Pergunta Simples",
|
|
description:
|
|
"O que realmente tem nesse produto? Decifrar tabelas nutricionais era um desafio individual que percebemos ser global.",
|
|
},
|
|
{
|
|
year: "Descoberta",
|
|
title: "Não Estávamos Sozinhos",
|
|
description:
|
|
"Milhares de pessoas buscam transparência alimentar. A necessidade de dados abertos tornou-se uma urgência coletiva.",
|
|
},
|
|
{
|
|
year: "Solução",
|
|
title: "NutriScan Nasce",
|
|
description:
|
|
"Uma ponte entre o código de barras e a verdade nutricional. Engenharia a serviço de uma escolha consciente.",
|
|
},
|
|
{
|
|
year: "Hoje",
|
|
title: "Nossa Missão",
|
|
description:
|
|
"Democratizar a informação. Conectar cidadãos à maior base de dados colaborativa de alimentos do planeta.",
|
|
},
|
|
];
|
|
|
|
export function StorySection() {
|
|
return (
|
|
<section className="bg-base section-py">
|
|
<div className="container-editorial">
|
|
|
|
{/* Section header */}
|
|
<div className="section-header">
|
|
<span className="eyebrow">Nossa História</span>
|
|
<h2 className="font-display">
|
|
De uma dúvida individual a uma plataforma de transparência global.
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Timeline — clean editorial list with hairlines */}
|
|
<div className="relative">
|
|
{/* Vertical accent line */}
|
|
<div className="absolute left-[5.75rem] top-0 bottom-0 w-px bg-[var(--border-subtle)] hidden md:block" />
|
|
|
|
<div className="space-y-0">
|
|
{STORY_DATA.map((step, index) => (
|
|
<div
|
|
key={index}
|
|
className="group relative grid grid-cols-1 md:grid-cols-[6rem_1fr] gap-0 border-b border-[var(--border-subtle)] last:border-b-0 py-10 hover-lift cursor-default"
|
|
>
|
|
{/* Year label */}
|
|
<div className="md:pr-8 mb-4 md:mb-0 flex md:flex-col items-center md:items-start md:pt-1">
|
|
<span className="label text-accent">{step.year}</span>
|
|
{/* Timeline dot */}
|
|
<div className="hidden md:block mt-4 ml-px w-2 h-2 rounded-full bg-[var(--border-strong)] group-hover:bg-[var(--accent)] transition-colors duration-300" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="md:pl-12">
|
|
<h3 className="font-display text-display-sm text-[var(--fg-primary)] mb-3">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-[var(--fg-secondary)] leading-relaxed max-w-xl">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|