149 lines
3.8 KiB
TypeScript
149 lines
3.8 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
import { ArrowDown } from "lucide-react";
|
|
|
|
import { Container } from "@/components/layout/container";
|
|
import { HeroMotionBackdrop } from "@/components/layout/hero-motion-backdrop";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type HeroTone = "default" | "accent" | "soft";
|
|
type HeroLineAlign = "start" | "center" | "end";
|
|
|
|
type HeroTitleLine = {
|
|
text: string;
|
|
tone?: HeroTone;
|
|
align?: HeroLineAlign;
|
|
};
|
|
|
|
type HeroShellProps = {
|
|
children: ReactNode;
|
|
className?: string;
|
|
compactBackdrop?: boolean;
|
|
containerClassName?: string;
|
|
contentClassName?: string;
|
|
showBridges?: boolean;
|
|
size?: "default" | "narrow" | "wide";
|
|
variant?: "home" | "page";
|
|
};
|
|
|
|
type HeroTitleProps = {
|
|
lines: HeroTitleLine[];
|
|
locale?: string;
|
|
variant?: "home" | "page";
|
|
className?: string;
|
|
};
|
|
|
|
type HeroScrollLinkProps = {
|
|
href: string;
|
|
label: string;
|
|
className?: string;
|
|
};
|
|
|
|
const toneClasses: Record<HeroTone, string> = {
|
|
default: "",
|
|
accent: "hero-title-accent",
|
|
soft: "hero-title-accent-soft",
|
|
};
|
|
|
|
const lineAlignClasses: Record<HeroLineAlign, string> = {
|
|
start: "self-start text-start",
|
|
center: "self-center text-center",
|
|
end: "self-end text-end",
|
|
};
|
|
|
|
export function HeroShell({
|
|
children,
|
|
className,
|
|
compactBackdrop = false,
|
|
containerClassName,
|
|
contentClassName,
|
|
showBridges = false,
|
|
size = "default",
|
|
variant = "home",
|
|
}: HeroShellProps) {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"hero-surface relative isolate overflow-hidden",
|
|
variant === "home"
|
|
? "hero-home flex min-h-[92svh] items-center justify-center"
|
|
: "hero-page flex min-h-[44svh] items-end sm:min-h-[48svh]",
|
|
className,
|
|
)}
|
|
>
|
|
<HeroMotionBackdrop compact={compactBackdrop} />
|
|
{showBridges ? <div className="hero-header-bridge" /> : null}
|
|
{showBridges ? <div className="hero-content-bridge" /> : null}
|
|
|
|
<Container
|
|
size={size}
|
|
className={cn(
|
|
"relative z-10 w-full",
|
|
variant === "home"
|
|
? "pb-12 pt-24 sm:pb-14 sm:pt-28 lg:pb-16 lg:pt-32"
|
|
: "pb-10 pt-24 sm:pb-12 sm:pt-28 lg:pb-14 lg:pt-32",
|
|
containerClassName,
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"mx-auto flex w-full flex-col items-center text-center",
|
|
variant === "home" ? "max-w-[58rem]" : "max-w-[46rem]",
|
|
contentClassName,
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export function HeroTitle({
|
|
lines,
|
|
locale = "en",
|
|
variant = "home",
|
|
className,
|
|
}: HeroTitleProps) {
|
|
const isArabic = locale === "ar";
|
|
|
|
return (
|
|
<h1
|
|
className={cn(
|
|
"text-balance font-semibold text-[hsl(var(--hero-ink))]",
|
|
variant === "home"
|
|
? isArabic
|
|
? "mt-6 flex w-full max-w-[42rem] flex-col gap-y-1 text-[clamp(3rem,11vw,5.9rem)] leading-[1.06] tracking-[-0.03em] sm:max-w-[48rem]"
|
|
: "mt-6 flex w-full max-w-[40rem] flex-col gap-y-1 text-[clamp(3.1rem,11vw,6.3rem)] leading-[0.94] tracking-[-0.06em] sm:max-w-[46rem]"
|
|
: "mt-4 flex w-full max-w-[34rem] flex-col gap-y-1 text-[clamp(2.8rem,10vw,4.9rem)] leading-[0.96] tracking-[-0.06em] sm:max-w-[40rem]",
|
|
className,
|
|
)}
|
|
>
|
|
{lines.map((line, index) => (
|
|
<span
|
|
key={`${index}-${line.text}`}
|
|
className={cn(
|
|
"hero-title-line",
|
|
toneClasses[line.tone ?? "default"],
|
|
lineAlignClasses[line.align ?? "center"],
|
|
)}
|
|
>
|
|
{line.text}
|
|
</span>
|
|
))}
|
|
</h1>
|
|
);
|
|
}
|
|
|
|
export function HeroScrollLink({
|
|
href,
|
|
label,
|
|
className,
|
|
}: HeroScrollLinkProps) {
|
|
return (
|
|
<a href={href} aria-label={label} className={cn("hero-scroll-link", className)}>
|
|
<ArrowDown className="h-5 w-5" />
|
|
</a>
|
|
);
|
|
}
|