Headphone Product Hero with Stats and Features

<section
  class="overflow-hidden selection:bg-[#F8E7C0] selection:text-[#655853] text-white font-manrope bg-[#655853] pt-20 pb-20 relative">

  <div
    class="absolute inset-0 max-w-[1800px] mx-auto px-6 md:px-12 pointer-events-none flex justify-between z-0 opacity-10">
    <div class="h-full w-px bg-white"></div>
    <div class="h-full w-px bg-white"></div>
    <div class="h-full w-px bg-white"></div>
    <div class="h-full w-px bg-white hidden lg:block"></div>
  </div>

  <div
    class="absolute top-1/2 left-1/4 -translate-y-1/2 w-[500px] h-[500px] bg-[#8A7972] rounded-full blur-[120px] opacity-20 pointer-events-none">
  </div>

  <div
    class="z-10 md:px-12 grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 max-w-[1800px] mx-auto px-6 relative items-center">

    <div class="lg:col-span-7 flex flex-col justify-center reveal active">
      <div class="flex items-center gap-4 mb-6">
        <span class="font-oswald text-white/40 text-sm tracking-widest uppercase">01 // Introduction</span>
        <div class="h-px w-12 bg-white/20"></div>
      </div>

      <h1
        class="md:text-[9rem] leading-[0.85] uppercase text-7xl font-semibold text-white tracking-tight font-oswald mb-8">
        Drive IO Interface</h1>

      <div class="w-full max-w-md h-16 mb-10 text-white/30 flex items-center">
        <svg viewBox="0 0 400 60" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <path
            d="M0 30 Q 10 30, 20 30 T 40 30 T 60 20 T 80 40 T 100 10 T 120 50 T 140 20 T 160 40 T 180 30 T 200 30 T 220 30 T 240 30"
            class="opacity-50"></path>
          <path d="M140 30 Q 150 10, 160 30 T 180 50 T 200 10 T 220 50 T 240 20 T 260 40 T 280 30 T 300 30 T 320 30">
          </path>
          <path d="M280 30 Q 290 35, 300 30 T 320 25 T 340 35 T 360 30 T 380 30 T 400 30" class="opacity-50"></path>
        </svg>
      </div>

      <p class="text-lg md:text-xl text-white/80 max-w-md mb-12 font-medium leading-relaxed">
        We are working to ensure that Bluetooth products are of high quality, young and stylish.
      </p>

      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-10">
        <button class="bg-[#F8E7C0] text-[#655853] px-10 py-5 rounded-full font-bold text-lg hover:scale-105 transition-transform shadow-[0_0_20px_rgba(248,231,192,0.2)] flex items-center gap-3 group">
           Buy Now
           <iconify-icon icon="solar:cart-large-bold-duotone" width="20" class="group-hover:translate-x-1 transition-transform"></iconify-icon>
         </button>
        <div class="flex items-baseline gap-3">
          <span class="text-4xl font-oswald font-semibold">105,458</span>
          <span class="text-white/60 font-medium">sales</span>
        </div>
      </div>
    </div>

    <div class="lg:col-span-5 reveal delay-100 active relative">
      <div
        class="absolute -right-4 -top-12 text-white/5 font-oswald text-[12rem] font-bold select-none leading-none z-0">
        02</div>

      <div class="overflow-hidden aspect-[5/4] group shadow-black/20 bg-[#E5E0DC] rounded-[3rem] relative shadow-2xl">
        <img
            src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=2000&auto=format&fit=crop"
            alt="Pleasant Sound Headphones"
            class="object-cover w-full h-full mix-blend-multiply opacity-90 transition-transform duration-700 group-hover:scale-105"
          />

        <div class="z-20 bg-[#655853] rounded-br-[3rem] p-4 absolute top-0 left-0">
          <div
            class="w-20 h-20 rounded-full border border-white/10 bg-[#1A1A1A] flex items-center justify-center text-white cursor-pointer hover:bg-black transition-colors group/btn">
            <iconify-icon icon="solar:arrow-right-up-bold-duotone" width="36"
              class="group-hover/btn:rotate-45 transition-transform duration-300"></iconify-icon>
          </div>
        </div>

        <div class="absolute bottom-12 left-8 origin-bottom-left -rotate-90 translate-x-4">
          <span class="uppercase text-5xl font-bold text-[#655853] tracking-widest font-oswald opacity-80 mix-blend-hard-light">Bluetooth</span>
        </div>
      </div>
    </div>
  </div>

  <div
    class="relative z-10 max-w-[1800px] mx-auto px-6 md:px-12 grid grid-cols-1 lg:grid-cols-3 gap-6 reveal delay-200 mt-20">

    <div
      class="overflow-hidden group hover:-translate-y-1 transition-transform duration-300 text-[#655853] bg-white h-80 rounded-[2.5rem] p-8 relative">
      <span class="absolute top-8 right-8 text-[#655853]/30 font-oswald text-sm font-medium tracking-widest">03 // PROMO</span>
      <div class="relative z-10 flex flex-col h-full justify-between max-w-[60%]">
        <div>
          <div class="w-12 h-12 bg-[#F5F5F5] rounded-full flex items-center justify-center mb-6 text-[#655853]">
            <iconify-icon icon="solar:play-circle-bold-duotone" width="28"></iconify-icon>
          </div>
          <p class="font-semibold text-lg leading-tight mb-2">Feel the comfort and quality in one breath</p>
        </div>
        <h3 class="text-5xl font-bold text-[#1A1A1A] font-oswald">2024</h3>
      </div>
      <div class="absolute right-0 bottom-0 w-1/2 h-full z-0">
        <div class="z-10 bg-gradient-to-r from-white via-white/20 to-transparent absolute inset-0"></div>
        <img src="https://images.unsplash.com/photo-1483721310020-03333e577078?q=80&w=1000&auto=format&fit=crop" class="w-full h-full object-cover grayscale opacity-90 group-hover:grayscale-0 transition-all duration-500" alt="Promo">
      </div>
    </div>

    <div
      class="lg:col-span-2 bg-[#4E433F] rounded-[2.5rem] p-8 md:p-12 flex flex-col md:flex-row gap-12 items-start md:items-center relative overflow-hidden border border-white/5">
      <div class="absolute left-1/2 top-0 bottom-0 w-px bg-white/5 hidden md:block"></div>
      <div class="flex-1 relative z-10">
        <div
          class="w-16 h-16 border border-white/10 rounded-2xl flex items-center justify-center mb-6 text-[#F8E7C0] bg-white/5">
          <iconify-icon icon="solar:soundwave-square-bold-duotone" width="32"></iconify-icon>
        </div>
        <h4 class="text-2xl font-oswald font-semibold mb-3 text-white">Sound</h4>
        <p class="text-sm text-white/50 leading-relaxed font-medium">
          HD Stereo sound that you will want to hear. Bluetooth 5.0 provides faster and more stable wireless connection.
        </p>
      </div>
      <div class="flex-1 relative z-10">
        <div
          class="w-16 h-16 border border-white/10 rounded-2xl flex items-center justify-center mb-6 text-[#F8E7C0] bg-white/5">
          <iconify-icon icon="solar:link-circle-bold-duotone" width="32"></iconify-icon>
        </div>
        <h4 class="text-2xl font-oswald font-semibold mb-3 text-white">Connection</h4>
        <p class="text-sm text-white/50 leading-relaxed font-medium">
          Real wireless connection. After a simple one-touch setup, the T1C automatically turns on and is always
          connected.
        </p>
      </div>
    </div>
  </div>
</section>