AI Agent Deployment Features Section

<section class="z-10 w-full max-w-6xl mt-28 mr-auto mb-28 ml-auto pt-12 pr-6 pl-6 relative">

  <!-- Section Header -->
  <div class="text-center mb-24 relative">
    <!-- Red Glow behind title -->
    <div
      class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[200px] bg-rose-500/10 blur-[90px] rounded-full -z-10 pointer-events-none">
    </div>

    <h2 class="text-4xl sm:text-5xl font-medium tracking-tight text-white mb-6">Deploy Custom AI Agents Instantly</h2>
    <p class="text-lg text-neutral-400 max-w-2xl mx-auto font-light leading-relaxed">
      Train Nexus on your documents, links, and sitemaps. Create intelligent chatbots that understand your business and
      delight your customers 24/7.
    </p>
  </div>

  <!-- Feature Cards Grid -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-24">

    <!-- Card 1: Data Upload -->
    <div
      class="relative group rounded-3xl border border-white/10 bg-[#0A0A0A] p-8 h-[420px] flex flex-col justify-between overflow-hidden hover:border-white/15 transition-colors">
      <div class="absolute inset-0 bg-gradient-to-b from-white/[0.02] to-transparent pointer-events-none"></div>

      <!-- Graphic -->
      <div class="relative flex-1 w-full flex flex-col items-center pt-8">
        <div class="flex items-start justify-center gap-12 sm:gap-16 z-10">
          <!-- File Icon -->
          <div class="flex flex-col items-center gap-3 group/icon">
            <div
              class="w-12 h-12 rounded-full bg-neutral-900 border border-white/10 flex items-center justify-center text-neutral-400 group-hover/icon:text-white group-hover/icon:border-white/20 transition-all">
              <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="file-text" class="lucide lucide-file-text w-5 h-5">
                <path
                  d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
                  class=""></path>
                <path d="M14 2v5a1 1 0 0 0 1 1h5" class=""></path>
                <path d="M10 9H8" class=""></path>
                <path d="M16 13H8" class=""></path>
                <path d="M16 17H8" class=""></path>
              </svg>
            </div>
            <span class="text-xs text-neutral-500 font-medium">Upload docs</span>
          </div>
          <!-- Link Icon -->
          <div class="flex flex-col items-center gap-3 group/icon">
            <div
              class="w-12 h-12 rounded-full bg-neutral-900 border border-white/10 flex items-center justify-center text-neutral-400 group-hover/icon:text-white group-hover/icon:border-white/20 transition-all">
              <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="link"
                class="lucide lucide-link w-5 h-5">
                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" class=""></path>
                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" class=""></path>
              </svg>
            </div>
            <span class="text-xs text-neutral-500 font-medium">Connect URLs</span>
          </div>
          <!-- Sitemap Icon -->
          <div class="flex flex-col items-center gap-3 group/icon">
            <div
              class="w-12 h-12 rounded-full bg-neutral-900 border border-white/10 flex items-center justify-center text-neutral-400 group-hover/icon:text-white group-hover/icon:border-white/20 transition-all">
              <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="share-2" class="lucide lucide-share-2 w-5 h-5">
                <circle cx="18" cy="5" r="3" class=""></circle>
                <circle cx="6" cy="12" r="3" class=""></circle>
                <circle cx="18" cy="19" r="3" class=""></circle>
                <line x1="8.59" x2="15.42" y1="13.51" y2="17.49" class=""></line>
                <line x1="15.41" x2="8.59" y1="6.51" y2="10.49" class=""></line>
              </svg>
            </div>
            <span class="text-xs text-neutral-500 font-medium">Sync sitemap</span>
          </div>
        </div>

        <!-- Connector Lines -->
        <div class="relative h-12 w-full max-w-[280px] mt-[-10px]">
          <div
            class="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-full bg-gradient-to-t from-white/10 to-transparent">
          </div>
          <div
            class="absolute bottom-0 left-[20%] right-[20%] h-px bg-gradient-to-r from-transparent via-white/10 to-transparent">
          </div>
          <div class="absolute bottom-0 left-[20%] h-4 w-px bg-white/10"></div>
          <div class="absolute bottom-0 right-[20%] h-4 w-px bg-white/10"></div>
        </div>

        <!-- Table Preview -->
        <div class="w-full max-w-sm mt-8 relative">
          <div
            class="grid grid-cols-4 gap-4 text-[10px] uppercase tracking-wider text-neutral-500 font-medium mb-3 pl-2">
            <div class="">Source</div>
            <div>Tokens</div>
            <div>Status</div>
            <div>Vectors</div>
          </div>
          <div
            class="grid grid-cols-4 gap-4 text-xs text-neutral-300 font-mono py-2 pl-2 border-t border-white/5 bg-white/[0.02] rounded-lg">
            <div class="">knowledge.pdf</div>
            <div>45K</div>
            <div class="text-emerald-500">Ready</div>
            <div>1.2K</div>
          </div>
          <div
            class="grid grid-cols-4 gap-4 text-xs text-neutral-600 font-mono py-2 pl-2 border-t border-white/5 opacity-50">
            <div>help-center</div>
            <div>12K</div>
            <div class="text-emerald-500">Ready</div>
            <div>0.8K</div>
          </div>
          <!-- Gradient Fade -->
          <div
            class="absolute inset-0 bg-gradient-to-b from-transparent via-[#0A0A0A]/20 to-[#0A0A0A] pointer-events-none">
          </div>
        </div>
      </div>

      <!-- Input Footer -->
      <div
        class="relative z-20 mx-2 mb-1 flex items-center justify-between px-5 py-3 rounded-xl border border-white/10 bg-neutral-900/50 backdrop-blur-md">
        <span class="text-sm text-neutral-400 font-light">Knowledge Base</span>
        <button class="w-8 h-8 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-neutral-400 hover:text-white hover:bg-white/10 transition-colors">
                            <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-up" class="lucide lucide-arrow-up w-4 h-4"><path d="m5 12 7-7 7 7" class=""></path><path d="M12 19V5" class=""></path></svg>
                        </button>
      </div>
    </div>

    <!-- Card 2: Integration -->
    <div
      class="relative group rounded-3xl border border-white/10 bg-[#0A0A0A] p-8 h-[420px] flex flex-col justify-between overflow-hidden hover:border-white/15 transition-colors">
      <div class="absolute inset-0 bg-gradient-to-b from-white/[0.02] to-transparent pointer-events-none"></div>

      <!-- Graphic -->
      <div class="relative flex-1 w-full flex items-center justify-center pb-8">
        <!-- Connecting Lines (SVG) -->
        <svg class="absolute inset-0 w-full h-full pointer-events-none opacity-20" viewBox="0 0 400 300">
          <!-- Center to Top Left -->
          <path d="M200 150 C 200 100, 120 100, 120 80" stroke="white" fill="none" stroke-width="1.5" class=""></path>
          <!-- Center to Top Right -->
          <path d="M200 150 C 200 100, 280 100, 280 80" stroke="white" fill="none" stroke-width="1.5" class=""></path>
          <!-- Center to Far Left -->
          <path d="M200 150 C 200 150, 80 150, 80 140" stroke="white" fill="none" stroke-width="1.5" class=""></path>
          <!-- Center to Far Right -->
          <path d="M200 150 C 200 150, 320 150, 320 140" stroke="white" fill="none" stroke-width="1.5" class=""></path>
          <!-- Center to Top Mid -->
          <path d="M200 150 L 200 90" stroke="white" fill="none" stroke-width="1.5" class=""></path>
        </svg>

        <!-- Nodes -->
        <!-- Reddit -->
        <div
          class="absolute top-[20%] left-[25%] w-10 h-10 rounded-full bg-neutral-900 border border-white/10 flex items-center justify-center text-neutral-400 hover:scale-110 transition-transform duration-500">
          <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="message-square" class="lucide lucide-message-square w-4 h-4">
            <path
              d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
              class=""></path>
          </svg>
        </div>
        <!-- Jira/Confluence -->
        <div
          class="absolute top-[15%] left-1/2 -translate-x-1/2 w-10 h-10 rounded-full bg-neutral-900 border border-white/10 flex items-center justify-center text-neutral-400 hover:scale-110 transition-transform duration-500">
          <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="trello"
            class="lucide lucide-trello w-4 h-4">
            <rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect>
            <rect width="3" height="9" x="7" y="7" class=""></rect>
            <rect width="3" height="5" x="14" y="7" class=""></rect>
          </svg>
        </div>
        <!-- Messenger -->
        <div
          class="absolute top-[20%] right-[25%] w-10 h-10 rounded-full bg-neutral-900 border border-white/10 flex items-center justify-center text-neutral-400 hover:scale-110 transition-transform duration-500">
          <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="message-circle" class="lucide lucide-message-circle w-4 h-4">
            <path
              d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
              class=""></path>
          </svg>
        </div>
        <!-- Slack/Other -->
        <div
          class="absolute top-[40%] left-[15%] w-10 h-10 rounded-full bg-neutral-900 border border-white/10 flex items-center justify-center text-neutral-400 hover:scale-110 transition-transform duration-500">
          <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="slack"
            class="lucide lucide-slack w-4 h-4">
            <rect width="3" height="8" x="13" y="2" rx="1.5" class=""></rect>
            <path d="M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5" class=""></path>
            <rect width="3" height="8" x="8" y="14" rx="1.5" class=""></rect>
            <path d="M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5" class=""></path>
            <rect width="8" height="3" x="14" y="13" rx="1.5" class=""></rect>
            <path d="M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5" class=""></path>
            <rect width="8" height="3" x="2" y="8" rx="1.5" class=""></rect>
            <path d="M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5" class=""></path>
          </svg>
        </div>
        <!-- Telegram -->
        <div
          class="absolute top-[40%] right-[15%] w-10 h-10 rounded-full bg-neutral-900 border border-white/10 flex items-center justify-center text-neutral-400 hover:scale-110 transition-transform duration-500">
          <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="send"
            class="lucide lucide-send w-4 h-4">
            <path
              d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"
              class=""></path>
            <path d="m21.854 2.147-10.94 10.939" class=""></path>
          </svg>
        </div>

        <!-- Center Hub -->
        <div
          class="absolute top-[50%] left-1/2 -translate-x-1/2 -translate-y-1/2 w-16 h-16 rounded-full bg-[#0A0A0A] border border-white/10 flex items-center justify-center z-10 shadow-[0_0_30px_-5px_rgba(255,255,255,0.1)]">
          <div
            class="w-12 h-12 rounded-full bg-gradient-to-tr from-rose-600/20 to-orange-600/20 flex items-center justify-center border border-white/5">
            <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="blocks"
              class="lucide lucide-blocks w-6 h-6 text-white">
              <path d="M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2"
                class=""></path>
              <rect x="14" y="2" width="8" height="8" rx="1" class=""></rect>
            </svg>
          </div>
        </div>

        <!-- Fade Overlay -->
        <div
          class="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-[#0A0A0A] to-transparent pointer-events-none">
        </div>
      </div>

      <!-- Input Footer -->
      <div
        class="relative z-20 mx-2 mb-1 flex items-center justify-between px-5 py-3 rounded-xl border border-white/10 bg-neutral-900/50 backdrop-blur-md">
        <span class="text-sm text-neutral-400 font-light">Ecosystem Integrations</span>
        <button class="w-8 h-8 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-neutral-400 hover:text-white hover:bg-white/10 transition-colors">
                            <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-up" class="lucide lucide-arrow-up w-4 h-4"><path d="m5 12 7-7 7 7" class=""></path><path d="M12 19V5" class=""></path></svg>
                        </button>
      </div>
    </div>

  </div>

  <!-- Bottom Features Columns -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-12 px-2">

    <!-- Feature 1: Mobile Apps -->
    <div class="flex flex-col gap-5 group">
      <div
        class="w-12 h-12 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-neutral-400 group-hover:text-white group-hover:bg-white/10 transition-all">
        <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="smartphone"
          class="lucide lucide-smartphone w-5 h-5">
          <rect width="14" height="20" x="5" y="2" rx="2" ry="2" class=""></rect>
          <path d="M12 18h.01" class=""></path>
        </svg>
      </div>
      <div class="">
        <h3 class="text-xl font-medium text-white mb-3">Native Mobile Experience</h3>
        <p class="text-[15px] text-neutral-400 font-light leading-relaxed">
          Stay connected to your AI fleet from anywhere. Monitor conversations and intervene in real-time.
        </p>
      </div>
    </div>

    <!-- Feature 2: API -->
    <div class="flex flex-col gap-5 group">
      <div
        class="w-12 h-12 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-neutral-400 group-hover:text-white group-hover:bg-white/10 transition-all">
        <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="terminal-square" class="lucide lucide-terminal-square w-5 h-5">
          <path d="m7 11 2-2-2-2" class=""></path>
          <path d="M11 13h4" class=""></path>
          <rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect>
        </svg>
      </div>
      <div class="">
        <h3 class="text-xl font-medium text-white mb-3">Developer API</h3>
        <p class="text-[15px] text-neutral-400 font-light leading-relaxed">
          Build custom interfaces or workflows using our comprehensive API. Complete control over your data and
          interactions.
        </p>
      </div>
    </div>

    <!-- Feature 3: Multilingual -->
    <div class="flex flex-col gap-5 group">
      <div
        class="w-12 h-12 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-neutral-400 group-hover:text-white group-hover:bg-white/10 transition-all">
        <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="languages"
          class="lucide lucide-languages w-5 h-5">
          <path d="m5 8 6 6" class=""></path>
          <path d="m4 14 6-6 2-3" class=""></path>
          <path d="M2 5h12" class=""></path>
          <path d="M7 2h1" class=""></path>
          <path d="m22 22-5-10-5 10" class=""></path>
          <path d="M14 18h6" class=""></path>
        </svg>
      </div>
      <div>
        <h3 class="text-xl font-medium text-white mb-3">95+ Languages</h3>
        <p class="text-[15px] text-neutral-400 font-light leading-relaxed">
          Automatically detect and translate conversations in real-time. Support global customers without expanding your
          support team.
        </p>
      </div>
    </div>

  </div>
</section>