123 lines
3.3 KiB
TypeScript
123 lines
3.3 KiB
TypeScript
import { Link } from "react-router";
|
|
import { cn } from "@/lib/utils";
|
|
import { Typography } from "@/components/Typography";
|
|
|
|
export type HeroProps = {
|
|
tagline: string;
|
|
heading: string;
|
|
subheading: string;
|
|
primaryCta: { label: string; href: string };
|
|
secondaryCta: { label: string; href: string };
|
|
imageUrl: string;
|
|
align: "left" | "center";
|
|
height: "md" | "lg" | "full";
|
|
tone: "light" | "dark";
|
|
};
|
|
|
|
const heightClass: Record<HeroProps["height"], string> = {
|
|
md: "min-h-[60vh]",
|
|
lg: "min-h-[80vh]",
|
|
full: "min-h-screen",
|
|
};
|
|
|
|
export function Hero({
|
|
tagline,
|
|
heading,
|
|
subheading,
|
|
primaryCta,
|
|
secondaryCta,
|
|
imageUrl,
|
|
align,
|
|
height,
|
|
tone,
|
|
}: HeroProps) {
|
|
const isDark = tone === "dark";
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"relative flex w-full items-end overflow-hidden isolate",
|
|
heightClass[height],
|
|
)}
|
|
>
|
|
{imageUrl ? (
|
|
<img
|
|
src={imageUrl}
|
|
alt=""
|
|
className="absolute inset-0 z-0 h-full w-full object-cover"
|
|
/>
|
|
) : null}
|
|
<div
|
|
className="absolute inset-0 z-[1]"
|
|
style={{
|
|
background: isDark
|
|
? "linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%)"
|
|
: "linear-gradient(180deg, rgba(255,255,255,0.0) 30%, rgba(255,255,255,0.85) 100%)",
|
|
}}
|
|
/>
|
|
|
|
<div
|
|
className={cn(
|
|
"container relative z-[2] mx-auto flex max-w-7xl flex-col px-6 py-20 md:py-28",
|
|
align === "center" ? "items-center text-center" : "items-start",
|
|
isDark ? "text-white" : "text-foreground",
|
|
)}
|
|
>
|
|
{tagline ? (
|
|
<p
|
|
className={cn(
|
|
"mb-5 text-xs uppercase tracking-[0.2em]",
|
|
isDark ? "text-white/80" : "text-foreground/70",
|
|
)}
|
|
>
|
|
{tagline}
|
|
</p>
|
|
) : null}
|
|
<Typography variant="h1" className="max-w-3xl">
|
|
{heading}
|
|
</Typography>
|
|
{subheading ? (
|
|
<Typography
|
|
variant="subtitle1"
|
|
className={cn(
|
|
"mt-6 max-w-xl",
|
|
isDark ? "text-white/80" : "text-foreground/70",
|
|
)}
|
|
>
|
|
{subheading}
|
|
</Typography>
|
|
) : null}
|
|
|
|
<div
|
|
className={cn(
|
|
"mt-10 flex flex-wrap gap-3",
|
|
align === "center" && "justify-center",
|
|
)}
|
|
>
|
|
{primaryCta?.label ? (
|
|
<Link
|
|
to={primaryCta.href || "#"}
|
|
className={cn(
|
|
"inline-flex items-center justify-center rounded-full px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-90",
|
|
isDark ? "bg-white text-black" : "bg-foreground text-background",
|
|
)}
|
|
>
|
|
{primaryCta.label}
|
|
</Link>
|
|
) : null}
|
|
{secondaryCta?.label ? (
|
|
<Link
|
|
to={secondaryCta.href || "#"}
|
|
className={cn(
|
|
"inline-flex items-center justify-center rounded-full border px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-80",
|
|
isDark ? "border-white text-white" : "border-foreground text-foreground",
|
|
)}
|
|
>
|
|
{secondaryCta.label}
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|