48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import Link from "next/link";
|
|
import type { HomeContent, HomeVariantContent } from "@/content/types";
|
|
import type { Locale } from "@/lib/i18n";
|
|
import { getEmailHref, getModeValue, isComingSoonMode } from "@/lib/site";
|
|
|
|
type HeroSectionProps = {
|
|
locale: Locale;
|
|
home: HomeContent;
|
|
};
|
|
|
|
export default function HeroSection({ locale, home }: HeroSectionProps) {
|
|
const activeHome: HomeVariantContent = getModeValue(home);
|
|
const emailHref = getEmailHref();
|
|
|
|
return (
|
|
<section className="hero panel">
|
|
<p className="availability-badge">{activeHome.badge}</p>
|
|
<p className="eyebrow">{activeHome.kicker}</p>
|
|
<h1>{activeHome.title}</h1>
|
|
<p className="lead">{activeHome.description}</p>
|
|
|
|
<div className="cta-row">
|
|
{emailHref ? (
|
|
<a href={emailHref} className="cta-btn">
|
|
{activeHome.primaryCta}
|
|
</a>
|
|
) : (
|
|
<span className="cta-btn is-disabled" aria-disabled="true">
|
|
{activeHome.primaryCta}
|
|
</span>
|
|
)}
|
|
<Link href={isComingSoonMode() ? `/${locale}` : `/${locale}/about`} className="ghost-btn">
|
|
{activeHome.secondaryCta}
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="stat-grid">
|
|
{activeHome.highlights.map((item) => (
|
|
<article key={item.label} className="stat-card">
|
|
<span className="stat-value">{item.value}</span>
|
|
<span className="stat-label">{item.label}</span>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|