moving

apps/www/app/_components/SovereigntyBand.tsx

@@ -0,0 +1,46 @@
+import { getTranslations } from 'next-intl/server';
+import Reveal from './Reveal';
+import styles from './SovereigntyBand.module.css';
+
+const ITEMS = ['device', 'egress', 'erasure', 'injection'] as const;
+
+/**
+ * Data-sovereignty band: four specific, verifiable statements about where
+ * data lives and what leaves the machine. Trust through specificity — no
+ * compliance badges we don't hold. Strings under `landing.sovereignty.*`.
+ */
+export default async function SovereigntyBand() {
+  const t = await getTranslations('landing.sovereignty');
+
+  return (
+    <section
+      id="trust"
+      className={`section ${styles.band}`}
+      aria-labelledby="trust-heading"
+    >
+      <div className="container">
+        <header className={styles.header}>
+          <p className="eyebrow">{t('eyebrow')}</p>
+          <h2 id="trust-heading" className="section-headline">
+            {t('headline')}
+          </h2>
+        </header>
+
+        <div className={styles.grid}>
+          {ITEMS.map((item, i) => (
+            <Reveal key={item} delay={((i % 4) + 1) as 1 | 2 | 3 | 4}>
+              <div className={styles.item}>
+                <h3 className={styles.title}>{t(`items.${item}.title`)}</h3>
+                <p className={styles.body}>{t(`items.${item}.body`)}</p>
+              </div>
+            </Reveal>
+          ))}
+        </div>
+
+        <a href="/eu-ai-act" className="btn btn-ghost btn-small">
+          {t('cta')}
+        </a>
+      </div>
+    </section>
+  );
+}