cta newsletter

              <div class="max-w-7xl mx-auto">
  <div class="max-w-xl mx-auto lg:text-balance lg:text-center">
    <p class="text-sm relative text-zinc-500 text-blue-500">
      The only newsletter we’d read too
    </p>
    <h2
      class="text-2xl md:text-3xl lg:text-4xl mt-12 font-semibold tracking-tight text-zinc-900 lg:text-balance"
    >
      Want smarter ideas without the LinkedIn fluff?
    </h2>
    <p class="text-base mt-4 text-zinc-500">
      Join the folks who like their updates useful, witty, and with just the
      right amount of snark.
    </p>
  </div>
  <dl
    class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-4 lg:text-center lg:text-balance"
  >
    <div>
      <dt class="flex flex-col text-orange-600 lg:items-center gap-2">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon icon-tabler-external-brain size-5 text-blue-600"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8"
          ></path>
          <path
            d="M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8"
          ></path>
          <path d="M17.5 16a3.5 3.5 0 0 0 0 -7h-.5"></path>
          <path d="M19 9.3v-2.8a3.5 3.5 0 0 0 -7 0"></path>
          <path d="M6.5 16a3.5 3.5 0 0 1 0 -7h.5"></path>
          <path d="M5 9.3v-2.8a3.5 3.5 0 0 1 7 0v10"></path>
        </svg>
        <h3 class="undefined font-semibold text-zinc-900">
          Stuff You’ll Actually Read
        </h3>
      </dt>
      <dd>
        <p class="text-sm mt-2 text-zinc-500">
          Snappy insights, not recycled productivity tweets from 2016.
        </p>
      </dd>
    </div>
    <div>
      <dt class="flex flex-col text-orange-600 lg:items-center gap-2">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon icon-tabler-arrow-tools size-5 text-blue-600"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M3 21h4l13 -13a1.5 1.5 0 0 0 -4 -4l-13 13v4"></path>
          <path d="M14.5 5.5l4 4"></path>
          <path d="M12 8l-5 -5l-4 4l5 5"></path>
          <path d="M7 8l-1.5 1.5"></path>
          <path d="M16 12l5 5l-4 4l-5 -5"></path>
          <path d="M16 17l-1.5 1.5"></path>
        </svg>
        <h3 class="undefined font-semibold text-zinc-900">
          No Hacks, Just Help
        </h3>
      </dt>
      <dd>
        <p class="text-sm mt-2 text-zinc-500">
          Real tips for building, designing, and maybe surviving Mondays.
        </p>
      </dd>
    </div>
    <div>
      <dt class="flex flex-col text-orange-600 lg:items-center gap-2">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon icon-tabler-arrow-alert-triangle size-5 text-blue-600"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M3 13a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"
          ></path>
          <path
            d="M9 9a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"
          ></path>
          <path
            d="M15 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"
          ></path>
          <path d="M4 20h14"></path>
        </svg>
        <h3 class="undefined font-semibold text-zinc-900">
          Sent With Restraint
        </h3>
      </dt>
      <dd>
        <p class="text-sm mt-2 text-zinc-500">
          One email a week. Two if we’re feeling needy. Never more.
        </p>
      </dd>
    </div>
  </dl>
  <div class="flex w-full max-w-xs mx-auto items-center mt-12">
    <div class="w-full">
      <div class="flex justify-between items-baseline">
        <label for="email" class="sr-only">Email address</label>
      </div>
      <div class="relative z-0 focus-within:z-10">
        <div
          class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon icon-tabler-arrow-mail size-4 text-zinc-500"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path
              d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"
            ></path>
            <path d="M3 7l9 6l9 -6"></path>
          </svg>
        </div>
        <input
          placeholder="Your inbox deserves better"
          id="email"
          name="email"
          type="email"
          class="w-full block transition duration-300 ease-in-out leading-tight align-middle focus:z-10 pl-10 h-9 px-4 py-2 text-xs rounded-tl-md rounded-bl-md bg-white border border-transparent text-zinc-500 ring-1 ring-zinc-200 placeholder-zinc-400 focus:border-blue-500 focus:ring-blue-100 focus:ring-2 focus:outline-none shadow-sm"
          inputmode="email"
        />
      </div>
    </div>
    <button
      class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-white bg-blue-500 outline outline-blue-500 hover:bg-blue-600 focus:outline-blue-600 shadow-sm h-9 px-4 py-2 text-sm rounded-tr-md rounded-br-md"
      type="submit"
    >
      Subscribe
    </button>
  </div>
</div>