45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import { getTranslations } from 'next-intl/server';
|
|
import Reveal from './Reveal';
|
|
import styles from './HowItWorks.module.css';
|
|
|
|
const STEPS = ['step_01', 'step_02', 'step_03'] as const;
|
|
|
|
/**
|
|
* Three-step product story: import history → work in workspaces → memory
|
|
* compounds. Strings under `landing.how_it_works.*`.
|
|
*/
|
|
export default async function HowItWorks() {
|
|
const t = await getTranslations('landing.how_it_works');
|
|
|
|
return (
|
|
<section
|
|
id="how-it-works"
|
|
className="section"
|
|
aria-labelledby="how-heading"
|
|
>
|
|
<div className="container">
|
|
<header className={styles.header}>
|
|
<p className="eyebrow">{t('eyebrow')}</p>
|
|
<h2 id="how-heading" className="section-headline">
|
|
{t('headline')}
|
|
</h2>
|
|
</header>
|
|
|
|
<div className={styles.steps}>
|
|
{STEPS.map((step, i) => (
|
|
<Reveal key={step} delay={(i + 1) as 1 | 2 | 3}>
|
|
<div className={styles.step}>
|
|
<span className={styles.stepNumber} aria-hidden="true">
|
|
{t(`${step}.number`)}
|
|
</span>
|
|
<h3 className={styles.stepTitle}>{t(`${step}.title`)}</h3>
|
|
<p className={styles.stepBody}>{t(`${step}.body`)}</p>
|
|
</div>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|