Newsletter CTA With Stats

export default function CtaNewsletterStats() {
  return (
    <section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div className="mx-auto max-w-4xl rounded-3xl bg-gradient-to-b from-zinc-50 to-white p-8 ring-1 ring-zinc-200 md:p-12 dark:from-zinc-900 dark:to-zinc-950 dark:ring-zinc-800">
        <div className="mx-auto max-w-2xl text-center">
          <span className="inline-flex items-center gap-2 rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-800 dark:bg-amber-500/15 dark:text-amber-300">
            <svg
              aria-hidden="true"
              viewBox="0 0 20 20"
              fill="currentColor"
              className="h-3.5 w-3.5"
            >
              <path d="M3 4a2 2 0 0 0-2 2v1.161l8.441 4.221a1.25 1.25 0 0 0 1.118 0L19 7.162V6a2 2 0 0 0-2-2H3Z" />
              <path d="m19 8.839-7.77 3.885a2.75 2.75 0 0 1-2.46 0L1 8.839V14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.839Z" />
            </svg>
            The Friday brief
          </span>
          <h2 className="mt-6 text-balance text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
            One useful idea in your inbox every Friday.
          </h2>
          <p className="mx-auto mt-4 max-w-xl text-pretty text-lg text-zinc-600 dark:text-zinc-400">
            Practical tips on design, growth and shipping, written for busy
            founders. Short enough to read with your coffee.
          </p>

          <form className="mx-auto mt-8 flex max-w-md flex-col gap-3 sm:flex-row">
            <label htmlFor="cta-news-email" className="sr-only">
              Email address
            </label>
            <input
              id="cta-news-email"
              name="email"
              type="email"
              required
              autoComplete="email"
              placeholder="you@example.com"
              className="w-full flex-1 rounded-xl border border-zinc-300 bg-white px-4 py-3 text-sm text-zinc-900 shadow-sm placeholder:text-zinc-400 focus:border-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-500/40 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
            />
            <button
              type="submit"
              className="inline-flex items-center justify-center rounded-xl bg-rose-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-rose-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rose-500"
            >
              Subscribe
            </button>
          </form>
          <p className="mt-3 text-xs text-zinc-500 dark:text-zinc-500">
            Free forever. Unsubscribe in one click, no hard feelings.
          </p>
        </div>

        <dl className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-px overflow-hidden rounded-2xl bg-zinc-200 text-center sm:grid-cols-3 dark:bg-zinc-800">
          {[
            { value: "12,000+", label: "Weekly readers" },
            { value: "48%", label: "Average open rate" },
            { value: "4 min", label: "Typical read time" },
          ].map((stat) => (
            <div
              key={stat.label}
              className="bg-white px-4 py-6 dark:bg-zinc-950"
            >
              <dt className="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
                {stat.value}
              </dt>
              <dd className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
                {stat.label}
              </dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}