Animated Project Management Dashboard (Tailwind)

<div class="relative w-full animate-blur-in animate-delay-1000 animated mt-16">
            <!-- Outer glow ring -->
            <div class="pointer-events-none absolute inset-x-0 -top-6 mx-auto h-40 max-w-5xl rounded-full bg-gradient-to-r from-fuchsia-500/25 via-violet-500/35 to-indigo-500/25 blur-2xl"></div>

            <div class="app-preview-container relative mx-auto max-w-7xl rounded-2xl border border-white/10 bg-gradient-to-b from-white/[0.08] via-white/[0.04] to-white/[0.02] p-3 sm:p-4 shadow-[0_30px_120px_-20px_rgba(139,92,246,0.45)] backdrop-blur-2xl supports-[backdrop-filter]:bg-white/[0.03]" style="transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0px);">
              <!-- Custom cursor -->
              <div class="custom-cursor" style="opacity: 0; left: 1195.72px; top: 901.483px;"></div>

              <!-- Window header - Layer 1 (Top) -->
              <div class="parallax-layer-1 window-header flex items-center justify-between rounded-xl border border-white/15 bg-white/[0.08] px-3 py-2.5 backdrop-blur-xl supports-[backdrop-filter]:bg-white/[0.06]">
                <div class="flex items-center gap-2 float-element float-1" style="transform: translate(0px, 0px);">
                  <span class="h-2.5 w-2.5 rounded-full bg-red-500/70"></span>
                  <span class="h-2.5 w-2.5 rounded-full bg-yellow-500/70"></span>
                  <span class="h-2.5 w-2.5 rounded-full bg-emerald-500/70"></span>
                </div>
                <div class="flex items-center gap-2 w-full max-w-md mx-4 float-element float-2" style="transform: translate(0px, 0px);">
                  <div class="relative flex-1">
                    <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="search" class="lucide lucide-search pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-white/40"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>
                    <input class="w-full rounded-lg border border-white/15 bg-white/[0.08] py-2.5 pl-10 pr-4 text-sm text-white/90 placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-violet-500/40 focus:border-violet-500/30 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05]" placeholder="Search projects, docs, people...">
                  </div>
                  <button class="hidden sm:inline-flex items-center gap-1.5 rounded-lg border border-white/15 bg-white/[0.08] px-3 py-2.5 text-sm text-white/80 hover:bg-white/[0.12] transition-colors backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05]">
                    <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="sparkles" class="lucide lucide-sparkles h-4 w-4 text-violet-400"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>
                    <span>Ask AI</span>
                  </button>
                </div>
                <div class="flex items-center gap-2 float-element float-3" style="transform: translate(0px, 0px);">
                  <button class="hidden lg:inline-flex h-8 w-8 items-center justify-center rounded-lg border border-white/15 bg-white/[0.08] text-white/70 hover:bg-white/[0.12] backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05]">
                    <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="bell" class="lucide lucide-bell h-4 w-4"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>
                  </button>
                  <div class="flex -space-x-2">
                    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4d745c35-5c89-45ed-821c-ffaca58883fb_320w.jpg" class="h-7 w-7 rounded-full ring-2 ring-white/20 object-cover" alt="User">
                    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/794112a2-89b3-41cb-9c68-582e6af6132f_800w.jpg" class="h-7 w-7 rounded-full ring-2 ring-white/20 object-cover" alt="User">
                    <span class="flex h-7 w-7 items-center justify-center rounded-full bg-violet-600/20 ring-2 ring-white/20 text-xs text-white/80">+3</span>
                  </div>
                </div>
              </div>

              <!-- Content area -->
              <div class="mt-4 grid grid-cols-1 lg:grid-cols-12 gap-3 sm:gap-4">
                <!-- Sidebar - Layer 4 (Furthest) -->
                <aside class="parallax-layer-4 sidebar lg:col-span-3 rounded-xl border border-white/15 bg-white/[0.08] p-3 sm:p-4 space-y-4 backdrop-blur-xl supports-[backdrop-filter]:bg-white/[0.06]">
                  <!-- Workspace switcher -->
                  <div class="flex items-center justify-between pb-3 border-b border-white/15 float-element float-1" style="transform: translate(0px, 0px);">
                    <div class="flex items-center gap-2">
                      <div class="h-7 w-7 rounded-lg bg-gradient-to-br from-violet-500 to-fuchsia-600 flex items-center justify-center">
                        <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="building-2" class="lucide lucide-building-2 h-4 w-4 text-white"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"></path><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"></path><path d="M10 6h4"></path><path d="M10 10h4"></path><path d="M10 14h4"></path><path d="M10 18h4"></path></svg>
                      </div>
                      <div>
                        <div class="text-sm font-medium">Acme Corp</div>
                        <div class="text-xs text-white/50">Pro Plan</div>
                      </div>
                    </div>
                    <button class="h-6 w-6 flex items-center justify-center rounded text-white/70 hover:text-white">
                      <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="chevron-down" class="lucide lucide-chevron-down h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>
                    </button>
                  </div>

                  <!-- Navigation -->
                  <nav class="space-y-1">
                    <a href="#" class="group flex items-center justify-between rounded-lg px-3 py-2.5 text-sm text-white/90 bg-white/[0.12] ring-1 ring-white/15 backdrop-blur-sm float-element float-2" style="transform: translate(0px, 0px);">
                      <span class="inline-flex items-center gap-3">
                        <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="layout-dashboard" class="lucide lucide-layout-dashboard h-4 w-4 text-violet-300"><rect width="7" height="9" x="3" y="3" rx="1"></rect><rect width="7" height="5" x="14" y="3" rx="1"></rect><rect width="7" height="9" x="14" y="12" rx="1"></rect><rect width="7" height="5" x="3" y="16" rx="1"></rect></svg>
                        Dashboard
                      </span>
                    </a>
                    <a href="#" class="group flex items-center justify-between rounded-lg px-3 py-2.5 text-sm text-white/70 hover:text-white hover:bg-white/[0.08] transition-colors backdrop-blur-sm float-element float-3" style="transform: translate(0px, 0px);">
                      <span class="inline-flex items-center gap-3">
                        <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="folder" class="lucide lucide-folder h-4 w-4 text-white/50"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path></svg>
                        Projects
                      </span>
                      <span class="text-xs text-white/40 bg-white/15 px-2 py-1 rounded-full backdrop-blur-sm">12</span>
                    </a>
                    <a href="#" class="group flex items-center justify-between rounded-lg px-3 py-2.5 text-sm text-white/70 hover:text-white hover:bg-white/[0.08] transition-colors backdrop-blur-sm">
                      <span class="inline-flex items-center gap-3">
                        <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="users" class="lucide lucide-users h-4 w-4 text-white/50"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg>
                        Team
                      </span>
                      <span class="flex h-2 w-2">
                        <span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-emerald-400 opacity-75 animated"></span>
                        <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                      </span>
                    </a>
                    <a href="#" class="group flex items-center justify-between rounded-lg px-3 py-2.5 text-sm text-white/70 hover:text-white hover:bg-white/[0.08] transition-colors backdrop-blur-sm">
                      <span class="inline-flex items-center gap-3">
                        <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="calendar" class="lucide lucide-calendar h-4 w-4 text-white/50"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>
                        Calendar
                      </span>
                    </a>
                    <a href="#" class="group flex items-center justify-between rounded-lg px-3 py-2.5 text-sm text-white/70 hover:text-white hover:bg-white/[0.08] transition-colors backdrop-blur-sm">
                      <span class="inline-flex items-center gap-3">
                        <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="file-text" class="lucide lucide-file-text h-4 w-4 text-white/50"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>
                        Documents
                      </span>
                      <span class="text-xs text-white/40 bg-white/15 px-2 py-1 rounded-full backdrop-blur-sm">24</span>
                    </a>
                    <a href="#" class="group flex items-center justify-between rounded-lg px-3 py-2.5 text-sm text-white/70 hover:text-white hover:bg-white/[0.08] transition-colors backdrop-blur-sm">
                      <span class="inline-flex items-center gap-3">
                        <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="bar-chart-3" class="lucide lucide-bar-chart-3 h-4 w-4 text-white/50"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg>
                        Analytics
                      </span>
                    </a>
                  </nav>

                  <!-- Recent files -->
                  <div class="pt-3 border-t border-white/15">
                    <div class="text-xs text-white/50 mb-3 uppercase tracking-wider">Recent</div>
                    <div class="space-y-2">
                      <a href="#" class="flex items-center gap-2 rounded-lg px-2 py-2 text-sm text-white/70 hover:text-white hover:bg-white/[0.08] backdrop-blur-sm float-element float-4" style="transform: translate(0px, 0px);">
                        <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="file" class="lucide lucide-file h-4 w-4 text-blue-400"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path></svg>
                        <span class="truncate">Q4 Strategy.pdf</span>
                      </a>
                      <a href="#" class="flex items-center gap-2 rounded-lg px-2 py-2 text-sm text-white/70 hover:text-white hover:bg-white/[0.08] backdrop-blur-sm">
                        <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="presentation" class="lucide lucide-presentation h-4 w-4 text-orange-400"><path d="M2 3h20"></path><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"></path><path d="m7 21 5-5 5 5"></path></svg>
                        <span class="truncate">Brand Redesign</span>
                      </a>
                    </div>
                  </div>
                </aside>

                <!-- Main content - Layer 2 (Second highest) -->
                <main class="parallax-layer-2 main-content lg:col-span-6 rounded-xl border border-white/15 bg-white/[0.08] p-4 sm:p-6 backdrop-blur-xl supports-[backdrop-filter]:bg-white/[0.06]">
                  <!-- Header -->
                  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 float-element float-1" style="transform: translate(0px, 0px);">
                    <div class="">
                      <div class="flex items-center gap-2 text-sm text-white/60">
                        <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="clock" class="lucide lucide-clock h-4 w-4"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>
                        <span>Updated <span id="last-updated">2 minutes ago</span></span>
                      </div>
                      <h3 class="mt-2 text-xl sm:text-2xl font-semibold tracking-tight">Mobile App Redesign</h3>
                      <div class="mt-2 flex items-center gap-4">
                        <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-500/20 px-2.5 py-1 text-xs text-emerald-300 backdrop-blur-sm">
                          <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="play" class="lucide lucide-play h-3 w-3"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
                          In Progress
                        </span>
                        <span class="text-sm text-white/60">Due Dec 15</span>
                      </div>
                    </div>
                    <div class="flex items-center gap-2">
                      <button class="inline-flex items-center gap-2 rounded-lg border border-white/15 bg-white/[0.08] px-3 py-2 text-sm text-white/80 hover:bg-white/[0.12] backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05] transition-all duration-200 hover:scale-105">
                        <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="share" class="lucide lucide-share h-4 w-4"><path d="M12 2v13"></path><path d="m16 6-4-4-4 4"></path><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path></svg>
                        <span class="hidden sm:inline">Share</span>
                      </button>
                      <button id="new-task-btn" class="inline-flex items-center gap-2 rounded-lg bg-violet-600 px-3 py-2 text-sm font-medium text-white hover:bg-violet-500 transition-all duration-200 hover:scale-105">
                        <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="plus" class="lucide lucide-plus h-4 w-4"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                        <span class="hidden sm:inline">New task</span>
                      </button>
                    </div>
                  </div>

                  <!-- Interactive Progress bar -->
                  <div class="mt-6 float-element float-2" style="transform: translate(0px, 0px);">
                    <div class="flex items-center justify-between text-sm mb-2">
                      <span class="text-white/70">Project Progress</span>
                      <span class="text-white/90"><span id="progress-value">68</span>%</span>
                    </div>
                    <div class="h-2 bg-white/15 rounded-full overflow-hidden backdrop-blur-sm cursor-pointer" id="progress-bar">
                      <div class="h-full bg-gradient-to-r from-violet-500 to-fuchsia-500 rounded-full transition-all duration-500" id="progress-fill" style="width: 68%"></div>
                    </div>
                  </div>

                  <!-- Interactive Task List -->
                  <div class="mt-6 space-y-3">
                    <div class="flex items-center justify-between float-element float-3" style="transform: translate(0px, 0px);">
                      <h4 class="text-sm font-medium text-white/90">Tasks (<span id="task-count">5</span>)</h4>
                      <div class="flex items-center gap-2 text-xs text-white/60">
                        <span id="completed-count">2</span> completed
                      </div>
                    </div>
                    <div class="space-y-2 float-element float-4" id="task-list" style="transform: translate(0px, 0px);">
                      <!-- Task items with enhanced floating effects -->
                      <div class="task-item flex items-center gap-3 rounded-lg border border-white/15 bg-white/[0.08] p-3 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05]">
                        <input type="checkbox" class="task-checkbox h-4 w-4 rounded border-2 border-white/30 bg-white/10 text-violet-500 focus:ring-violet-500/30 checked:bg-violet-500 checked:border-violet-500" checked="">
                        <div class="task-content flex-1 min-w-0 opacity-60">
                          <p class="text-sm text-white/90 line-through">Complete user research interviews</p>
                          <div class="mt-1 flex items-center gap-4 text-xs text-white/60">
                            <span>Sarah Chen</span>
                            <span class="">Completed 3 hours ago</span>
                          </div>
                        </div>
                        <button class="opacity-0 group-hover:opacity-100 text-white/50 hover:text-red-400 transition-all duration-200">
                          <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="trash-2" class="lucide lucide-trash-2 h-4 w-4"><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                        </button>
                      </div>

                      <div class="task-item flex items-center gap-3 rounded-lg border border-white/15 bg-white/[0.08] p-3 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05]">
                        <input type="checkbox" class="task-checkbox h-4 w-4 rounded border-2 border-white/30 bg-white/10 text-violet-500 focus:ring-violet-500/30" checked="">
                        <div class="task-content flex-1 min-w-0 opacity-60">
                          <p class="text-sm text-white/90 line-through">Design system documentation</p>
                          <div class="mt-1 flex items-center gap-4 text-xs text-white/60">
                            <span>Alex Thompson</span>
                            <span>Completed 1 day ago</span>
                          </div>
                        </div>
                      </div>

                      <!-- Active tasks -->
                      <div class="task-item flex items-center gap-3 rounded-lg border border-white/15 bg-white/[0.08] p-3 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05] hover:border-violet-500/30 group">
                        <input type="checkbox" class="task-checkbox h-4 w-4 rounded border-2 border-white/30 bg-white/10 text-violet-500 focus:ring-violet-500/30">
                        <div class="task-content flex-1 min-w-0">
                          <p class="text-sm text-white/90">Create high-fidelity wireframes</p>
                          <div class="mt-1 flex items-center gap-4 text-xs text-white/60">
                            <span>Maria Garcia</span>
                            <span class="inline-flex items-center gap-1">
                              <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="clock" class="lucide lucide-clock h-3 w-3"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>
                              Due tomorrow
                            </span>
                          </div>
                        </div>
                        <div class="flex items-center gap-2">
                          <span class="inline-flex items-center gap-1 rounded-full bg-orange-500/20 px-2 py-1 text-xs text-orange-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="flame" class="lucide lucide-flame h-3 w-3"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg>
                            High Priority
                          </span>
                        </div>
                      </div>

                      <div class="task-item flex items-center gap-3 rounded-lg border border-white/15 bg-white/[0.08] p-3 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05] hover:border-violet-500/30 group">
                        <input type="checkbox" class="task-checkbox h-4 w-4 rounded border-2 border-white/30 bg-white/10 text-violet-500 focus:ring-violet-500/30">
                        <div class="task-content flex-1 min-w-0">
                          <p class="text-sm text-white/90">Prototype user flow testing</p>
                          <div class="mt-1 flex items-center gap-4 text-xs text-white/60">
                            <span>Development Team</span>
                            <span>Due Dec 12</span>
                          </div>
                        </div>
                      </div>

                      <div class="task-item flex items-center gap-3 rounded-lg border border-white/15 bg-white/[0.08] p-3 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05] hover:border-violet-500/30 group">
                        <input type="checkbox" class="task-checkbox h-4 w-4 rounded border-2 border-white/30 bg-white/10 text-violet-500 focus:ring-violet-500/30">
                        <div class="task-content flex-1 min-w-0">
                          <p class="text-sm text-white/90">Accessibility audit and fixes</p>
                          <div class="mt-1 flex items-center gap-4 text-xs text-white/60">
                            <span>QA Team</span>
                            <span>Due Dec 18</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- Enhanced AI Assistant with typing animation -->
                  <div class="mt-6 rounded-xl border border-violet-500/20 bg-gradient-to-br from-violet-500/10 to-fuchsia-500/10 p-4 backdrop-blur-sm float-element float-1" style="transform: translate(0px, 0px);">
                    <div class="flex items-center gap-2 text-sm text-violet-300 mb-3">
                      <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="brain" class="lucide lucide-brain h-4 w-4"><path d="M12 18V5"></path><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"></path><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"></path><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77"></path><path d="M18 18a4 4 0 0 0 2-7.464"></path><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"></path><path d="M6 18a4 4 0 0 1-2-7.464"></path><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77"></path></svg>
                      AI Assistant
                      <span class="inline-flex h-2 w-2">
                        <span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-violet-400 opacity-75 animated"></span>
                        <span class="relative inline-flex rounded-full h-2 w-2 bg-violet-500"></span>
                      </span>
                    </div>
                    <div id="ai-suggestions" class="">
                      <p class="text-sm text-white/90">"Based on your timeline, I recommend scheduling user testing sessions by December 10th to stay on track."</p>
                    </div>
                    <div class="mt-3 flex gap-2">
                      <button id="schedule-sessions-btn" class="text-xs bg-white/15 hover:bg-white/20 px-3 py-1.5 rounded-full text-white/80 backdrop-blur-sm transition-all duration-200 hover:scale-105">Schedule sessions</button>
                      <button id="ask-ai-btn" class="text-xs bg-violet-600/20 hover:bg-violet-600/30 px-3 py-1.5 rounded-full text-violet-300 backdrop-blur-sm transition-all duration-200 hover:scale-105">Ask AI</button>
                      <button id="dismiss-suggestion-btn" class="text-xs text-white/60 hover:text-white/80 transition-colors duration-200">Dismiss</button>
                    </div>
                  </div>
                </main>

                <!-- Right sidebar - Layer 3 -->
                <aside class="parallax-layer-3 right-sidebar lg:col-span-3 space-y-4">
                  <!-- Team members -->
                  <div class="rounded-xl border border-white/15 bg-white/[0.08] p-4 backdrop-blur-xl supports-[backdrop-filter]:bg-white/[0.06] float-element float-1" style="transform: translate(0px, 0px);">
                    <div class="flex items-center justify-between mb-4">
                      <h4 class="text-sm font-medium text-white/90">Team Members</h4>
                      <button class="text-white/60 hover:text-white transition-all duration-200 hover:scale-110">
                        <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-plus" class="lucide lucide-user-plus h-4 w-4"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><line x1="19" x2="19" y1="8" y2="14"></line><line x1="22" x2="16" y1="11" y2="11"></line></svg>
                      </button>
                    </div>
                    <div class="space-y-3">
                      <div class="flex items-center gap-3 hover:bg-white/5 rounded-lg p-2 -m-2 transition-colors cursor-pointer" style="transform: translateX(0px); transition: transform 0.2s;">
                        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2911b4b5-c0c3-445a-a157-93edee63f9af_320w.jpg" class="h-8 w-8 rounded-full object-cover" alt="User" style="">
                        <div class="flex-1 min-w-0">
                          <div class="text-sm text-white/90">Alex Thompson</div>
                          <div class="text-xs text-white/60">Product Designer</div>
                        </div>
                        <div class="flex h-2 w-2">
                          <div class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-emerald-400 opacity-75 animated"></div>
                          <div class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></div>
                        </div>
                      </div>
                      <div class="flex items-center gap-3 hover:bg-white/5 rounded-lg p-2 -m-2 transition-colors cursor-pointer">
                        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a923c29b-fee0-4c67-9737-34ddbce2dc31_320w.jpg" class="h-8 w-8 rounded-full object-cover" alt="User" style="transition: outline 0.1s ease-in-out;">
                        <div class="flex-1 min-w-0">
                          <div class="text-sm text-white/90">Sarah Chen</div>
                          <div class="text-xs text-white/60">UX Researcher</div>
                        </div>
                        <div class="h-2 w-2 rounded-full bg-white/30"></div>
                      </div>
                      <div class="flex items-center gap-3 hover:bg-white/5 rounded-lg p-2 -m-2 transition-colors cursor-pointer" style="transform: translateX(0px);">
                        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/94f325d2-00ce-48ec-9c3d-a87ff77bb836_320w.jpg" class="h-8 w-8 rounded-full object-cover" alt="User" style="">
                        <div class="flex-1 min-w-0">
                          <div class="text-sm text-white/90">Maria Garcia</div>
                          <div class="text-xs text-white/60">Frontend Dev</div>
                        </div>
                        <div class="flex h-2 w-2">
                          <div class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-emerald-400 opacity-75 animated"></div>
                          <div class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- Mini calendar -->
                  <div class="rounded-xl border border-white/15 bg-white/[0.08] p-4 backdrop-blur-xl supports-[backdrop-filter]:bg-white/[0.06] float-element float-2" style="transform: translate(0px, 0px);">
                    <div class="flex items-center justify-between mb-4">
                      <div class="">
                        <div class="text-sm text-white/90 font-medium">December 2024</div>
                        <div class="text-xs text-white/60">3 upcoming deadlines</div>
                      </div>
                      <div class="flex items-center gap-1">
                        <button class="h-6 w-6 flex items-center justify-center rounded border border-white/15 bg-white/[0.08] text-white/70 hover:bg-white/[0.12] backdrop-blur-sm transition-all duration-200 hover:scale-105">
                          <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="chevron-left" class="lucide lucide-chevron-left h-3 w-3"><path d="m15 18-6-6 6-6"></path></svg>
                        </button>
                        <button class="h-6 w-6 flex items-center justify-center rounded border border-white/15 bg-white/[0.08] text-white/70 hover:bg-white/[0.12] backdrop-blur-sm transition-all duration-200 hover:scale-105">
                          <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="chevron-right" class="lucide lucide-chevron-right h-3 w-3"><path d="m9 18 6-6-6-6"></path></svg>
                        </button>
                      </div>
                    </div>

                    <!-- Calendar grid -->
                    <div class="grid grid-cols-7 gap-1 text-center text-xs text-white/50 mb-2">
                      <span>Mo</span><span>Tu</span><span>We</span><span class="">Th</span><span>Fr</span><span>Sa</span><span>Su</span>
                    </div>
                    <div class="grid grid-cols-7 gap-1 text-sm">
                      <span class="h-6 flex items-center justify-center text-white/30">25</span>
                      <span class="h-6 flex items-center justify-center text-white/30">26</span>
                      <span class="h-6 flex items-center justify-center text-white/30">27</span>
                      <span class="h-6 flex items-center justify-center text-white/30">28</span>
                      <span class="h-6 flex items-center justify-center text-white/30">29</span>
                      <span class="h-6 flex items-center justify-center text-white/30">30</span>
                      <span class="h-6 flex items-center justify-center">1</span>
                      
                      <span class="h-6 flex items-center justify-center">2</span>
                      <span class="h-6 flex items-center justify-center">3</span>
                      <span class="h-6 flex items-center justify-center">4</span>
                      <span class="h-6 flex items-center justify-center">5</span>
                      <span class="h-6 flex items-center justify-center">6</span>
                      <span class="h-6 flex items-center justify-center">7</span>
                      <span class="h-6 flex items-center justify-center rounded-full bg-violet-600/30 text-violet-200 cursor-pointer hover:bg-violet-600/40 transition-colors">8</span>
                      
                      <span class="h-6 flex items-center justify-center">9</span>
                      <span class="h-6 flex items-center justify-center">10</span>
                      <span class="h-6 flex items-center justify-center">11</span>
                      <span class="h-6 flex items-center justify-center">12</span>
                      <span class="h-6 flex items-center justify-center">13</span>
                      <span class="h-6 flex items-center justify-center">14</span>
                      <span class="h-6 flex items-center justify-center rounded-full bg-orange-500/20 text-orange-300 cursor-pointer hover:bg-orange-500/30 transition-colors">15</span>
                      
                      <span class="h-6 flex items-center justify-center">16</span>
                      <span class="h-6 flex items-center justify-center">17</span>
                      <span class="h-6 flex items-center justify-center">18</span>
                      <span class="h-6 flex items-center justify-center">19</span>
                      <span class="h-6 flex items-center justify-center rounded-full bg-emerald-500/20 text-emerald-300 cursor-pointer hover:bg-emerald-500/30 transition-colors">20</span>
                      <span class="h-6 flex items-center justify-center">21</span>
                      <span class="h-6 flex items-center justify-center">22</span>
                      
                      <span class="h-6 flex items-center justify-center">23</span>
                      <span class="h-6 flex items-center justify-center">24</span>
                      <span class="h-6 flex items-center justify-center">25</span>
                      <span class="h-6 flex items-center justify-center">26</span>
                      <span class="h-6 flex items-center justify-center">27</span>
                      <span class="h-6 flex items-center justify-center">28</span>
                      <span class="h-6 flex items-center justify-center">29</span>
                    </div>
                  </div>

                  <!-- Quick actions -->
                  <div class="rounded-xl border border-white/15 bg-white/[0.08] p-4 backdrop-blur-xl supports-[backdrop-filter]:bg-white/[0.06] float-element float-3" style="transform: translate(0px, 0px);">
                    <h4 class="text-sm font-medium text-white/90 mb-3">Quick Actions</h4>
                    <div class="space-y-2">
                      <button class="w-full flex items-center gap-3 rounded-lg border border-white/15 bg-white/[0.08] px-3 py-2.5 text-sm text-white/80 hover:bg-white/[0.12] transition-all duration-200 hover:scale-105 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05]">
                        <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="video" class="lucide lucide-video h-4 w-4 text-blue-400"><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>
                        Start meeting
                      </button>
                      <button class="w-full flex items-center gap-3 rounded-lg border border-white/15 bg-white/[0.08] px-3 py-2.5 text-sm text-white/80 hover:bg-white/[0.12] transition-all duration-200 hover:scale-105 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05]">
                        <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="file-plus" class="lucide lucide-file-plus h-4 w-4 text-violet-400"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M9 15h6"></path><path d="M12 18v-6"></path></svg>
                        Create document
                      </button>
                      <button class="w-full flex items-center gap-3 rounded-lg border border-white/15 bg-white/[0.08] px-3 py-2.5 text-sm text-white/80 hover:bg-white/[0.12] transition-all duration-200 hover:scale-105 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05]">
                        <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="message-square" class="lucide lucide-message-square h-4 w-4 text-emerald-400"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg>
                        Send message
                      </button>
                    </div>
                  </div>
                </aside>
              </div>
            </div>
          </div>