Feature 14

1import { cn } from "@/lib/utils";
2 
3interface Feature14Item {
4  title: string;
5  description: string;
6  image?: string;
7}
8 
9interface Feature14Props {
10  label?: string;
11  title?: string;
12  description?: string;
13  items?: Feature14Item[];
14  className?: string;
15}
16 
17const defaultItems: Feature14Item[] = [
18  {
19    title: "Copy & Paste Ready",
20    description:
21      "Every component is ready to use. Just copy the code and paste it into your project.",
22    image:
23      "https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp",
24  },
25  {
26    title: "Fully Customizable",
27    description:
28      "Built with Tailwind CSS, every component can be easily modified to match your brand.",
29    image:
30      "https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp",
31  },
32];
33 
34const Feature14 = ({
35  label = "Features",
36  title = "Everything You Need\nto Build Faster",
37  description = "Production-ready blocks built with shadcn/ui and Tailwind CSS. Copy, customize, and ship.",
38  items = defaultItems,
39  className,
40}: Feature14Props) => (
41  <section className={cn("container mx-auto px-8 py-12 md:py-24", className)}>
42    {/* Header */}
43    <div className="mb-12 flex flex-col items-center gap-2 text-center">
44      <p className="text-sm font-semibold tracking-widest text-muted-foreground uppercase">
45        {label}
46      </p>
47      <h2 className="text-4xl leading-tight font-medium tracking-tight whitespace-pre-line md:text-5xl">
48        {title}
49      </h2>
50      <p className="max-w-xl text-muted-foreground md:text-lg">{description}</p>
51    </div>
52 
53    {/* 2-column grid */}
54    <div className="mx-auto grid max-w-5xl gap-6 md:grid-cols-2">
55      {items.map((item, index) => (
56        <div
57          key={index}
58          className="flex flex-col items-center rounded-xl bg-muted/50 p-8 text-center md:p-10"
59        >
60          <div className="w-full max-w-xs overflow-hidden rounded-xl bg-muted">
61            {item.image ? (
62              <img
63                src={item.image}
64                alt={item.title}
65                className="aspect-square w-full object-cover"
66              />
67            ) : (
68              <div className="aspect-square w-full" />
69            )}
70          </div>
71          <h3 className="mt-8 text-xl font-medium tracking-tight">
72            {item.title}
73          </h3>
74          <p className="mt-2 max-w-md text-sm text-muted-foreground">
75            {item.description}
76          </p>
77        </div>
78      ))}
79    </div>
80  </section>
81);
82 
83// … truncated