114 lines
3.3 KiB
TypeScript
114 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useReducedMotion } from "framer-motion";
|
|
|
|
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 reducedMotion = useReducedMotion();
|
|
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">
|
|
<p className="inline-flex items-center gap-1.5 rounded-pill border border-border/70 bg-background/75 px-3 py-1 text-[0.84rem] font-medium tracking-[-0.01em] text-foreground/82 shadow-xs backdrop-blur-chrome sm:px-3.5 sm:py-1 sm:text-[0.9rem]">
|
|
<span>{kicker}</span>
|
|
<motion.span
|
|
aria-hidden="true"
|
|
className="text-[0.95rem] leading-none"
|
|
initial={reducedMotion ? false : { rotate: 0, scale: 1 }}
|
|
animate={
|
|
reducedMotion
|
|
? undefined
|
|
: {
|
|
rotate: [0, 16, -10, 16, -4, 0],
|
|
scale: [1, 1.08, 1.08, 1.08, 1.04, 1],
|
|
}
|
|
}
|
|
transition={
|
|
reducedMotion
|
|
? undefined
|
|
: {
|
|
duration: 1.4,
|
|
delay: 0.5,
|
|
repeat: Number.POSITIVE_INFINITY,
|
|
repeatDelay: 2.8,
|
|
ease: "easeInOut",
|
|
}
|
|
}
|
|
style={{ transformOrigin: "70% 70%" }}
|
|
>
|
|
👋
|
|
</motion.span>
|
|
</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>
|
|
</HeroContentMotion>
|
|
</HeroShell>
|
|
);
|
|
}
|