VelvetSound Product Hero Section

<section id="hero-velvet-sound"
  class="relative w-full min-h-[900px] flex items-center overflow-hidden bg-neutral-950 text-neutral-50 font-['Inter',sans-serif]">
  <!-- Style and Animation Definitions -->
  <style>
    @keyframes heroAnimationIn {
      0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(8px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0px);
      }
    }

    @keyframes heroFloat {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-20px);
      }
    }

    .hero-animate-in {
      animation: heroAnimationIn 0.8s ease-out forwards;
    }

    .hero-animate-float {
      animation: heroFloat 6s ease-in-out infinite;
    }

    .font-bricolage {
      font-family: 'Bricolage Grotesque', sans-serif;
    }

    .grid-line {
      width: 1px;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.03);
    }
  </style>

  <!-- External Scripts -->
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>

  <!-- Fixed Grid Lines Background -->
  <div class="absolute inset-0 z-0 pointer-events-none flex justify-between px-6 md:px-12 max-w-7xl mx-auto">
    <div class="grid-line"></div>
    <div class="grid-line hidden md:block"></div>
    <div class="grid-line hidden md:block"></div>
    <div class="grid-line"></div>
  </div>

  <!-- Navigation Pill -->
  <div class="fixed top-6 left-0 right-0 z-50 flex justify-center px-4">
    <nav
      class="w-full max-w-4xl flex items-center justify-between px-2 py-2 pr-6 border border-white/10 bg-black/60 backdrop-blur-xl rounded-full shadow-2xl">
      <div class="flex items-center gap-3 pl-4">
        <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-black">
          <iconify-icon icon="solar:soundwave-square-bold" width="18"></iconify-icon>
        </div>
        <span class="font-bricolage font-semibold text-lg tracking-tight">VelvetSound</span>
      </div>
      <div class="hidden md:flex items-center gap-8 text-sm font-medium text-white/60">
        <a href="#" class="text-white hover:text-white transition-colors">Home</a>
        <a href="#" class="hover:text-white transition-colors">Collection</a>
        <a href="#" class="hover:text-white transition-colors">Specs</a>
        <a href="#" class="hover:text-white transition-colors">Careers</a>
      </div>
      <div class="flex items-center gap-2">
        <button class="w-10 h-10 rounded-full flex items-center justify-center text-white/70 hover:text-white hover:bg-white/10 transition-colors">
          <iconify-icon icon="solar:magnifer-linear" width="20"></iconify-icon>
        </button>
        <button class="w-10 h-10 rounded-full flex items-center justify-center text-white/70 hover:text-white hover:bg-white/10 transition-colors">
          <iconify-icon icon="solar:bag-3-linear" width="20"></iconify-icon>
        </button>
      </div>
    </nav>
  </div>

  <!-- Background Image with Gradient Overlays -->
  <div class="absolute inset-0 z-0">
    <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/7b9a060d-112b-4bb3-aa79-79572cda559f_3840w.webp" class="w-full h-full object-cover opacity-60" alt="Audio Lifestyle">
    <div class="absolute inset-0 bg-gradient-to-r from-black via-black/40 to-transparent"></div>
    <div class="absolute inset-0 bg-gradient-to-t from-neutral-950 via-transparent to-transparent"></div>
  </div>

  <!-- Section Numbering Decor -->
  <div
    class="absolute top-32 right-6 md:right-12 z-0 opacity-10 font-bricolage font-bold text-[12rem] leading-none text-white/10 pointer-events-none select-none">
    01
  </div>

  <!-- Hero Content Grid -->
  <div
    class="relative z-10 w-full max-w-7xl mx-auto px-6 md:px-12 grid grid-cols-1 md:grid-cols-2 gap-12 items-center pt-24">

    <!-- Left Column: Text Content -->
    <div class="hero-animate-in" style="animation-delay: 0.1s;">
      <div
        class="inline-flex items-center gap-2 border border-white/10 bg-white/5 backdrop-blur-sm rounded-full px-4 py-1.5 mb-8">
        <span class="relative flex h-2 w-2">
          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
        </span>
        <span class="text-[10px] md:text-xs font-medium text-white/80 uppercase tracking-widest">Next Gen Active Noise Cancellation</span>
      </div>

      <h1
        class="text-[3.5rem] md:text-[6.5rem] leading-[0.9] tracking-tighter font-bricolage font-light text-white mb-8">
        Escape into<br>
        <span class="text-white/40 font-light italic">Pure Fidelity.</span>
      </h1>

      <p
        class="text-white/60 text-lg md:text-xl font-light max-w-lg leading-relaxed border-l border-white/20 pl-6 mb-10">
        Experience audio uncompromised. Studio-grade drivers meet all-day comfort for a listening experience that
        transports you.
      </p>

      <div class="flex items-center gap-4">
        <button class="group bg-white text-black px-8 py-4 rounded-full font-medium hover:bg-neutral-200 transition-all flex items-center gap-2">
          Shop Collection
          <iconify-icon icon="solar:arrow-right-linear" width="20" class="group-hover:translate-x-1 transition-transform"></iconify-icon>
        </button>
        <button class="px-8 py-4 rounded-full font-medium border border-white/10 hover:bg-white/5 transition-colors">
          Watch Film
        </button>
      </div>
    </div>

    <!-- Right Column: Visual Product -->
    <div class="relative flex items-center justify-center md:justify-end hero-animate-in"
      style="animation-delay: 0.4s;">
      <div class="relative w-full max-w-md aspect-square">
        <!-- Glow Effect -->
        <div
          class="absolute inset-0 bg-gradient-to-tr from-white/20 to-transparent rounded-full blur-[100px] opacity-40">
        </div>

        <!-- Main Product Image -->
        <div class="relative z-10 w-full h-full hero-animate-float">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e7279d8d-f598-4fd6-9343-5f6827402adb_1600w.webp" class="w-full h-full object-contain drop-shadow-[0_35px_35px_rgba(0,0,0,0.5)]" alt="Headphones">
        </div>

        <!-- Floating Info Card -->
        <div
          class="absolute -bottom-6 -left-4 md:-left-12 z-20 bg-black/40 backdrop-blur-2xl border border-white/10 p-6 rounded-2xl w-64 shadow-2xl">
          <div class="flex items-center justify-between mb-4 border-b border-white/10 pb-4">
            <span class="text-[10px] uppercase tracking-widest text-white/50">Now Playing</span>
            <div class="flex gap-1 items-end h-3">
              <div class="w-0.5 bg-white/80 rounded-full animate-pulse h-2"></div>
              <div class="w-0.5 bg-white/80 rounded-full animate-pulse h-3" style="animation-delay: 0.2s"></div>
              <div class="w-0.5 bg-white/80 rounded-full animate-pulse h-1" style="animation-delay: 0.4s"></div>
            </div>
          </div>
          <div class="space-y-4">
            <div class="flex items-center gap-3 text-sm text-white/80">
              <iconify-icon icon="solar:soundwave-circle-linear" width="18" class="text-white/40"></iconify-icon>
              <span>Spatial Audio</span>
            </div>
            <div class="flex items-center gap-3 text-sm text-white/80">
              <iconify-icon icon="solar:battery-charge-linear" width="18" class="text-white/40"></iconify-icon>
              <span>30h Battery Life</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      console.log('VelvetSound Hero Initialized');
    });
  </script>
</section>