Feature Cards Grid

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