refactor: theme from lovable
This commit is contained in:
@@ -0,0 +1,54 @@
|
||||
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 && (
|
||||
<p
|
||||
className={cn(
|
||||
"mt-4 text-base sm:text-lg leading-relaxed",
|
||||
isPrimary ? "text-primary-foreground/85" : "text-foreground/80",
|
||||
)}
|
||||
>
|
||||
{t(block.subtitle)}
|
||||
</p>
|
||||
)}
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user