Feature Cards Grid

1"use client";
2 
3import { Shield, Sparkles, Zap } from "lucide-react";
4 
5export function FeatureCardsBlockBaseui() {
6  const features = [
7    {
8      icon: Zap,
9      title: "Lightning Fast",
10      description:
11        "Built for speed with optimized performance and instant loading times.",
12    },
13    {
14      icon: Shield,
15      title: "Secure by Default",
16      description:
17        "Enterprise-grade security with built-in protection and compliance.",
18    },
19    {
20      icon: Sparkles,
21      title: "Beautiful Design",
22      description: "Pixel-perfect interfaces that users love to interact with.",
23    },
24  ];
25 
26  return (
27    <section className="px-6 py-32">
28      <div className="mx-auto max-w-7xl">
29        <div className="mb-20 space-y-5 text-center">
30          <h2 className="text-5xl font-bold tracking-tight md:text-6xl">
31            Everything you need
32          </h2>
33          <p className="mx-auto max-w-2xl text-lg leading-relaxed text-muted-foreground md:text-xl">
34            Powerful features that help you build better products faster
35          </p>
36        </div>
37 
38        <div className="grid gap-8 md:grid-cols-3">
39          {features.map((feature, index) => (
40            <div
41              key={index}
42              className="group cursor-pointer rounded-lg border border-border/50 bg-background/50 p-10 text-card-foreground backdrop-blur-xl transition-all duration-500 hover:border-border"
43            >
44              <div className="mb-8 flex h-14 w-14 items-center justify-center rounded-2xl bg-foreground/[0.04] transition-all duration-300 group-hover:scale-110 group-hover:bg-foreground/[0.08]">
45                <feature.icon className="h-6 w-6" />
46              </div>
47              <h3 className="mb-4 text-2xl font-semibold tracking-tight">
48                {feature.title}
49              </h3>
50              <p className="text-base leading-relaxed text-muted-foreground">
51                {feature.description}
52              </p>
53            </div>
54          ))}
55        </div>
56      </div>
57    </section>
58  );
59}