3D Workspace UI Card with Tasks & AI Suggestion

<section class="lg:w-[48%] w-full relative perspective-distant mx-auto m-8">
  <!-- Outer glow -->
  <div
    class="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-indigo-500/20 blur-[100px] rounded-full -z-10">
  </div>

  <!-- 3D Card Container -->
  <div
    class="relative transform-style-preserve-3d -rotate-y-10 rotate-x-5 hover:-rotate-y-5 hover:rotate-x-0 transition-transform duration-700 ease-out w-full">

    <!-- Main card -->
    <div
      class="font-jakarta bg-[#0A0A0B] rounded-2xl p-1 relative shadow-[0_0_0_1px_rgba(255,255,255,0.08),0_20px_50px_rgba(0,0,0,0.5),0_1px_0_rgba(255,255,255,0.2)_inset]"
      style="">
      <!-- Inner Bezel -->
      <div class="bg-[#0F1012] rounded-xl border border-white/5 overflow-hidden">

        <!-- Window header -->
        <div class="flex items-center justify-between bg-[#141518] px-4 py-3 border-b border-white/5">
          <div class="flex items-center space-x-3">
            <div class="flex space-x-1.5">
              <div class="w-2.5 h-2.5 rounded-full bg-red-500/20 border border-red-500/50"></div>
              <div class="w-2.5 h-2.5 rounded-full bg-amber-500/20 border border-amber-500/50"></div>
              <div class="w-2.5 h-2.5 rounded-full bg-emerald-500/20 border border-emerald-500/50"></div>
            </div>
            <div class="h-4 w-[1px] bg-white/10 mx-2"></div>
            <div class="flex items-center space-x-2 text-xs text-slate-400">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="text-indigo-400">
                <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" class=""></path>
                <polyline points="9 22 9 12 15 12 15 22" class=""></polyline>
              </svg>
              <span class="font-medium text-slate-300">Neuro Workspace</span>
              <span class="text-slate-600">/</span>
              <span>Product Delivery</span>
            </div>
          </div>

          <div class="flex items-center space-x-2">
            <div class="flex -space-x-1.5">
              <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=64&amp;h=64&amp;fit=crop&amp;crop=faces" class="w-5 h-5 rounded-full border border-[#141518]" alt="">
              <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=64&amp;h=64&amp;fit=crop&amp;crop=faces" class="w-5 h-5 rounded-full border border-[#141518]" alt="">
              <div
                class="w-5 h-5 rounded-full bg-slate-800 border border-[#141518] flex items-center justify-center text-[8px] text-slate-400">
                +2</div>
            </div>
            <button class="bg-indigo-500 hover:bg-indigo-400 transition-colors text-white text-[10px] font-medium px-2 py-1 rounded ml-2 shadow-[0_0_10px_rgba(99,102,241,0.3)]">Share</button>
          </div>
        </div>

        <!-- App Content -->
        <div class="bg-[#0A0A0B] p-4 min-h-[380px] relative">
          <!-- Sidebar / Main Layout simulation -->
          <div class="flex gap-4 h-full">

            <!-- Sidebar -->
            <div class="w-48 hidden sm:flex flex-col gap-4 border-r border-white/5 pr-4">
              <div class="space-y-1">
                <div
                  class="px-2 py-1.5 rounded-md bg-white/5 text-xs font-medium text-white flex items-center justify-between cursor-pointer border border-white/5 shadow-sm">
                  <span class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-indigo-400"><rect width="7" height="7" x="3" y="3" rx="1" class=""></rect><rect width="7" height="7" x="14" y="3" rx="1" class=""></rect><rect width="7" height="7" x="14" y="14" rx="1" class=""></rect><rect width="7" height="7" x="3" y="14" rx="1" class=""></rect></svg> Overview</span>
                  <span class="bg-indigo-500/20 text-indigo-300 text-[9px] px-1.5 py-0.5 rounded-full">4</span>
                </div>
                <div
                  class="px-2 py-1.5 rounded-md text-xs font-medium text-slate-500 hover:text-slate-300 cursor-pointer flex items-center gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" class=""></path>
                  </svg> Discussions
                </div>
                <div
                  class="px-2 py-1.5 rounded-md text-xs font-medium text-slate-500 hover:text-slate-300 cursor-pointer flex items-center gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" class=""></path>
                    <polyline points="14 2 14 8 20 8" class=""></polyline>
                    <line x1="16" x2="8" y1="13" y2="13" class=""></line>
                    <line x1="16" x2="8" y1="17" y2="17" class=""></line>
                    <polyline points="10 9 9 9 8 9" class=""></polyline>
                  </svg> Documents
                </div>
              </div>

              <div class="mt-auto space-y-2">
                <div class="h-px w-full bg-white/5"></div>
                <div class="flex items-center gap-2 px-2 py-1 text-[10px] text-slate-600">
                  <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div> System Online
                </div>
              </div>
            </div>

            <!-- Main Feed -->
            <div class="flex-1 space-y-3">

              <!-- AI Suggestion Card -->
              <div
                class="rounded-xl border border-indigo-500/20 bg-gradient-to-br from-indigo-500/10 to-transparent p-3 relative overflow-hidden">
                <div class="absolute top-0 right-0 p-2 opacity-20">
                  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
                    class="text-indigo-400">
                    <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" class=""></path>
                    <path d="M19 10v2a7 7 0 0 1-14 0v-2" class=""></path>
                    <line x1="12" x2="12" y1="19" y2="22" class=""></line>
                  </svg>
                </div>
                <div class="flex items-center gap-2 mb-2">
                  <span class="text-[10px] font-semibold text-indigo-300 uppercase tracking-wider">Neuro Insight</span>
                </div>
                <p class="text-xs text-slate-300 leading-relaxed">
                  Based on recent commits, I've drafted the
                  <span class="text-white font-medium border-b border-indigo-500/50 cursor-pointer">Release Notes</span>
                  for v2.4. Would you like to review?
                </p>
                <div class="mt-3 flex gap-2">
                  <button class="bg-indigo-500 hover:bg-indigo-400 text-white text-[10px] px-2.5 py-1 rounded font-medium transition-colors">Review Draft</button>
                  <button class="bg-white/5 hover:bg-white/10 text-slate-400 text-[10px] px-2.5 py-1 rounded font-medium transition-colors">Dismiss</button>
                </div>
              </div>

              <!-- Task List -->
              <div class="space-y-2 pt-2">
                <div
                  class="flex items-center justify-between text-[10px] text-slate-500 font-medium uppercase tracking-wider mb-1">
                  <span>Active Tasks</span>
                  <span>Due Today</span>
                </div>

                <!-- Task Item 1 -->
                <div
                  class="group flex items-center justify-between p-2 rounded-lg bg-white/[0.02] border border-white/5 hover:bg-white/[0.04] hover:border-white/10 transition-all cursor-pointer">
                  <div class="flex items-center gap-3">
                    <div
                      class="w-4 h-4 rounded border border-slate-600 flex items-center justify-center group-hover:border-indigo-400 transition-colors">
                    </div>
                    <div class="flex flex-col">
                      <span class="text-xs text-slate-200 font-medium">Update Q3 Roadmap</span>
                      <div class="flex items-center gap-1.5 mt-0.5">
                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                          class="text-[#0ACF83]">
                          <path d="M5 12h14" class=""></path>
                          <path d="m12 5 7 7-7 7" class=""></path>
                        </svg>
                        <span class="text-[9px] text-slate-500">Linear • High Priority</span>
                      </div>
                    </div>
                  </div>
                  <div class="flex -space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
                    <div
                      class="w-5 h-5 rounded-full bg-purple-500/20 border border-slate-800 flex items-center justify-center text-[8px] text-purple-300">
                      JD</div>
                  </div>
                </div>

                <!-- Task Item 2 -->
                <div
                  class="group flex items-center justify-between p-2 rounded-lg bg-white/[0.02] border border-white/5 hover:bg-white/[0.04] hover:border-white/10 transition-all cursor-pointer">
                  <div class="flex items-center gap-3">
                    <div
                      class="w-4 h-4 rounded border border-slate-600 flex items-center justify-center group-hover:border-indigo-400 transition-colors">
                    </div>
                    <div class="flex flex-col">
                      <span class="text-xs text-slate-200 font-medium">Review Marketing Copy</span>
                      <div class="flex items-center gap-1.5 mt-0.5">
                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                          class="text-[#4285F4]">
                          <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" class="">
                          </path>
                          <polyline points="14 2 14 8 20 8" class=""></polyline>
                        </svg>
                        <span class="text-[9px] text-slate-500">GDocs • In Progress</span>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Task Item 3 -->
                <div
                  class="group flex items-center justify-between p-2 rounded-lg bg-white/[0.02] border border-white/5 hover:bg-white/[0.04] hover:border-white/10 transition-all cursor-pointer">
                  <div class="flex items-center gap-3">
                    <div
                      class="w-4 h-4 rounded border border-slate-600 flex items-center justify-center group-hover:border-indigo-400 transition-colors">
                      <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                        class="text-indigo-400 opacity-0 group-hover:opacity-100">
                        <polyline points="20 6 9 17 4 12" class=""></polyline>
                      </svg>
                    </div>
                    <div class="flex flex-col">
                      <span class="text-xs text-slate-200 font-medium">Design System Sync</span>
                      <div class="flex items-center gap-1.5 mt-0.5">
                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                          class="text-[#F24E1E]">
                          <path d="M5 12h14" class=""></path>
                          <path d="m12 5 7 7-7 7" class=""></path>
                        </svg>
                        <span class="text-[9px] text-slate-500">Figma • 2pm EST</span>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>

          </div>

          <!-- Bottom Gradient Fade -->
          <div
            class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-[#0A0A0B] to-transparent pointer-events-none">
          </div>
        </div>

      </div>

      <!-- Floating badges/elements around the card for depth -->
      <div
        class="absolute -right-4 top-12 bg-[#1A1B1E] border border-white/10 p-2 rounded-lg shadow-xl transform rotate-6 animate-float hidden lg:block">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 rounded-full bg-green-500"></div>
          <span class="text-[10px] text-slate-300 font-medium">Sync Complete</span>
        </div>
      </div>

    </div>

  </div>
</section>