72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
import { getTranslations } from 'next-intl/server';
|
|
import DownloadCTA from './DownloadCTA';
|
|
import HeroVisual from './HeroVisual';
|
|
import styles from './Hero.module.css';
|
|
|
|
const MICROCOPY_KEYS = [
|
|
'microcopy_free',
|
|
'microcopy_platforms',
|
|
'microcopy_oss',
|
|
] as const;
|
|
|
|
/**
|
|
* Hero — single committed headline (the A/B variant infra was removed with
|
|
* the 2026-07 rebuild). Two columns: positioning copy left, the memory-core
|
|
* window visual right. All strings under `landing.hero.*`.
|
|
*/
|
|
export default async function Hero() {
|
|
const t = await getTranslations('landing.hero');
|
|
|
|
return (
|
|
<section id="hero" className={`${styles.section} honeycomb-bg`}>
|
|
<div className={styles.glow} aria-hidden="true" />
|
|
<div className={styles.grid}>
|
|
<div className={styles.copy}>
|
|
<p className="eyebrow">{t('eyebrow')}</p>
|
|
|
|
<h1 className={styles.headline}>
|
|
{t('headline_lead')}{' '}
|
|
<span className={styles.headlineEmphasis}>
|
|
{t('headline_emphasis')}
|
|
</span>
|
|
.
|
|
</h1>
|
|
|
|
<p className={styles.subhead}>{t('subhead')}</p>
|
|
|
|
<div className={styles.ctaRow}>
|
|
<DownloadCTA section="hero" variant="primary" />
|
|
<a href="#proof" className="btn btn-ghost">
|
|
{t('cta_secondary')}
|
|
</a>
|
|
</div>
|
|
|
|
<ul className={styles.microcopy}>
|
|
{MICROCOPY_KEYS.map((key) => (
|
|
<li key={key} className={styles.microItem}>
|
|
<span aria-hidden="true" className={styles.microDot} />
|
|
{t(key)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* Round-7: the hero's dead bottom quarter carries the product's
|
|
strongest proof — one benchmark strip, linking to #proof.
|
|
Wave R Lane E: the 86.49% number is lifted to a flagship stat
|
|
(larger mono, honey) so the leaderboard claim carries visual
|
|
weight near the CTAs; the rest stays quiet supporting copy. */}
|
|
<a href="#proof" className={styles.proofStrip}>
|
|
<span className={styles.proofStat}>{t('proof_stat')}</span>
|
|
<span className={styles.proofLabel}>{t('proof_strip')}</span>
|
|
<span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div className={styles.visual}>
|
|
<HeroVisual />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|