Feature 17

1import { Blocks, ChevronRight, Cloud, SquareTerminal } from "lucide-react";
2import { cn } from "@/lib/utils";
3 
4interface Feature17Item {
5  icon?: React.ReactNode;
6  label: string;
7  title: string;
8  description: string;
9  link?: { text: string; url?: string };
10  image?: string;
11  tags?: string[];
12}
13 
14interface Feature17Props {
15  items?: Feature17Item[];
16  className?: string;
17}
18 
19const defaultItems: Feature17Item[] = [
20  {
21    icon: <Blocks className="size-4" />,
22    label: "Components",
23    title: "Copy & Paste Ready",
24    description:
25      "Every component is ready to use. Just copy the code and paste it into your project.",
26    link: { text: "Learn More", url: "#" },
27    image:
28      "https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp",
29    tags: ["Hero", "Features", "Pricing", "Testimonials", "FAQ"],
30  },
31  {
32    icon: <SquareTerminal className="size-4" />,
33    label: "Customization",
34    title: "Fully Customizable",
35    description:
36      "Built with Tailwind CSS, every component can be easily modified to match your brand.",
37    link: { text: "Learn More", url: "#" },
38    image:
39      "https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp",
40  },
41  {
42    icon: <Cloud className="size-4" />,
43    label: "Developer Experience",
44    title: "TypeScript First",
45    description:
46      "All components are fully typed with TypeScript for better developer experience.",
47    link: { text: "Learn More", url: "#" },
48    image:
49      "https://www.shadcnship.com/images/placeholders/hero-architecture-6.webp",
50  },
51];
52 
53const Feature17 = ({ items = defaultItems, className }: Feature17Props) => (
54  <section className={cn("container mx-auto px-8 py-12 md:py-24", className)}>
55    <div className="border-y">
56      {items.map((item, index) => {
57        const reversed = index % 2 === 1;
58 
59        return (
60          <div
61            key={index}
62            className="grid border-b last:border-b-0 md:grid-cols-2 md:divide-x"
63          >
64            {/* Text cell */}
65            <div
66              className={cn(
67                "flex flex-col items-start justify-center gap-4 p-8 md:p-12 lg:p-16",
68                reversed && "md:order-2",
69              )}
70            >
71              <div className="flex items-center gap-2 text-sm font-medium">
72                {item.icon}
73                {item.label}
74              </div>
75              <h3 className="text-2xl font-medium tracking-tight md:text-3xl">
76                {item.title}
77              </h3>
78// … truncated