CTA 02

1import { ArrowUpRight } from "lucide-react";
2import { cn } from "@/lib/utils";
3import { Button } from "@/components/ui/button";
4import { Card } from "@/components/ui/card";
5import { Iphone } from "@/components/ui/iphone";
6 
7interface Cta02Props {
8  title?: string;
9  description?: string;
10  buttons?: {
11    text: string;
12    url?: string;
13    icon?: React.ReactNode;
14    variant?: "default" | "outline" | "ghost" | "secondary" | "link";
15  }[];
16  img?: string;
17  className?: string;
18}
19 
20const Cta02 = ({
21  title = "Ship faster. Build better.",
22  description = "Production-ready shadcn/ui blocks for your next project.",
23  buttons = [
24    {
25      text: "Get started now",
26      url: "#",
27      icon: <ArrowUpRight className="size-4" />,
28    },
29    { text: "View Docs", url: "#", variant: "outline" },
30  ],
31  img = "https://www.shadcnship.com/images/image-preview.webp",
32  className,
33}: Cta02Props) => (
34  <section className={cn("container mx-auto px-8 py-12 md:py-24", className)}>
35    <Card className="grid items-center gap-8 p-8 pb-0 shadow-none md:grid-cols-3">
36      <div className="flex flex-col gap-2 text-center md:col-span-2 md:text-left">
37        <h2 className="text-4xl font-medium lg:text-5xl">{title}</h2>
38        <p className="text-muted-foreground md:text-lg">{description}</p>
39        {buttons && buttons.length > 0 && (
40          <div className="mt-2 flex flex-col gap-4 sm:flex-row md:mb-8">
41            {buttons.map((btn, i) => (
42              <Button
43                key={i}
44                size="lg"
45                variant={btn.variant ?? "default"}
46                asChild
47              >
48                <a href={btn.url}>
49                  {btn.text} {btn.icon}
50                </a>
51              </Button>
52            ))}
53          </div>
54        )}
55      </div>
56      <div className="hiddedn max-h-60 self-end overflow-hidden md:block">
57        <Iphone src={img ?? undefined} />
58      </div>
59    </Card>
60  </section>
61);
62 
63export default Cta02;