Creative Studio Dashboard with Dual Sidebars

<section class="relative sm:px-6 lg:px-8 overflow-hidden lg:overflow-visible max-w-7xl mr-auto ml-auto pr-4 pb-20 pl-4">
  <div class="relative rounded-3xl bg-neutral-950 ring-1 ring-neutral-800 p-2 sm:p-3">
    <!-- subtle space glow -->
    <div class="pointer-events-none absolute inset-0">
      <div
        class="absolute -left-24 top-1/3 w-[520px] h-[520px] rounded-full bg-gradient-to-br from-neutral-800 to-neutral-900 blur-3xl opacity-40">
      </div>
      <div
        class="absolute right-0 top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-neutral-800 to-transparent">
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-3 sm:gap-4 relative">
      <!-- Left Sidebar -->
      <aside class="lg:col-span-3 bg-neutral-900/60 ring-1 ring-neutral-800 rounded-2xl p-4 flex flex-col">
        <div class="flex items-center justify-between">
          <div class="inline-flex items-center gap-2">
            <div
              class="w-6 h-6 rounded-md bg-gradient-to-b from-emerald-500 to-emerald-600 ring-1 ring-emerald-300 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5">
                <path d="m12 2 3 7 7 3-7 3-3 7-3-7-7-3 7-3 3-7z" class=""></path>
              </svg>
            </div>
            <span class="text-white text-sm font-medium tracking-tight">Vibe Studio</span>
          </div>
          <button class="inline-flex items-center justify-center w-8 h-8 rounded-lg hover:bg-neutral-800 transition text-neutral-300 ring-1 ring-neutral-800">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 12h16" class=""></path><path d="M4 6h16" class=""></path><path d="M4 18h16" class=""></path></svg>
          </button>
        </div>

        <div class="mt-4 flex items-center gap-3">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/57ff8f09-a1ef-4c2d-a129-c6e65a08af58_320w.jpg" alt="Avatar" class="w-8 h-8 object-cover ring-neutral-700 ring-1 rounded-full">
          <div>
            <p class="text-white text-sm font-medium tracking-tight">Sarah Mitchell</p>
            <p class="text-neutral-400 text-xs">Creative Director</p>
          </div>
        </div>

        <div class="mt-4">
          <div class="flex items-center gap-2 bg-neutral-900 ring-1 ring-neutral-800 rounded-xl px-3 py-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-400" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5">
              <circle cx="11" cy="11" r="8" class=""></circle>
              <path d="m21 21-4.3-4.3" class=""></path>
            </svg>
            <input type="text" placeholder="Search projects..." class="w-full bg-transparent outline-none text-sm text-neutral-200 placeholder-neutral-500">
          </div>
        </div>

        <div class="mt-6">
          <p class="text-[11px] uppercase tracking-[0.2em] text-neutral-500 mb-2">Navigation</p>
          <nav class="space-y-1">
            <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-neutral-300 hover:bg-neutral-800 transition"
              href="#">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5">
                <rect x="3" y="3" width="7" height="7" rx="1" class=""></rect>
                <rect x="14" y="3" width="7" height="7" rx="1" class=""></rect>
                <rect x="14" y="14" width="7" height="7" rx="1" class=""></rect>
                <rect x="3" y="14" width="7" height="7" rx="1" class=""></rect>
              </svg>
              Overview
            </a>
            <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-neutral-100 bg-neutral-800 ring-1 ring-neutral-700"
              href="#">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-400" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5">
                <path d="M12 2 2 7l10 5 10-5z" class=""></path>
                <path d="m2 17 10 5 10-5" class=""></path>
                <path d="m2 12 10 5 10-5" class=""></path>
              </svg>
              Creative Suite
            </a>
            <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-neutral-300 hover:bg-neutral-800 transition"
              href="#">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2" class=""></rect>
                <path d="M16 2v4" class=""></path>
                <path d="M8 2v4" class=""></path>
                <path d="M3 10h18" class=""></path>
              </svg>
              Brand Archive
            </a>
            <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-neutral-300 hover:bg-neutral-800 transition"
              href="#">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5">
                <path
                  d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
                  class=""></path>
              </svg>
              Style Tools
            </a>
          </nav>
        </div>

        <div class="mt-6">
          <p class="text-[11px] uppercase tracking-[0.2em] text-neutral-500 mb-2">Recent Projects</p>
          <ul class="space-y-1 text-sm">
            <li class="px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800 transition">Brand identity for
              wellness startup</li>
            <li class="px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800 transition">Motion graphics for tech
              launch</li>
            <li class="px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800 transition">Restaurant concept visual
              identity</li>
            <li class="px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800 transition">Fashion campaign art
              direction</li>
            <li class="px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800 transition">SaaS platform design
              system</li>
          </ul>
        </div>

        <div class="mt-auto pt-4">
          <div
            class="relative overflow-hidden rounded-2xl bg-gradient-to-b from-neutral-900 to-neutral-950 ring-1 ring-neutral-800 p-4">
            <div class="absolute inset-x-0 -top-6 h-14 bg-gradient-to-b from-emerald-500/10 to-transparent"></div>
            <p class="text-sm text-white font-medium tracking-tight">Collaborate with Team</p>
            <p class="text-xs text-neutral-400 mt-1">Share projects and get feedback from your creative team</p>
            <div class="flex items-center gap-2 mt-3">
              <img class="w-6 h-6 object-cover ring-neutral-700 ring-1 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fa45d691-5e28-4ddb-8f86-2fe1444c0306_320w.jpg" alt="">
              <img class="w-6 h-6 object-cover ring-neutral-700 ring-1 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/548251c7-a97a-4c25-8e2d-79f4498b49e0_320w.jpg" alt="">
              <img class="ring-1 ring-neutral-700 w-6 h-6 object-cover rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/1798060b-f297-4981-a4f3-745854800fb8_320w.jpg" alt="">
              <button class="ml-auto inline-flex items-center gap-2 text-xs text-neutral-900 bg-emerald-400 hover:bg-emerald-300 transition rounded-full px-3 py-1.5 ring-1 ring-emerald-300">
                Invite designers
                
              </button>
            </div>
          </div>
        </div>
      </aside>

      <!-- Main Creative Area -->
      <main
        class="lg:col-span-6 bg-neutral-900/60 ring-1 ring-neutral-800 rounded-2xl p-4 sm:p-6 relative overflow-hidden">
        <!-- stars -->
        <div class="pointer-events-none absolute inset-0">
          <div class="absolute left-10 top-8 w-1 h-1 rounded-full bg-white/20"></div>
          <div class="absolute left-1/3 top-14 w-1 h-1 rounded-full bg-white/30"></div>
          <div class="absolute right-16 top-10 w-1 h-1 rounded-full bg-white/20"></div>
          <div class="absolute right-1/4 top-1/3 w-1 h-1 rounded-full bg-white/30"></div>
          <div class="absolute left-1/4 bottom-12 w-1 h-1 rounded-full bg-white/20"></div>
        </div>

        <header class="flex items-start justify-between">
          <div class="">
            <h2 class="text-xl sm:text-2xl text-white font-medium tracking-tight">Creative Mood Generator</h2>
            <p class="text-sm text-neutral-400 mt-1">Transform your brand vision into compelling visual narratives and
              design systems</p>
          </div>
          <div class="inline-flex items-center gap-2">
            <button class="w-8 h-8 rounded-lg ring-1 ring-neutral-800 hover:bg-neutral-800 text-neutral-300 inline-flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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>
        </header>

        <div
          class="mt-4 rounded-2xl bg-gradient-to-b from-neutral-900 to-neutral-950 ring-1 ring-neutral-800 p-4 sm:p-6 relative">
          <div class="absolute inset-0 rounded-2xl ring-1 ring-white/5 pointer-events-none"></div>

          <div class="flex items-center justify-between">
            <span class="inline-flex items-center gap-2 text-[11px] text-neutral-300 bg-neutral-800/70 rounded-full px-3 py-1 ring-1 ring-neutral-700">
              <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
            Creative Brief
            </span>
            <div class="inline-flex items-center gap-2">
              <button class="w-8 h-8 inline-flex items-center justify-center rounded-full ring-1 ring-neutral-800 text-neutral-300 hover:bg-neutral-800">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m15 18-6-6 6-6" class=""></path></svg>
              </button>
              <button class="w-8 h-8 inline-flex items-center justify-center rounded-full ring-1 ring-neutral-800 text-neutral-300 hover:bg-neutral-800">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m9 18 6-6-6-6" class=""></path></svg>
              </button>
            </div>
          </div>

          <!-- Prompt bubble -->
          <div class="mt-4 max-w-xl ml-auto">
            <div class="rounded-2xl bg-neutral-800/80 ring-1 ring-neutral-700 text-sm text-neutral-200 px-4 py-3">
              Create a sophisticated brand identity for a luxury wellness retreat. The mood should evoke tranquility,
              premium quality, and natural harmony. Think earthy tones, minimal typography, organic shapes, and zen-like
              aesthetics that appeal to mindful consumers.
            </div>
          </div>

          <!-- Card carousel -->
          <div class="mt-8 flex items-end justify-center gap-4">
            <div class="relative -rotate-6">
              <div class="w-44 h-32 rounded-xl overflow-hidden ring-1 ring-white/10">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/94f85473-10ec-40cb-b97f-ff3b6f076199_800w.jpg" alt="" class="w-full h-full object-cover">
              </div>
            </div>
            <div class="relative z-10">
              <div
                class="w-52 h-36 rounded-xl overflow-hidden ring-1 ring-emerald-300 shadow-[0_0_0_2px_rgba(16,185,129,0.35)]">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3df10614-4cdb-4e4f-9e1d-19959aed90a0_800w.jpg" alt="" class="w-full h-full object-cover">
              </div>
            </div>
            <div class="relative rotate-6">
              <div class="w-44 h-32 rounded-xl overflow-hidden ring-1 ring-white/10">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/df528971-1835-44e0-b06b-c0e517476a73_800w.jpg" alt="" class="w-full h-full object-cover">
              </div>
            </div>
          </div>

          <!-- Response bubble -->
          <div class="mt-6 max-w-xl">
            <div class="rounded-2xl bg-neutral-800/80 ring-1 ring-neutral-700 text-sm text-neutral-200 px-4 py-3">
              Perfect! I've generated three mood directions for your luxury wellness retreat. The concepts blend natural
              textures with sophisticated minimalism, featuring warm earth tones, clean typography, and organic elements
              that convey premium tranquility.
            </div>
          </div>

          <!-- tags -->
          <div class="mt-4 flex items-center gap-2 flex-wrap">
            <span class="inline-flex items-center gap-2 text-xs text-emerald-300 bg-emerald-900/30 rounded-full px-3 py-1 ring-1 ring-emerald-700">Brand Identity
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m20 6-11 11-5-5" class=""></path></svg>
            </span>
            <span class="inline-flex items-center gap-2 text-xs text-emerald-300 bg-emerald-900/30 rounded-full px-3 py-1 ring-1 ring-emerald-700">Style Guide
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="14" height="18" rx="2" class=""></rect><path d="M7 7h6" class=""></path><path d="M7 11h6" class=""></path></svg>
            </span>
          </div>
        </div>

        <!-- Creative Tools -->
        <div class="mt-4 flex items-end gap-3">
          <div class="flex-1 rounded-2xl bg-neutral-900 ring-1 ring-neutral-800 px-3 py-2">
            <div class="flex items-center gap-2">

              <button class="inline-flex hover:text-emerald-400 transition text-neutral-400 w-8 h-8 items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2" class=""></rect><circle cx="9" cy="9" r="2" class=""></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" class=""></path></svg>
              </button>
              <input type="text" placeholder="Describe your brand vision..." class="flex-1 bg-transparent outline-none text-sm text-neutral-200 placeholder-neutral-500">
            </div>
          </div>
          <button class="w-12 h-12 rounded-2xl bg-emerald-500 hover:bg-emerald-400 transition ring-1 ring-emerald-400 inline-flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m12 2 3 7 7 3-7 3-3 7-3-7-7-3 7-3 3-7z" class=""></path></svg>
          </button>
        </div>

        <p class="mt-2 text-[11px] text-neutral-500">Vibe Studio generates personalized creative concepts. Collaborate
          with confidence knowing your ideas are secure.</p>
      </main>

      <!-- Right Sidebar -->
      <aside class="lg:col-span-3 bg-neutral-900/60 ring-1 ring-neutral-800 rounded-2xl p-4 flex flex-col">
        <div class="flex items-center justify-between">
          <span class="inline-flex items-center gap-2 text-xs text-emerald-200 bg-emerald-900/40 rounded-full px-3 py-1 ring-1 ring-emerald-700">
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
          Creative Suite Pro
          </span>
          <button class="w-8 h-8 inline-flex items-center justify-center rounded-lg ring-1 ring-neutral-800 text-neutral-300 hover:bg-neutral-800">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 3v18" class=""></path><path d="M3 12h18" class=""></path></svg>
          </button>
        </div>

        <div class="mt-4 flex items-center gap-6">
          <button class="relative text-sm text-white">
            <span>ASSETS</span>
            <span class="absolute -bottom-2 left-0 right-0 h-0.5 bg-white rounded-full"></span>
          </button>
          <button class="text-sm text-neutral-500">EXPORTS</button>
        </div>

        <div class="mt-6">
          <div class="flex items-center gap-2 mb-2">
            <p class="text-sm text-neutral-300 font-medium tracking-tight">Active Projects</p>
            <span class="inline-flex items-center text-[11px] text-black bg-emerald-400 rounded-full px-2 py-0.5 ring-1 ring-emerald-300">Live</span>
          </div>

          <div class="space-y-2">
            <!-- Wellness Project -->
            <label class="flex items-start gap-3 p-3 rounded-xl ring-1 ring-neutral-800 bg-neutral-900 hover:bg-neutral-800 transition cursor-pointer">
              <span class="relative w-4 h-4 rounded-md ring-1 ring-neutral-700 bg-neutral-900"></span>
              <div class="flex-1">
                <p class="text-sm text-neutral-200">Tech Startup Rebrand</p>
              </div>
            </label>

            <!-- Wellness Project (active) -->
            <div class="p-3 rounded-xl ring-1 ring-emerald-700 bg-emerald-900/20">
              <label class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                  <span class="relative w-4 h-4 rounded-md ring-1 ring-emerald-600 bg-emerald-500/20">
                    <span class="absolute inset-0.5 rounded-[3px] bg-emerald-400"></span>
                  </span>
                  <p class="text-sm text-neutral-200">Wellness Retreat Brand</p>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m6 9 6 6 6-6" class=""></path></svg>
              </label>
              <ul class="mt-3 space-y-2 text-sm text-neutral-400 pl-7 list-disc">
                <li>Logo concepts and variations</li>
                <li class="">Color palette and typography system</li>
              </ul>
            </div>

            <!-- Fashion Project -->
            <label class="flex items-start gap-3 p-3 rounded-xl ring-1 ring-neutral-800 bg-neutral-900 hover:bg-neutral-800 transition cursor-pointer">
              <span class="relative w-4 h-4 rounded-md ring-1 ring-neutral-700 bg-neutral-900"></span>
              <div class="flex-1">
                <p class="text-sm text-neutral-200">Fashion Campaign</p>
              </div>
            </label>
          </div>
        </div>

        <div class="mt-6">
          <p class="text-sm text-neutral-300 font-medium tracking-tight">Design Tools</p>
          <div class="mt-3 space-y-3">
            <!-- Adobe Creative Suite -->
            <div class="flex items-center justify-between p-3 rounded-xl ring-1 ring-neutral-800 bg-neutral-900">
              <div class="flex items-center gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5">
                  <rect x="3" y="3" width="18" height="18" rx="4" class=""></rect>
                  <path d="M7.5 7.5h9v9h-9z" class=""></path>
                </svg>
                <div class="">
                  <p class="text-sm text-neutral-200">Adobe Creative Suite</p>
                  <p class="text-xs text-neutral-500">Full design toolkit with cloud sync</p>
                </div>
              </div>
              <div class="relative w-10 h-6 rounded-full bg-emerald-900/30 ring-1 ring-emerald-600">
                <span class="absolute right-1 top-1 w-4 h-4 rounded-full bg-emerald-400"></span>
              </div>
            </div>
            <!-- Figma -->
            <div class="flex items-center justify-between p-3 rounded-xl ring-1 ring-neutral-800 bg-neutral-900">
              <div class="flex items-center gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5">
                  <circle cx="12" cy="12" r="3" class=""></circle>
                  <path
                    d="m12 1 2.35 2.35L17 1h5v5l-2.35 2.35L22 11v2l-2.35 2.35L22 18v5h-5l-2.35-2.35L12 23l-2.35-2.35L7 23H2v-5l2.35-2.35L2 13v-2l2.35-2.35L2 6V1h5l2.35 2.35z"
                    class=""></path>
                </svg>
                <div class="">
                  <p class="text-sm text-neutral-200">Figma</p>
                  <p class="text-xs text-neutral-500">Collaborative design and prototyping</p>
                </div>
              </div>
              <div class="relative w-10 h-6 rounded-full bg-emerald-900/30 ring-1 ring-emerald-600">
                <span class="absolute right-1 top-1 w-4 h-4 rounded-full bg-emerald-400"></span>
              </div>
            </div>
            <!-- Notion -->
            <div class="flex items-center justify-between p-3 rounded-xl ring-1 ring-neutral-800 bg-neutral-900">
              <div class="flex items-center gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" class=""></path>
                  <polyline points="14,2 14,8 20,8" class=""></polyline>
                  <line x1="16" y1="13" x2="8" y2="13" class=""></line>
                  <line x1="16" y1="17" x2="8" y2="17" class=""></line>
                  <polyline points="10,9 9,9 8,9" class=""></polyline>
                </svg>
                <div class="">
                  <p class="text-sm text-neutral-200">Notion</p>
                  <p class="text-xs text-neutral-500">Project documentation and brand guidelines</p>
                </div>
              </div>
              <div class="relative w-10 h-6 rounded-full bg-neutral-800 ring-1 ring-neutral-700">
                <span class="absolute left-1 top-1 w-4 h-4 rounded-full bg-neutral-500"></span>
              </div>
            </div>
          </div>
        </div>
      </aside>
    </div>
  </div>
</section>