84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import { Link } from "react-router";
|
|
import { cn } from "@/lib/utils";
|
|
import { Typography } from "@/components/Typography";
|
|
|
|
export type CTAProps = {
|
|
tagline: string;
|
|
heading: string;
|
|
subheading: string;
|
|
primaryCta: { label: string; href: string };
|
|
secondaryCta: { label: string; href: string };
|
|
imageUrl: string;
|
|
align: "left" | "center";
|
|
};
|
|
|
|
export function CTA({
|
|
tagline,
|
|
heading,
|
|
subheading,
|
|
primaryCta,
|
|
secondaryCta,
|
|
imageUrl,
|
|
align,
|
|
}: CTAProps) {
|
|
return (
|
|
<section className="relative overflow-hidden py-24 md:py-32">
|
|
<div className="absolute inset-0 -z-10">
|
|
{imageUrl ? (
|
|
<>
|
|
<img
|
|
src={imageUrl}
|
|
alt=""
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/45" />
|
|
</>
|
|
) : (
|
|
<div className="h-full w-full bg-foreground" />
|
|
)}
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"container mx-auto flex max-w-4xl flex-col px-6 text-white",
|
|
align === "center" ? "items-center text-center" : "items-start",
|
|
)}
|
|
>
|
|
{tagline ? (
|
|
<p className="mb-4 text-xs uppercase tracking-[0.2em] text-white/80">
|
|
{tagline}
|
|
</p>
|
|
) : null}
|
|
<Typography variant="h2">{heading}</Typography>
|
|
{subheading ? (
|
|
<Typography variant="subtitle1" className="mt-5 max-w-xl text-white/80">
|
|
{subheading}
|
|
</Typography>
|
|
) : null}
|
|
<div
|
|
className={cn(
|
|
"mt-10 flex flex-wrap gap-3",
|
|
align === "center" && "justify-center",
|
|
)}
|
|
>
|
|
{primaryCta?.label ? (
|
|
<Link
|
|
to={primaryCta.href || "#"}
|
|
className="inline-flex items-center justify-center rounded-full bg-white px-6 py-3 text-sm font-medium tracking-wide text-black hover:opacity-90"
|
|
>
|
|
{primaryCta.label}
|
|
</Link>
|
|
) : null}
|
|
{secondaryCta?.label ? (
|
|
<Link
|
|
to={secondaryCta.href || "#"}
|
|
className="inline-flex items-center justify-center rounded-full border border-white px-6 py-3 text-sm font-medium tracking-wide text-white hover:bg-white/10"
|
|
>
|
|
{secondaryCta.label}
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|