AI Analytics Dashboard UI Console

<div class="[animation:fadeSlideIn_0.8s_ease-out_0.7s_both] w-full mt-14">
  <div
    class="sm:pr-4 sm:pl-4 bg-gradient-to-br from-black/10 to-black/0 max-w-5xl rounded-3xl mr-auto ml-auto pt-4 pr-2 pb-4 pl-2 relative shadow-[0_24px_80px_rgba(0,0,0,0.8)] backdrop-blur space-y-4"
    style=" position: relative; --border-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0)); --border-radius-before: 24px; mask-image: linear-gradient(180deg, transparent, black 0%, black 80%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 80%, transparent);">
    <!-- Window header -->
    <div class="flex bg-slate-900/80 rounded-2xl px-4 py-3 items-center justify-between">
      <div class="flex items-center space-x-2">
        <span class="h-2.5 w-2.5 rounded-full bg-red-400/80"></span>
        <span class="h-2.5 w-2.5 rounded-full bg-amber-300/80"></span>
        <span class="h-2.5 w-2.5 rounded-full bg-sky-400/80"></span>
        <span class="ml-3 text-[11px] font-medium tracking-tight text-slate-300" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                  Mira Growth Console
                </span>
      </div>
      <div class="flex items-center gap-2 text-slate-400">
        <button class="flex h-6 w-6 items-center justify-center rounded-full bg-slate-800/80">
                  <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="sun-medium" class="lucide lucide-sun-medium h-3 w-3"><circle cx="12" cy="12" r="4" class=""></circle><path d="M12 3v1" class=""></path><path d="M12 20v1" class=""></path><path d="M3 12h1" class=""></path><path d="M20 12h1" class=""></path><path d="m18.364 5.636-.707.707" class=""></path><path d="m6.343 17.657-.707.707" class=""></path><path d="m5.636 5.636.707.707" class=""></path><path d="m17.657 17.657.707.707" class=""></path></svg>
                </button>
        <button class="flex h-6 w-6 items-center justify-center rounded-full bg-slate-800/80">
                  <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-3 w-3"><path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></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" class=""></path></svg>
                </button>
      </div>
    </div>

    <!-- Main dashboard area -->
    <div class="grid gap-4 rounded-2xl bg-slate-900/70 p-2 sm:p-4 lg:grid-cols-5">
      <!-- Left (chart + stats) -->
      <div class="space-y-4 rounded-2xl bg-slate-950/80 p-3 sm:p-4 lg:col-span-3">
        <div class="flex items-center justify-between">
          <div class="">
            <h2 class="text-sm font-medium tracking-tight text-slate-100"
              style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
              Client Engagement Over Time
            </h2>
            <p class="mt-1 text-[11px] text-slate-400"
              style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
              Monitor weekly performance and spot inflection points
              instantly.
            </p>
          </div>
          <button class="inline-flex items-center gap-1 rounded-full bg-slate-800/80 px-3 py-1 text-[10px] font-medium text-slate-100">
                    <span class="h-1.5 w-1.5 rounded-full bg-sky-400"></span>
                    Live
                  </button>
        </div>

        <!-- Chart container -->
        <div class="mt-3 rounded-2xl bg-gradient-to-b from-sky-500/10 via-sky-400/5 to-slate-950/80 p-3">
          <div class="relative h-52 w-full">
            <div class="h-full w-full">
              <canvas id="engagementChart" width="1027" height="416"
                style="display: block; box-sizing: border-box; height: 208px; width: 513.6px;" class=""></canvas>
            </div>
          </div>
        </div>

        <!-- Stats row -->
        <div class="grid gap-3 sm:grid-cols-3">
          <div class="rounded-xl border border-white/5 bg-slate-950/70 p-3">
            <p class="text-[11px] text-slate-400"
              style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
              Total Clients
            </p>
            <p class="mt-1 text-lg font-medium tracking-tight text-slate-50"
              style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
              248
            </p>
            <p class="mt-1 inline-flex items-center rounded-full bg-sky-500/10 px-2 py-0.5 text-[10px] text-sky-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="trending-up" class="lucide lucide-trending-up mr-1 h-3 w-3">
                <path d="M16 7h6v6" class=""></path>
                <path d="m22 7-8.5 8.5-5-5L2 17" class=""></path>
              </svg>
              +12%
            </p>
          </div>
          <div class="rounded-xl border border-white/5 bg-slate-950/70 p-3">
            <p class="text-[11px] text-slate-400"
              style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
              Active Projects
            </p>
            <p class="mt-1 text-lg font-medium tracking-tight text-slate-50"
              style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
              42
            </p>
            <p class="mt-1 inline-flex items-center rounded-full bg-sky-500/10 px-2 py-0.5 text-[10px] text-sky-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="sparkles" class="lucide lucide-sparkles mr-1 h-3 w-3">
                <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"
                  class=""></path>
                <path d="M20 2v4" class=""></path>
                <path d="M22 4h-4" class=""></path>
                <circle cx="4" cy="20" r="2" class=""></circle>
              </svg>
              +5%
            </p>
          </div>
          <div class="rounded-xl border border-white/5 bg-slate-950/70 p-3">
            <p class="text-[11px] text-slate-400"
              style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
              Retention Rate
            </p>
            <p class="mt-1 text-lg font-medium tracking-tight text-slate-50"
              style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
              94.5%
            </p>
            <p class="mt-1 inline-flex items-center rounded-full bg-sky-500/10 px-2 py-0.5 text-[10px] text-sky-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="arrow-up-right" class="lucide lucide-arrow-up-right mr-1 h-3 w-3">
                <path d="M7 7h10v10" class=""></path>
                <path d="M7 17 17 7" class=""></path>
              </svg>
              +23%
            </p>
          </div>
        </div>
      </div>

      <!-- Right (donut + AI assistant) -->
      <div class="space-y-4 lg:col-span-2">
        <!-- Distribution -->
        <div class="rounded-2xl bg-slate-950/80 p-4">
          <div class="flex items-center justify-between">
            <div class="">
              <h3 class="text-sm font-medium tracking-tight text-slate-100"
                style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                Client Distribution
              </h3>
              <p class="mt-1 text-[11px] text-slate-400"
                style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                By revenue segment
              </p>
            </div>
            <p class="rounded-full bg-slate-900/80 px-2 py-0.5 text-[10px] text-slate-300">
              50% Growth
            </p>
          </div>
          <div class="mt-4 flex items-center gap-4">
            <div class="relative h-28 w-28">
              <div class="h-full w-full">
                <canvas id="distributionChart" width="224" height="224"
                  style="display: block; box-sizing: border-box; height: 112px; width: 112px;" class=""></canvas>
              </div>
            </div>
            <div class="space-y-2 text-[11px] text-slate-300"
              style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
              <div class="flex items-center gap-2">
                <span class="h-1.5 w-4 rounded-full bg-sky-400"></span>
                <span class="flex-1 text-slate-300">Enterprise</span>
                <span class="text-slate-400">45%</span>
              </div>
              <div class="flex items-center gap-2">
                <span class="h-1.5 w-4 rounded-full bg-blue-400"></span>
                <span class="flex-1 text-slate-300">SMB</span>
                <span class="text-slate-400">35%</span>
              </div>
              <div class="flex items-center gap-2">
                <span class="h-1.5 w-4 rounded-full bg-slate-600"></span>
                <span class="flex-1 text-slate-300">Startups</span>
                <span class="text-slate-400">20%</span>
              </div>
            </div>
          </div>
        </div>

        <!-- AI Assistant panel -->
        <div class="bg-gradient-to-br from-slate-950 via-sky-950/70 to-blue-900/60 rounded-2xl pt-4 pr-4 pb-4 pl-4">
          <div class="flex items-center justify-between">
            <div class="">
              <h3 class="text-sm font-medium tracking-tight text-slate-50"
                style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                AI Expansion Assistant
              </h3>
              <p class="mt-1 text-[11px] text-slate-300">
                Instant recommendations for your next move.
              </p>
            </div>
            <button class="flex h-6 w-6 items-center justify-center rounded-full bg-slate-900/70 text-slate-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="maximize-2" class="lucide lucide-maximize-2 h-3 w-3"><path d="M15 3h6v6" class=""></path><path d="m21 3-7 7" class=""></path><path d="m3 21 7-7" class=""></path><path d="M9 21H3v-6" class=""></path></svg>
                    </button>
          </div>

          <div class="mt-4 grid gap-3 text-[11px] sm:grid-cols-2"
            style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
            <button class="flex items-center justify-between rounded-xl bg-slate-950/60 px-3 py-2 text-left text-slate-100 hover:bg-slate-900/70">
                      <span class="">Show most engaged clients</span>
                      <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="radar" class="lucide lucide-radar ml-2 h-3.5 w-3.5 text-sky-300"><path d="M19.07 4.93A10 10 0 0 0 6.99 3.34" class=""></path><path d="M4 6h.01" class=""></path><path d="M2.29 9.62A10 10 0 1 0 21.31 8.35" class=""></path><path d="M16.24 7.76A6 6 0 1 0 8.23 16.67" class=""></path><path d="M12 18h.01" class=""></path><path d="M17.99 11.66A6 6 0 0 1 15.77 16.67" class=""></path><circle cx="12" cy="12" r="2" class=""></circle><path d="m13.41 10.59 5.66-5.66" class=""></path></svg>
                    </button>
            <button class="flex items-center justify-between rounded-xl bg-slate-950/60 px-3 py-2 text-left text-slate-100 hover:bg-slate-900/70">
                      <span class="">Identify at-risk accounts</span>
                      <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="alert-circle" class="lucide lucide-alert-circle ml-2 h-3.5 w-3.5 text-amber-300"><circle cx="12" cy="12" r="10" class=""></circle><line x1="12" x2="12" y1="8" y2="12" class=""></line><line x1="12" x2="12.01" y1="16" y2="16" class=""></line></svg>
                    </button>
            <button class="flex items-center justify-between rounded-xl bg-slate-950/60 px-3 py-2 text-left text-slate-100 hover:bg-slate-900/70">
                      <span class="">Surface growth plays</span>
                      <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 ml-2 h-3.5 w-3.5 text-sky-300"><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" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
                    </button>
            <button class="flex items-center justify-between rounded-xl bg-slate-950/60 px-3 py-2 text-left text-slate-100 hover:bg-slate-900/70">
                      <span>Forecast next quarter</span>
                      <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="line-chart" class="lucide lucide-line-chart ml-2 h-3.5 w-3.5 text-sky-300"><path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path><path d="m19 9-5 5-4-4-3 3" class=""></path></svg>
                    </button>
          </div>

          <div class="mt-4 flex items-center rounded-full bg-slate-950/70 px-3 py-1.5">
            <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 mr-2 h-3.5 w-3.5 text-sky-300">
              <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"
                class=""></path>
              <path d="M20 2v4" class=""></path>
              <path d="M22 4h-4" class=""></path>
              <circle cx="4" cy="20" r="2" class=""></circle>
            </svg>
            <input class="flex-1 bg-transparent text-[11px] text-slate-100 placeholder:text-slate-500 focus:outline-none" placeholder="Ask anything about your client expansion pipeline...">
            <button class="ml-2 flex h-6 w-6 items-center justify-center rounded-full bg-gradient-to-r from-sky-400 to-blue-500">
                      <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="arrow-up-right" class="lucide lucide-arrow-up-right h-3 w-3 text-slate-950"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
                    </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Hero image hint -->
  </div>
</div>