mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Refactor shared hero structure

Browse Source
This commit is contained in:
MOH
2026-03-09 07:14:11 +01:00
parent 9d76eabb39
commit 8f87169da1
6 changed files with 242 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layout/home-hero.tsx
+37 -48
View File
@@ -1,6 +1,4 @@
import { ArrowDown } from "lucide-react";
import { HeroMotionBackdrop } from "@/components/layout/hero-motion-backdrop";
import { HeroScrollLink, HeroShell, HeroTitle } from "@/components/layout/site-hero";
type HomeHeroProps = {
locale: string;
@@ -17,53 +15,44 @@ export function HomeHero({
}: 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 (
<section className="hero-surface hero-home relative isolate flex min-h-[88vh] items-center justify-center overflow-hidden">
<HeroMotionBackdrop />
<div className="hero-header-bridge" />
<div className="hero-content-bridge" />
<div className="relative z-10 mx-auto flex w-full max-w-[72rem] flex-col items-center justify-center px-4 pb-12 pt-24 text-center sm:px-6 lg:px-8 lg:pb-16 lg:pt-28">
<div className="mx-auto flex max-w-[46rem] flex-col items-center overflow-visible">
<p className="text-base font-medium tracking-[-0.03em] text-[hsl(var(--hero-ink)/0.76)] drop-shadow-[0_10px_24px_rgba(15,23,42,0.16)] sm:text-lg">
{kicker}
</p>
<h1
className={
isArabic
? "mt-5 flex w-full max-w-[40rem] flex-col overflow-visible pb-[0.1em] text-[3rem] font-bold leading-[1.1] tracking-normal text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.16)] sm:text-[4.25rem] lg:max-w-[48rem] lg:text-[5.35rem]"
: "mt-4 flex w-full max-w-[37rem] flex-col gap-y-0.5 overflow-visible pb-[0.18em] text-[3.25rem] font-semibold leading-[0.98] tracking-[-0.05em] text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.22)] sm:max-w-[39rem] sm:text-[4.9rem] lg:max-w-[40rem] lg:gap-y-1 lg:pb-[0.2em] lg:text-[6rem]"
}
>
{titleLines.map((line, index) => (
<span
key={`${locale}-${index}-${line}`}
className={
isArabic
? index === 1
? "hero-title-line self-center whitespace-nowrap"
: "hero-title-line hero-title-accent self-center whitespace-nowrap"
: index === 1
? "hero-title-line self-end whitespace-nowrap"
: index === titleLines.length - 1
? "hero-title-line hero-title-accent self-start whitespace-nowrap"
: "hero-title-line hero-title-accent-soft self-start whitespace-nowrap"
}
>
{line}
</span>
))}
</h1>
<p className="mx-auto mt-8 max-w-[30rem] whitespace-pre-line text-sm leading-7 text-[hsl(var(--hero-ink)/0.72)] drop-shadow-[0_8px_18px_rgba(15,23,42,0.12)] sm:text-base">
{description}
</p>
<div className="mt-10 flex items-center justify-center">
<a href="#home-content" aria-label="Scroll to content" className="hero-scroll-link text-[hsl(var(--hero-ink)/0.74)] dark:text-foreground/82">
<ArrowDown className="h-5 w-5" />
</a>
</div>
</div>
<HeroShell showBridges>
<p className="max-w-[34rem] text-sm font-medium tracking-[0.12em] text-foreground/62 sm:text-base">
{kicker}
</p>
<HeroTitle locale={locale} lines={lines} />
<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>
<div 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"
/>
</div>
</section>
</HeroShell>
);
}