94 lines
2.3 KiB
TypeScript
94 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { HeroBadge } from "@/components/layout/hero-badge";
|
|
import {
|
|
HeroContentMotion,
|
|
HeroMotionItem,
|
|
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 = isArabic
|
|
? [
|
|
{
|
|
text: titleLines[0] ?? "",
|
|
align: "center" as const,
|
|
segments: [
|
|
{ text: "مطوّر ", tone: "accent" as const },
|
|
{ text: "واجهات", tone: "soft" as const },
|
|
{ text: " ويب", tone: "accent" as const },
|
|
],
|
|
},
|
|
{
|
|
text: titleLines[1] ?? "",
|
|
align: "center" as const,
|
|
segments: [
|
|
{ text: "ومصمّم ", tone: "soft" as const },
|
|
{ text: "جرافيك", tone: "accent" as const },
|
|
],
|
|
},
|
|
]
|
|
: [
|
|
{
|
|
text: titleLines[0] ?? "",
|
|
tone: "soft" as const,
|
|
align: "start" as const,
|
|
},
|
|
{
|
|
text: titleLines[1] ?? "",
|
|
tone: "accent" as const,
|
|
align: "end" as const,
|
|
},
|
|
{
|
|
text: titleLines[2] ?? "",
|
|
segments: [
|
|
{ text: "& ", tone: "accent" as const },
|
|
{ text: "designer", tone: "soft" as const },
|
|
],
|
|
align: "start" as const,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<HeroShell showBridges>
|
|
<HeroContentMotion variant="home">
|
|
<HeroMotionItem variant="home">
|
|
<HeroBadge
|
|
trailing={
|
|
<span
|
|
aria-hidden="true"
|
|
className="text-[0.95rem] leading-none"
|
|
>
|
|
👋
|
|
</span>
|
|
}
|
|
>
|
|
{kicker}
|
|
</HeroBadge>
|
|
</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>
|
|
</HeroContentMotion>
|
|
</HeroShell>
|
|
);
|
|
}
|