Wallet Dashboard Layout with Sidebar & Stats

<div
  class="border-gradient before:rounded-[28px] [animation:fadeSlideIn_0.5s_ease-in-out_0.05s_both] xl:bg-neutral-900/80 bg-neutral-900/40 rounded-[28px] mr-auto ml-auto shadow-[0_20px_120px_-20px_rgba(0,0,0,0.7)] backdrop-blur-xl"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(3) &gt; section:nth-of-type(1) &gt; div:nth-of-type(1) &gt; div:nth-of-type(3) &gt; div:nth-of-type(1)">
  <!-- Desktop chrome -->
  <div
    class="flex sm:px-6 [animation:fadeSlideIn_0.5s_ease-in-out_0.1s_both] border-white/5 border-b pt-3 pr-4 pb-3 pl-4 items-center justify-between"
    data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(3) &gt; section:nth-of-type(1) &gt; div:nth-of-type(1) &gt; div:nth-of-type(3) &gt; div:nth-of-type(1) &gt; div:nth-of-type(1)">
    <div class="flex gap-3 items-center [animation:fadeSlideIn_0.5s_ease-in-out_0.15s_both]">
      <div class="flex gap-2 items-center">
        <span class="h-3.5 w-3.5 rounded-full bg-red-500/90"></span>
        <span class="h-3.5 w-3.5 rounded-full bg-amber-400/90"></span>
        <span class="h-3.5 w-3.5 rounded-full bg-emerald-500/90"></span>
      </div>
      <div class="inline-flex items-center gap-2 px-3">
        <span class="text-xl font-semibold tracking-tight text-white font-geist">Wallet</span>
        <span class="text-xs text-white/40 font-geist">Desktop</span>
      </div>
    </div>

    <!-- Top actions -->
    <div class="flex items-center gap-2 sm:gap-3 [animation:fadeSlideIn_0.5s_ease-in-out_0.2s_both]">
      <div class="hidden md:flex items-center gap-2">
        <button class="inline-flex gap-2 border-gradient before:rounded-lg hover:bg-white/10 text-sm text-slate-300 bg-white/5 rounded-lg pt-1.5 pr-3 pb-1.5 pl-3 gap-x-2 gap-y-2 items-center font-geist">
          <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="w-4 h-4"><path d="M12 2v20M2 12h20" class=""></path></svg>
          New Transaction
        </button>
      </div>
      <button class="inline-flex border-gradient before:rounded-lg hover:bg-white/10 bg-white/5 rounded-lg pt-2 pr-2 pb-2 pl-2 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="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-slate-300"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
      </button>
    </div>
  </div>

  <!-- Content grid -->
  <div class="grid grid-cols-12">
    <!-- Sidebar -->
    <aside class="col-span-12 md:col-span-3 lg:col-span-3 border-white/5 border-r">
      <div class="p-4 sm:p-6">
        <div class="mb-6 [animation:fadeSlideIn_0.5s_ease-in-out_0.25s_both]">
          <div class="flex items-center gap-3 mb-4">
            <img class="h-10 w-10 rounded-lg object-cover border-gradient before:rounded-lg" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9bf583f7-9a93-46c4-bb0a-4effddb01c86_320w.webp" alt="profile">
            <div class="">
              <p class="text-sm font-semibold text-white font-geist">Alex Chen</p>
              <p class="text-xs text-slate-400 font-geist">Premium Account</p>
            </div>
          </div>
        </div>

        <nav class="space-y-6">
          <div class="[animation:fadeSlideIn_0.5s_ease-in-out_0.3s_both]">
            <p class="mb-2 text-xs uppercase tracking-wider text-slate-400 font-geist">Overview</p>
            <ul class="space-y-1">
              <li class="">
                <a href="#"
                  class="group flex items-center gap-3 text-sm text-white bg-white/10 rounded-lg pt-2 pr-3 pb-2 pl-3 font-geist">
                  <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="w-4 h-4">
                    <rect width="7" height="9" x="3" y="3" rx="1" class=""></rect>
                    <rect width="7" height="5" x="14" y="3" rx="1" class=""></rect>
                    <rect width="7" height="9" x="14" y="12" rx="1" class=""></rect>
                    <rect width="7" height="5" x="3" y="16" rx="1" class=""></rect>
                  </svg>
                  Dashboard
                </a>
              </li>
              <li class="">
                <a href="#"
                  class="group flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5 font-geist">
                  <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="w-4 h-4 text-slate-400 group-hover:text-slate-200">
                    <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>
                  Accounts
                </a>
              </li>
              <li class="">
                <a href="#"
                  class="group flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5 font-geist">
                  <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="w-4 h-4 text-slate-400 group-hover:text-slate-200">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
                    <polyline points="7 10 12 15 17 10" class=""></polyline>
                    <line x1="12" x2="12" y1="15" y2="3" class=""></line>
                  </svg>
                  Transactions
                </a>
              </li>
            </ul>
          </div>

          <div class="[animation:fadeSlideIn_0.5s_ease-in-out_0.35s_both]">
            <p class="mb-2 text-xs uppercase tracking-wider text-slate-400 font-geist">Tools</p>
            <ul class="space-y-1">
              <li class="">
                <a href="#"
                  class="group flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5 font-geist">
                  <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="w-4 h-4 text-slate-400 group-hover:text-slate-200">
                    <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" class=""></path>
                    <path d="M3 5v14a2 2 0 0 0 2 2h16v-5" class=""></path>
                    <path d="M18 12a2 2 0 0 0 0 4h4v-4Z" class=""></path>
                  </svg>
                  Cards
                </a>
              </li>
              <li class="">
                <a href="#"
                  class="group flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5 font-geist">
                  <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="w-4 h-4 text-slate-400 group-hover:text-slate-200">
                    <line x1="12" y1="1" x2="12" y2="23" 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>
                  Transfers
                </a>
              </li>
              <li class="">
                <a href="#"
                  class="group flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5 font-geist">
                  <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="w-4 h-4 text-slate-400 group-hover:text-slate-200">
                    <line x1="18" x2="18" y1="20" y2="10" class=""></line>
                    <line x1="12" x2="12" y1="20" y2="4" class=""></line>
                    <line x1="6" x2="6" y1="20" y2="14" class=""></line>
                  </svg>
                  Analytics
                </a>
              </li>
            </ul>
          </div>

          <div class="[animation:fadeSlideIn_0.5s_ease-in-out_0.4s_both]">
            <p class="mb-2 text-xs uppercase tracking-wider text-slate-400 font-geist">Quick Access</p>
            <div class="grid grid-cols-2 gap-2">
              <div class="rounded-lg border-gradient before:rounded-lg bg-white/5 p-3 text-center">
                <p class="text-xl font-semibold text-white font-geist">$12,450</p>
                <p class="text-xs text-slate-400 font-geist">Balance</p>
              </div>
              <div class="rounded-lg border-gradient before:rounded-lg bg-white/5 p-3 text-center">
                <p class="text-xl font-semibold text-emerald-300 font-geist">+$420</p>
                <p class="text-xs text-slate-400 font-geist">This month</p>
              </div>
            </div>
          </div>

          <div class="space-y-1 [animation:fadeSlideIn_0.5s_ease-in-out_0.45s_both]">
            <a href="#"
              class="group flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5 font-geist">
              <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="w-4 h-4 text-slate-400 group-hover:text-slate-200">
                <path
                  d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
                  class=""></path>
                <circle cx="12" cy="12" r="3" class=""></circle>
              </svg>
              Settings
            </a>
            <a href="#"
              class="group flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5 font-geist">
              <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="w-4 h-4 text-slate-400 group-hover:text-slate-200">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" class=""></path>
                <path d="M12 17h.01" class=""></path>
              </svg>
              Help &amp; Support
            </a>
          </div>
        </nav>
      </div>
    </aside>

    <!-- Main content -->
    <section class="col-span-12 md:col-span-9 lg:col-span-9 relative">
      <div class="relative h-full min-h-[720px] flex flex-col">
        <!-- Content area -->
        <div class="flex-1 sm:px-8 overflow-y-auto pt-8 pr-4 pb-8 pl-4 space-y-6">
          <!-- Header -->
          <div class="[animation:fadeSlideIn_0.5s_ease-in-out_0.5s_both]">
            <h2 class="text-2xl text-white mb-1 font-geist tracking-tighter" style="">Welcome back, Alex</h2>
            <p class="text-sm text-slate-400 font-geist">Here's what's happening with your accounts today.</p>
          </div>

          <!-- Stats cards -->
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 [animation:fadeSlideIn_0.5s_ease-in-out_0.55s_both]">
            <div class="rounded-xl border-gradient before:rounded-xl bg-white/5 p-4 backdrop-blur-sm">
              <div class="flex items-center justify-between mb-2">
                <p class="text-xs text-slate-400 uppercase tracking-wider font-geist">Total Balance</p>
                <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="w-4 h-4 text-emerald-400">
                  <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" class=""></path>
                  <path d="M3 5v14a2 2 0 0 0 2 2h16v-5" class=""></path>
                  <path d="M18 12a2 2 0 0 0 0 4h4v-4Z" class=""></path>
                </svg>
              </div>
              <p class="text-2xl text-white mb-1 font-geist tracking-tighter" style="">$24,850.42</p>
              <div class="flex items-center gap-1 text-xs">
                <span class="text-emerald-400 font-geist">+12.5%</span>
                <span class="text-slate-500 font-geist">vs last month</span>
              </div>
            </div>

            <div class="rounded-xl border-gradient before:rounded-xl bg-white/5 p-4 backdrop-blur-sm">
              <div class="flex items-center justify-between mb-2">
                <p class="text-xs text-slate-400 uppercase tracking-wider font-geist">Spending</p>
                <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="w-4 h-4 text-orange-400">
                  <path d="M3 3v18h18" class=""></path>
                  <path d="m19 9-5 5-4-4-3 3" class=""></path>
                </svg>
              </div>
              <p class="text-2xl text-white mb-1 font-geist tracking-tighter" style="">$3,249.18</p>
              <div class="flex items-center gap-1 text-xs">
                <span class="text-orange-400 font-geist">-8.2%</span>
                <span class="text-slate-500 font-geist">vs last month</span>
              </div>
            </div>

            <div class="border-gradient before:rounded-xl bg-white/5 rounded-xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-sm">
              <div class="flex items-center justify-between mb-2">
                <p class="text-xs text-slate-400 uppercase tracking-wider font-geist">Savings Goal</p>
                <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="w-4 h-4 text-blue-400">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="M12 16v-4" class=""></path>
                  <path d="M12 8h.01" class=""></path>
                </svg>
              </div>
              <p class="text-2xl text-white mb-1 font-geist tracking-tighter" style="">68%</p>
              <div class="w-full bg-white/10 rounded-full h-1.5 mt-2">
                <div class="bg-gradient-to-r from-orange-300 to-orange-400 h-1.5 rounded-full" style="width: 68%"></div>
              </div>
            </div>
          </div>

          <!-- Recent transactions -->
          <div class="[animation:fadeSlideIn_0.5s_ease-in-out_0.6s_both]">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-white font-geist">Recent Transactions</h3>
              <button class="text-sm text-slate-400 hover:text-white transition font-geist">View all</button>
            </div>

            <div class="space-y-2">
              <div
                class="border-gradient before:rounded-lg flex bg-white/5 rounded-lg pt-4 pr-4 pb-4 pl-4 backdrop-blur-sm items-center justify-between">
                <div class="flex items-center gap-3">
                  <div class="h-10 w-10 rounded-lg bg-emerald-500/20 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="1.5" stroke-linecap="round" stroke-linejoin="round"
                      class="w-5 h-5 text-emerald-400">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
                      <polyline points="17 8 12 3 7 8" class=""></polyline>
                      <line x1="12" x2="12" y1="3" y2="15" class=""></line>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium text-white font-geist">Salary Deposit</p>
                    <p class="text-xs text-slate-400 font-geist">Today, 9:24 AM</p>
                  </div>
                </div>
                <p class="text-base font-semibold text-emerald-400 font-geist">+$4,250.00</p>
              </div>

              <div
                class="rounded-lg border-gradient before:rounded-lg bg-white/5 p-4 backdrop-blur-sm flex items-center justify-between">
                <div class="flex items-center gap-3">
                  <div class="h-10 w-10 rounded-lg bg-orange-500/20 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="1.5" stroke-linecap="round" stroke-linejoin="round"
                      class="w-5 h-5 text-orange-400">
                      <path d="M3 3v18h18" class=""></path>
                      <rect width="4" height="7" x="7" y="10" rx="1" class=""></rect>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium text-white font-geist">Amazon Purchase</p>
                    <p class="text-xs text-slate-400 font-geist">Yesterday, 3:42 PM</p>
                  </div>
                </div>
                <p class="text-base font-semibold text-white font-geist">-$84.99</p>
              </div>

              <div
                class="rounded-lg border-gradient before:rounded-lg bg-white/5 p-4 backdrop-blur-sm flex items-center justify-between">
                <div class="flex items-center gap-3">
                  <div class="h-10 w-10 rounded-lg bg-blue-500/20 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="1.5" stroke-linecap="round" stroke-linejoin="round"
                      class="w-5 h-5 text-blue-400">
                      <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" class=""></path>
                      <path d="M3 5v14a2 2 0 0 0 2 2h16v-5" class=""></path>
                      <path d="M18 12a2 2 0 0 0 0 4h4v-4Z" class=""></path>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium text-white font-geist">Netflix Subscription</p>
                    <p class="text-xs text-slate-400 font-geist">Dec 28, 2024</p>
                  </div>
                </div>
                <p class="text-base font-semibold text-white font-geist">-$15.99</p>
              </div>
            </div>
          </div>

          <!-- Quick actions -->
          <div class="[animation:fadeSlideIn_0.5s_ease-in-out_0.65s_both]">
            <h3 class="text-lg font-semibold text-white mb-4 font-geist">Quick Actions</h3>
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
              <button class="border-gradient before:rounded-lg hover:bg-white/10 transition bg-white/5 rounded-lg pt-4 pr-4 pb-4 pl-4 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="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-slate-300 mx-auto mb-2"><line x1="12" y1="1" x2="12" y2="23" 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>
                <p class="text-xs text-slate-300 font-geist">Send Money</p>
              </button>
              <button class="border-gradient before:rounded-lg hover:bg-white/10 transition bg-white/5 rounded-lg pt-4 pr-4 pb-4 pl-4 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="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-slate-300 mx-auto mb-2"><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" class=""></path><path d="M3 5v14a2 2 0 0 0 2 2h16v-5" class=""></path><path d="M18 12a2 2 0 0 0 0 4h4v-4Z" class=""></path></svg>
                <p class="text-xs text-slate-300 font-geist">Pay Bills</p>
              </button>
              <button class="rounded-lg border-gradient before:rounded-lg bg-white/5 p-4 backdrop-blur-sm hover:bg-white/10 transition">
                <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="w-6 h-6 text-slate-300 mx-auto mb-2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><polyline points="7 10 12 15 17 10" class=""></polyline><line x1="12" x2="12" y1="15" y2="3" class=""></line></svg>
                <p class="text-xs text-slate-300 font-geist">Deposit</p>
              </button>
              <button class="border-gradient before:rounded-lg hover:bg-white/10 transition bg-white/5 rounded-lg pt-4 pr-4 pb-4 pl-4 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="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-slate-300 mx-auto mb-2"><line x1="18" x2="18" y1="20" y2="10" class=""></line><line x1="12" x2="12" y1="20" y2="4" class=""></line><line x1="6" x2="6" y1="20" y2="14" class=""></line></svg>
                <p class="text-xs text-slate-300 font-geist">Analytics</p>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>