CTA Section

1import { cn } from "@/lib/utils";
2 
3import Glow from "../../ui/glow";
4import { LinkButton, type LinkButtonProps } from "../../ui/link-button";
5import { Section } from "../../ui/section";
6 
7interface CTAButtonProps extends Omit<LinkButtonProps, "children"> {
8  text: string;
9}
10 
11interface CTAProps {
12  title?: string;
13  buttons?: CTAButtonProps[] | false;
14  className?: string;
15}
16 
17const DEFAULT_CTA_BUTTONS: CTAButtonProps[] = [
18  {
19    href: "https://www.launchuicomponents.com/",
20    text: "Get Started",
21    variant: "default",
22  },
23];
24 
25export default function CTA({
26  title = "Start building",
27  buttons = DEFAULT_CTA_BUTTONS,
28  className,
29}: CTAProps) {
30  return (
31    <Section className={cn("group relative overflow-hidden", className)}>
32      <div className="max-w-container relative z-10 mx-auto flex flex-col items-center gap-6 text-center sm:gap-8">
33        <h2 className="max-w-[640px] text-3xl leading-tight font-semibold sm:text-5xl sm:leading-tight">
34          {title}
35        </h2>
36        {buttons !== false && buttons.length > 0 && (
37          <div className="flex justify-center gap-4">
38            {buttons.map((button) => (
39              <LinkButton
40                key={`${button.href}-${button.text}`}
41                variant={button.variant || "default"}
42                size="lg"
43                href={button.href}
44                icon={button.icon}
45                iconRight={button.iconRight}
46              >
47                {button.text}
48              </LinkButton>
49            ))}
50          </div>
51        )}
52      </div>
53      <div className="absolute top-0 left-0 h-full w-full translate-y-[1rem] opacity-80 transition-all duration-500 ease-in-out group-hover:translate-y-[-2rem] group-hover:opacity-100">
54        <Glow variant="bottom" />
55      </div>
56    </Section>
57  );
58}