Interactive Portfolio Hero with Card Gallery

<section class="sm:pb-28 sm:pt-36 max-w-7xl mr-auto ml-auto pt-36 pr-6 pb-28 pl-6">
        <!-- Removed card container as requested -->
        <div class="relative">
          <div class="px-0 py-0 sm:px-0 sm:py-0 lg:px-0">
            <!-- Headline -->
            <div class="mx-auto max-w-3xl text-center" style="animation: fadeSlideIn 1s ease-out 0.1s both;">
              <h1 class="text-4xl sm:text-6xl lg:text-7xl leading-[1.06] tracking-tighter font-sans font-semibold" style="">
                Showcase your work to
                <span class="block bg-gradient-to-r from-white to-neutral-400 bg-clip-text text-transparent tracking-tighter font-sans font-semibold" style="color: rgba(0, 0, 0, 0); position: static;">the world.</span>
              </h1>
            </div>

            <!-- Divider -->
            <div class="mx-auto mt-10 max-w-5xl px-2">
              
            </div>

            <!-- Card rail -->
            <div class="sm:mt-12 max-w-5xl mt-12 mr-auto ml-auto relative" style="animation: fadeSlideIn 1s ease-out 0.3s both;">
              <!-- creator tag left -->
              <div class="-top-5 sm:-top-7 sm:left-[16%] z-50 absolute left-[12%]">
                <div class="relative">
                  <span class="inline-flex items-center gap-2 border-gradient before:rounded-full text-sm font-medium text-white bg-blue-600 rounded-full pt-1.5 pr-3.5 pb-1.5 pl-3.5 shadow-md">designer<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right lucide-at-sign w-[16px] h-[16px]" data-icon-replaced="true" style="color: rgb(255, 255, 255); width: 16px; height: 16px;"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg></span>
                  <span class="absolute -bottom-1 left-6 h-2 w-2 rotate-45 bg-blue-600"></span>
                </div>
              </div>

              <!-- creator tag right -->
              <div class="-top-4 sm:-top-6 sm:right-[14%] z-50 absolute right-[10%]">
                <div class="relative">
                  <span class="inline-flex items-center gap-2 border-gradient before:rounded-full text-sm font-medium text-white bg-orange-500 rounded-full pt-1.5 pr-3.5 pb-1.5 pl-3.5 shadow-md">artist<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right lucide-at-sign w-[16px] h-[16px]" data-icon-replaced="true" style="color: rgb(255, 255, 255); width: 16px; height: 16px;"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg></span>
                  <span class="absolute -bottom-1 left-6 h-2 w-2 rotate-45 bg-orange-500"></span>
                </div>
              </div>

              <!-- Cards -->
              <div class="flex justify-center">
                <div class="grid grid-cols-6 sm:gap-4 gap-x-3 gap-y-3" id="card-grid-container">
  <!-- Card 1 -->
  <div class="card-item col-span-2 sm:col-span-1 self-end transform -rotate-8 translate-y-3 sm:translate-y-5 transition-all duration-700 ease-out cursor-pointer hover:scale-105" data-card-index="0">
    <div class="aspect-[3/4] overflow-hidden rounded-2xl ring-1 ring-black/10 shadow-lg border-gradient before:rounded-2xl transition-shadow duration-500 hover:shadow-2xl">
      <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" alt="Artwork card" class="w-full h-full object-cover">
    </div>
  </div>
  <!-- Card 2 -->
  <div class="card-item col-span-2 sm:col-span-1 self-end transform -rotate-2 translate-y-5 sm:translate-y-7 transition-all duration-700 ease-out cursor-pointer hover:scale-105" data-card-index="1">
    <div class="aspect-[3/4] overflow-hidden rounded-2xl ring-1 ring-black/10 shadow-lg border-gradient before:rounded-2xl transition-shadow duration-500 hover:shadow-2xl">
      <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4734259a-bad7-422f-981e-ce01e79184f2_1600w.jpg" alt="3D render card" class="w-full h-full object-cover">
    </div>
  </div>
  <!-- Card 3 -->
  <div class="card-item col-span-2 sm:col-span-1 self-end transform rotate-3 translate-y-2 transition-all duration-700 ease-out cursor-pointer hover:scale-105" data-card-index="2">
    <div class="aspect-[3/4] overflow-hidden rounded-2xl ring-1 ring-black/10 shadow-lg border-gradient before:rounded-2xl transition-shadow duration-500 hover:shadow-2xl">
      <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c543a9e1-f226-4ced-80b0-feb8445a75b9_1600w.jpg" alt="Minimal shapes card" class="w-full h-full object-cover">
    </div>
  </div>
  <!-- Card 4 -->
  <div class="card-item col-span-2 sm:col-span-1 self-end transform rotate-0 -translate-y-1 transition-all duration-700 ease-out cursor-pointer hover:scale-105" data-card-index="3">
    <div class="aspect-[3/4] overflow-hidden rounded-2xl ring-1 ring-black/10 shadow-lg border-gradient before:rounded-2xl transition-shadow duration-500 hover:shadow-2xl">
      <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/5bab247f-35d9-400d-a82b-fd87cfe913d2_1600w.webp" alt="Abstract red card" class="w-full h-full object-cover">
    </div>
  </div>
  <!-- Card 5 -->
  <div class="card-item col-span-2 sm:col-span-1 self-end transform -rotate-2 translate-y-3 transition-all duration-700 ease-out cursor-pointer hover:scale-105" data-card-index="4">
    <div class="aspect-[3/4] overflow-hidden rounded-2xl ring-1 ring-black/10 shadow-lg border-gradient before:rounded-2xl transition-shadow duration-500 hover:shadow-2xl">
      <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/30104e3c-5eea-4b93-93e9-5313698a7156_1600w.webp" alt="Mountains card" class="w-full h-full object-cover">
    </div>
  </div>
  <!-- Card 6 -->
  <div class="card-item col-span-2 sm:col-span-1 self-end transform rotate-6 translate-y-6 transition-all duration-700 ease-out cursor-pointer hover:scale-105" data-card-index="5">
    <div class="aspect-[3/4] overflow-hidden rounded-2xl ring-1 ring-black/10 shadow-lg border-gradient before:rounded-2xl transition-shadow duration-500 hover:shadow-2xl">
      <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" alt="Green minimal card" class="w-full h-full object-cover">
    </div>
  </div>
  
  <script>
  (function() {
    const container = document.getElementById('card-grid-container');
    const cards = container.querySelectorAll('.card-item');
    let activeCard = null;
    
    cards.forEach((card, index) => {
      card.addEventListener('click', function(e) {
        e.stopPropagation();
        
        if (activeCard === card) {
          // Reset if clicking the same card
          resetCards();
          return;
        }
        
        // Reset all cards first
        cards.forEach((c) => {
          c.style.filter = 'blur(8px)';
          c.style.opacity = '0.4';
          c.style.transform = '';
          c.style.position = 'relative';
          c.style.zIndex = '1';
          c.style.transition = 'all 0.7s ease-out';
        });
        
        // Center and focus the clicked card
        card.style.filter = 'blur(0px)';
        card.style.opacity = '1';
        card.style.transform = 'translate(0, 0) rotate(0deg) scale(1.15)';
        card.style.position = 'relative';
        card.style.zIndex = '10';
        card.style.transition = 'all 0.7s ease-out';
        
        activeCard = card;
      });
    });
    
    // Click outside to reset
    document.addEventListener('click', function(e) {
      if (activeCard && !container.contains(e.target)) {
        resetCards();
      }
    });
    
    function resetCards() {
      cards.forEach((c) => {
        c.style.filter = '';
        c.style.opacity = '';
        c.style.transform = '';
        c.style.position = '';
        c.style.zIndex = '';
      });
      activeCard = null;
    }
  })();
  </script>
