diyaa.de/components/HeroSection.tsx
2026-03-13 09:26:40 +01:00

54 lines
1.6 KiB
TypeScript

import Link from "next/link";
import ComingSoonPanel from "@/components/ComingSoonPanel";
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 comingSoon = isComingSoonMode();
const emailHref = getEmailHref();
if (comingSoon) {
return <ComingSoonPanel content={activeHome} />;
}
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={`/${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>
);
}