Split Newsletter With Illustration

export default function NewsletterSplit() {
  return (
    <section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div className="mx-auto max-w-5xl overflow-hidden rounded-3xl border border-zinc-200 shadow-sm dark:border-zinc-800">
        <div className="grid md:grid-cols-2">
          <div className="flex flex-col justify-center p-8 sm:p-12">
            <span className="inline-flex w-fit items-center gap-2 rounded-full bg-indigo-50 px-3 py-1 text-xs font-semibold text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300">
              <span className="h-1.5 w-1.5 rounded-full bg-indigo-500" aria-hidden />
              New issue every Tuesday
            </span>
            <h2 className="mt-5 text-2xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-3xl">
              Ideas worth reading over coffee
            </h2>
            <p className="mt-4 text-zinc-600 dark:text-zinc-400">
              Short, thoughtful essays on design and product craft. Written for people who like their reading calm and their inbox tidy.
            </p>

            <form className="mt-8 space-y-3" action="#" method="post">
              <label htmlFor="newsletter-split-email" className="sr-only">
                Email address
              </label>
              <div className="flex flex-col gap-3 sm:flex-row">
                <input
                  id="newsletter-split-email"
                  type="email"
                  name="email"
                  required
                  autoComplete="email"
                  placeholder="you@example.com"
                  className="w-full flex-1 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-indigo-500 focus:ring-2 focus:ring-indigo-500/40 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white dark:placeholder:text-zinc-500"
                />
                <button
                  type="submit"
                  className="shrink-0 rounded-lg bg-zinc-900 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-500/50 focus:ring-offset-2 focus:ring-offset-white dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-200 dark:focus:ring-offset-zinc-950"
                >
                  Join now
                </button>
              </div>
              <p className="text-xs text-zinc-500 dark:text-zinc-500">
                Free forever. Read by 12,000 curious folks.
              </p>
            </form>
          </div>

          <div className="relative flex items-center justify-center overflow-hidden bg-gradient-to-br from-indigo-500 via-violet-500 to-fuchsia-500 p-8 sm:p-12">
            <div
              aria-hidden
              className="pointer-events-none absolute inset-0 opacity-25 [background-image:radial-gradient(circle_at_25%_20%,white,transparent_45%),radial-gradient(circle_at_80%_80%,white,transparent_40%)]"
            />
            <svg
              viewBox="0 0 200 200"
              role="img"
              aria-label="Illustration of an open envelope with a letter and floating sparkles"
              className="relative w-full max-w-xs drop-shadow-xl"
            >
              <rect x="30" y="70" width="140" height="96" rx="10" fill="#ffffff" />
              <rect x="46" y="52" width="108" height="70" rx="6" fill="#eef2ff" />
              <line x1="60" y1="72" x2="140" y2="72" stroke="#c7d2fe" strokeWidth="6" strokeLinecap="round" />
              <line x1="60" y1="88" x2="128" y2="88" stroke="#e0e7ff" strokeWidth="6" strokeLinecap="round" />
              <line x1="60" y1="104" x2="134" y2="104" stroke="#e0e7ff" strokeWidth="6" strokeLinecap="round" />
              <path d="M30 80 100 128 170 80 170 156a10 10 0 0 1-10 10H40a10 10 0 0 1-10-10Z" fill="#c7d2fe" />
              <path d="M30 80 100 128 170 80" fill="none" stroke="#a5b4fc" strokeWidth="4" strokeLinejoin="round" />
              <g fill="#fde68a">
                <path d="M150 40l3 8 8 3-8 3-3 8-3-8-8-3 8-3z" />
                <path d="M44 34l2 5 5 2-5 2-2 5-2-5-5-2 5-2z" />
              </g>
            </svg>
          </div>
        </div>
      </div>
    </section>
  );
}