Feature 11

1import { Blocks } from "lucide-react";
2import { cn } from "@/lib/utils";
3import { Badge } from "@/components/ui/badge";
4 
5interface Feature11Card {
6  img?: string;
7  title: string;
8  description: string;
9}
10 
11interface Feature11Props {
12  badge?: { text: string; icon?: React.ReactNode };
13  title?: string;
14  description?: string;
15  cards?: Feature11Card[];
16  className?: string;
17}
18 
19const Feature11 = ({
20  badge = {
21    text: "How it Works",
22    icon: <Blocks className="size-3.5" />,
23  },
24  title = "Ship faster with\nproduction-ready blocks.",
25  description = "Pre-built, customizable blocks for your landing page. Copy the code, adapt it to your brand, and go live in minutes.",
26  cards = [
27    {
28      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp",
29      title: "Copy & Customize",
30      description:
31        "Every block is self-contained and fully editable. No dependencies to manage — just paste into your project and make it yours.",
32    },
33    {
34      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp",
35      title: "Built with shadcn/ui",
36      description:
37        "All blocks use shadcn/ui components and Tailwind CSS. Accessible by default, dark mode ready, and consistent with your design system.",
38    },
39  ],
40  className,
41}: Feature11Props) => {
42  return (
43    <section className={cn("py-12 md:py-24", className)}>
44      <div className="container mx-auto px-8">
45        {/* Header */}
46        <div className="flex flex-col gap-6">
47          <Badge
48            variant="outline"
49            className="w-fit gap-1.5 rounded-full px-3 py-1 text-xs font-medium"
50          >
51            {badge.icon}
52            {badge.text}
53          </Badge>
54 
55          <div className="grid grid-cols-1 items-end gap-6 lg:grid-cols-2 lg:gap-16">
56            <h2 className="text-4xl font-medium tracking-tight whitespace-pre-line md:text-5xl">
57              {title}
58            </h2>
59            <p className="max-w-lg text-sm text-muted-foreground">
60              {description}
61            </p>
62          </div>
63        </div>
64 
65        {/* Cards */}
66        <div className="mt-12 grid grid-cols-1 gap-6 md:grid-cols-2">
67          {cards.map((card, index) => (
68            <div key={index} className="flex flex-col gap-4">
69              {/* Card container */}
70              <div className="flex aspect-4/3 items-center justify-center overflow-hidden rounded-2xl bg-muted p-4 lg:p-8">
71                {card.img ? (
72                  <img
73// … truncated