Single Plan Pricing Card

export default function PricingSingleCard() {
  const features = [
    "Unlimited projects and members",
    "Advanced analytics dashboard",
    "Priority email and chat support",
    "Custom domains with free SSL",
    "Role-based access control",
    "Export to CSV and PDF",
  ];

  return (
    <section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div className="mx-auto max-w-md">
        <div className="mb-8 text-center">
          <h2 className="text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
            One plan, everything included
          </h2>
          <p className="mt-3 text-zinc-600 dark:text-zinc-400">
            No tiers to compare and no features held back. Pay once a month and use the lot.
          </p>
        </div>

        <div className="relative overflow-hidden rounded-3xl border border-zinc-200 bg-zinc-50 p-8 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
          <div
            className="pointer-events-none absolute -right-16 -top-16 h-40 w-40 rounded-full bg-indigo-500/10 blur-2xl"
            aria-hidden="true"
          />

          <span className="inline-flex items-center gap-1.5 rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400">
            <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" aria-hidden="true" />
            14-day free trial
          </span>

          <div className="mt-6 flex items-end gap-2">
            <span className="text-5xl font-bold tracking-tight text-zinc-900 dark:text-white">
              &pound;29
            </span>
            <span className="mb-1 text-zinc-500 dark:text-zinc-400">per month</span>
          </div>
          <p className="mt-2 text-sm text-zinc-500 dark:text-zinc-400">
            Billed monthly. Cancel whenever you like.
          </p>

          <a
            href="#"
            className="mt-6 block rounded-xl bg-indigo-600 px-5 py-3 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
          >
            Start your free trial
          </a>

          <div className="my-8 h-px bg-zinc-200 dark:bg-zinc-800" />

          <p className="text-sm font-semibold text-zinc-900 dark:text-white">Everything you get</p>
          <ul className="mt-4 space-y-3">
            {features.map((feature) => (
              <li
                key={feature}
                className="flex items-start gap-3 text-sm text-zinc-700 dark:text-zinc-300"
              >
                <svg
                  className="mt-0.5 h-5 w-5 shrink-0 text-indigo-600 dark:text-indigo-400"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    fillRule="evenodd"
                    d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 10.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z"
                    clipRule="evenodd"
                  />
                </svg>
                <span>{feature}</span>
              </li>
            ))}
          </ul>

          <p className="mt-8 flex items-center justify-center gap-2 text-center text-xs text-zinc-500 dark:text-zinc-400">
            <svg
              className="h-4 w-4 shrink-0"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                fillRule="evenodd"
                d="M10 1a5 5 0 0 0-5 5v2H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5Zm3 7V6a3 3 0 1 0-6 0v2h6Z"
                clipRule="evenodd"
              />
            </svg>
            Secure payment with a 30-day money-back guarantee.
          </p>
        </div>
      </div>
    </section>
  );
}