Gradient Brand Sidebar

<aside class="flex w-64 flex-col gap-4 border-r border-gray-200 bg-white pb-4 dark:border-gray-800 dark:bg-gray-900">
  <!-- White text sits on a fixed dark gradient, so contrast holds regardless of theme. -->
  <div class="bg-gradient-to-br from-indigo-600 to-fuchsia-600 p-4 text-white">
    <span class="grid h-10 w-10 place-items-center rounded-lg bg-white/20 text-lg font-bold" aria-hidden="true">A</span>
    <p class="mt-3 text-base font-bold">Adysre</p>
    <p class="text-sm text-white/80">Workspace</p>
  </div>
  <nav aria-label="Sidebar" class="px-4">
    <ul class="flex flex-col gap-0.5">
      <li>
        <a href="/dashboard" aria-current="page" class="flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 aria-[current=page]:bg-indigo-50 aria-[current=page]:text-indigo-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:aria-[current=page]:bg-indigo-950 dark:aria-[current=page]:text-indigo-200">
          <svg class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>
          Dashboard
        </a>
      </li>
    </ul>
  </nav>
</aside>