Neon Circuit Login Card with Social Sign-In

<div class="w-full max-w-5xl mt-8 mr-auto mb-8 ml-auto relative">
      <!-- Outer circuit-style nodes with lines connected to card -->
      <div class="pointer-events-none hidden md:block absolute top-0 right-0 bottom-0 left-0">
        <!-- Left upper node -->
        <div class="absolute left-4 top-1/4 flex items-center gap-2 text-neutral-700">
          <div class="h-px flex-1 bg-neutral-800 translate-x-2"></div>
          <div class="relative h-9 w-16 rounded-xl bg-neutral-900/80 shadow-[0_0_0_1px_rgba(82,82,91,0.4)] flex items-center justify-center">
            <div class="h-1 w-10 rounded-full bg-neutral-700"></div>
            <!-- Pulsing chip dots -->
            <span class="absolute -left-1 h-1 w-1 rounded-full bg-emerald-400 shadow-[0_0_12px_rgba(52,211,153,0.65)] animate-pulse"></span>
          </div>
          <!-- Line to card -->
          <div class="h-px w-12 bg-neutral-800"></div>
        </div>

        <!-- Left bottom node -->
        <div class="absolute left-10 bottom-10 flex items-center gap-2 text-neutral-700">
          <div class="h-px flex-1 bg-neutral-800 translate-x-2"></div>
          <div class="relative h-9 w-20 rounded-xl bg-neutral-900/80 shadow-[0_0_0_1px_rgba(82,82,91,0.4)] flex items-center justify-center">
            <div class="flex gap-1">
              <span class="h-1 w-2 rounded bg-neutral-700"></span>
              <span class="h-1 w-2 rounded bg-neutral-700/60"></span>
              <span class="h-1 w-2 rounded bg-neutral-700/40"></span>
            </div>
            <!-- Pulsing chip dots -->
            <span class="absolute -left-1 h-1 w-1 rounded-full bg-emerald-400 shadow-[0_0_12px_rgba(52,211,153,0.65)] animate-pulse"></span>
          </div>
          <!-- Line to card -->
          <div class="h-px w-16 bg-neutral-800"></div>
        </div>

        <!-- Right upper node -->
        <div class="absolute right-4 top-1/5 flex items-center gap-2 text-neutral-700">
          <!-- Line to card (now pointing left) -->
          <div class="h-px w-16 bg-neutral-800"></div>
          <div class="relative h-9 w-20 rounded-xl bg-neutral-900/80 shadow-[0_0_0_1px_rgba(82,82,91,0.4)] flex items-center justify-center">
            <div class="flex gap-1">
              <span class="h-1 w-6 rounded-full bg-emerald-400 shadow-[0_0_12px_rgba(52,211,153,0.65)]"></span>
            </div>
            <!-- Pulsing chip dots -->
            <span class="absolute -right-1 h-1 w-1 rounded-full bg-emerald-400 shadow-[0_0_12px_rgba(52,211,153,0.65)] animate-pulse"></span>
          </div>
          <div class="h-px flex-1 bg-neutral-800 -translate-x-2"></div>
        </div>

        <!-- Right bottom node -->
        <div class="absolute right-8 bottom-16 flex items-center gap-2 text-neutral-700">
          <!-- Line to card (now pointing left) -->
          <div class="h-px w-10 bg-neutral-800"></div>
          <div class="relative h-9 w-16 rounded-xl bg-neutral-900/80 shadow-[0_0_0_1px_rgba(82,82,91,0.4)] flex items-center justify-center">
            <div class="h-1 w-8 rounded-full bg-neutral-700"></div>
            <!-- Pulsing chip dots -->
            <span class="absolute -right-1 h-1 w-1 rounded-full bg-emerald-400 shadow-[0_0_12px_rgba(52,211,153,0.65)] animate-pulse"></span>
          </div>
          <div class="h-px flex-1 bg-neutral-800 -translate-x-2"></div>
        </div>
      </div>

      <!-- Card -->
      <div class="sm:px-10 sm:py-10 bg-gradient-to-b from-neutral-900 via-neutral-900 to-neutral-800 max-w-md border-neutral-800 border rounded-3xl mr-auto ml-auto pt-8 pr-6 pb-8 pl-6 relative shadow-xl">
        <!-- Top glow dots -->
        <div class="absolute left-10 top-5 hidden h-1.5 w-16 rounded-full bg-neutral-700/60 sm:block"></div>
        <div class="absolute right-10 top-5 hidden h-1.5 w-10 rounded-full bg-neutral-700/30 sm:block"></div>

        <!-- Logo (simplified green glow) -->
        <div class="flex justify-center">
  <div class="flex bg-neutral-900 w-14 h-14 rounded-2xl relative shadow-[0_0_0_1px_rgba(82,82,91,0.7)] items-center justify-center">
    <div class="flex bg-neutral-950 w-10 h-10 rounded-2xl relative items-center justify-center">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="width: 24px; height: 24px; color: rgb(52, 211, 153);" class="w-[24px] h-[24px]" aria-hidden="true" role="img" data-icon="solar:sparkles-bold-duotone" data-solar="mouse-circle-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2">
    <path fill="#34d399" d="M2.535 11.916c0 5.267 4.238 9.537 9.465 9.537s9.465-4.27 9.465-9.537a9.54 9.54 0 0 0-5.335-8.584a.776.776 0 0 1-.355-1.033a.765.765 0 0 1 1.026-.358A11.09 11.09 0 0 1 23 11.916C23 18.038 18.075 23 12 23S1 18.038 1 11.916C1 6.548 4.787 2.073 9.815 1.051c1.689-.343 2.952 1.104 2.952 2.617v2.134c1.894.364 3.326 2.05 3.326 4.076V14c0 2.291-1.832 4.148-4.093 4.148c-2.26 0-4.093-1.857-4.093-4.148V9.878c0-2.025 1.432-3.711 3.326-4.075V3.668c0-.766-.588-1.208-1.115-1.101c-4.326.879-7.583 4.732-7.583 9.35" opacity=".5" class=""></path>
    <path fill="#34d399" d="M7.907 13.954c0 2.29 1.833 4.148 4.093 4.148s4.093-1.857 4.093-4.148v-3.37H7.907zm4.861-4.616h3.253c-.312-1.667-1.608-3.292-3.253-3.609zm-1.535 0V5.73c-1.645.317-2.942 1.942-3.254 3.61z" class=""></path>
  </svg>
