Empty State 2

<!--
  Day 87: Empty State 2

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Empty State 2 -->
<div
  class="relative mx-auto w-full max-w-3xl rounded-3xl bg-white/40 p-4 shadow-sm backdrop-blur-xs"
>
  <div class="rounded-2xl bg-white p-6">
    <div
      class="relative rounded-xl border-2 border-dashed border-zinc-200 px-6 py-20 md:py-32"
    >
      <div
        class="absolute inset-0 bg-[repeating-linear-gradient(45deg,#9ca3af,#9ca3af_2px,transparent_2px,transparent_12px)] opacity-5"
      ></div>
      <div class="relative flex flex-col gap-8 text-center">
        <div>
          <div
            class="relative inline-flex items-center justify-center rounded-full border border-zinc-200 bg-white p-5 ring-4 ring-zinc-200/50"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
              class="lucide lucide-user-round-search inline-block size-8 text-indigo-600"
            >
              <circle cx="10" cy="8" r="5" />
              <path d="M2 21a8 8 0 0 1 10.434-7.62" />
              <circle cx="18" cy="18" r="3" />
              <path d="m22 22-1.9-1.9" />
            </svg>
          </div>
          <div class="mt-4 text-center">
            <h3 class="mb-1 text-2xl font-bold">No contacts yet.</h3>
            <p class="text-sm/relaxed font-medium text-zinc-600">
              Start building your network by adding your first contact.
            </p>
          </div>
        </div>
        <button
          type="button"
          class="mx-auto flex items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-4 py-3 text-sm leading-5 font-medium text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:ring-2 focus:ring-zinc-500/50 focus:outline-hidden active:border-zinc-700 active:bg-zinc-700"
        >
          <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"
            aria-hidden="true"
            class="lucide lucide-user-plus inline-block size-4 opacity-50"
          >
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
            <circle cx="9" cy="7" r="4" />
            <line x1="19" x2="19" y1="8" y2="14" />
            <line x1="22" x2="16" y1="11" y2="11" />
          </svg>
          <span>Add new contact</span>
        </button>
      </div>
    </div>
  </div>
</div>
<!-- END Empty State 2 -->