moving

apps/www/app/_components/ProofBand.tsx

@@ -0,0 +1,84 @@
+import { getTranslations } from 'next-intl/server';
+import Reveal from './Reveal';
+import { LOCOMO_BARS } from '../_data/proof-points';
+import styles from './ProofBand.module.css';
+
+const HIVE_MIND_URL = 'https://github.com/marolinik/hive-mind';
+
+/**
+ * Benchmark proof band. The chart is honest by construction: bar widths are
+ * raw scores on a 0–100 axis (no truncated baseline), the protocol footnote
+ * names the judge, N, and significance, and both CTAs lead to verification
+ * paths (methodology page, reproducible repo). Data from `_data/proof-points`.
+ */
+export default async function ProofBand() {
+  const t = await getTranslations('landing.proof');
+
+  return (
+    <section
+      id="proof"
+      className={`section ${styles.band}`}
+      aria-labelledby="proof-heading"
+    >
+      <div className="container">
+        <header className={styles.header}>
+          <p className="eyebrow">{t('eyebrow')}</p>
+          <h2 id="proof-heading" className="section-headline">
+            {t('headline')}
+          </h2>
+          <p className="section-lead">{t('body')}</p>
+        </header>
+
+        <Reveal>
+          <div className={styles.chart} role="img" aria-label={t('chart_aria')}>
+            {LOCOMO_BARS.map((bar) => (
+              <div key={bar.id} className={styles.row}>
+                <span className={styles.system}>
+                  <span className={styles.systemName}>{bar.system}</span>
+                  <span className={styles.systemDetail}>{bar.detail}</span>
+                </span>
+                <span className={styles.track}>
+                  <span
+                    className={[
+                      styles.bar,
+                      bar.highlight ? styles.barHighlight : '',
+                    ]
+                      .filter(Boolean)
+                      .join(' ')}
+                    style={{ width: `${bar.score}%` }}
+                  />
+                </span>
+                <span
+                  className={[
+                    styles.score,
+                    bar.highlight ? styles.scoreHighlight : '',
+                  ]
+                    .filter(Boolean)
+                    .join(' ')}
+                >
+                  {bar.score.toFixed(2)}%
+                </span>
+              </div>
+            ))}
+          </div>
+        </Reveal>
+
+        <p className={styles.footnote}>{t('footnote')}</p>
+
+        <div className={styles.ctaRow}>
+          <a href="/docs/methodology" className="btn btn-ghost">
+            {t('cta_methodology')}
+          </a>
+          <a
+            href={HIVE_MIND_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="btn btn-ghost"
+          >
+            {t('cta_reproduce')}
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}