import { Check } from "lucide-react"

export default function PricingCard() {
  return (
    <div className="mx-auto w-full max-w-sm rounded-xl border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
      <div className="flex flex-col gap-4">
        <div>
          <h3 className="text-xl font-bold text-zinc-900 dark:text-zinc-50">Pro</h3>
          <p className="text-sm text-zinc-500 dark:text-zinc-400">Perfect for growing businesses.</p>
        </div>
        <div className="flex items-baseline gap-1">
          <span className="text-3xl font-bold text-zinc-900 dark:text-zinc-50">$29</span>
          <span className="text-sm font-medium text-zinc-500 dark:text-zinc-400">/month</span>
        </div>
        <button className="inline-flex h-10 w-full items-center justify-center rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-zinc-50 shadow transition-colors hover:bg-zinc-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90 dark:focus-visible:ring-zinc-300">
          Subscribe
        </button>
        <div className="space-y-2 text-sm">
          {["Unlimited projects", "Analytics dashboard", "Priority support", "4 Team members"].map((feature) => (
            <div key={feature} className="flex items-center gap-2">
              <Check className="h-4 w-4 text-zinc-900 dark:text-zinc-50" />
              <span className="text-zinc-700 dark:text-zinc-300">{feature}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
Pricing Card

Pro
