Feature 04

1import { cn } from "@/lib/utils";
2import { Card } from "@/components/ui/card";
3import {
4  Sparkles,
5  MessageCircle,
6  Copy,
7  LayoutTemplate,
8  SquareDashedMousePointer,
9  Gauge,
10} from "lucide-react";
11 
12interface FeatureItem {
13  title: string;
14  description: string;
15  icon: React.ReactNode;
16}
17 
18interface Feature04Props {
19  title?: string;
20  description?: string;
21  features?: FeatureItem[];
22  className?: string;
23}
24 
25const Feature04 = ({
26  title = "Everything You Need to Build Faster",
27  description = "Production-ready blocks built with shadcn/ui and Tailwind CSS. Copy, customize, and ship.",
28  features = [
29    {
30      title: "Copy & Paste Ready",
31      description:
32        "Copy any component directly into your project. No dependencies, just pure code you own.",
33      icon: <Copy />,
34    },
35    {
36      title: "Pre-built Templates",
37      description:
38        "Start with production-ready templates for common layouts and patterns.",
39      icon: <LayoutTemplate />,
40    },
41    {
42      title: "Developer Experience",
43      description:
44        "Built with TypeScript, fully typed, and optimized for modern frameworks.",
45      icon: <Sparkles />,
46    },
47    {
48      title: "Fully Customizable",
49      description:
50        "Every component is built with Tailwind CSS. Modify styles easily.",
51      icon: <SquareDashedMousePointer />,
52    },
53    {
54      title: "Performance Optimized",
55      description:
56        "Lightweight components with zero runtime overhead. Fast load times.",
57      icon: <Gauge />,
58    },
59    {
60      title: "Active Community",
61      description:
62        "Join thousands of developers sharing components and best practices.",
63      icon: <MessageCircle />,
64    },
65  ],
66  className,
67}: Feature04Props) => {
68  return (
69    <section className={cn("py-12 md:py-24", className)}>
70      <div className="container mx-auto px-8">
71        <div className="mx-auto flex flex-col items-center gap-4 text-center">
72          <h2 className="text-3xl leading-tight font-medium tracking-tight text-pretty md:text-4xl lg:text-5xl">
73            {title}
74          </h2>
75          <p className="text-muted-foreground md:text-lg">{description}</p>
76        </div>
77 
78        <div className="mt-8 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
79          {features.map((feature) => (
80            <Card
81              key={feature.title}
82              className="flex flex-col gap-4 p-4 shadow-none"
83            >
84// … truncated