Brand Welcome Panel

<section class="group relative overflow-hidden rounded-2xl ring-1 ring-white/10 p-8 flex flex-col justify-between bg-gray-900" style="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%);">
  <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>
  <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"></circle>
          <path d="M12 2v2"></path>
          <path d="M12 20v2"></path>
          <path d="m4.93 4.93 1.41 1.41"></path>
          <path d="m17.66 17.66 1.41 1.41"></path>
          <path d="M2 12h2"></path>
          <path d="M20 12h2"></path>
          <path d="m6.34 17.66-1.41 1.41"></path>
          <path d="m19.07 4.93-1.41 1.41"></path>
        </svg>
        <div>
          <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"></path>
        </svg>
        <div>
          <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"></path>
          <rect x="2" y="6" width="14" height="12" rx="2"></rect>
        </svg>
        <div>
          <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>
  <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"></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"></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>