moving

apps/www/app/_components/MemoryDiagram.tsx

@@ -0,0 +1,80 @@
+import { getTranslations } from 'next-intl/server';
+import Reveal from './Reveal';
+import styles from './MemoryDiagram.module.css';
+
+const CHIP_KEYS = ['local', 'provenance', 'erasure'] as const;
+
+/**
+ * "Under the hood" — the real memory pipeline, named after the actual
+ * subsystems (frames → hybrid search → knowledge graph → any model).
+ * Copy under `landing.memory.*`; the diagram is semantic HTML so it
+ * stacks naturally and needs no JS.
+ */
+export default async function MemoryDiagram() {
+  const t = await getTranslations('landing.memory');
+
+  return (
+    <section id="memory" className="section" aria-labelledby="memory-heading">
+      <div className="container">
+        <div className={styles.grid}>
+          <div>
+            <p className="eyebrow">{t('eyebrow')}</p>
+            <h2 id="memory-heading" className="section-headline">
+              {t('headline')}
+            </h2>
+            <p className={styles.body}>{t('body')}</p>
+            <ul className={styles.chips}>
+              {CHIP_KEYS.map((key) => (
+                <li key={key} className={styles.chip}>
+                  {t(`chips.${key}`)}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <Reveal>
+            <div className={styles.pipeline} role="img" aria-label={t('headline')}>
+              <div className={styles.node}>
+                <span className={styles.nodeTitle}>{t('diagram.input')}</span>
+              </div>
+              <Arrow />
+              <div className={styles.node}>
+                <span className={styles.nodeTitle}>{t('diagram.frames')}</span>
+              </div>
+              <Arrow />
+              <div className={styles.node}>
+                <span className={styles.nodeTitle}>{t('diagram.search')}</span>
+                <span className={styles.nodeSub}>{t('diagram.search_sub')}</span>
+              </div>
+              <Arrow />
+              <div className={styles.node}>
+                <span className={styles.nodeTitle}>{t('diagram.graph')}</span>
+                <span className={styles.nodeSub}>{t('diagram.graph_sub')}</span>
+              </div>
+              <Arrow />
+              <div className={`${styles.node} ${styles.nodeAccent}`}>
+                <span className={styles.nodeTitle}>{t('diagram.output')}</span>
+              </div>
+            </div>
+          </Reveal>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function Arrow() {
+  return (
+    <span className={styles.connector} aria-hidden="true">
+      <svg width="12" height="14" viewBox="0 0 12 14" fill="none">
+        <path
+          d="M6 0 V11 M2 8 L6 12 L10 8"
+          stroke="currentColor"
+          strokeWidth="1.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </span>
+  );
+}