Animated Product Hero Section with Color Wheel

<section class="relative z-10 pt-0 pb-0">
      <div class="max-w-7xl md:pt-14 lg:pt-16 mt-[80px] mr-auto mb-20 ml-auto pt-0 pr-6 pb-20 pl-6">
        <div class="grid gap-10 lg:grid-cols-2 items-center">
          <!-- Visual -->
          <div class="relative animate-[slideInLeft_1s_ease-out_0.4s_forwards]" style="transform: translateX(-100px);">
  <!-- Ground plane -->
  <div class="absolute -bottom-10 left-1/2 h-40 w-[36rem] -translate-x-1/2 rounded-full bg-gradient-to-r from-cyan-500/10 via-emerald-500/10 to-cyan-500/10 blur-2xl animate-pulse"></div>

  <div class="relative w-full mr-auto ml-auto" style="max-width: 486px;">
    <!-- Back unit -->
    <div class="relative ring-1 ring-white/10 supports-[backdrop-filter]:bg-neutral-900/70 hover:ring-white/20 hover:scale-105 transition-all duration-500 bg-neutral-900/90 rounded-3xl mt-6 ml-10 pt-5 pr-5 pb-5 pl-5 backdrop-blur-lg">
      <div class="relative h-64 w-full overflow-hidden ring-1 ring-white/10 rounded-2xl">
        <!-- Simulated device display with conic color wheel -->
        <div class="absolute inset-0 grid place-items-center bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/30f0ac27-c43c-4c90-8477-ba67e474fc01_1600w.jpg)] bg-cover">
          <div class="h-44 w-44 ring-1 ring-white/10 grid place-items-center bg-neutral-950/50 rounded-2xl backdrop-blur-lg">
            <div id="colorWheel1" class="h-36 w-36 rounded-full bg-[conic-gradient(at_center,_#06b6d4,_#22c55e,_#a855f7,_#06b6d4)] p-[6px] animate-spin" style="animation-duration: 8s; animation-play-state: running;">
              <div class="h-full w-full rounded-full bg-neutral-950 grid place-items-center">
                <div class="h-10 w-10 rounded-full bg-neutral-900 ring-1 ring-white/10 hover:ring-emerald-400/40 transition-all duration-300 cursor-pointer"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Front unit -->
    <div class="relative -mt-10 -mr-10 ring-1 ring-white/10 supports-[backdrop-filter]:bg-neutral-900/80 hover:ring-white/20 hover:scale-105 transition-all duration-500 bg-neutral-900/95 rounded-3xl pt-5 pr-5 pb-5 pl-5 backdrop-blur-md">
      <div class="relative h-72 w-full overflow-hidden rounded-2xl ring-1 ring-white/10">
        <div class="absolute inset-0 grid place-items-center bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9d7e01ff-667f-45be-8590-d67a8d2fdeae_1600w.jpg)] bg-cover">
          <div class="h-52 w-52 ring-1 ring-white/10 grid place-items-center shadow-[0_0_0_1px_rgba(255,255,255,0.04),0_10px_40px_rgba(16,185,129,0.12)] bg-neutral-950/50 rounded-[28px] backdrop-blur-lg">
            <div id="colorWheel2" class="h-40 w-40 rounded-full bg-[conic-gradient(at_center,_#22c55e,_#06b6d4,_#a855f7,_#f59e0b,_#22c55e)] p-2 animate-spin" style="animation-duration: 6s; animation-direction: reverse; animation-play-state: running;">
              <div class="h-full w-full rounded-full bg-neutral-950 grid place-items-center">
                <div class="h-12 w-12 rounded-full bg-neutral-900 ring-1 ring-white/10 hover:ring-emerald-400/40 transition-all duration-300 cursor-pointer"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

          <!-- Content -->
          <div class="relative animate-[slideInRight_1s_ease-out_0.6s_forwards] pr-20 pl-20" style="transform: translateX(100px);">
            <div class="flex gap-2 text-xs text-neutral-400 mb-4 items-center">
              <span class="uppercase tracking-widest font-sans" style="">Precision Sensor</span>
              <span class="h-1 w-1 rounded-full bg-neutral-600 animate-pulse"></span>
              <span class="text-emerald-400 font-sans animate-pulse" style="">Pro Series</span>
            </div>

            <div class="flex flex-col gap-2 pb-8 space-y-5 items-baseline">
  
  
  <h2 class="text-6xl font-semibold text-white tracking-tight mt-2" style="">The Next Generation of Color Sensing</h2>
  <p class="group-hover:text-neutral-200 transition-colors text-base text-neutral-300 mb-4" style="">Experience unmatched color accuracy and rapid detection engineered for professionals.</p>
</div>

            <!-- Feature Pills -->
            <div class="grid grid-cols-3 gap-3 max-w-md mt-6">
              <div class="flex gap-2 ring-1 ring-white/10 hover:bg-white/10 hover:scale-105 hover:ring-cyan-400/30 transition-all duration-300 cursor-pointer group bg-white/5 rounded-xl pt-2 pr-3 pb-2 pl-3 backdrop-blur-xl items-center">
                
                <span class="text-xs font-medium text-neutral-300 font-sans group-hover:text-white transition-colors" style="">Wi-Fi 6E</span>
              </div>
              <div class="flex gap-2 ring-1 ring-white/10 hover:bg-white/10 hover:scale-105 hover:ring-emerald-400/30 transition-all duration-300 cursor-pointer group bg-white/5 rounded-xl pt-2 pr-3 pb-2 pl-3 backdrop-blur-md items-center">
                
                <span class="group-hover:text-white transition-colors text-xs font-medium text-neutral-300" style="">5 Year Warranty</span>
              </div>
              <div class="flex gap-2 ring-1 ring-white/10 hover:bg-white/10 hover:scale-105 hover:ring-cyan-400/30 transition-all duration-300 cursor-pointer group bg-white/5 rounded-xl pt-2 pr-3 pb-2 pl-3 backdrop-blur-md items-center">
                
                <span class="text-xs font-medium text-neutral-300 font-sans group-hover:text-white transition-colors" style="">Express Delivery</span>
              </div>
            </div>

            <!-- Competitors pill -->
            

            <!-- Gradient bars with animation -->
            

            <!-- CTA -->
            <div id="buy" class="mt-8 flex flex-wrap items-center gap-3">
              <a href="#" class="relative inline-flex items-center gap-2 rounded-xl px-5 py-3 text-sm font-medium text-white hover:scale-105 transition-all duration-200 group">
                <span class="absolute inset-0 rounded-xl bg-gradient-to-r from-emerald-500/20 to-cyan-500/20"></span>
                <span class="absolute inset-0 rounded-xl ring-1 ring-emerald-400/40 group-hover:ring-emerald-400/60 transition-all"></span>
                <span class="relative font-sans" style="">Order Now</span>
                
              </a>
              <button class="inline-flex items-center gap-2 rounded-xl bg-white/5 px-5 py-3 text-sm font-medium text-neutral-200 ring-1 ring-white/10 hover:bg-white/10 hover:scale-105 transition-all duration-200 font-sans group" style="">
                
                View Demo
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>