Animated Welcome Dashboard Card

<section class="order-2 lg:order-1 group relative overflow-hidden ring-1 ring-white/10 flex flex-col rounded-2xl pt-8 pr-8 pb-8 pl-8 justify-between" style="
        background-color: hsl(220, 13%, 9%);
        background-image:
          radial-gradient(at 88% 40%, hsl(220, 13%, 9%) 0px, transparent 85%),
          radial-gradient(at 49% 30%, hsl(220, 13%, 9%) 0px, transparent 85%),
          radial-gradient(at 14% 26%, hsl(220, 13%, 9%) 0px, transparent 85%),
          radial-gradient(at 0% 64%, hsl(220, 9%, 46%) 0px, transparent 85%),
          radial-gradient(at 41% 94%, hsl(215, 14%, 34%) 0px, transparent 85%),
          radial-gradient(at 100% 99%, hsl(217, 19%, 27%) 0px, transparent 85%);
      ">
        <!-- Animated glow background -->
        <div class="pointer-events-none absolute -inset-8">
          <div class="absolute -inset-10 rounded-full bg-gradient-to-r from-transparent via-gray-400/20 to-transparent blur-xl opacity-50 animate-spin [animation-duration:12s]"></div>
          <div class="absolute -inset-20 rounded-full bg-gradient-to-r from-transparent via-gray-500/15 to-transparent blur-2xl opacity-30 animate-spin [animation-duration:22s] [animation-direction:reverse]"></div>
        </div>

        <!-- Top: Brand + Copy -->
        <div class="relative">
          <div class="flex items-center justify-between mb-10">
            <div class="inline-flex items-center gap-2">
              <div class="h-8 w-8 rounded-md bg-white/5 ring-1 ring-white/15 flex items-center justify-center text-white tracking-tight text-sm font-semibold">AL</div>
              <span class="text-xs text-gray-400">Access Layer</span>
            </div>
            <div class="flex items-center gap-2 text-xs text-gray-400">
              <span class="h-2 w-2 rounded-full bg-emerald-400/80 shadow-[0_0_0_2px_rgba(16,185,129,0.2)]"></span>
              <span>Systems nominal</span>
            </div>
          </div>

          <h1 class="text-3xl lg:text-4xl font-semibold tracking-tight text-white leading-tight mb-3">Welcome back</h1>
          <p class="text-sm text-gray-400 max-w-md">Sign in to continue where you left off. Your projects, activity, and preferences are synced across devices.</p>

          <div class="mt-8 space-y-4">
            <div class="flex items-start gap-3">
              <svg class="h-4 w-4 text-gray-300 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <circle cx="12" cy="12" r="4" class=""></circle>
                <path d="M12 2v2" class=""></path>
                <path d="M12 20v2" class=""></path>
                <path d="m4.93 4.93 1.41 1.41" class=""></path>
                <path d="m17.66 17.66 1.41 1.41" class=""></path>
                <path d="M2 12h2" class=""></path>
                <path d="M20 12h2" class=""></path>
                <path d="m6.34 17.66-1.41 1.41" class=""></path>
                <path d="m19.07 4.93-1.41 1.41" class=""></path>
              </svg>
              <div class="">
                <p class="text-sm font-medium text-white">Fast, focused, familiar</p>
                <p class="text-xs text-gray-500 mt-0.5">Minimal UI with power features when you need them.</p>
              </div>
            </div>
            <div class="flex items-start gap-3">
              <svg class="h-4 w-4 text-gray-300 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" class=""></path>
              </svg>
              <div class="">
                <p class="text-sm font-medium text-white">End-to-end protected</p>
                <p class="text-xs text-gray-500 mt-0.5">Sessions are encrypted and monitored for anomalies.</p>
              </div>
            </div>
            <div class="flex items-start gap-3">
              <svg class="h-4 w-4 text-gray-300 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" class=""></path>
                <rect x="2" y="6" width="14" height="12" rx="2" class=""></rect>
              </svg>
              <div class="">
                <p class="text-sm font-medium text-white">SSO and device sync</p>
                <p class="text-xs text-gray-500 mt-0.5">Use your identity provider or email with 2FA.</p>
              </div>
            </div>
          </div>
        </div>

        <!-- Bottom: Mini profile highlight -->
        <div class="relative mt-10">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3d6616d3-af5c-4d9d-aaae-996c30cf428c_800w.jpg" alt="Profile" class="w-9 h-9 rounded-full object-cover ring-2 ring-gray-500/30 shadow">
            <div class="min-w-0">
              <p class="text-sm font-medium text-white truncate">Alex Morgan</p>
              <p class="text-xs text-gray-500">Design · Since 2021</p>
            </div>
            <div class="ml-auto inline-flex items-center gap-2 text-xs text-gray-400">
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path d="m9 18 6-6-6-6" class=""></path>
              </svg>
              <span>Go to dashboard</span>
            </div>
          </div>
          <div class="mt-4 rounded-lg bg-white/5 ring-1 ring-white/10 p-3 flex items-center justify-between">
            <div class="flex items-center gap-3">
              <div class="h-8 w-8 rounded-md bg-emerald-500/10 ring-1 ring-emerald-500/20 flex items-center justify-center text-emerald-400">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                  <path d="m5 12 5 5L20 7" class=""></path>
                </svg>
              </div>
              <div class="text-xs">
                <p class="text-gray-300">2FA enabled</p>
                <p class="text-gray-500">Last active 2h ago</p>
              </div>
            </div>
            <div class="text-[10px] text-gray-400">v3.8.2</div>
          </div>
        </div>
      </section>