Feature Grid 3-Column

"use client";
 
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { LucideIcon } from "lucide-react";
 
interface Feature {
  icon: LucideIcon;
  title: string;
  description: string;
}
 
interface FeatureGrid3ColProps {
  badge?: string;
  headline: string;
  description?: string;
  features: Feature[];
}
 
export function FeatureGrid3Col({
  badge,
  headline,
  description,
  features,
}: FeatureGrid3ColProps) {
  const colors = [
    "from-blue-500 to-cyan-500",
    "from-purple-500 to-pink-500",
    "from-orange-500 to-amber-500",
    "from-green-500 to-emerald-500",
    "from-red-500 to-rose-500",
    "from-indigo-500 to-violet-500",
    "from-yellow-500 to-orange-500",
    "from-teal-500 to-cyan-500",
    "from-fuchsia-500 to-pink-500",
  ];
 
  return (
    <section className="relative overflow-hidden py-24 sm:py-32">
      <div className="absolute inset-0 -z-10">
        <div className="absolute left-1/2 top-0 -z-10 h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-gradient-to-br from-primary/20 via-primary/5 to-transparent blur-3xl" />
        <div className="absolute right-0 top-1/2 -z-10 h-[400px] w-[400px] -translate-y-1/2 rounded-full bg-gradient-to-l from-purple-500/10 to-transparent blur-3xl" />
      </div>
 
      <div className="container mx-auto px-6">
        <div className="mx-auto mb-16 max-w-3xl text-center">
          {badge && (
            <div className="mb-6 inline-flex animate-in fade-in slide-in-from-bottom-3 duration-700">
              <Badge
                variant="outline"
                className="border-primary/20 bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary backdrop-blur-sm"
              >
                <span className="relative mr-2 flex h-2 w-2">
                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75"></span>
                  <span className="relative inline-flex h-2 w-2 rounded-full bg-primary"></span>
                </span>
                {badge}
              </Badge>
            </div>
          )}
          <h2 className="mb-6 animate-in fade-in slide-in-from-bottom-4 text-4xl font-bold tracking-tight duration-1000 sm:text-5xl md:text-6xl">
            {headline}
          </h2>
          {description && (
            <p className="animate-in fade-in slide-in-from-bottom-5 text-lg leading-relaxed text-muted-foreground duration-1000 sm:text-xl">
              {description}
            </p>
          )}
        </div>
 
        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((feature, index) => {
            const Icon = feature.icon;
            const gradientColor = colors[index % colors.length];
 
            return (
              <div
                key={index}
                className="group relative animate-in fade-in slide-in-from-bottom-6 duration-1000"
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <div
                  className={`absolute -inset-0.5 rounded-2xl bg-gradient-to-r ${gradientColor} opacity-0 blur transition-all duration-500 group-hover:opacity-20`}
                />
 
                <Card className="relative h-full border-border/50 bg-card/50 backdrop-blur-sm transition-all duration-300 hover:border-border hover:bg-card hover:shadow-xl">
                  <CardContent className="p-8">
                    <div className="mb-6 inline-flex">
                      <div
                        className={`relative rounded-xl bg-gradient-to-br ${gradientColor} p-4 shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl`}
                      >
                        <Icon className="h-7 w-7 text-white" />
                      </div>
                    </div>
 
                    <h3 className="mb-3 text-2xl font-semibold tracking-tight transition-colors">
                      {feature.title}
                    </h3>
                    <p className="leading-relaxed text-muted-foreground">
                      {feature.description}
                    </p>
 
                    <div className="absolute right-6 top-6 h-10 w-10 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                      <div
                        className={`h-full w-full rounded-full bg-gradient-to-br ${gradientColor} opacity-20 blur-lg`}
                      />
                    </div>
                  </CardContent>
                </Card>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}