CTA 01

1import { ArrowUpRight } from "lucide-react";
2import { cn } from "@/lib/utils";
3import { Button } from "@/components/ui/button";
4import { LogoIcon } from "../social-icons/icons";
5 
6interface Cta01Props {
7  title?: string;
8  description?: string;
9  logo?: React.ReactNode;
10  buttons?: {
11    text: string;
12    url?: string;
13    icon?: React.ReactNode;
14    variant?: "default" | "outline" | "ghost" | "secondary" | "link";
15  }[];
16  className?: string;
17}
18 
19const Cta01 = ({
20  title = "Ship faster. Build better.",
21  description = "Production-ready shadcn/ui blocks for your next project.",
22  logo = <LogoIcon className="size-16 dark:invert" />,
23  buttons = [
24    {
25      text: "Get started now",
26      url: "#",
27      icon: <ArrowUpRight className="size-4" />,
28    },
29  ],
30  className,
31}: Cta01Props) => (
32  <section className={cn("container mx-auto px-8 py-12 md:py-24", className)}>
33    <div className="flex flex-col gap-8 overflow-hidden rounded-lg border p-8 lg:flex-row lg:items-center lg:p-16">
34      {logo && logo}
35      <div className="flex flex-1 flex-col justify-center">
36        <h2 className="text-3xl leading-tight font-medium tracking-tight md:text-4xl">
37          {title}
38        </h2>
39        <p className="text-muted-foreground md:text-lg">{description}</p>
40      </div>
41      {buttons && buttons.length > 0 && (
42        <div className="flex flex-col gap-4 sm:flex-row">
43          {buttons.map((btn, i) => (
44            <Button
45              key={i}
46              variant={btn.variant ?? "default"}
47              size="lg"
48              asChild
49            >
50              <a href={btn.url}>
51                {btn.text} {btn.icon}
52              </a>
53            </Button>
54          ))}
55        </div>
56      )}
57    </div>
58  </section>
59);
60 
61export default Cta01;