</div>
              </div>
            </div>

            <!-- Subcopy -->
            <p class="mx-auto mt-8 max-w-xl text-center text-base text-neutral-300 font-sans" style="animation: fadeSlideIn 1s ease-out 0.5s both;">
              Build your professional portfolio, connect with collectors, and share your creative journey with a global community.
            </p>

            <!-- CTAs -->
            <div class="mt-8 flex items-center justify-center gap-4" style="animation: fadeSlideIn 1s ease-out 0.7s both;">
              <button target="_blank" rel="noopener noreferrer" class="group inline-flex lg:h-11 leading-none -tracking-[0.02em] outline outline-1 outline-white/10 hover:outline-white/20 transition-all duration-500 hover:-translate-y-0.5 focus-visible:outline-2 focus-visible:outline-blue-400/50 text-base font-semibold text-white h-10 max-w-[300px] rounded-full pr-6 pl-6 relative items-center justify-center border-gradient before:rounded-full">

  <!-- Dark gradient background -->
  <span class="absolute -inset-px h-full w-full overflow-hidden rounded-full" aria-hidden="true" style="opacity: 1;">
    <!-- Core dark gradient -->
    <span class="absolute inset-0 rounded-full" style="background: linear-gradient(140deg, rgba(15,15,17,1) 0%, rgba(30,30,33,1) 35%, rgba(45,45,50,1) 70%, rgba(20,20,22,1) 100%);"></span>
    <!-- Subtle accent glows -->
    <span class="absolute -top-[52px] right-1 size-20 bg-blue-400 opacity-15 mix-blend-lighten blur-[35px] rounded-full"></span>
    <span class="absolute top-0 right-1 h-[28px] w-20 bg-blue-300 opacity-20 mix-blend-lighten blur-[25px] rounded-full"></span>
    <span class="absolute -bottom-[42px] -left-[19px] size-20 bg-purple-400 opacity-10 mix-blend-lighten blur-[40px] rounded-full"></span>
    <!-- Sheen on hover -->
    <span class="absolute inset-0 overflow-hidden rounded-full">
      <span class="absolute -left-1/2 top-0 h-full w-1/2 bg-white/15 opacity-0 skew-x-12 blur-sm transition-all duration-700 group-hover:opacity-30 group-hover:translate-x-[220%] rounded-full"></span>
    </span>
    <!-- Border highlight -->
    <span class="absolute inset-0 ring-1 ring-inset ring-white/15 rounded-full"></span>
  </span>

  <!-- Subtle top border -->
  <span class="z-20 blur-[1px] w-full h-full rounded-full absolute top-0 left-0" aria-hidden="true">
    <span class="-top-px -left-px z-20 w-full h-full rounded-full absolute" style="box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.12);"></span>
</span>

  <!-- Content -->
  <span class="relative z-10 flex items-center gap-1.5 text-[14px] leading-none font-normal -tracking-[0.04em] lg:text-base text-white/95 rounded-full font-sans">
    Get started today
  </span>

  <!-- Hover outline feedback -->
  <span class="pointer-events-none absolute inset-0 ring-0 ring-blue-400/0 transition-[ring,opacity] duration-500 group-hover:ring-4 group-hover:opacity-25 rounded-full"></span>

</button>
              <a href="#" class="inline-flex items-center gap-2 rounded-full bg-neutral-800/60 px-5 py-3 text-sm font-medium text-neutral-100 ring-1 ring-white/10 hover:bg-neutral-800 border-gradient before:rounded-full font-sans">
                View Examples
                <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="external-link" class="lucide lucide-external-link h-4 w-4"><path d="M15 3h6v6" class=""></path><path d="M10 14 21 3" class=""></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" class=""></path></svg>
              </a>
            </div>
          </div>
        </div>

        <!-- Soft shadow footer edge -->
        
      </section>