Responsive Portfolio Hero with Carousel and Sidebar

<div class="bg-white rounded-3xl space-y-4 max-w-6xl mx-auto">
  <!-- Suzy Liu Studio Header -->
  <div class="bg-white rounded-3xl mt-8 pt-4 pr-4 pb-4 pl-4">
    <h2 class="text-[14vw] sm:text-[10vw] lg:text-[7vw] leading-[0.9] py-6 font-light tracking-tight" style="">SUZY LIU
      <span class="text-neutral-400 font-light tracking-tight" style="">STUDIO</span>
    </h2>
  </div>

  <!-- Main Portfolio Layout -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 pt-4 pr-4 pb-4 pl-4" style="min-height: 600px;">
    <!-- Left: Carousel -->
    <section class="lg:col-span-2 flex">
      <div class="relative overflow-hidden rounded-3xl bg-neutral-100 w-full">
        <div id="carousel" class="relative h-[600px]">
          <!-- Slides -->
          <div class="absolute inset-0 transition-opacity duration-500 ease-out opacity-0 pointer-events-none"
            data-index="0">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4f995362-9751-4d89-86fa-a5f7c03be905_1600w.jpg" alt="Portrait minimal" class="h-full w-full object-cover">
          </div>
          <div class="absolute inset-0 transition-opacity duration-500 ease-out opacity-100" data-index="1">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a8f75e15-5f15-4877-a253-da0b8f89efee_1600w.jpg" alt="Beige fashion editorial" class="h-full w-full object-cover" loading="lazy">
          </div>
          <div class="absolute inset-0 transition-opacity duration-500 ease-out opacity-0 pointer-events-none"
            data-index="2">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a3001134-ae66-49be-8bea-f8eed8b7e07e_1600w.jpg" alt="Moody mountains" class="h-full w-full object-cover" loading="lazy" style="">
          </div>
          <div class="absolute inset-0 transition-opacity duration-500 ease-out opacity-0 pointer-events-none"
            data-index="3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5bf79840-b7ed-4d8d-acd3-c5f5835a065e_800w.jpg" alt="3D minimal render" class="h-full w-full object-cover" loading="lazy" style="">
          </div>

          <!-- Prev / Next -->
          <button id="prev" class="absolute left-4 top-1/2 -translate-y-1/2 inline-flex h-10 w-10 items-center justify-center rounded-xl transition bg-neutral-900/70 text-white hover:bg-neutral-900">
                    <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="chevron-left" class="lucide lucide-chevron-left h-5 w-5"><path d="m15 18-6-6 6-6" class=""></path></svg>
                  </button>
          <button class="absolute right-4 top-1/2 -translate-y-1/2 inline-flex h-10 w-10 transition hover:bg-neutral-900 text-white bg-neutral-900/70 rounded-xl 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="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-right" class="lucide lucide-chevron-right w-[20px] h-[20px]"><path d="m9 18 6-6-6-6" class=""></path></svg>
                  </button>

          <!-- Bottom left CTA -->
          <div class="absolute left-4 bottom-4">
            <a href="#"
              class="inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium backdrop-blur transition bg-white/90 text-neutral-900 hover:bg-white"
              style="">
              View Project
              <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-4 w-4">
                <path d="M7 7h10v10" class=""></path>
                <path d="M7 17 17 7" class=""></path>
              </svg>
            </a>
          </div>

          <!-- Bottom center dots -->
          <div id="dots" class="absolute bottom-4 inset-x-0 flex items-center justify-center gap-2">
            <button class="h-2.5 w-2.5 rounded-full bg-white/60 hover:bg-white/80" aria-label="Go to slide 1"></button><button class="h-2.5 w-2.5 rounded-full bg-white" aria-label="Go to slide 2"></button><button class="h-2.5 w-2.5 rounded-full bg-white/60 hover:bg-white/80" aria-label="Go to slide 3"></button><button class="h-2.5 w-2.5 rounded-full bg-white/60 hover:bg-white/80" aria-label="Go to slide 4"></button>
          </div>

          <!-- Bottom right label -->
          <div class="absolute right-3 bottom-3">

          </div>
        </div>
      </div>
    </section>

    <!-- Right: Profile + Links -->
    <aside class="flex flex-col" style="height: 600px;">
      <div class="flex-1 flex flex-col space-y-4">
        <!-- Profile -->
        <div class="ring-1 ring-neutral-200 bg-white rounded-3xl pt-5 pr-5 pb-5 pl-5 shadow-sm">
          <div class="flex items-start gap-4">
            <div class="flex-1">
              <h2 class="text-xl font-semibold tracking-tight" style="">Suzy Liu</h2>
              <p class="text-sm text-neutral-600" style="">Photographer</p>
              <p class="mt-3 text-sm leading-6 text-neutral-700" style="">
                We capture authentic moments and craft visual stories blending clean minimalism with soft emotion—every
                frame composed with intention.
              </p>
            </div>
          </div>
        </div>

        <div
          class="ring-1 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4ba34171-fc4e-49ee-a2c4-13a87fd225c6_1600w.jpg)] bg-cover rounded-3xl pt-20 pr-5 pb-20 pl-5 shadow-sm ring-neutral-200 bg-white flex-1 min-h-0">
        </div>

        <!-- Social / Contact -->
        <div class="space-y-3">
          <a href="#"
            class="flex items-center justify-between rounded-2xl px-4 py-3 ring-1 transition bg-white ring-neutral-200 hover:bg-neutral-50">
            <span class="text-sm font-medium text-neutral-800" style="">Instagram</span>
            <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"
              data-lucide="instagram" class="lucide lucide-instagram h-5 w-5 text-neutral-500">
              <rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect>
              <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" class=""></path>
              <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" class=""></line>
            </svg>
          </a>

          <a href="#"
            class="flex items-center justify-between rounded-2xl px-4 py-3 ring-1 transition bg-white ring-neutral-200 hover:bg-neutral-50">
            <span class="text-sm font-medium text-neutral-800" style="">Behance</span>
            <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"
              data-lucide="palette" class="lucide lucide-palette h-5 w-5 text-neutral-500">
              <path
                d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"
                class=""></path>
              <circle cx="13.5" cy="6.5" r=".5" fill="currentColor" class=""></circle>
              <circle cx="17.5" cy="10.5" r=".5" fill="currentColor" class=""></circle>
              <circle cx="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle>
              <circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle>
            </svg>
          </a>

          <a href="#"
            class="flex items-center justify-between rounded-2xl px-4 py-3 ring-1 transition bg-white ring-neutral-200 hover:bg-neutral-50">
            <span class="text-sm font-medium text-neutral-800" style="">Twitter</span>
            <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"
              data-lucide="twitter" class="lucide lucide-twitter w-[20px] h-[20px]" data-icon-replaced="true"
              style="width: 20px; height: 20px; color: rgb(115, 115, 115);">
              <path
                d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
                class=""></path>
            </svg>
          </a>

          <a href="#"
            class="flex items-center justify-between rounded-2xl px-4 py-3 ring-1 transition bg-neutral-900 ring-neutral-200 hover:bg-black">
            <span class="text-sm font-medium text-white" style="">Contact Me</span>
            <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" data-lucide="mail"
              class="lucide lucide-mail h-5 w-5 text-white">
              <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path>
              <rect x="2" y="4" width="20" height="16" rx="2" class=""></rect>
            </svg>
          </a>
        </div>
      </div>
    </aside>
  </div>
</div>