85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
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>
|
||
);
|
||
}
|