</div>
  </div>
</div>

        <!-- Heading -->
        <div class="mt-6 text-center">
          <h1 class="text-[22px] leading-tight tracking-tight font-semibold text-neutral-50">
            Sign in to NeonGrid
          </h1>
          <p class="mt-2 text-sm font-normal text-neutral-400">
            New to the workspace?
            <a href="#" class="font-medium text-emerald-400 hover:text-emerald-300">
              Create an account
            </a>
          </p>
        </div>

        <!-- Form -->
        <form class="mt-8 space-y-5">
          <div class="space-y-2">
            <label for="email" class="block text-xs font-medium uppercase tracking-[0.16em] text-neutral-400">
              Work email
            </label>
            <div class="flex items-center rounded-xl border border-neutral-800 bg-neutral-950/60 px-3 py-2.5 text-sm text-neutral-100 shadow-inner shadow-black/40 focus-within:border-emerald-500 focus-within:ring-1 focus-within:ring-emerald-500/70">
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:inbox-unread-bold-duotone" class="iconify h-4 w-4 text-neutral-500 iconify--solar"><path fill="currentColor" d="M22 5a3 3 0 1 1-6 0a3 3 0 0 1 6 0" class=""></path><path fill="currentColor" d="M15.612 2.038C14.59 2 13.399 2 12 2C7.286 2 4.929 2 3.464 3.464C2 4.93 2 7.286 2 12s0 7.071 1.464 8.535C4.93 22 7.286 22 12 22s7.071 0 8.535-1.465C22 19.072 22 16.714 22 12c0-1.399 0-2.59-.038-3.612a4.5 4.5 0 0 1-6.35-6.35" opacity=".5" class=""></path><path fill="currentColor" d="M3.465 20.536C4.929 22 7.286 22 12 22s7.072 0 8.536-1.465C21.893 19.179 21.993 17.056 22 13h-3.16c-.905 0-1.358 0-1.755.183c-.398.183-.693.527-1.282 1.214l-.605.706c-.59.687-.884 1.031-1.282 1.214s-.85.183-1.755.183h-.321c-.905 0-1.358 0-1.756-.183s-.692-.527-1.281-1.214l-.606-.706c-.589-.687-.883-1.031-1.281-1.214S6.066 13 5.16 13H2c.007 4.055.107 6.179 1.465 7.535" class=""></path></svg>
              <input id="email" type="email" placeholder="you@studio.dev" class="ml-3 flex-1 bg-transparent text-sm font-normal text-neutral-100 placeholder:text-neutral-600 focus:outline-none">
            </div>
          </div>

          <div class="space-y-2">
            <div class="flex items-center justify-between">
              <label for="password" class="block text-xs font-medium uppercase tracking-[0.16em] text-neutral-400">
                Password
              </label>
              <a href="#" class="text-xs font-medium text-neutral-400 hover:text-neutral-100">
                Forgot?
              </a>
            </div>
            <div class="flex shadow-black/40 focus-within:border-emerald-500 focus-within:ring-1 focus-within:ring-emerald-500/70 text-sm text-neutral-100 bg-neutral-950/60 border-neutral-800 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3 shadow-inner items-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="color: rgb(115, 115, 115); width: 16px; height: 16px" class="iconify text-neutral-500 iconify--solar w-[16px] h-[16px]" aria-hidden="true" role="img" data-icon="solar:lock-keyhole-bold-duotone" data-solar="lock-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#737373" d="M2 16c0-2.828 0-4.243.879-5.121C3.757 10 5.172 10 8 10h8c2.828 0 4.243 0 5.121.879C22 11.757 22 13.172 22 16s0 4.243-.879 5.121C20.243 22 18.828 22 16 22H8c-2.828 0-4.243 0-5.121-.879C2 20.243 2 18.828 2 16" opacity=".5" class=""></path><path fill="#737373" d="M6.75 8a5.25 5.25 0 0 1 10.5 0v2.004c.567.005 1.064.018 1.5.05V8a6.75 6.75 0 0 0-13.5 0v2.055a24 24 0 0 1 1.5-.051z" class=""></path></svg>
              <input id="password" type="password" placeholder="Enter your password" class="ml-3 flex-1 bg-transparent text-sm font-normal text-neutral-100 placeholder:text-neutral-600 focus:outline-none">
              <button type="button" class="ml-2 rounded-full px-2 py-1 text-[11px] font-medium text-neutral-400 hover:bg-neutral-800/80 hover:text-neutral-100 transition">
                Show
              </button>
            </div>
          </div>

          <!-- Primary button (fixed classes) -->
          <button type="submit" class="mt-2 inline-flex w-full items-center justify-center rounded-full bg-emerald-500 px-4 py-2.5 text-sm font-semibold text-neutral-900 shadow-[0_14px_35px_rgba(16,185,129,0.55)] hover:bg-emerald-400 focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/80 transition">
            Continue to dashboard
          </button>

          <!-- Divider -->
          <div class="flex items-center gap-4 text-xs text-neutral-500">
            <div class="h-px flex-1 bg-neutral-800/80"></div>
            <span class="font-medium">OR</span>
            <div class="h-px flex-1 bg-neutral-800/80"></div>
          </div>

          <!-- Social buttons -->
          <div class="grid grid-cols-3 gap-3">
            <button type="button" class="flex items-center justify-center rounded-xl border border-neutral-800 bg-neutral-900 px-2 py-2.5 text-xs font-medium text-neutral-200 hover:border-neutral-700 hover:bg-neutral-800/80 transition">
              <span class="sr-only">Sign in with Aurora ID</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="color: rgb(52, 211, 153); width: 24px; height: 24px;" class="w-[24px] h-[24px]" aria-hidden="true" role="img" data-icon="solar:sparkles-bold-duotone" data-mingcute="google-line" data-icon-set="mingcute" data-icon-replaced="true" stroke-width="2"><g fill="none" fill-rule="evenodd" class=""><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="#34d399" d="M12 5a7 7 0 1 0 6.93 8H13a1 1 0 1 1 0-2h7a1 1 0 0 1 1 1a9 9 0 1 1-2.654-6.381a1 1 0 0 1-1.41 1.418A6.98 6.98 0 0 0 12 5" class=""></path></g></svg>
            </button>
            <button type="button" class="flex items-center justify-center rounded-xl border border-neutral-800 bg-neutral-900 px-2 py-2.5 text-xs font-medium text-neutral-200 hover:border-neutral-700 hover:bg-neutral-800/80 transition">
              <span class="sr-only">Sign in with Orbit</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="color: rgb(52, 211, 153); width: 24px; height: 24px;" class="w-[24px] h-[24px]" aria-hidden="true" role="img" data-icon="solar:sparkles-bold-duotone" data-mingcute="apple-line" data-icon-set="mingcute" data-icon-replaced="true" stroke-width="2"><g fill="none" class=""><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="#34d399" d="m13.064 6.685l.745-.306c.605-.24 1.387-.485 2.31-.33c1.891.318 3.195 1.339 3.972 2.693c.3.522.058 1.21-.502 1.429a2.501 2.501 0 0 0 .133 4.706c.518.17.81.745.64 1.263c-.442 1.342-1.078 2.581-1.831 3.581c-.744.988-1.652 1.808-2.663 2.209c-.672.266-1.39.16-2.078-.013l-.408-.11l-.585-.163l-.319-.079a2.3 2.3 0 0 0-.478-.067c-.13 0-.285.024-.478.067l-.32.08l-.787.218c-.748.203-1.544.36-2.283.067c-1.273-.504-2.396-1.68-3.245-3.067a13.5 13.5 0 0 1-1.784-4.986c-.227-1.554-.104-3.299.615-4.775c.74-1.521 2.096-2.705 4.163-3.053c.84-.141 1.562.048 2.14.265l.331.13l.584.241c.4.157.715.249 1.064.249c.348 0 .664-.092 1.064-.249M10.19 8.542l-.348-.143c-.731-.306-1.138-.46-1.63-.378c-1.392.235-2.221.982-2.696 1.957c-.496 1.018-.62 2.332-.434 3.61c.228 1.558.789 3.05 1.511 4.232c.738 1.205 1.571 1.972 2.275 2.25c.24.095.585.02.905-.078l.443-.146l.122-.038l.433-.12c.386-.1.821-.19 1.229-.19c.407 0 .843.09 1.229.19l.433.12l.122.038l.443.146c.32.098.665.173.905.078c.547-.216 1.183-.732 1.8-1.552c.46-.61.88-1.352 1.223-2.177A4.5 4.5 0 0 1 16 12.5c0-1.447.682-2.732 1.74-3.555c-.473-.45-1.107-.781-1.952-.924c-.443-.074-.817.043-1.42.291l-.21.087c-.541.227-1.276.535-2.158.535c-.705 0-1.317-.197-1.81-.392m1.578-5.774c.976-.977 2.475-1.061 2.828-.707c.354.353.27 1.852-.707 2.828c-.976.976-2.475 1.06-2.828.707c-.354-.353-.27-1.852.707-2.828" class=""></path></g></svg>
            </button>
            <button type="button" class="flex items-center justify-center rounded-xl border border-neutral-800 bg-neutral-900 px-2 py-2. text-xs font-medium text-neutral-200 hover:border-neutral-700 hover:bg-neutral-800/80 transition">
              <span class="sr-only">Sign in with Vector</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="color: rgb(52, 211, 153); width: 24px; height: 24px" class="w-[24px] h-[24px]" aria-hidden="true" role="img" data-icon="solar:sparkles-bold-duotone" data-mingcute="github-line" data-icon-set="mingcute" data-icon-replaced="true" stroke-width="2"><g fill="none" class=""><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="#34d399" d="M6.315 6.176c-.25-.638-.24-1.367-.129-2.034a6.8 6.8 0 0 1 2.12 1.07c.28.214.647.283.989.18A9.3 9.3 0 0 1 12 5c.961 0 1.874.14 2.703.391c.342.104.709.034.988-.18a6.8 6.8 0 0 1 2.119-1.07c.111.667.12 1.396-.128 2.033c-.15.384-.075.826.208 1.14C18.614 8.117 19 9.04 19 10c0 2.114-1.97 4.187-5.134 4.818c-.792.158-1.101 1.155-.495 1.726c.389.366.629.882.629 1.456v3a1 1 0 0 0 2 0v-3c0-.57-.12-1.112-.334-1.603C18.683 15.35 21 12.993 21 10c0-1.347-.484-2.585-1.287-3.622c.21-.82.191-1.646.111-2.28c-.071-.568-.17-1.312-.57-1.756c-.595-.659-1.58-.271-2.28-.032a9 9 0 0 0-2.125 1.045A11.4 11.4 0 0 0 12 3c-.994 0-1.953.125-2.851.356a9 9 0 0 0-2.125-1.045c-.7-.24-1.686-.628-2.281.031c-.408.452-.493 1.137-.566 1.719l-.005.038c-.08.635-.098 1.462.112 2.283C3.484 7.418 3 8.654 3 10c0 2.992 2.317 5.35 5.334 6.397A4 4 0 0 0 8 17.98l-.168.034c-.717.099-1.176.01-1.488-.122c-.76-.322-1.152-1.133-1.63-1.753c-.298-.385-.732-.866-1.398-1.088a1 1 0 0 0-.632 1.898c.558.186.944 1.142 1.298 1.566c.373.448.869.916 1.58 1.218c.682.29 1.483.393 2.438.276V21a1 1 0 0 0 2 0v-3c0-.574.24-1.09.629-1.456c.607-.572.297-1.568-.495-1.726C6.969 14.187 5 12.114 5 10c0-.958.385-1.881 1.108-2.684c.283-.314.357-.756.207-1.14" class=""></path></g></svg>
            </button>
          </div>

          <!-- Subtext -->
          <p class="pt-1 text-[11px] leading-relaxed text-neutral-500">
  By continuing, you agree to the NeonGrid
  <a href="#" class="font-medium text-neutral-200 hover:text-emerald-400">
    Terms
  </a>
  and
  <a href="#" class="font-medium text-neutral-200 hover:text-emerald-400">
    Privacy Policy
  </a>.
</p>
        </form>
      </div>
    </div>