File size: 1,595 Bytes
703a33a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | import type { HeroContent } from "../content/types";
interface HeroProps {
hero: HeroContent;
demoMode: boolean;
}
export function Hero({ hero, demoMode }: HeroProps) {
return (
<section className="hero shell-block">
<div className="hero-copy">
<p className="section-kicker">{hero.eyebrow}</p>
<h1>{hero.title}</h1>
<p className="hero-statement">{hero.statement}</p>
<p className="hero-trust">{hero.trustLine}</p>
<div className="hero-actions">
{hero.ctas.map((cta, index) => (
<a
key={cta.label}
className={index === 0 ? "button primary" : "button ghost"}
href={cta.href}
>
{cta.label}
</a>
))}
</div>
<div className="hero-metrics">
{hero.metrics.map((metric) => (
<div key={metric.label} className="metric-card">
<strong>{metric.value}</strong>
<span>{metric.label}</span>
</div>
))}
</div>
</div>
<div className="hero-visual">
<div className="signal-panel">
<div className="signal-grid" />
<div className="signal-wave signal-wave-a" />
<div className="signal-wave signal-wave-b" />
<div className="signal-wave signal-wave-c" />
<div className="signal-status">
<span>routing clarity</span>
<span>{demoMode ? "public-safe demo surface" : "live-ready surface"}</span>
</div>
</div>
</div>
</section>
);
}
|