Feature 18

1import { ArrowRight, Plus } from "lucide-react";
2import { cn } from "@/lib/utils";
3 
4interface Feature18Card {
5  category: string;
6  title: string;
7  image?: string;
8  url?: string;
9}
10 
11interface Feature18Props {
12  title?: string;
13  cards?: Feature18Card[];
14  link?: { text: string; url?: string };
15  className?: string;
16}
17 
18const defaultCards: Feature18Card[] = [
19  {
20    category: "Components",
21    title:
22      "How to ship a complete landing page with copy & paste ready blocks?",
23    image:
24      "https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp",
25    url: "#",
26  },
27  {
28    category: "Customization",
29    title:
30      "How to easily match your brand when every component is built with Tailwind CSS?",
31    image:
32      "https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp",
33    url: "#",
34  },
35  {
36    category: "Developer Experience",
37    title:
38      "How to build faster with components fully typed with TypeScript?",
39    image:
40      "https://www.shadcnship.com/images/placeholders/hero-architecture-6.webp",
41    url: "#",
42  },
43];
44 
45const Feature18 = ({
46  title = "Everything You Need\nto Build Faster",
47  cards = defaultCards,
48  link = { text: "View More", url: "#" },
49  className,
50}: Feature18Props) => (
51  <section className={cn("w-full py-12 md:py-24", className)}>
52    <div className="container mx-auto px-8">
53      {/* Gradient title with decorative icon */}
54      <div className="flex items-start gap-4">
55        <Plus className="mt-2 size-5 shrink-0 text-muted-foreground" />
56        <h2 className="bg-linear-to-r from-foreground to-foreground/60 bg-clip-text text-3xl leading-tight font-medium tracking-tight whitespace-pre-line text-transparent md:text-4xl">
57          {title}
58        </h2>
59      </div>
60 
61      {/* Cards */}
62      <div className="mt-12 grid gap-6 md:grid-cols-3">
63        {cards.map((card, index) => (
64          <a
65            key={index}
66            href={card.url}
67            className="group flex flex-col overflow-hidden rounded-xl border bg-card text-card-foreground"
68          >
69            <div className="flex flex-1 flex-col p-6">
70              <p className="text-xs font-semibold tracking-widest text-primary uppercase">
71                {card.category}
72              </p>
73              <h3 className="mt-4 text-xl font-medium tracking-tight">
74                {card.title}
75              </h3>
76              <div className="mt-6 flex flex-1 items-end justify-end">
77// … truncated