Feature 01

1import { ArrowUpRight } from "lucide-react";
2import { cn } from "@/lib/utils";
3import { Card, CardContent, CardHeader } from "@/components/ui/card";
4import { Button } from "@/components/ui/button";
5 
6interface FeatureItem {
7  img?: string;
8  title: string;
9  description: string;
10  link?: { text: string; url: string };
11}
12 
13interface Feature01Props {
14  title: string;
15  description?: string;
16  features?: FeatureItem[];
17  className?: string;
18}
19 
20const Feature01 = ({
21  title = "Everything You Need to Build Faster",
22  description = "Production-ready blocks built with shadcn/ui and Tailwind CSS. Copy, customize, and ship.",
23  features = [
24    {
25      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-1.webp",
26      title: "Copy & Paste Ready",
27      description:
28        "All components are ready to use. Just copy the code and paste it into your project.",
29      link: { text: "View More", url: "#" },
30    },
31    {
32      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-8.webp",
33      title: "Fully Customizable",
34      description:
35        "Built with Tailwind CSS, every component is fully customizable to match your brand.",
36      link: { text: "View More", url: "#" },
37    },
38    {
39      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-3.webp",
40      title: "TypeScript First",
41      description:
42        "Written in TypeScript with full type safety and IntelliSense support for better DX.",
43      link: { text: "View More", url: "#" },
44    },
45  ],
46  className,
47}: Feature01Props) => {
48  return (
49    <section className={cn("container mx-auto px-4 py-12 md:py-24", className)}>
50      <div className="flex flex-col items-center gap-2 text-center">
51        <h2 className="text-3xl font-medium tracking-tight md:text-4xl lg:text-5xl">
52          {title}
53        </h2>
54        <p className="text-muted-foreground md:text-lg">{description}</p>
55      </div>
56 
57      <div className="mt-8 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
58        {features.map((feature) => (
59          <Card
60            key={feature.title}
61            className="flex flex-col gap-0 rounded-2xl p-2 shadow-none"
62          >
63            <CardHeader className="gap-0 p-0">
64              {feature.img && (
65                <img
66                  src={feature.img}
67                  alt={feature.title}
68                  className="aspect-4/3 h-full w-auto rounded-lg border"
69                />
70              )}
71            </CardHeader>
72// … truncated