Industry Card Carousel Section with Hover Animations

<section class="relative z-10 animate-[fadeInUp_1s_ease-out_1s_forwards]" style="transform: translateY(50px);">
      <div class="max-w-7xl mr-auto ml-auto pr-6 pb-6 pl-6">
        <div class="mb-8">
          <div class="mb-3 inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1 text-xs text-neutral-400 ring-1 ring-white/10 font-sans hover:ring-emerald-400/30 transition-all duration-300" style="">
            <span class="rounded-full bg-neutral-800 px-2 py-0.5 text-[10px] font-medium text-neutral-300 font-sans animate-pulse" style="">2024</span>
            Innovation
          </div>
          <h2 class="max-w-2xl text-4xl tracking-tight text-white sm:text-5xl font-sans font-semibold hover:text-emerald-200 transition-colors duration-500" style="">Precision Color Analysis, Redefined</h2>
        </div>

        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4" id="industry-cards">
          <!-- Card 1 -->
          <div class="relative rounded-3xl bg-neutral-900/60 p-6 ring-1 ring-white/10 backdrop-blur supports-[backdrop-filter]:bg-neutral-900/40 hover:bg-neutral-900/80 hover:ring-white/20 hover:scale-105 hover:-translate-y-2 transition-all duration-300 cursor-pointer group" style="transform: none; opacity: 1;">
            <div class="mb-4 flex items-center justify-between">
              <div class="grid h-12 w-12 place-items-center rounded-xl bg-white/5 ring-1 ring-white/10 group-hover:ring-emerald-400/30 group-hover:bg-emerald-400/10 transition-all duration-300">
                <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="palette" class="lucide lucide-palette w-[20px] h-[20px] text-zinc-400 group-hover:text-emerald-400 group-hover:scale-110 transition-all duration-300" style="width: 20px; height: 20px;"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" class=""></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" class=""></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" class=""></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle></svg>
              </div>
              <span class="text-xs text-neutral-500 font-sans group-hover:text-emerald-400 transition-colors" style="">01</span>
            </div>
            <h3 class="mb-2 text-lg font-semibold tracking-tight font-sans group-hover:text-emerald-200 transition-colors" style="">Fashion</h3>
            <p class="text-sm text-neutral-400 group-hover:text-neutral-300 transition-colors font-sans" style="">Perfect color matching for garments, fabrics, and fashion accessories with professional-grade accuracy.</p>
          </div>

          <!-- Card 2 -->
          <div class="relative ring-1 ring-white/10 supports-[backdrop-filter]:bg-neutral-900/40 bg-neutral-900/60 rounded-3xl pt-6 pr-6 pb-6 pl-6 backdrop-blur hover:bg-neutral-900/80 hover:ring-white/20 hover:scale-105 hover:-translate-y-2 transition-all duration-300 cursor-pointer group" style="transform: none; opacity: 1;">
            <div class="mb-4 flex items-center justify-between">
              <div class="grid h-12 w-12 place-items-center rounded-xl bg-white/5 ring-1 ring-white/10 group-hover:ring-emerald-400/30 group-hover:bg-emerald-400/10 transition-all duration-300">
                <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="shopping-bag" class="lucide lucide-shopping-bag w-[20px] h-[20px] text-zinc-400 group-hover:text-emerald-400 group-hover:scale-110 transition-all duration-300" style="width: 20px; height: 20px;"><path d="M16 10a4 4 0 0 1-8 0" class=""></path><path d="M3.103 6.034h17.794" class=""></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z" class=""></path></svg>
              </div>
              <span class="text-xs text-neutral-500 font-sans group-hover:text-emerald-400 transition-colors" style="">02</span>
            </div>
            <h3 class="mb-2 text-lg font-semibold tracking-tight font-sans group-hover:text-emerald-200 transition-colors" style="">Retail</h3>
            <p class="text-sm text-neutral-400 group-hover:text-neutral-300 transition-colors font-sans" style="">Streamline inventory management and quality control with instant color verification systems.</p>
          </div>

          <!-- Card 3 (Emphasis) -->
          <div class="relative overflow-hidden ring-1 ring-emerald-400/30 bg-neutral-900/70 rounded-3xl pt-6 pr-6 pb-6 pl-6 hover:bg-neutral-900/90 hover:ring-emerald-400/50 hover:scale-105 hover:-translate-y-2 transition-all duration-300 cursor-pointer group" style="transform: none; opacity: 1;">
            
            <span class="mb-3 inline-flex items-center gap-2 rounded-full bg-emerald-400/10 px-2.5 py-1 text-[11px] font-medium text-emerald-300 ring-1 ring-emerald-400/30 font-sans group-hover:bg-emerald-400/20 group-hover:text-emerald-200 transition-all" style="">
              Accelerate design workflows
            </span>
            <h3 class="mb-2 text-xl font-semibold tracking-tight font-sans group-hover:text-emerald-200 transition-colors" style="">Interior Design &amp; Architecture</h3>
            <p class="group-hover:text-neutral-200 transition-colors text-sm text-neutral-300 mb-4" style="">Transform creative vision into reality with precise color coordination for spaces and materials.</p>
            <button class="inline-flex items-center gap-2 rounded-xl bg-neutral-800 px-4 py-2 text-xs font-medium text-neutral-100 ring-1 ring-white/10 hover:bg-neutral-700 hover:scale-105 transition-all duration-200 font-sans">
              Explore Use Cases
              <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 h-4 w-4 group-hover:translate-x-1 transition-transform"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
            </button>
          </div>

          <!-- Card 4 -->
          <div class="relative rounded-3xl bg-neutral-900/60 p-6 ring-1 ring-white/10 backdrop-blur supports-[backdrop-filter]:bg-neutral-900/40 hover:bg-neutral-900/80 hover:ring-white/20 hover:scale-105 hover:-translate-y-2 transition-all duration-300 cursor-pointer group" style="transform: none; opacity: 1;">
            <div class="mb-4 flex items-center justify-between">
              <div class="grid h-12 w-12 place-items-center rounded-xl bg-white/5 ring-1 ring-white/10 group-hover:ring-emerald-400/30 group-hover:bg-emerald-400/10 transition-all duration-300">
                <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="factory" class="lucide lucide-factory w-[20px] h-[20px] text-zinc-400 group-hover:text-emerald-400 group-hover:scale-110 transition-all duration-300" style="width: 20px; height: 20px;"><path d="M12 16h.01" class=""></path><path d="M16 16h.01" class=""></path><path d="M3 19a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.5a.5.5 0 0 0-.769-.422l-4.462 2.844A.5.5 0 0 1 15 10.5v-2a.5.5 0 0 0-.769-.422L9.77 10.922A.5.5 0 0 1 9 10.5V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z" class=""></path><path d="M8 16h.01" class=""></path></svg>
              </div>
              <span class="text-xs text-neutral-500 font-sans group-hover:text-emerald-400 transition-colors" style="">04</span>
            </div>
            <h3 class="mb-2 text-lg font-semibold tracking-tight font-sans group-hover:text-emerald-200 transition-colors" style="">Manufacturing</h3>
            <p class="text-sm text-neutral-400 group-hover:text-neutral-300 transition-colors font-sans" style="">Ensure consistent product quality with automated color inspection and batch verification.</p>
          </div>
        </div>

        <!-- Carousel controls with functionality -->
        <div class="mt-6 flex gap-2">
          <button id="prevBtn" class="grid h-9 w-9 place-items-center rounded-lg bg-white/5 ring-1 ring-white/10 hover:bg-white/10 hover:scale-110 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed" aria-label="Prev">
            <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="chevron-left" class="lucide lucide-chevron-left h-4 w-4"><path d="m15 18-6-6 6-6" class=""></path></svg>
          </button>
          <button id="nextBtn" class="grid h-9 w-9 place-items-center rounded-lg bg-white/5 ring-1 ring-white/10 hover:bg-white/10 hover:scale-110 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed" aria-label="Next">
            <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="chevron-right" class="lucide lucide-chevron-right h-4 w-4"><path d="m9 18 6-6-6-6" class=""></path></svg>
          </button>
        </div>
      </div>
    </section>