Boxed Newsletter Card

export default function NewsletterCard() {
  return (
    <section className="bg-zinc-50 px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div className="mx-auto max-w-md">
        <div className="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-xl shadow-zinc-900/5 dark:border-zinc-800 dark:bg-zinc-900 dark:shadow-black/30">
          <div className="flex flex-col items-center px-8 pb-8 pt-10 text-center">
            <span className="flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400">
              <svg className="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden>
                <path d="M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z" />
                <path d="m3.5 6.5 8.5 6 8.5-6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>

            <h2 className="mt-6 text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">
              Get the field notes
            </h2>
            <p className="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
              A tidy monthly digest of the tools, patterns and ideas worth your attention. Curated by hand, delivered on the first of the month.
            </p>

            <form className="mt-8 w-full space-y-3 text-left" action="#" method="post">
              <label htmlFor="newsletter-card-email" className="sr-only">
                Email address
              </label>
              <input
                id="newsletter-card-email"
                type="email"
                name="email"
                required
                autoComplete="email"
                placeholder="Enter your email"
                className="w-full rounded-lg border border-zinc-300 bg-white px-4 py-3 text-sm text-zinc-900 shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/40 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500"
              />
              <button
                type="submit"
                className="w-full rounded-lg bg-emerald-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900"
              >
                Sign me up
              </button>
            </form>
          </div>

          <div className="flex items-center justify-center gap-2 border-t border-zinc-200 bg-zinc-50 px-8 py-4 text-xs text-zinc-500 dark:border-zinc-800 dark:bg-zinc-900/60 dark:text-zinc-500">
            <svg className="h-4 w-4 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden>
              <path d="M12 3 5 6v5c0 4.5 3 8 7 9 4-1 7-4.5 7-9V6l-7-3Z" strokeLinejoin="round" />
              <path d="m9 12 2 2 4-4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            <span>No spam. One click to leave.</span>
          </div>
        </div>
      </div>
    </section>
  );
}