Workspace Dashboard Card with List & Preview

<section class="ring-1 ring-white/5 bg-white/5 border-white/10 border rounded-3xl shadow-2xl backdrop-blur-md">
        <div class="grid grid-cols-1 gap-6 sm:grid-cols-[1.1fr_1fr] sm:gap-8 sm:p-8 pt-6 pr-6 pb-6 pl-6">
          <!-- Left Panel -->
          <div class="relative rounded-2xl border border-white/10 bg-white/5 p-5 ring-1 ring-white/5">
            <div class="flex items-center gap-3 text-neutral-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="list" class="lucide lucide-list h-4 w-4"><path d="M3 12h.01"></path><path d="M3 18h.01"></path><path d="M3 6h.01"></path><path d="M8 12h13"></path><path d="M8 18h13"></path><path d="M8 6h13"></path></svg>
              <span class="text-sm font-medium">All workspaces</span>
            </div>

            <div class="mt-4 flex items-center gap-3 text-neutral-400">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="user" class="lucide lucide-user h-4 w-4"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
              <span class="text-sm font-normal">My workspaces</span>
            </div>

            <div class="my-5 h-px w-full bg-white/10"></div>

            <div class="rounded-xl border border-white/10 bg-white/5 p-4">
              <div class="flex items-center gap-3">
                <div class="flex h-8 w-8 items-center justify-center rounded-full bg-white/10 ring-1 ring-white/10">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="rocket" class="lucide lucide-rocket h-4 w-4 text-white/90"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path></svg>
                </div>
                <div>
                  <div class="text-sm font-medium">Nebula Co.</div>
                  <div class="text-xs text-neutral-400">Team</div>
                </div>
              </div>

              <div class="mt-4 space-y-2">
                <div class="rounded-lg border border-white/10 bg-white/5 p-3">
                  <div class="flex items-center gap-3">
                    <span class="inline-flex h-1.5 w-1.5 rounded-full bg-neutral-400/80"></span>
                    <span class="text-sm font-medium text-white">Platform Core</span>
                  </div>
                </div>
                <div class="rounded-lg border border-white/10 p-3">
                  <div class="flex items-center gap-3 text-neutral-300">
                    <span class="inline-flex h-1.5 w-1.5 rounded-full bg-neutral-500/60"></span>
                    <span class="text-sm font-normal">Brand Studio</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Right Panel (subtle placeholders to echo the design) -->
          <div class="relative hidden min-h-[280px] select-none sm:block">
            <div class="absolute inset-0 rounded-2xl border border-white/10 bg-white/5 ring-1 ring-white/5"></div>

            <div class="absolute left-5 right-5 top-5 grid grid-cols-1 gap-3 opacity-60">
              <div class="h-20 rounded-xl border border-white/10 bg-white/5"></div>
              <div class="h-20 rounded-xl border border-white/10 bg-white/5"></div>
              <div class="h-20 rounded-xl border border-white/10 bg-white/5"></div>
            </div>

            <div class="absolute inset-0 bg-gradient-to-t from-neutral-950/60 to-transparent rounded-2xl">
  <div class="absolute inset-x-0 bottom-0 p-5 sm:p-6">
    <div class="flex items-center justify-between gap-4">
      <div class="min-w-0">
        <h3 class="text-sm font-semibold tracking-tight text-white">Platform Core</h3>
        <p class="mt-1 truncate text-xs text-neutral-300">12 active projects · 48 members</p>
      </div>
      <button class="inline-flex items-center gap-1.5 rounded-lg bg-white/10 px-3 py-1.5 text-xs font-medium text-white ring-1 ring-white/10 hover:bg-white/15">
        <span class="">Open</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
      </button>
    </div>
  </div>
</div>
          </div>
        </div>

        <div class="border-t border-white/10 px-6 py-6 sm:px-8 sm:py-8">
          <h2 class="text-3xl font-semibold tracking-tight">Workspaces Per Company</h2>
          <p class="mt-2 max-w-2xl text-sm leading-relaxed text-neutral-400">
            Keep teams focused by organizing initiatives into multiple workspaces for each company. Create dedicated spaces for platform work, brand efforts, research, and more.
          </p>
        </div>
      </section>