moving

apps/www/app/_components/HowItWorks.tsx

@@ -0,0 +1,44 @@
+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>
+  );
+}