Feature Card

import * as React from "react";
import { cn } from "@/lib/utils";

interface FeatureCardProps {
  number: string;
  icon: React.ReactNode;
  title: string;
  description: string;
  className?: string;
}

export function FeatureCard({ number, icon, title, description, className }: FeatureCardProps) {
  return (
    <div
      className={cn(
        "group relative bg-white p-8 rounded-2xl border border-zinc-200 shadow-sm",
        "hover:border-zinc-300 transition-all hover:shadow-md",
        className
      )}
    >
      <span className="block font-mono text-xs text-zinc-400 mb-6">{number}</span>
      <div className="mb-6 w-10 h-10 rounded-lg bg-zinc-100 flex items-center justify-center text-zinc-700 group-hover:bg-zinc-900 group-hover:text-white transition-colors">
        {icon}
      </div>
      <h3 className="text-xl font-medium text-zinc-900 mb-3">{title}</h3>
      <p className="text-zinc-500 leading-relaxed text-sm">{description}</p>
    </div>
  );
}