53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import type { CtaSectionBlock } from "@/types/sections";
|
|
import { useLocale } from "@/i18n/LocaleContext";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ArrowRight } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function CtaSection({ block }: { block: CtaSectionBlock }) {
|
|
const { t } = useLocale();
|
|
const isPrimary = (block.background ?? "primary") === "primary";
|
|
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"py-16 md:py-20",
|
|
isPrimary ? "bg-primary text-primary-foreground" : "bg-band-cream text-foreground",
|
|
)}
|
|
>
|
|
<div className="container max-w-3xl text-center">
|
|
<h2
|
|
className={cn(
|
|
"font-display italic text-3xl sm:text-4xl md:text-5xl text-balance",
|
|
isPrimary ? "text-primary-foreground" : "text-primary",
|
|
)}
|
|
>
|
|
{t(block.title)}
|
|
</h2>
|
|
{block.subtitle && (
|
|
<div
|
|
className={cn(
|
|
"mt-4 text-base sm:text-lg leading-relaxed",
|
|
isPrimary ? "text-primary-foreground/85" : "text-foreground/80",
|
|
)}
|
|
dangerouslySetInnerHTML={{ __html: t(block.subtitle) }}
|
|
/>
|
|
)}
|
|
<Button
|
|
asChild
|
|
variant={isPrimary ? "secondary" : "default"}
|
|
className="mt-8 rounded-sm"
|
|
>
|
|
<a
|
|
href={block.cta.href}
|
|
target={block.cta.external ? "_blank" : undefined}
|
|
rel={block.cta.external ? "noopener noreferrer" : undefined}
|
|
>
|
|
{t(block.cta.label)}
|
|
<ArrowRight className="ml-2 h-4 w-4" aria-hidden />
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |