Feature Card

"use client";

import { Zap, Shield, BarChart3 } from "lucide-react";
import { FeatureCard } from "@/registry/sase/feature-card";

export function FeatureCardDemo() {
  return (
    <div className="w-full max-w-2xl">
      <div className="flex flex-col gap-6">
        <FeatureCard
          icon={Zap}
          title="Lightning Fast"
          description="Optimized performance that keeps your team moving at the speed of thought."
          gradient="from-yellow-500 to-orange-500"
          bgGradient="from-yellow-500/10 to-orange-500/5"
          index={0}
        />
        <FeatureCard
          icon={Shield}
          title="Enterprise Security"
          description="Bank-grade encryption and compliance built into every layer."
          gradient="from-green-500 to-emerald-500"
          bgGradient="from-green-500/10 to-emerald-500/5"
          index={1}
        />
        <FeatureCard
          icon={BarChart3}
          title="Powerful Analytics"
          description="Deep insights and real-time metrics to drive better decisions."
          gradient="from-blue-500 to-cyan-500"
          bgGradient="from-blue-500/10 to-cyan-500/5"
          index={2}
        />
      </div>
    </div>
  );
}