Scroll-Activated Feature Showcase Section

<section class="sm:px-6 sm:mt-32 sm:pt-16 sm:pb-16 lg:px-8 lg:mt-60 max-w-7xl mt-24 mr-auto ml-auto pt-12 pr-4 pb-12 pl-4" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(2)">
  <div class="relative overflow-visible">
    <div class="pointer-events-none absolute inset-0 -z-10">
      <div class="absolute -left-32 top-0 h-[28rem] w-[32rem] rounded-full bg-white/10 blur-[140px] opacity-20"></div>
      
      <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
        <div class="w-[600px] sm:w-[900px] h-[600px] sm:h-[900px] rounded-full bg-[rgba(60,130,255,0.15)] blur-[120px] sm:blur-[180px]"></div>
      </div>
      <div class="absolute -right-24 bottom-0 h-[22rem] w-[22rem] rounded-full bg-white/10 blur-[120px] opacity-10"></div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 gap-y-8 lg:gap-y-10 items-start">
      <div class="space-y-6 sm:space-y-8 lg:sticky lg:top-32">
        <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-semibold tracking-tight leading-tight sm:leading-none" data-animate="">
          <span class="text-white xl:font-thin">Create</span>
          <span class="xl:font-thin text-white/30"> stunning</span>
          <span class="text-white/30 xl:font-thin">digital products with</span>
          <span class="xl:font-thin text-white/30">tools you love</span>
        </h1>

        <div class="space-y-5 sm:space-y-7">
          <div class="transition-opacity duration-500 cursor-pointer hover:opacity-100" data-section="1" data-animate="" data-animate-delay="100" style="opacity: 0.6;">
            <div class="text-sm font-medium text-white/80 transition-opacity duration-500" data-heading="1">Library</div>
            <div class="mt-2 h-px w-20 sm:w-24 bg-white/10"></div>
            <p class="mt-2 max-w-[46ch] text-xs sm:text-sm lg:text-base text-white/70 transition-opacity duration-500" data-text="1">
              A rich collection of adaptable components designed for flexibility and consistency, ensuring seamless integration across your entire product ecosystem.
            </p>
          </div>

          <div class="transition-opacity duration-500 opacity-60 cursor-pointer hover:opacity-100" data-section="2" data-animate="" data-animate-delay="200" style="opacity: 1;">
            <div class="text-sm font-medium transition-opacity duration-500" data-heading="2">Multiple visual styles</div>
            <p class="mt-2 max-w-[46ch] text-xs sm:text-sm transition-opacity duration-500" data-text="2">
              Switch between glass, outline, and solid variants to match your brand identity and design vision.
            </p>
          </div>

          <div class="transition-opacity duration-500 opacity-60 cursor-pointer hover:opacity-100" data-section="3" data-animate="" data-animate-delay="300" style="opacity: 0.6;">
            <div class="text-sm font-medium transition-opacity duration-500" data-heading="3">Ready‑made templates</div>
            <p class="mt-2 max-w-[46ch] text-xs sm:text-sm transition-opacity duration-500" data-text="3">
              Accelerate delivery with pre‑designed page layouts and sections that work beautifully right out of the box.
            </p>
          </div>
        </div>

        <button class="inline-flex gap-2 hover:bg-white/15 transition-all duration-200 bg-white/10 border-white/20 border rounded-xl mt-8 sm:mt-10 pt-2.5 pr-5 pb-2.5 pl-5 sm:pt-3 sm:pr-6 sm:pb-3 sm:pl-6 backdrop-blur gap-x-2 gap-y-2 items-center hover:border-white/30 hover:scale-[1.02] text-sm sm:text-base" data-animate="" data-animate-delay="400">
          EXPLORE LIBRARY
          <svg class="size-3.5 sm:size-4 transition-transform duration-200 group-hover:translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" class=""></path>
          </svg>
        </button>
      </div>

      <div class="space-y-0">
        <div class="min-h-[60vh] sm:min-h-[75vh] lg:min-h-[85vh] flex relative items-center" data-panel="1">
          <div class="transition-all duration-700 bg-gradient-to-b from-white/10 to-white/5 w-full border-white/10 border ring-white/10 ring-1 rounded-xl sm:rounded-2xl shadow-[0_10px_50px_-10px_rgba(0,0,0,0.6)] backdrop-blur hover:border-white/20 hover:shadow-[0_15px_60px_-15px_rgba(0,0,0,0.7)]" data-content="1" data-animate="">
            <div class="flex bg-black/30 border-white/10 rounded-t-xl sm:rounded-t-2xl border-b pt-3 pr-4 pb-3 pl-4 sm:pt-4 sm:pr-5 sm:pb-4 sm:pl-5 items-center justify-between flex-wrap gap-2">
              <div class="inline-flex items-center gap-2 text-xs sm:text-sm text-white/80">
                <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" class="h-3.5 w-3.5 sm:h-4 sm:w-4 opacity-80"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
                Voyager
              </div>
              <div class="hidden sm:flex gap-2">
                <span class="rounded-md bg-white/5 px-3 sm:px-4 py-1.5 sm:py-2 text-[10px] sm:text-xs text-white ring-1 ring-white/10 cursor-pointer hover:bg-white/10 hover:ring-white/20 transition-all duration-200">Trips</span>
                <span class="rounded-md px-3 sm:px-4 py-1.5 sm:py-2 text-[10px] sm:text-xs text-white/70 ring-1 ring-white/10 cursor-pointer hover:bg-white/5 hover:text-white transition-all duration-200">Hotels</span>
                <span class="rounded-md px-3 sm:px-4 py-1.5 sm:py-2 text-[10px] sm:text-xs text-white/70 ring-1 ring-white/10 cursor-pointer hover:bg-white/5 hover:text-white transition-all duration-200">Rentals</span>
              </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 pt-4 pr-4 pb-4 pl-4 sm:pt-6 sm:pr-6 sm:pb-6 sm:pl-6 gap-x-3 gap-y-3 sm:gap-x-4 sm:gap-y-4">
              <aside class="rounded-lg sm:rounded-xl border border-white/10 bg-white/5 p-4 sm:p-6 ring-1 ring-white/10 hover:bg-white/[0.07] hover:border-white/20 transition-all duration-300">
                <div class="mb-4 sm:mb-5 flex items-center justify-between">
                  <span class="text-xs sm:text-sm font-medium text-white/70">Refine Search</span>
                  <button class="text-[10px] sm:text-xs text-white/60 hover:text-white transition-colors duration-200">Clear</button>
                </div>
                <div class="space-y-4 sm:space-y-5">
                  <div class="">
                    <div class="mb-2 sm:mb-3 text-xs sm:text-sm font-medium text-white/60">Sort by</div>
                    <div class="flex items-center justify-between rounded-lg bg-black/20 px-3 sm:px-4 py-2.5 sm:py-3 ring-1 ring-white/10 cursor-pointer hover:bg-black/30 hover:ring-white/20 transition-all duration-200">
                      <span class="text-xs sm:text-sm text-white/70">Duration</span>
                      <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" class="h-3.5 w-3.5 sm:h-4 sm:w-4 text-white/60"><path d="m6 9 6 6 6-6" class=""></path></svg>
                    </div>
                  </div>
                  <div class="">
                    <div class="mb-2 sm:mb-3 text-xs sm:text-sm font-medium text-white/60">Stops</div>
                    <div class="space-y-2">
                      <label class="flex items-center gap-2 sm:gap-3 rounded-lg bg-black/20 px-3 sm:px-4 py-2.5 sm:py-3 ring-1 ring-white/10 cursor-pointer hover:bg-black/30 hover:ring-white/20 transition-all duration-200">
                        <div class="bg-white/5 w-3.5 h-3.5 sm:w-4 sm:h-4 border-white/20 border rounded"></div>
                        <span class="text-xs sm:text-sm text-white/70">Direct flights only</span>
                      </label>
                      <label class="flex items-center gap-2 sm:gap-3 rounded-lg bg-black/20 px-3 sm:px-4 py-2.5 sm:py-3 ring-1 ring-white/10 cursor-pointer hover:bg-black/30 hover:ring-white/20 transition-all duration-200">
                        <div class="h-3.5 w-3.5 sm:h-4 sm:w-4 rounded border border-white/20 bg-white/5"></div>
                        <span class="text-xs sm:text-sm text-white/70">1 stop maximum</span>
                      </label>
                    </div>
                  </div>
                  <div class="">
                    <div class="mb-2 sm:mb-3 text-xs sm:text-sm font-medium text-white/60">Price Range</div>
                    <div class="rounded-lg bg-black/20 px-3 sm:px-4 py-2.5 sm:py-3 ring-1 ring-white/10 hover:bg-black/30 hover:ring-white/20 transition-all duration-200 cursor-pointer">
                      <div class="flex items-center justify-between mb-2">
                        <span class="text-[10px] sm:text-xs text-white/60">$0</span>
                        <span class="text-[10px] sm:text-xs text-white/60">$2000</span>
                      </div>
                      <div class="h-1 w-full rounded-full bg-white/10">
                        <div class="h-1 w-[60%] rounded-full bg-gradient-to-r from-indigo-400 to-fuchsia-400"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </aside>

              <div class="space-y-4 sm:space-y-5">
                <div class="ring-1 ring-white/10 bg-white/5 border-white/10 border rounded-lg sm:rounded-xl pt-4 pr-4 pb-4 pl-4 sm:pt-6 sm:pr-6 sm:pb-6 sm:pl-6 hover:bg-white/[0.07] hover:border-white/20 transition-all duration-300">
                  <div class="mb-4 sm:mb-5 flex flex-wrap items-center gap-2 text-xs text-white/70">
                    <span class="inline-flex items-center gap-1.5 sm:gap-2 rounded-md bg-white/10 px-2.5 sm:px-3 py-1.5 ring-1 ring-white/10 cursor-pointer hover:bg-white/15 transition-all duration-200">
                      <span class="h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-blue-400"></span> Round trip
                    </span>
                    <span class="inline-flex items-center gap-1.5 sm:gap-2 rounded-md bg-white/5 px-2.5 sm:px-3 py-1.5 ring-1 ring-white/10 cursor-pointer hover:bg-white/10 transition-all duration-200">
                      <span class="text-white/60 text-[10px] sm:text-xs">2 passengers</span>
                    </span>
                    <span class="inline-flex items-center gap-1.5 sm:gap-2 rounded-md bg-white/5 px-2.5 sm:px-3 py-1.5 ring-1 ring-white/10 cursor-pointer hover:bg-white/10 transition-all duration-200">
                      <span class="text-white/60 text-[10px] sm:text-xs">Economy</span>
                    </span>
                  </div>
                  
                  <div class="mt-3 sm:mt-4 grid grid-cols-2 gap-3 sm:gap-4">
                    <div class="rounded-lg bg-black/20 p-3 sm:p-4 ring-1 ring-white/10 cursor-pointer hover:bg-black/30 hover:ring-white/20 transition-all duration-200">
                      <div class="text-[10px] sm:text-xs text-white/60 mb-1.5 sm:mb-2">Departure</div>
                      <div class="text-xs sm:text-sm text-white/90">Dec 15, 2024</div>
                    </div>
                    <div class="rounded-lg bg-black/20 p-3 sm:p-4 ring-1 ring-white/10 cursor-pointer hover:bg-black/30 hover:ring-white/20 transition-all duration-200">
                      <div class="text-[10px] sm:text-xs text-white/60 mb-1.5 sm:mb-2">Return</div>
                      <div class="text-xs sm:text-sm text-white/90">Dec 22, 2024</div>
                    </div>
                  </div>
                  <button class="w-full sm:w-auto inline-flex gap-2 hover:bg-white/15 transition-all duration-200 bg-white/10 border-white/20 border rounded-xl mt-6 sm:mt-10 pt-2.5 pr-6 pb-2.5 pl-6 sm:pt-3 sm:pr-10 sm:pb-3 sm:pl-10 backdrop-blur gap-x-2 gap-y-2 items-center justify-center hover:scale-[1.02] text-sm sm:text-base">
                    Search Flights
                  </button>
                </div>
                
                <div class="ring-1 ring-white/10 bg-white/5 border-white/10 border rounded-lg sm:rounded-xl pt-4 pr-4 pb-4 pl-4 sm:pt-5 sm:pr-5 sm:pb-5 sm:pl-5 hover:bg-white/[0.07] hover:border-white/20 transition-all duration-300">
                  <div class="mb-3 sm:mb-4 flex items-center justify-between">
                    <span class="text-xs sm:text-sm font-medium text-white/70">Quick Stats</span>
                  </div>
                  <div class="grid grid-cols-2 gap-2.5 sm:gap-3">
                    <div class="rounded-lg bg-black/20 p-3 sm:p-4 ring-1 ring-white/10 cursor-pointer hover:bg-black/30 hover:ring-white/20 hover:scale-[1.02] transition-all duration-200">
                      <div class="text-xl sm:text-2xl font-semibold text-white mb-0.5 sm:mb-1">8h 45m</div>
                      <div class="text-[10px] sm:text-xs text-white/60">Avg. Flight Time</div>
                    </div>
                    <div class="rounded-lg bg-black/20 p-3 sm:p-4 ring-1 ring-white/10 cursor-pointer hover:bg-black/30 hover:ring-white/20 hover:scale-[1.02] transition-all duration-200">
                      <div class="text-xl sm:text-2xl font-semibold text-emerald-400 mb-0.5 sm:mb-1">$842</div>
                      <div class="text-[10px] sm:text-xs text-white/60">Best Price</div>

                      <!-- Orb 98 overlay -->
                      <div class="pointer-events-none absolute left-0 top-1/2 -translate-x-[30%] -translate-y-[5%]">
                        <div class="relative flex h-24 w-24 items-center justify-center rounded-full bg-white/10 ring-1 ring-white/10 backdrop-blur">
                          <div class="absolute inset-0 rounded-full bg-gradient-to-br from-white/10 to-transparent"></div>
                          <div class="absolute inset-2 rounded-full ring-1 ring-white/15"></div>
                          <span class="relative z-10 text-2xl font-semibold tracking-tight text-white">98</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="relative min-h-[60vh] sm:min-h-[75vh] lg:min-h-screen flex items-center" data-panel="2">
          <div class="w-full rounded-xl sm:rounded-2xl border border-white/10 bg-gradient-to-b from-white/10 to-white/5 ring-1 ring-white/10 shadow-[0_10px_50px_-10px_rgba(0,0,0,0.6)] backdrop-blur p-6 sm:p-8 transition-all duration-700 hover:border-white/20 hover:shadow-[0_15px_60px_-15px_rgba(0,0,0,0.7)]" data-content="2" data-animate="">
            <h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white mb-4 sm:mb-6">Visual Style Variants</h3>
            <div class="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
              <div class="rounded-lg sm:rounded-xl bg-white/10 backdrop-blur p-4 sm:p-6 ring-1 ring-white/10 hover:bg-white/15 hover:ring-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer">
                <div class="text-xs sm:text-sm font-medium text-white/80 mb-2">Glass</div>
                <div class="h-20 sm:h-24 rounded-lg bg-gradient-to-br from-white/20 to-white/5 backdrop-blur-xl"></div>
              </div>
              <div class="rounded-lg sm:rounded-xl border-2 border-white/20 p-4 sm:p-6 hover:border-white/30 hover:scale-[1.02] transition-all duration-300 cursor-pointer">
                <div class="text-xs sm:text-sm font-medium text-white/80 mb-2">Outline</div>
                <div class="h-20 sm:h-24 rounded-lg border-2 border-white/30"></div>
              </div>
              <div class="rounded-lg sm:rounded-xl bg-white/95 p-4 sm:p-6 hover:bg-white hover:scale-[1.02] transition-all duration-300 cursor-pointer xs:col-span-2 sm:col-span-1">
                <div class="text-xs sm:text-sm font-medium text-black/80 mb-2">Solid</div>
                <div class="h-20 sm:h-24 rounded-lg bg-indigo-500"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="min-h-[60vh] sm:min-h-[75vh] lg:min-h-screen flex relative items-center" data-panel="3">
          <div class="transition-all duration-700 bg-gradient-to-b from-white/10 to-white/5 w-full border-white/10 border ring-white/10 ring-1 rounded-xl sm:rounded-2xl pt-6 pr-6 pb-6 pl-6 sm:pt-8 sm:pr-8 sm:pb-8 sm:pl-8 shadow-[0_10px_50px_-10px_rgba(0,0,0,0.6)] backdrop-blur hover:border-white/20 hover:shadow-[0_15px_60px_-15px_rgba(0,0,0,0.7)]" data-content="3" data-animate="">
            <h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white mb-4 sm:mb-6">Ready-Made Templates</h3>
            <div class="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 gap-3 sm:gap-4">
              <div class="group aspect-video bg-gradient-to-br from-indigo-500/20 to-fuchsia-500/20 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ee938364-0ff1-4042-8d2d-824055b38b24_3840w.webp)] bg-cover ring-white/10 ring-1 rounded-lg pt-3 pr-3 pb-3 pl-3 sm:pt-4 sm:pr-4 sm:pb-4 sm:pl-4 hover:ring-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer">
                <div class="text-xs sm:text-sm font-medium text-white/80 group-hover:text-white transition-colors duration-200">Dashboard</div>
              </div>
              <div class="group aspect-video bg-gradient-to-br from-emerald-500/20 to-sky-500/20 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f826149d-7e8d-4b68-a4fd-cc16fb762142_3840w.jpg)] bg-cover ring-white/10 ring-1 rounded-lg pt-3 pr-3 pb-3 pl-3 sm:pt-4 sm:pr-4 sm:pb-4 sm:pl-4 hover:ring-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer">
                <div class="text-xs sm:text-sm font-medium text-white/80 group-hover:text-white transition-colors duration-200">Landing Page</div>
              </div>
              <div class="group aspect-video bg-gradient-to-br from-amber-500/20 to-rose-500/20 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/564dc5fb-0d4e-42cb-9136-c3b630185122_3840w.webp)] bg-cover ring-white/10 ring-1 rounded-lg pt-3 pr-3 pb-3 pl-3 sm:pt-4 sm:pr-4 sm:pb-4 sm:pl-4 hover:ring-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer">
                <div class="text-xs sm:text-sm font-medium text-white/80 group-hover:text-white transition-colors duration-200">E-commerce</div>
              </div>
              <div class="group aspect-video ring-1 ring-white/10 bg-gradient-to-br from-purple-500/20 to-pink-500/20 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/78877756-9e45-410e-b630-78c3dfb8e94c_3840w.jpg)] bg-cover rounded-lg pt-3 pr-3 pb-3 pl-3 sm:pt-4 sm:pr-4 sm:pb-4 sm:pl-4 hover:ring-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer">
                <div class="text-xs sm:text-sm font-medium text-white/80 group-hover:text-white transition-colors duration-200">Portfolio</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    (function() {
      const sections = [
        { heading: '[data-heading="1"]', text: '[data-text="1"]', panel: '[data-panel="1"]', section: '[data-section="1"]' },
        { heading: '[data-heading="2"]', text: '[data-text="2"]', panel: '[data-panel="2"]', section: '[data-section="2"]' },
        { heading: '[data-heading="3"]', text: '[data-text="3"]', panel: '[data-panel="3"]', section: '[data-section="3"]' }
      ];

      let currentIndex = 0;
      let ticking = false;

      function updateActiveSection() {
        sections.forEach((sec, idx) => {
          const panel = document.querySelector(sec.panel);
          const section = document.querySelector(sec.section);
          const heading = document.querySelector(sec.heading);
          const text = document.querySelector(sec.text);
          
          if (!panel || !section) return;
          
          const rect = panel.getBoundingClientRect();
          const windowHeight = window.innerHeight;
          const isActive = rect.top < windowHeight * 0.5 && rect.bottom > windowHeight * 0.5;
          
          if (isActive && idx !== currentIndex) {
            currentIndex = idx;
            
            sections.forEach((s, i) => {
              const sectionEl = document.querySelector(s.section);
              const headingEl = document.querySelector(s.heading);
              const textEl = document.querySelector(s.text);
              
              if (i === idx) {
                sectionEl.style.opacity = '1';
                if (headingEl) {
                  headingEl.classList.remove('text-white/60', 'text-white/80');
                  headingEl.classList.add('text-white');
                }
                if (textEl) {
                  textEl.classList.remove('text-white/60');
                  textEl.classList.add('text-white/90');
                }
              } else {
                sectionEl.style.opacity = '0.6';
                if (headingEl) {
                  headingEl.classList.remove('text-white');
                  headingEl.classList.add('text-white/60');
                }
                if (textEl) {
                  textEl.classList.remove('text-white/90');
                  textEl.classList.add('text-white/60');
                }
              }
            });
          }
        });
      }

      function onScroll() {
        if (!ticking) {
          window.requestAnimationFrame(() => {
            updateActiveSection();
            ticking = false;
          });
          ticking = true;
        }
      }

      window.addEventListener('scroll', onScroll, { passive: true });
      updateActiveSection();
    })();
  </script>
</section>