Feature 08

1import { cn } from "@/lib/utils";
2import { Card, CardContent } from "@/components/ui/card";
3import { Copy, Sparkles, Code2, LayoutTemplate, Gauge } from "lucide-react";
4 
5interface FeatureItem {
6  icon: React.ReactNode;
7  title: string;
8  description: string;
9  featured?: boolean;
10}
11 
12interface Feature08Props {
13  label?: string;
14  title?: string;
15  description?: string;
16  features?: FeatureItem[];
17  className?: string;
18}
19 
20const FeatureCard = ({ icon, title, description, featured }: FeatureItem) => (
21  <Card
22    className={cn(
23      featured
24        ? "border-0 bg-linear-to-br from-primary to-primary/70 text-primary-foreground md:col-span-2 lg:col-span-1 lg:row-span-2"
25        : "bg-muted dark:bg-background",
26      "shadow-none",
27    )}
28  >
29    <CardContent
30      className={cn("flex flex-col", featured ? "h-full gap-0" : "gap-4")}
31    >
32      <div
33        className={cn(
34          "flex size-12 items-center justify-center rounded-lg border backdrop-blur-sm",
35          featured
36            ? "border-white/20 bg-white/10"
37            : "border-border/50 bg-background/50",
38        )}
39      >
40        <span
41          className={cn(
42            "flex items-center justify-center",
43            !featured && "text-foreground",
44          )}
45        >
46          {icon}
47        </span>
48      </div>
49      <div
50        className={cn("flex flex-col gap-2", featured && "mt-auto gap-3 pt-8")}
51      >
52        <h3 className={cn("font-medium", featured && "text-xl")}>{title}</h3>
53        <p className={cn("text-sm", !featured && "text-muted-foreground")}>
54          {description}
55        </p>
56      </div>
57    </CardContent>
58  </Card>
59);
60 
61const Feature08 = ({
62  label = "Features",
63  title = "Everything You Need to Build Faster",
64  description = "Production-ready blocks built with shadcn/ui and Tailwind CSS. Copy, customize, and ship.",
65  features = [
66    {
67      icon: <Copy className="size-5" />,
68      title: "Copy & Paste Ready",
69      description:
70        "All components are ready to use out of the box. Just copy the code and paste it into your project — no configuration needed.",
71      featured: true,
72    },
73    {
74      icon: <Sparkles className="size-5" />,
75      title: "Fully Customizable",
76      description:
77        "Built with Tailwind CSS, every component is fully customizable to match your brand.",
78    },
79    {
80      icon: <Code2 className="size-5" />,
81      title: "TypeScript First",
82      description:
83// … truncated