71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import {
|
|
HeroContentMotion,
|
|
HeroMotionItem,
|
|
HeroScrollLink,
|
|
HeroShell,
|
|
HeroTitle,
|
|
} from "@/components/layout/site-hero";
|
|
|
|
type HomeHeroProps = {
|
|
locale: string;
|
|
kicker: string;
|
|
title: string;
|
|
description: string;
|
|
};
|
|
|
|
export function HomeHero({
|
|
locale,
|
|
kicker,
|
|
title,
|
|
description,
|
|
}: HomeHeroProps) {
|
|
const titleLines = title.split("\n").filter(Boolean);
|
|
const isArabic = locale === "ar";
|
|
const lines = titleLines.map((line, index) => ({
|
|
text: line,
|
|
tone: isArabic
|
|
? index === 0
|
|
? "accent"
|
|
: "default"
|
|
: index === titleLines.length - 1
|
|
? "accent"
|
|
: index === 0
|
|
? "soft"
|
|
: "default",
|
|
align: isArabic
|
|
? "center"
|
|
: index === 1
|
|
? "end"
|
|
: "start",
|
|
})) as {
|
|
text: string;
|
|
tone: "default" | "accent" | "soft";
|
|
align: "start" | "center" | "end";
|
|
}[];
|
|
|
|
return (
|
|
<HeroShell showBridges>
|
|
<HeroContentMotion variant="home">
|
|
<HeroMotionItem variant="home">
|
|
<p className="max-w-[34rem] text-sm font-medium tracking-[0.12em] text-foreground/62 sm:text-base">
|
|
{kicker}
|
|
</p>
|
|
</HeroMotionItem>
|
|
<HeroTitle locale={locale} lines={lines} />
|
|
<HeroMotionItem variant="home">
|
|
<p className="mx-auto mt-7 max-w-[33rem] whitespace-pre-line text-sm leading-7 text-foreground/68 sm:text-base sm:leading-8">
|
|
{description}
|
|
</p>
|
|
</HeroMotionItem>
|
|
<HeroMotionItem variant="home" className="mt-9 flex items-center justify-center">
|
|
<HeroScrollLink
|
|
href="#home-content"
|
|
label="Scroll to content"
|
|
className="text-[hsl(var(--hero-ink)/0.78)] dark:text-foreground/82"
|
|
/>
|
|
</HeroMotionItem>
|
|
</HeroContentMotion>
|
|
</HeroShell>
|
|
);
|
|
}
|