Pricing Table

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
  {tiers.map((tier) => (
    <div
      key={tier.name}
      className={cn(
        "rounded-lg border p-6 flex flex-col",
        tier.featured && "border-primary shadow-lg scale-105"
      )}
    >
      <h3 className="font-semibold text-lg">{tier.name}</h3>
      <div className="text-3xl font-bold mt-2">{tier.price}</div>
      <p className="text-sm text-muted-foreground mt-1">{tier.period}</p>
      <ul className="mt-6 space-y-3 flex-1">
        {tier.features.map((f) => (
          <li key={f} className="flex items-center gap-2 text-sm">
            <CheckIcon className="w-4 h-4 text-primary" />
            {f}
          </li>
        ))}
      </ul>
      <Button className="mt-6 w-full" variant={tier.featured ? "default" : "outline"}>
        {tier.cta}
      </Button>
    </div>
  ))}
</div>