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

Refine home hero and header experience

Browse Source
This commit is contained in:
MOH
2026-03-09 08:39:49 +01:00
parent c009f71e39
commit 9632958e41
6 changed files with 166 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layout/site-hero.tsx
+26 -8
View File
@@ -12,8 +12,14 @@ import { cn } from "@/lib/utils";
type HeroTone = "default" | "accent" | "soft";
type HeroLineAlign = "start" | "center" | "end";
type HeroTitleSegment = {
text: string;
tone?: HeroTone;
};
type HeroTitleLine = {
text: string;
segments?: HeroTitleSegment[];
tone?: HeroTone;
align?: HeroLineAlign;
};
@@ -55,9 +61,9 @@ const toneClasses: Record<HeroTone, string> = {
};
const lineAlignClasses: Record<HeroLineAlign, string> = {
start: "self-start text-start",
start: "self-center text-center lg:self-start lg:text-start",
center: "self-center text-center",
end: "self-end text-end",
end: "self-center text-center lg:self-end lg:text-end",
};
export function HeroShell({
@@ -97,7 +103,7 @@ export function HeroShell({
<div
className={cn(
"mx-auto flex w-full flex-col items-center text-center",
variant === "home" ? "max-w-[58rem]" : "max-w-[46rem]",
variant === "home" ? "max-w-[68rem]" : "max-w-[46rem]",
contentClassName,
)}
>
@@ -183,9 +189,9 @@ export function HeroTitle({
"text-balance font-semibold text-[hsl(var(--hero-ink))]",
variant === "home"
? isArabic
? "mt-6 flex w-full max-w-[16rem] flex-col gap-y-1 text-[clamp(3rem,11vw,5.9rem)] leading-[1.06] tracking-[-0.03em] md:max-w-[22rem] lg:max-w-[32rem]"
: "mt-6 flex w-full max-w-[16rem] flex-col gap-y-1 text-[clamp(3.1rem,11vw,6.3rem)] leading-[0.94] tracking-[-0.06em] md:max-w-[22rem] lg:max-w-[32rem]"
: "mt-4 flex w-full max-w-[16rem] flex-col gap-y-1 text-[clamp(2.8rem,10vw,4.9rem)] leading-[0.96] tracking-[-0.06em] md:max-w-[22rem] lg:max-w-[32rem]",
? "mt-6 flex w-full max-w-[20rem] flex-col gap-y-1 text-[clamp(3rem,11vw,5.9rem)] leading-[1.06] tracking-[-0.03em] sm:max-w-[24rem] md:max-w-[30rem] lg:max-w-[32rem]"
: "mt-6 flex w-full max-w-[20rem] flex-col gap-y-1 text-[clamp(3.1rem,11vw,6.3rem)] leading-[0.94] tracking-[-0.06em] sm:max-w-[24rem] md:max-w-[30rem] lg:max-w-[32rem]"
: "mt-4 flex w-full max-w-[20rem] flex-col gap-y-1 text-[clamp(2.8rem,10vw,4.9rem)] leading-[0.96] tracking-[-0.06em] sm:max-w-[24rem] md:max-w-[28rem] lg:max-w-[32rem]",
className,
)}
>
@@ -194,11 +200,23 @@ export function HeroTitle({
key={`${index}-${line.text}`}
className={cn(
"hero-title-line",
toneClasses[line.tone ?? "default"],
lineAlignClasses[line.align ?? "center"],
)}
>
{line.text}
{line.segments?.length
? line.segments.map((segment, segmentIndex) => (
<span
key={`${index}-${segmentIndex}-${segment.text}`}
className={cn(toneClasses[segment.tone ?? "default"])}
>
{segment.text}
</span>
))
: (
<span className={cn(toneClasses[line.tone ?? "default"])}>
{line.text}
</span>
)}
</span>
))}
</motion.h1>