Mobile Analytics Dashboard UI Card

<div
  class="flex w-full h-[750px] max-w-5xl mt-32 mr-auto ml-auto relative items-center justify-center scroll-item scroll-blur-in delay-500"
  style="animation-play-state: running">
  <!-- Floating Element: Salary (Top Left) -->
  <div
    class="absolute left-0 lg:left-12 top-20 z-20 hidden md:flex items-center gap-3 p-2.5 pr-4 bg-[#111] border border-white/10 rounded-lg shadow-2xl animate-[bounce_6s_infinite]">
    <div class="w-8 h-8 rounded bg-green-900/30 flex items-center justify-center border border-green-500/20">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        class="lucide lucide-briefcase w-4 h-4 text-green-400">
        <path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" class=""></path>
        <rect width="20" height="14" x="2" y="6" rx="2" class=""></rect>
      </svg>
    </div>
    <span class="text-xs font-medium text-gray-400 font-sans" style="">
            + $4.250 Salary
          </span>
  </div>

  <!-- Floating Element: Holidays (Left Middle) -->
  <div
    class="absolute left-4 lg:-left-4 top-64 z-10 hidden md:flex items-center gap-3 p-2.5 pr-4 bg-[#111] border border-white/10 rounded-lg shadow-2xl animate-[pulse_5s_infinite]">
    <div class="w-8 h-8 rounded bg-red-900/30 flex items-center justify-center border border-red-500/20">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        class="lucide lucide-plane w-4 h-4 text-red-400">
        <path d="M2 12h20" class=""></path>
        <path d="M13 2v20" class=""></path>
        <path d="m9 2 9.5 9.5-2 2.5-9-9.5V2Z" class=""></path>
        <path d="M13 22 3.5 12.5l2-2.5 9 9.5v2.5Z" class=""></path>
      </svg>
    </div>
    <span class="text-xs font-medium text-gray-400 font-sans" style="">
            - $1.200 Holidays
          </span>
  </div>

  <!-- Floating Element: Subscription (Left Bottom - NEW) -->
  <div
    class="absolute left-8 lg:left-0 bottom-48 z-20 hidden md:flex items-center gap-3 p-2.5 pr-4 bg-[#111] border border-white/10 rounded-lg shadow-2xl animate-[bounce_8s_infinite]">
    <div class="w-8 h-8 rounded bg-purple-900/30 flex items-center justify-center border border-purple-500/20">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        class="lucide lucide-tv w-4 h-4 text-purple-400">
        <rect width="20" height="15" x="2" y="7" rx="2" ry="2" class=""></rect>
        <polyline points="17 2 12 7 7 2" class=""></polyline>
      </svg>
    </div>
    <span class="text-xs font-medium text-gray-400 font-sans" style="">
            - $14.99 Netflix
          </span>
  </div>

  <!-- Floating Element: Coffee (Top Right) -->
  <div
    class="absolute right-0 lg:right-24 top-10 z-20 hidden md:flex items-center gap-3 p-2.5 pr-4 bg-[#111] border border-white/10 rounded-lg shadow-2xl animate-[bounce_7s_infinite]">
    <div class="w-8 h-8 rounded bg-teal-900/30 flex items-center justify-center border border-teal-500/20">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        class="lucide lucide-coffee w-4 h-4 text-teal-400">
        <path d="M17 8h1a4 4 0 1 1 0 8h-1" class=""></path>
        <path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z" class=""></path>
        <line x1="6" x2="6" y1="2" y2="4" class=""></line>
        <line x1="10" x2="10" y1="2" y2="4" class=""></line>
        <line x1="14" x2="14" y1="2" y2="4" class=""></line>
      </svg>
    </div>
    <span class="text-xs font-medium text-gray-400 font-sans" style="">
            - $3.99 Coffee
          </span>
  </div>

  <!-- Floating Element: Dividend (Right Middle) -->
  <div
    class="absolute right-4 lg:right-0 top-48 z-10 hidden md:flex items-center gap-3 p-2.5 pr-4 bg-[#111] border border-white/10 rounded-lg shadow-2xl animate-[pulse_4s_infinite]">
    <div class="w-8 h-8 rounded bg-pink-900/30 flex items-center justify-center border border-pink-500/20">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        class="lucide lucide-trending-up w-4 h-4 text-pink-400">
        <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" class=""></polyline>
        <polyline points="16 7 22 7 22 13" class=""></polyline>
      </svg>
    </div>
    <span class="text-xs font-medium text-gray-400 font-sans" style="">
            + $250 Dividend
          </span>
  </div>

  <!-- Floating Element: Portfolio (Right Bottom - NEW) -->
  <div
    class="absolute right-8 lg:-right-4 bottom-32 z-10 hidden md:flex items-center gap-3 p-2.5 pr-4 bg-[#111] border border-white/10 rounded-lg shadow-2xl animate-[pulse_6s_infinite]">
    <div class="w-8 h-8 rounded bg-blue-900/30 flex items-center justify-center border border-blue-500/20">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        class="lucide lucide-pie-chart w-4 h-4 text-blue-400">
        <path d="M21.21 15.89A10 10 0 1 1 8 2.83" class=""></path>
        <path d="M22 12A10 10 0 0 0 12 2v10z" class=""></path>
      </svg>
    </div>
    <span class="text-xs font-medium text-gray-400 font-sans" style="">
            + 12.5% Portfolio
          </span>
  </div>

  <!-- Phone Frame -->
  <div
    class="border-[8px] border-[#222] overflow-hidden flex flex-col min-h-[820px] bg-[#050505] w-full max-w-[380px] max-h-[720px] ring-white/10 ring-1 rounded-[3rem] mr-auto ml-auto relative shadow-2xl">
    <!-- Status Bar -->
    <div class="h-12 w-full flex justify-between items-end px-8 pb-2 z-20 bg-[#050505]">
      <span class="text-[13px] font-semibold text-white tracking-widest font-sans">
              9:41
            </span>
      <div class="flex gap-1.5 items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 16 12" fill="currentColor"
          class="text-white">
          <path
            d="M14.6 2.4C14.2 2 13.5 2 13.1 2.4L8 7.5 2.9 2.4C2.5 2 1.8 2 1.4 2.4C1 2.8 1 3.5 1.4 3.9L7.3 9.8C7.7 10.2 8.3 10.2 8.7 9.8L14.6 3.9C15 3.5 15 2.8 14.6 2.4Z"
            class=""></path>
          <path
            d="M12.4 0.2C12 0.6 12 1.3 12.4 1.7L8 6.1 3.6 1.7C4 1.3 4 0.6 3.6 0.2C3.2 -0.2 2.5 -0.2 2.1 0.2L7.3 5.4C7.7 5.8 8.3 5.8 8.7 5.4L13.9 0.2C13.5 -0.2 12.8 -0.2 12.4 0.2Z"
            class=""></path>
          <path d="M8 8.2C8.4 8.2 8.7 8.5 8.7 8.9C8.7 9.3 8.4 9.6 8 9.6C7.6 9.6 7.3 9.3 7.3 8.9C7.3 8.5 7.6 8.2 8 8.2Z"
            class=""></path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 18 12" fill="currentColor"
          class="text-white">
          <path
            d="M15 2H3C1.3 2 0 3.3 0 5V7C0 8.7 1.3 10 3 10H15C16.7 10 18 8.7 18 7V5C18 3.3 16.7 2 15 2ZM3 3H15C16.1 3 17 3.9 17 5V7C17 8.1 16.1 9 15 9H3C1.9 9 1 8.1 1 7V5C1 3.9 1.9 3 3 3Z"
            class=""></path>
          <path
            d="M11.5 4H6.5C5.7 4 5 4.7 5 5.5V6.5C5 7.3 5.7 8 6.5 8H11.5C12.3 8 13 7.3 13 6.5V5.5C13 4.7 12.3 4 11.5 4Z"
            class=""></path>
        </svg>
        <div class="w-6 h-3 rounded-[4px] border border-white/30 relative ml-0.5 p-0.5">
          <div class="h-full bg-white rounded-[2px] w-full"></div>
        </div>
      </div>
    </div>

    <!-- Header -->
    <div class="px-6 pt-2 pb-4 flex items-center justify-between z-10 bg-[#050505]">
      <h1 class="text-2xl text-white font-oswald font-light tracking-tight">
        Stats
      </h1>
      <div class="flex items-center gap-4">
        <button class="text-white hover:text-gray-300 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell">
                  <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" class=""></path>
                  <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" class=""></path>
                </svg>
              </button>

        <button class="w-9 h-9 rounded-full bg-[#27272A] flex items-center justify-center text-white hover:bg-[#3F3F46] transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus">
                  <path d="M5 12h14" class=""></path>
                  <path d="M12 5v14" class=""></path>
                </svg>
              </button>
      </div>
    </div>

    <!-- Tabs -->

    <!-- Scrollable Content -->
    <!-- Key change: less wasted padding + safe area so bottom nav doesn't cover content -->
    <div class="flex-1 overflow-y-auto no-scrollbar px-5 pb-[120px]">
      <!-- Chart Card -->
      <div
        class="overflow-visible border-white/[0.08] bg-[#101018] border rounded-[2rem] mb-6 pt-5 pr-5 pb-5 pl-5 relative shadow-2xl">
        <style>
          @keyframes bar-grow {
            0% {
              transform: scaleY(0);
              opacity: 0;
            }

            100% {
              transform: scaleY(1);
              opacity: 1;
            }
          }

          @keyframes tooltip-fade {
            0% {
              opacity: 0;
              transform: translateY(5px);
            }

            100% {
              opacity: 1;
              transform: translateY(0);
            }
          }
        </style>

        <div
          class="absolute top-0 right-0 w-full h-full bg-gradient-to-br from-indigo-500/5 via-transparent to-blue-500/5 rounded-[2rem] pointer-events-none">
        </div>

        <div class="flex justify-between items-start mb-8 relative z-10">
          <div>
            <h2 class="text-xl font-semibold text-white tracking-tight font-sans">
              New User
            </h2>
            <p class="text-[13px] text-gray-400 mt-1 font-medium font-sans">
              Last 6 months
            </p>
          </div>
          <div class="flex items-center gap-2 mt-1">
            <div class="w-2.5 h-2.5 rounded-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.8)] animate-pulse"></div>
            <span class="text-[11px] font-medium text-gray-400 font-sans">
                    Overall - 80%
                  </span>
          </div>
        </div>

        <div class="relative h-64 w-full pl-6">
          <div
            class="absolute left-0 top-0 h-full flex flex-col justify-between text-[11px] text-gray-500 font-medium pb-8 pt-2">
            <span class="font-sans">100</span>
            <span class="font-sans">75</span>
            <span class="font-sans">50</span>
            <span class="font-sans">25</span>
            <span class="font-sans">0</span>
          </div>

          <div class="absolute left-8 right-0 top-0 h-full flex flex-col justify-between pb-8 pt-2 pointer-events-none">
            <div class="w-full h-px border-t border-dashed border-white/10"></div>
            <div class="w-full h-px border-t border-dashed border-white/10"></div>
            <div class="w-full h-px border-t border-dashed border-white/10"></div>
            <div class="w-full h-px border-t border-dashed border-white/10"></div>
            <div class="w-full h-px border-t border-dashed border-white/10"></div>
          </div>

          <div class="flex justify-between items-end h-full pl-3 pb-8 relative z-10">
            <!-- Bar 1 -->
            <div class="flex flex-col items-center gap-3 w-1/4 group cursor-pointer relative h-full justify-end">
              <div
                class="bg-[#1A1A24] border border-white/10 rounded-lg py-1.5 px-2.5 mb-1 absolute -top-4 shadow-xl z-20 opacity-0"
                style="animation: tooltip-fade 0.5s ease-out forwards 0.8s;">
                <div class="text-[11px] font-semibold text-white text-center leading-tight font-sans">
                  80%
                  <span class="text-gray-400 font-medium font-sans">
                          46K
                        </span>
                </div>
              </div>
              <div
                class="w-12 h-[75%] bg-gradient-to-b from-[#4F46E5] to-[#4F46E5]/10 rounded-t-lg relative overflow-hidden group-hover:brightness-110 transition-all origin-bottom opacity-0"
                style="animation: bar-grow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.1s;">
                <div class="absolute top-0 left-0 w-full h-[40%] bg-gradient-to-b from-white/10 to-transparent"></div>
              </div>
              <span class="text-[10px] text-gray-400 font-medium whitespace-nowrap absolute -bottom-6 font-sans">
                      App Install
                    </span>
            </div>

            <!-- Bar 2 -->
            <div class="flex flex-col items-center gap-3 w-1/4 group cursor-pointer relative h-full justify-end">
              <div
                class="bg-[#1A1A24] border border-white/10 rounded-lg py-1.5 px-2.5 mb-1 absolute top-[15%] shadow-xl z-20 opacity-0"
                style="animation: tooltip-fade 0.5s ease-out forwards 0.9s;">
                <div class="text-[11px] font-semibold text-white text-center leading-tight font-sans">
                  70%
                  <span class="text-gray-400 font-medium font-sans">
                          41K
                        </span>
                </div>
              </div>
              <div
                class="w-12 h-[60%] bg-gradient-to-b from-[#6366F1] to-[#6366F1]/10 rounded-t-lg relative overflow-hidden group-hover:brightness-110 transition-all origin-bottom opacity-0"
                style="animation: bar-grow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.2s;">
                <div class="absolute top-0 left-0 w-full h-[40%] bg-gradient-to-b from-white/10 to-transparent"></div>
              </div>
              <span class="text-[10px] text-gray-400 font-medium whitespace-nowrap absolute -bottom-6 font-sans">
                      App open
                    </span>
            </div>

            <!-- Bar 3 -->
            <div class="flex flex-col items-center gap-3 w-1/4 group cursor-pointer relative h-full justify-end">
              <div
                class="bg-[#1A1A24] border border-white/10 rounded-lg py-1.5 px-2.5 mb-1 absolute top-[15%] shadow-xl z-20 opacity-0"
                style="animation: tooltip-fade 0.5s ease-out forwards 1.0s;">
                <div class="text-[11px] font-semibold text-white text-center leading-tight font-sans">
                  70%
                  <span class="text-gray-400 font-medium font-sans">
                          41K
                        </span>
                </div>
              </div>
              <div
                class="w-12 h-[60%] bg-gradient-to-b from-[#8B5CF6] to-[#8B5CF6]/10 rounded-t-lg relative overflow-hidden group-hover:brightness-110 transition-all origin-bottom opacity-0"
                style="animation: bar-grow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.3s;">
                <div class="absolute top-0 left-0 w-full h-[40%] bg-gradient-to-b from-white/10 to-transparent"></div>
              </div>
              <span class="text-[10px] text-gray-400 font-medium whitespace-nowrap absolute -bottom-6 font-sans">
                      Sign Up
                    </span>
            </div>

            <!-- Bar 4 -->
            <div class="flex flex-col items-center gap-3 w-1/4 group cursor-pointer relative h-full justify-end">
              <div
                class="bg-[#1A1A24] border border-white/10 rounded-lg py-1.5 px-2.5 mb-1 absolute top-[5%] shadow-xl z-20 opacity-0"
                style="animation: tooltip-fade 0.5s ease-out forwards 1.1s;">
                <div class="text-[11px] font-semibold text-white text-center leading-tight font-sans">
                  78%
                  <span class="text-gray-400 font-medium font-sans">
                          30K
                        </span>
                </div>
              </div>
              <div
                class="w-12 h-[70%] bg-gradient-to-b from-[#8B5CF6] to-[#8B5CF6]/10 rounded-t-lg relative overflow-hidden group-hover:brightness-110 transition-all origin-bottom opacity-0"
                style="animation: bar-grow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.4s;">
                <div class="absolute top-0 left-0 w-full h-[40%] bg-gradient-to-b from-white/10 to-transparent"></div>
              </div>
              <span class="text-[10px] text-gray-400 font-medium whitespace-nowrap absolute -bottom-6 font-sans">
                      Home page
                    </span>
            </div>
          </div>
        </div>

        <div
          class="absolute -bottom-4 left-1/2 -translate-x-1/2 w-[80%] h-8 bg-blue-500/10 blur-xl rounded-full pointer-events-none">
        </div>
      </div>

      <!-- Top Content Card -->
      <div class="border-white/[0.08] bg-[#101018] border rounded-[2rem] pt-5 pr-5 pb-5 pl-5 relative">
        <style>
          @keyframes progress-loop {
            0% {
              width: 0;
              opacity: 0.5;
            }

            40% {
              width: var(--target-width);
              opacity: 1;
            }

            80% {
              width: var(--target-width);
              opacity: 1;
            }

            100% {
              width: var(--target-width);
              opacity: 0;
            }
          }
        </style>
        <div class="flex justify-between items-start mb-6">
          <div class="">
            <h2 class="text-lg font-semibold text-white tracking-tight font-sans">
              Top Content
            </h2>
            <p class="text-[13px] text-gray-400 mt-1 font-medium font-sans">
              Last 14 days
            </p>
          </div>
          <button class="px-4 py-1.5 rounded-full border border-white/10 bg-white/5 text-[11px] font-medium text-gray-300 hover:bg-white/10 hover:text-white transition-colors font-sans">
                  More
                </button>
        </div>

        <div class="flex items-baseline gap-3 mb-8">
          <span class="text-xl font-light text-white tracking-tight font-oswald">
                  $6.295,29
                </span>
          <span class="text-xs text-gray-500 font-medium font-sans">
                  Estimated revenue
                </span>
        </div>

        <div class="space-y-6">
          <div class="flex gap-4 items-start group cursor-pointer">
            <div class="w-12 h-12 rounded-[10px] overflow-hidden bg-gray-800 shrink-0 shadow-lg ring-1 ring-white/5">
              <div
                class="w-full h-full bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-orange-400 via-red-500 to-purple-600 scale-125 group-hover:scale-110 transition-transform duration-500">
              </div>
            </div>
            <div class="flex-1 min-w-0 pt-0.5">
              <div class="flex justify-between items-center mb-2">
                <h3 class="text-sm font-medium text-white truncate pr-2 font-sans">
                  Asset Allocation
                </h3>
                <span class="text-xs font-semibold text-white font-sans">
                        $ 157.49
                      </span>
              </div>
              <div class="w-full h-1.5 bg-[#2A2A35] rounded-full overflow-hidden">
                <div class="h-full bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 rounded-full"
                  style="--target-width: 70%; width: 70%; animation: progress-loop 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;">
                </div>
              </div>
            </div>
          </div>

          <div class="flex gap-4 items-start group cursor-pointer opacity-60 hover:opacity-100 transition-opacity">
            <div class="w-12 h-12 rounded-[10px] overflow-hidden bg-gray-800 shrink-0 shadow-lg ring-1 ring-white/5">
              <div
                class="w-full h-full bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-blue-400 via-indigo-500 to-purple-600 scale-125">
              </div>
            </div>
            <div class="flex-1 min-w-0 pt-0.5">
              <div class="flex justify-between items-center mb-2">
                <h3 class="text-sm font-medium text-white truncate pr-2 font-sans">
                  Build an Interactive site
                </h3>
                <span class="text-xs font-semibold text-white font-sans">
                        $ 157.49
                      </span>
              </div>
              <div class="w-full h-1.5 bg-[#2A2A35] rounded-full overflow-hidden">
                <div class="h-full bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full"
                  style="--target-width: 40%; width: 40%; animation: progress-loop 3s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.2s;">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Bottom Navigation -->
    <div class="absolute bottom-0 w-full h-[90px] z-30 px-4">
      <div
        class="absolute inset-x-0 bottom-0 h-[80px] bg-[#12121A]/95 backdrop-blur-2xl border-t border-white/[0.08] rounded-t-[2.5rem]">
      </div>

      <div class="relative h-full flex items-end justify-between px-2 pb-5">
        <button class="flex flex-col items-center gap-1.5 text-gray-500 hover:text-white transition-colors w-16 group mb-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-grid group-hover:scale-110 transition-transform">
                  <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>
                <span class="text-[10px] font-medium font-sans">Dashboard</span>
              </button>

        <button class="flex flex-col items-center gap-1.5 text-gray-500 hover:text-white transition-colors w-16 group mb-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play-circle group-hover:scale-110 transition-transform">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <polygon points="10 8 16 12 10 16 10 8" class=""></polygon>
                </svg>
                <span class="text-[10px] font-medium font-sans">Content</span>
              </button>

        <div class="relative -top-5 flex flex-col items-center justify-center w-16 group cursor-pointer z-50">
          <div
            class="w-[3.5rem] h-[3.5rem] rounded-full bg-gradient-to-tr from-[#6366F1] to-[#A855F7] flex items-center justify-center shadow-[0_0_25px_rgba(139,92,246,0.5)] border-[5px] border-[#050505] group-hover:scale-105 transition-transform duration-300 ring-1 ring-white/10">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none"
              stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-line-chart">
              <path d="M3 3v18h18" class=""></path>
              <path d="m19 9-5 5-4-4-3 3" class=""></path>
            </svg>
          </div>
          <span class="text-[10px] font-semibold text-white mt-2 drop-shadow-md font-sans">
                  Analytic
                </span>
        </div>

        <button class="flex flex-col items-center gap-1.5 text-gray-500 hover:text-white transition-colors w-16 group mb-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-dollar-sign group-hover:scale-110 transition-transform">
                  <line x1="12" x2="12" y1="2" y2="22" class=""></line>
                  <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path>
                </svg>
                <span class="text-[10px] font-medium font-sans">Revenue</span>
              </button>

        <button class="flex flex-col items-center gap-1.5 text-gray-500 hover:text-white transition-colors w-16 group mb-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users group-hover:scale-110 transition-transform">
                  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
                  <circle cx="9" cy="7" r="4" class=""></circle>
                  <path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path>
                  <path d="M16 3.13a4 4 0 0 1 0 7.75" class=""></path>
                </svg>
                <span class="text-[10px] font-medium font-sans">Community</span>
              </button>
      </div>

      <div
        class="absolute bottom-2 left-1/2 -translate-x-1/2 w-32 h-1 bg-white/20 rounded-full z-40 hover:bg-white/40 transition-colors">
      </div>
    </div>
  </div>

  <!-- Bottom Fade -->
  <div
    class="absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-background to-transparent z-0 pointer-events-none">
  </div>
</div>