CTA 05

1import { ArrowRight } from "lucide-react";
2import { cn } from "@/lib/utils";
3import { Badge } from "@/components/ui/badge";
4import { Button } from "@/components/ui/button";
5 
6interface StackImage {
7  src: string;
8  alt?: string;
9}
10 
11interface Cta05Props {
12  images?: [StackImage, StackImage, StackImage];
13  badge?: { text: string };
14  title?: React.ReactNode;
15  button?: { text: string; url?: string };
16  className?: string;
17}
18 
19const defaultImages: [StackImage, StackImage, StackImage] = [
20  {
21    src: "https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp",
22  },
23  {
24    src: "https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp",
25  },
26  {
27    src: "https://www.shadcnship.com/images/placeholders/hero-architecture-6.webp",
28  },
29];
30 
31// Fanned stack: left tilted back, center raised, right tilted forward on top
32const stackClasses = [
33  "-translate-x-[60%] translate-y-4 -rotate-12",
34  "-translate-y-2 -rotate-2 z-10",
35  "translate-x-[55%] translate-y-3 rotate-10 z-20",
36];
37 
38const Cta05 = ({
39  images = defaultImages,
40  badge = { text: "Production-ready components" },
41  title = (
42    <>
43      Ship faster. Build better.{" "}
44      <span className="text-muted-foreground">
45        Production-ready shadcn/ui blocks for your next project.
46      </span>
47    </>
48  ),
49  button = { text: "Get started now", url: "#" },
50  className,
51}: Cta05Props) => (
52  <section className={cn("container mx-auto px-8 py-12 md:py-24", className)}>
53    <div className="flex flex-col items-center text-center">
54      {/* Fanned photo stack */}
55      <div className="relative flex h-56 w-full items-center justify-center md:h-72">
56        {images.map((image, index) => (
57          <div
58            key={index}
59            className={cn(
60              "absolute size-40 overflow-hidden rounded-3xl border-6 border-background shadow-2xl md:size-52",
61              stackClasses[index],
62            )}
63          >
64            <img
65              src={image.src}
66              alt={image.alt ?? ""}
67              className="size-full object-cover"
68            />
69          </div>
70        ))}
71      </div>
72 
73      {/* Reference badge */}
74      {badge && (
75        <Badge variant="secondary" className="mt-8 border border-border py-1">
76          {badge.text}
77        </Badge>
78      )}
79 
80      {/* Two-line title with strong/soft contrast */}
81      <h2 className="mt-4 max-w-2xl text-2xl leading-snug font-medium tracking-tight md:text-3xl">
82        {title}
83      </h2>
84 
85      {/* Pill button */}
86// … truncated