Scientific Skincare Hero with Glassmorphism Card

<section class="flex md:px-12 overflow-hidden bg-neutral-900 w-full h-[90vh] pr-6 pb-20 pl-6 relative items-end">
  <!-- Background Video/Image -->
  <div class="z-0 absolute top-0 right-0 bottom-0 left-0">
    <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1699b755-2414-43b4-9e32-3b20e4e000d8_3840w.jpg" alt="Water Texture" class="w-full h-full object-cover opacity-60 grayscale" style="">
    <div class="bg-gradient-to-t from-black via-transparent to-transparent absolute top-0 right-0 bottom-0 left-0">
    </div>
  </div>

  <div
    class="grid grid-cols-1 lg:grid-cols-2 w-full max-w-7xl z-10 mr-auto ml-auto relative gap-x-12 gap-y-12 items-start">
    <!-- Left Content -->
    <div class="pb-10">
      <h2 class="text-4xl md:text-6xl text-white font-medium tracking-tight mb-6 reveal-on-scroll">
        Scientifically ProvenResults.
      </h2>
      <p class="text-lg text-neutral-300 mb-10 max-w-md leading-relaxed reveal-on-scroll reveal-delay-100">
        Unlock the potential of our formulations. Clinical trials show
        significant improvement in elasticity within 14 days.
      </p>
      <button class="group border border-white/40 bg-neutral-100/20 backdrop-blur-md text-white px-8 py-3 rounded-full hover:bg-white hover:text-black transition-all duration-300 flex items-center gap-2 reveal-on-scroll reveal-delay-200">
            Shop Collection
            <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-right" class="lucide lucide-arrow-right w-4 h-4 group-hover:translate-x-1 transition-transform stroke-[1.5]"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
          </button>
    </div>

    <!-- Right Floating Glass Card -->
    <div class="flex justify-end">
      <div
        class="backdrop-blur-xl bg-white/10 border border-white/20 rounded-2xl p-8 shadow-[0_8px_32px_rgba(0,0,0,0.15)]">
        <div class="text-[10px] uppercase tracking-widest text-neutral-400 mb-6">
          [ HYALURONIC MATRIX ]
        </div>

        <!-- Chemical Diagram SVG -->
        <div class="h-32 w-full mb-6 flex items-center justify-center opacity-80">
          <svg width="100%" height="100%" viewBox="0 0 200 100" fill="none" stroke="white" stroke-width="1" class="">
            <path d="M20 50 L50 30 L80 50 L110 30 L140 50 L170 30" stroke-opacity="0.8" class=""></path>
            <circle cx="50" cy="30" r="3" fill="white" class=""></circle>
            <circle cx="110" cy="30" r="3" fill="white" class=""></circle>
            <text x="175" y="35" font-family="sans-serif" font-size="10" fill="white" class="">
              OH
            </text>
            <text x="15" y="55" font-family="sans-serif" font-size="10" fill="white" class="">
              HO
            </text>
          </svg>
        </div>

        <div class="text-5xl font-medium tracking-tight mb-2">40%</div>
        <p class="text-sm text-neutral-300">
          Increase in skin hydration levels immediately after application.
        </p>



      </div>
    </div>

    <!-- Pagination / Progress -->

  </div>
</section>