Analytics Dashboard Card with Charts & Stats

<article class="lg:col-span-2 group relative overflow-hidden transition-all duration-300 hover:shadow-2xl bg-zinc-900/50 border-white/10 border rounded-2xl backdrop-blur-sm edit-mode-selected max-w-xl">
        <div class="sm:p-8 pt-6 pr-6 pb-6 pl-6" id="aura-emeqydw1p">
          <!-- Illustration -->
          <div class="relative h-64 sm:h-80 rounded-xl bg-gradient-to-br from-zinc-900/90 to-zinc-950/90 ring-1 ring-inset ring-white/5 mb-6">
            <!-- Main Dashboard -->
            <div class="absolute inset-4 rounded-lg bg-zinc-950/90 backdrop-blur border border-white/10">
              <!-- Header -->
              <div class="flex items-center justify-between px-4 py-3 border-b border-white/10">
                <div class="flex items-center gap-3">
                  <span class="h-2 w-2 rounded-full bg-red-500/60"></span>
                  <span class="h-2 w-2 rounded-full bg-yellow-500/60"></span>
                  <span class="h-2 w-2 rounded-full bg-green-500/60"></span>
                </div>
                <span class="text-xs text-zinc-400 font-sans">Insight Engine</span>
              </div>
              
              <!-- Content Grid -->
              <div class="grid grid-cols-12 gap-3 p-4 h-full">
                <!-- Velocity Chart -->
                <div class="col-span-8 bg-white/5 rounded-lg p-3 border border-white/5">
                  <div class="flex items-center justify-between mb-3">
                    <span class="text-xs text-zinc-300 font-medium">Team Velocity</span>
                    <span class="text-xs text-emerald-400">↗ +23%</span>
                  </div>
                  <svg viewBox="0 0 200 60" class="w-full h-12 text-zinc-700">
                    <defs>
                      
                    </defs>
                    <path d="M 0 50 Q 25 45 50 40 T 100 25 T 150 20 T 200 15" stroke="#10B981" stroke-width="2" fill="none" stroke-linecap="round"></path>
                    <path d="M 0 50 Q 25 45 50 40 T 100 25 T 150 20 T 200 15 L 200 60 L 0 60 Z" fill="url(#velocityGradient)"></path>
                  </svg>
                </div>

                <!-- Stats -->
                <div class="col-span-4 space-y-2">
                  <div class="bg-white/5 rounded-lg p-3 border border-white/5">
                    <div class="text-xs text-zinc-400 mb-1">Active Issues</div>
                    <div class="text-lg font-semibold text-white">127</div>
                  </div>
                  <div class="bg-white/5 rounded-lg p-3 border border-white/5">
                    <div class="text-xs text-zinc-400 mb-1">Cycle Time</div>
                    <div class="text-lg font-semibold text-emerald-400">2.4d</div>
                  </div>
                </div>

                <!-- Progress Bars -->
                <div class="col-span-12 space-y-2">
                  <div class="flex items-center gap-3">
                    <span class="text-xs text-zinc-400 w-20">Frontend</span>
                    <div class="flex-1 bg-zinc-800 rounded-full h-1.5">
                      <div class="bg-blue-500 h-1.5 rounded-full w-3/4"></div>
                    </div>
                    <span class="text-xs text-blue-400">75%</span>
                  </div>
                  <div class="flex items-center gap-3">
                    <span class="text-xs text-zinc-400 w-20">Backend</span>
                    <div class="flex-1 bg-zinc-800 rounded-full h-1.5">
                      <div class="bg-emerald-500 h-1.5 rounded-full w-4/5"></div>
                    </div>
                    <span class="text-xs text-emerald-400">80%</span>
                  </div>
                  <div class="flex items-center gap-3">
                    <span class="text-xs text-zinc-400 w-20">Design</span>
                    <div class="flex-1 bg-zinc-800 rounded-full h-1.5">
                      <div class="bg-purple-500 h-1.5 rounded-full w-1/2"></div>
                    </div>
                    <span class="text-xs text-purple-400">50%</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- Floating notifications -->
            <div class="absolute top-6 right-6 w-48 space-y-2">
              <div class="bg-zinc-900/95 border border-emerald-500/30 rounded-lg p-2 backdrop-blur">
                <div class="flex items-center gap-2">
                  <div class="h-2 w-2 bg-emerald-500 rounded-full"></div>
                  <span class="text-xs text-emerald-300">Deploy completed</span>
                </div>
              </div>
              <div class="bg-zinc-900/95 border border-blue-500/30 rounded-lg p-2 backdrop-blur">
                <div class="flex items-center gap-2">
                  <div class="h-2 w-2 bg-blue-500 rounded-full"></div>
                  <span class="text-xs text-blue-300">PR merged</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Content -->
          <div class="">
            <div class="flex items-center gap-3 mb-4">
              
              <h3 class="sm:text-3xl text-2xl font-normal text-white tracking-tight font-geist">Advanced Analytics</h3>
            </div>
            <p class="text-zinc-300 text-base leading-relaxed font-sans">Get deep insights into your team's performance with automated metrics, cycle time analysis, and predictive forecasting to optimize your workflow.</p>
            <div class="mt-6">
              <a href="#" class="inline-flex items-center gap-2 text-sm font-medium text-white hover:text-zinc-300 transition-colors">
                Explore analytics
                <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" class="h-4 w-4">
                  <path d="M5 12h14"></path>
                  <path d="m12 5 7 7-7 7"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </article>