Simple Pricing

const tiers = [
  {
    name: "Starter",
    price: "$0",
    tagline: "For side projects.",
    features: ["1 project", "Community support", "1 GB storage"],
    highlighted: false,
  },
  {
    name: "Pro",
    price: "$19",
    tagline: "For growing teams.",
    features: ["Unlimited projects", "Priority support", "100 GB storage", "Analytics"],
    highlighted: true,
  },
  {
    name: "Scale",
    price: "$49",
    tagline: "For serious workloads.",
    features: ["Everything in Pro", "SSO & audit logs", "1 TB storage", "SLA"],
    highlighted: false,
  },
];

export default function SimplePricing() {
  return (
    <section className="bg-white px-6 py-20 dark:bg-zinc-950">
      <div className="mx-auto max-w-2xl text-center">
        <h2 className="text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
          Simple, honest pricing
        </h2>
        <p className="mt-4 text-lg text-zinc-600 dark:text-zinc-400">
          Start free. Upgrade when it pays for itself.
        </p>
      </div>
      <div className="mx-auto mt-12 grid max-w-5xl gap-6 md:grid-cols-3">
        {tiers.map((tier) => (
          <div
            key={tier.name}
            className={
              "flex flex-col rounded-2xl border p-8 " +
              (tier.highlighted
                ? "border-indigo-600 bg-zinc-900 text-white shadow-xl dark:bg-zinc-900"
                : "border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900/40 dark:text-white")
            }
          >
            {tier.highlighted && (
              <span className="mb-4 inline-block w-fit rounded-full bg-indigo-600 px-3 py-1 text-xs font-semibold text-white">
                Most popular
              </span>
            )}
            <h3 className="text-lg font-semibold">{tier.name}</h3>
            <p className={"mt-1 text-sm " + (tier.highlighted ? "text-zinc-300" : "text-zinc-500 dark:text-zinc-400")}>
              {tier.tagline}
            </p>
            <div className="mt-6 flex items-baseline gap-1">
              <span className="text-4xl font-bold tracking-tight">{tier.price}</span>
              <span className={"text-sm " + (tier.highlighted ? "text-zinc-400" : "text-zinc-500")}>/mo</span>
            </div>
            <ul className="mt-6 space-y-3 text-sm">
              {tier.features.map((f) => (
                <li key={f} className="flex items-center gap-2">
                  <svg className="h-4 w-4 shrink-0 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden>
                    <path fillRule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 10.7a1 1 0 111.4-1.4l3.8 3.8 6.8-6.8a1 1 0 011.4 0z" clipRule="evenodd" />
                  </svg>
                  {f}
                </li>
              ))}
            </ul>
            <a
              href="#"
              className={
                "mt-8 rounded-lg px-4 py-2.5 text-center text-sm font-semibold transition " +
                (tier.highlighted
                  ? "bg-white text-zinc-900 hover:bg-zinc-200"
                  : "bg-zinc-900 text-white hover:bg-zinc-700 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-200")
              }
            >
              Choose {tier.name}
            </a>
          </div>
        ))}
      </div>
    </section>
  );
}