Feature 16

1import { ArrowRight } from "lucide-react";
2import { cn } from "@/lib/utils";
3 
4interface Feature16Column {
5  label: string;
6  title: string;
7  description: string;
8  link?: { text: string; url?: string };
9  image?: string;
10}
11 
12interface Feature16Props {
13  columns?: [Feature16Column, Feature16Column];
14  className?: string;
15}
16 
17const defaultColumns: [Feature16Column, Feature16Column] = [
18  {
19    label: "Copy & paste",
20    title: "Every component\nready for production",
21    description:
22      "Speed up your workflow by making it simple to build your landing page. Every block is ready to use — just copy the code, paste it into your project, and it works out of the box with your existing shadcn/ui setup.",
23    link: { text: "Learn more", url: "#" },
24    image:
25      "https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp",
26  },
27  {
28    label: "Customization",
29    title: "Make every block\nyour own",
30    description:
31      "Want to match your brand down to the last pixel? Built with Tailwind CSS and typed props, every component can be easily modified — swap colors, spacing, and copy without fighting CSS specificity.",
32    link: { text: "Learn more", url: "#" },
33    image:
34      "https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp",
35  },
36];
37 
38const Feature16 = ({
39  columns = defaultColumns,
40  className,
41}: Feature16Props) => (
42  <section className={cn("container mx-auto px-8 py-12 md:py-24", className)}>
43    <div className="grid gap-12 md:grid-cols-2 md:gap-16">
44      {columns.map((column, index) => (
45        <div key={index} className="flex flex-col border-t pt-6">
46          <p className="text-sm text-muted-foreground">{column.label}</p>
47          <h3 className="mt-6 text-2xl leading-tight font-medium tracking-tight whitespace-pre-line md:text-3xl">
48            {column.title}
49          </h3>
50          <p className="mt-4 max-w-md text-sm text-muted-foreground md:text-base">
51            {column.description}
52          </p>
53          {column.link && (
54            <a
55              href={column.link.url}
56              className="mt-6 inline-flex items-center gap-1.5 text-sm font-medium hover:underline"
57            >
58              {column.link.text}
59              <ArrowRight className="size-4" />
60            </a>
61          )}
62          <div className="mt-8 overflow-hidden rounded-xl border bg-muted/30">
63            {column.image ? (
64              <img
65                src={column.image}
66                alt={column.title}
67// … truncated