Security Teams Comparison Feature Section

<div class="z-10 text-center max-w-5xl mt-16 mr-auto mb-24 ml-auto pr-6 pl-6 relative">
  <!-- Badge -->
  <div
    class="inline-flex transition-transform hover:scale-105 cursor-pointer group animate mb-10 py-1.5 px-4 backdrop-blur-sm items-center border bg-zinc-900 border-zinc-800"
    style="">
    <span class="flex h-1.5 w-1.5 shadow-[0_0_10px_rgba(16,185,129,0.5)] mr-2 group-hover:animate-pulse bg-emerald-400" style=""></span>
    <span class="text-xs font-medium uppercase tracking-wide text-zinc-400" style="">
            Why choose us
          </span>
  </div>

  <!-- Heading -->
  <h1
    class="animate flex flex-wrap justify-center gap-x-[0.25em] gap-y-2 leading-[0.95] md:text-8xl cursor-default text-6xl font-medium tracking-tighter font-manrope mb-4">
    <span class="inline-flex bg-clip-text text-transparent bg-gradient-to-b to-zinc-500 from-zinc-100 via-zinc-100 pb-4" style="">
            The next generation of
          </span>

    <span class="inline-flex flex-wrap justify-center gap-x-[0.05em] select-none">
            <span class="relative inline-block overflow-hidden h-[1.1em] font-mono pr-2 text-emerald-400" style="">
              <span class="block transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:-translate-y-full">Security Teams</span>

    </span>
    </span>
  </h1>

  <!-- Subtext -->
  <p class="leading-relaxed md:text-xl animate text-lg font-light text-zinc-500 max-w-2xl mr-auto mb-16 ml-auto"
    style="">
    We skip the compliance theater and bloated reports to build defenses
    that actually protect your business.
  </p>

  <!-- Comparison Grid -->
  <div class="animate grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-6xl mx-auto">
    <!-- Left Card: Other Teams -->
    <div
      class="group relative w-full min-h-[500px] overflow-hidden border flex flex-col shadow-xl bg-black border-zinc-800"
      style="">
      <!-- Background Texture -->
      <div class="absolute inset-0 z-0">
        <div
          class="opacity-30 mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')] absolute top-0 right-0 bottom-0 left-0">
        </div>
      </div>
      <!-- Marquee Top -->
      <div
        class="overflow-hidden mask-gradient-x group-hover:opacity-80 transition-opacity duration-500 opacity-60 w-full z-10 pt-8 relative">
        <div class="flex w-max gap-3 animate-marquee-left">
          <div class="flex gap-3 items-center">
            <span class="px-4 py-2 border text-zinc-500 text-xs font-mono uppercase tracking-wider bg-zinc-900 border-zinc-800" style="">
                    Checkbox security
                  </span>
            <span class="px-4 py-2 border text-xs font-mono uppercase tracking-wider shadow-[0_0_10px_rgba(255,255,255,0.1)] border-black/20 text-white bg-zinc-100/10" style="">
                    Audit fatigue
                  </span>
            <span class="px-4 py-2 border text-zinc-500 text-xs font-mono uppercase tracking-wider bg-zinc-900 border-zinc-800" style="">
                    False positives
                  </span>
            <span class="px-4 py-2 border text-xs font-mono uppercase tracking-wider shadow-[0_0_10px_rgba(255,255,255,0.1)] border-black/20 text-white bg-zinc-100/10" style="">
                    Vendor lock-in
                  </span>
          </div>
          <div class="flex gap-3 items-center">
            <span class="px-4 py-2 border text-zinc-500 text-xs font-mono uppercase tracking-wider bg-zinc-900 border-zinc-800" style="">
                    Checkbox security
                  </span>
            <span class="px-4 py-2 border text-xs font-mono uppercase tracking-wider shadow-[0_0_10px_rgba(255,255,255,0.1)] border-black/20 text-white bg-zinc-100/10" style="">
                    Audit fatigue
                  </span>
            <span class="px-4 py-2 border text-zinc-500 text-xs font-mono uppercase tracking-wider bg-zinc-900 border-zinc-800" style="">
                    False positives
                  </span>
            <span class="px-4 py-2 border text-xs font-mono uppercase tracking-wider shadow-[0_0_10px_rgba(255,255,255,0.1)] border-black/20 text-white bg-zinc-100/10" style="">
                    Vendor lock-in
                  </span>
          </div>
        </div>
      </div>
      <!-- Content -->
      <div class="flex-1 flex flex-col items-center justify-center text-center p-10 z-10 gap-8">
        <div class="w-16 h-16 border flex items-center justify-center mb-2 shadow-sm bg-zinc-950 border-zinc-800"
          style="">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="alert-triangle" class="lucide lucide-alert-triangle text-zinc-600" style="">
            <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" class=""></path>
            <path d="M12 9v4" class=""></path>
            <path d="M12 17h.01" class=""></path>
          </svg>
        </div>
        <h2
          class="text-4xl md:text-5xl font-manrope font-semibold tracking-tighter group-hover:text-zinc-600 transition-colors text-zinc-100"
          style="">
          Other teams
        </h2>
        <p class="leading-relaxed text-base font-medium text-zinc-500 max-w-xs tracking-tight" style="">
          Bury you in reports, slow you down with bureaucracy, and leave
          you vulnerable to real threats.
        </p>
      </div>
    </div>

    <!-- Right Card: Flux -->
    <div
      class="group relative w-full min-h-[500px] overflow-hidden border border-emerald-500 flex flex-col shadow-2xl bg-emerald-400"
      style="">
      <!-- Background Effects -->
      <div class="absolute inset-0 z-0">
        <div
          class="absolute top-[-50%] right-[-50%] w-[100%] h-[100%] blur-[100px] rounded-full pointer-events-none mix-blend-overlay bg-black/20"
          style=""></div>
        <div
          class="absolute bottom-[-20%] left-[-20%] w-[80%] h-[80%] blur-[80px] rounded-full pointer-events-none bg-emerald-100/20"
          style=""></div>
        <div
          class="opacity-40 mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')] absolute top-0 right-0 bottom-0 left-0">
        </div>
      </div>
      <!-- Marquee Top -->
      <div class="relative z-10 pt-8 w-full overflow-hidden mask-gradient-x">
        <div class="flex w-max gap-3 animate-marquee-right">
          <div class="flex gap-3 items-center">
            <span class="px-4 py-2 border text-zinc-500 text-xs font-mono uppercase tracking-wider bg-zinc-900 border-zinc-800" style="">
                    Real protection
                  </span>
            <span class="px-4 py-2 border text-xs font-mono uppercase tracking-wider shadow-[0_0_10px_rgba(255,255,255,0.1)] border-black/20 text-black bg-zinc-100/10" style="">
                    Zero trust
                  </span>
            <span class="px-4 py-2 border text-zinc-500 text-xs font-mono uppercase tracking-wider bg-zinc-900 border-zinc-800" style="">
                    Actionable intel
                  </span>
            <span class="px-4 py-2 border text-xs font-mono uppercase tracking-wider shadow-[0_0_10px_rgba(255,255,255,0.1)] border-black/20 text-black bg-zinc-100/10" style="">
                    Threat hunting
                  </span>
          </div>
          <div class="flex gap-3 items-center">
            <span class="px-4 py-2 border text-zinc-500 text-xs font-mono uppercase tracking-wider bg-zinc-900 border-zinc-800" style="">
                    Real protection
                  </span>
            <span class="px-4 py-2 border text-xs font-mono uppercase tracking-wider shadow-[0_0_10px_rgba(255,255,255,0.1)] border-black/20 text-black bg-zinc-100/10" style="">
                    Zero trust
                  </span>
            <span class="px-4 py-2 border text-zinc-500 text-xs font-mono uppercase tracking-wider bg-zinc-900 border-zinc-800" style="">
                    Actionable intel
                  </span>
            <span class="px-4 py-2 border text-xs font-mono uppercase tracking-wider shadow-[0_0_10px_rgba(255,255,255,0.1)] border-black/20 text-black bg-zinc-100/10" style="">
                    Threat hunting
                  </span>
          </div>
        </div>
      </div>
      <!-- Content -->
      <div class="flex-1 flex flex-col items-center justify-center text-center p-10 z-10 gap-8">
        <div
          class="w-16 h-16 bg-gradient-to-br to-emerald-500 p-0.5 shadow-lg shadow-emerald-500/30 flex items-center justify-center from-emerald-600"
          style="">
          <div class="w-full h-full backdrop-blur-sm flex items-center justify-center bg-emerald-300/50" style="">
            <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="shield-check" class="lucide lucide-shield-check text-black" style="">
              <path
                d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
                class=""></path>
              <path d="m9 12 2 2 4-4" class=""></path>
            </svg>
          </div>
        </div>
        <h2 class="md:text-6xl text-5xl font-bold text-black tracking-tight font-mono drop-shadow-sm" style="">
          [FLUX]
        </h2>
        <p class="leading-relaxed text-lg font-medium text-emerald-900 tracking-tight max-w-sm" style="">
          We focus on real threats, give you clear priorities, and build
          security that scales with your business.
        </p>
      </div>
    </div>
  </div>
</div>