Responsive Integration Network Visualization

<div
  class="relative overflow-hidden ring-1 ring-white/10 bg-gradient-to-b from-slate-900/40 to-slate-950/40 rounded-3xl">
  <div class="absolute inset-0 pointer-events-none opacity-[0.12]" style="
              background-image:
                linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
                linear-gradient(0deg, rgba(255,255,255,0.08) 1px, transparent 1px);
              background-size: 56px 56px;
              background-position: center;">
  </div>

  <div class="md:px-12 md:pt-12 pt-10 pr-6 pl-6">
    <h2 class="text-xl md:text-2xl font-semibold tracking-tight text-white">Fictional integrations</h2>
    <p class="mt-2 text-sm md:text-base text-slate-400">Swap in your stack—no vendor lock‑in.</p>
  </div>

  <!-- Desktop network -->
  <div class="relative hidden md:block h-[540px]">
    <!-- Decorative gradient glows -->
    <div
      class="absolute -top-20 left-1/2 -translate-x-1/2 w-[700px] h-[700px] rounded-full bg-gradient-to-b from-indigo-500/20 via-violet-500/10 to-transparent blur-3xl">
    </div>

    <!-- Central node -->
    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center gap-3">
      <div class="relative">
        <div
          class="h-28 w-28 rounded-2xl bg-gradient-to-br from-indigo-400 via-violet-400 to-fuchsia-400 shadow-[0_20px_60px_-12px] shadow-fuchsia-500/30 ring-1 ring-white/30 flex items-center justify-center animate-pulse">
        </div>
        <div class="absolute inset-0 rounded-2xl ring-1 ring-white/20"></div>
        <div class="absolute inset-0 rounded-2xl bg-white/5"></div>
        <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="workflow"
          class="lucide lucide-workflow absolute inset-0 m-auto text-white" style="width: 34px; height: 34px;">
          <rect width="8" height="8" x="3" y="3" rx="2"></rect>
          <path d="M7 11v4a2 2 0 0 0 2 2h4"></path>
          <rect width="8" height="8" x="13" y="13" rx="2"></rect>
        </svg>
      </div>
      <div class="text-center">
        <div class="text-sm font-medium text-white">NebulaCore</div>
        <div class="text-xs text-slate-400">real‑time fabric</div>
      </div>
    </div>

    <!-- Left orbit -->
    <div class="absolute left-[10%] top-[22%]">
      <div
        class="bg-white/95 backdrop-blur rounded-xl shadow-lg ring-1 ring-slate-200 p-3 w-40 flex items-center gap-2 hover:translate-y-[-2px] transition">
        <div
          class="h-9 w-9 rounded-lg bg-indigo-50 text-indigo-600 flex items-center justify-center ring-1 ring-indigo-100">
          <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="mail"
            class="lucide lucide-mail w-5 h-5">
            <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
            <rect x="2" y="4" width="20" height="16" rx="2"></rect>
          </svg>
        </div>
        <div class="">
          <div class="text-sm font-medium text-slate-800">Postbeam</div>
          <div class="text-[11px] text-slate-500">email events</div>
        </div>
      </div>
    </div>

    <div class="absolute left-[22%] top-[42%]">
      <div
        class="bg-white/95 backdrop-blur rounded-xl shadow-lg ring-1 ring-slate-200 p-3 w-40 flex items-center gap-2 hover:translate-y-[-2px] transition">
        <div
          class="h-9 w-9 rounded-lg bg-violet-50 text-violet-600 flex items-center justify-center ring-1 ring-violet-100">
          <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="bot"
            class="lucide lucide-bot w-5 h-5">
            <path d="M12 8V4H8"></path>
            <rect width="16" height="12" x="4" y="8" rx="2"></rect>
            <path d="M2 14h2"></path>
            <path d="M20 14h2"></path>
            <path d="M15 13v2"></path>
            <path d="M9 13v2"></path>
          </svg>
        </div>
        <div>
          <div class="text-sm font-medium text-slate-800">HoloChat</div>
          <div class="text-[11px] text-slate-500">support</div>
        </div>
      </div>
    </div>

    <div class="absolute left-[8%] bottom-[22%]">
      <div
        class="bg-white/95 backdrop-blur rounded-xl shadow-lg ring-1 ring-slate-200 p-3 w-40 flex items-center gap-2 hover:translate-y-[-2px] transition">
        <div
          class="h-9 w-9 rounded-lg bg-fuchsia-50 text-fuchsia-600 flex items-center justify-center ring-1 ring-fuchsia-100">
          <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="bar-chart-3" class="lucide lucide-bar-chart-3 w-5 h-5">
            <path d="M3 3v16a2 2 0 0 0 2 2h16"></path>
            <path d="M18 17V9"></path>
            <path d="M13 17V5"></path>
            <path d="M8 17v-3"></path>
          </svg>
        </div>
        <div>
          <div class="text-sm font-medium text-slate-800">Metricly</div>
          <div class="text-[11px] text-slate-500">analytics</div>
        </div>
      </div>
    </div>

    <div class="absolute left-[26%] bottom-[8%]">
      <div
        class="bg-white/95 backdrop-blur rounded-xl shadow-lg ring-1 ring-slate-200 p-3 w-40 flex items-center gap-2 hover:translate-y-[-2px] transition">
        <div class="h-9 w-9 rounded-lg bg-cyan-50 text-cyan-600 flex items-center justify-center ring-1 ring-cyan-100">
          <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="database"
            class="lucide lucide-database w-5 h-5">
            <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
            <path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
            <path d="M3 12A9 3 0 0 0 21 12"></path>
          </svg>
        </div>
        <div>
          <div class="text-sm font-medium text-slate-800">QuarryDB</div>
          <div class="text-[11px] text-slate-500">warehouse</div>
        </div>
      </div>
    </div>

    <!-- Right orbit -->
    <div class="absolute right-[10%] top-[22%]">
      <div
        class="bg-white/95 backdrop-blur rounded-xl shadow-lg ring-1 ring-slate-200 p-3 w-40 flex items-center gap-2 hover:translate-y-[-2px] transition">
        <div
          class="h-9 w-9 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center ring-1 ring-emerald-100">
          <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="credit-card" class="lucide lucide-credit-card w-5 h-5">
            <rect width="20" height="14" x="2" y="5" rx="2"></rect>
            <line x1="2" x2="22" y1="10" y2="10"></line>
          </svg>
        </div>
        <div>
          <div class="text-sm font-medium text-slate-800">FluxPay</div>
          <div class="text-[11px] text-slate-500">payments</div>
        </div>
      </div>
    </div>

    <div class="absolute right-[22%] top-[42%]">
      <div
        class="bg-white/95 backdrop-blur rounded-xl shadow-lg ring-1 ring-slate-200 p-3 w-40 flex items-center gap-2 hover:translate-y-[-2px] transition">
        <div class="h-9 w-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center ring-1 ring-blue-100">
          <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="cloud"
            class="lucide lucide-cloud w-5 h-5">
            <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"></path>
          </svg>
        </div>
        <div>
          <div class="text-sm font-medium text-slate-800">NimbusCRM</div>
          <div class="text-[11px] text-slate-500">crm</div>
        </div>
      </div>
    </div>

    <div class="absolute right-[8%] bottom-[22%]">
      <div
        class="bg-white/95 backdrop-blur rounded-xl shadow-lg ring-1 ring-slate-200 p-3 w-40 flex items-center gap-2 hover:translate-y-[-2px] transition">
        <div
          class="h-9 w-9 rounded-lg bg-amber-50 text-amber-600 flex items-center justify-center ring-1 ring-amber-100">
          <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="store"
            class="lucide lucide-store w-5 h-5">
            <path d="M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5"></path>
            <path
              d="M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244">
            </path>
            <path d="M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05"></path>
          </svg>
        </div>
        <div>
          <div class="text-sm font-medium text-slate-800">Shopwave</div>
          <div class="text-[11px] text-slate-500">commerce</div>
        </div>
      </div>
    </div>

    <div class="absolute right-[26%] bottom-[8%]">
      <div
        class="bg-white/95 backdrop-blur rounded-xl shadow-lg ring-1 ring-slate-200 p-3 w-40 flex items-center gap-2 hover:translate-y-[-2px] transition">
        <div class="h-9 w-9 rounded-lg bg-rose-50 text-rose-600 flex items-center justify-center ring-1 ring-rose-100">
          <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-5 h-5">
            <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">
            </path>
          </svg>
        </div>
        <div>
          <div class="text-sm font-medium text-slate-800">SignalHQ</div>
          <div class="text-[11px] text-slate-500">messaging</div>
        </div>
      </div>
    </div>

    <!-- Connector dots -->
    <div
      class="absolute left-[33%] top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-violet-400 shadow-[0_0_0_4px] shadow-violet-400/20">
    </div>
    <div class="absolute left-[38%] top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-violet-400/70"></div>
    <div
      class="absolute right-[33%] top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-violet-400 shadow-[0_0_0_4px] shadow-violet-400/20">
    </div>
    <div class="absolute right-[38%] top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-violet-400/70"></div>
  </div>

  <!-- Mobile list -->
  <div class="md:hidden px-6 pb-10">
    <div class="flex items-center justify-center py-8">
      <div class="relative">
        <div
          class="h-20 w-20 rounded-2xl bg-gradient-to-br from-indigo-400 via-violet-400 to-fuchsia-400 ring-1 ring-white/30 flex items-center justify-center animate-pulse">
        </div>
        <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="workflow"
          class="lucide lucide-workflow absolute inset-0 m-auto text-white" style="width: 28px; height: 28px;">
          <rect width="8" height="8" x="3" y="3" rx="2"></rect>
          <path d="M7 11v4a2 2 0 0 0 2 2h4"></path>
          <rect width="8" height="8" x="13" y="13" rx="2"></rect>
        </svg>
      </div>
    </div>
    <div class="grid grid-cols-1 xxs:grid-cols-2 gap-4">
      <div class="bg-white/95 backdrop-blur rounded-xl shadow-lg ring-1 ring-slate-200 p-3 flex items-center gap-2">
        <div
          class="h-9 w-9 rounded-lg bg-indigo-50 text-indigo-600 flex items-center justify-center ring-1 ring-indigo-100">
          <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="mail"
            class="lucide lucide-mail w-5 h-5">
            <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
            <rect x="2" y="4" width="20" height="16" rx="2"></rect>
          </svg>
        </div>
        <div>
          <div class="text-sm font-medium text-slate-800">Postbeam</div>
          <div class="text-[11px] text-slate-500">email events</div>
        </div>
      </div>
      <div class="bg-white/95 backdrop-blur rounded-xl shadow-lg ring-1 ring-slate-200 p-3 flex items-center gap-2">
        <div
          class="h-9 w-9 rounded-lg bg-violet-50 text-violet-600 flex items-center justify-center ring-1 ring-violet-100">
          <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="bot"
            class="lucide lucide-bot w-5 h-5">
            <path d="M12 8V4H8"></path>
            <rect width="16" height="12" x="4" y="8" rx="2"></rect>
            <path d="M2 14h2"></path>
            <path d="M20 14h2"></path>
            <path d="M15 13v2"></path>
            <path d="M9 13v2"></path>
          </svg>
        </div>
        <div>
          <div class="text-sm font-medium text-slate-800">HoloChat</div>
          <div class="text-[11px] text-slate-500">support</div>
        </div>
      </div>
      <div class="bg-white/95 backdrop-blur rounded-xl shadow-lg ring-1 ring-slate-200 p-3 flex items-center gap-2">
        <div
          class="h-9 w-9 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center ring-1 ring-emerald-100">
          <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="credit-card" class="lucide lucide-credit-card w-5 h-5">
            <rect width="20" height="14" x="2" y="5" rx="2"></rect>
            <line x1="2" x2="22" y1="10" y2="10"></line>
          </svg>
        </div>
        <div>
          <div class="text-sm font-medium text-slate-800">FluxPay</div>
          <div class="text-[11px] text-slate-500">payments</div>
        </div>
      </div>
      <div class="bg-white/95 backdrop-blur rounded-xl shadow-lg ring-1 ring-slate-200 p-3 flex items-center gap-2">
        <div class="h-9 w-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center ring-1 ring-blue-100">
          <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="cloud"
            class="lucide lucide-cloud w-5 h-5">
            <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"></path>
          </svg>
        </div>
        <div>
          <div class="text-sm font-medium text-slate-800">NimbusCRM</div>
          <div class="text-[11px] text-slate-500">crm</div>
        </div>
      </div>
      <div class="bg-white/95 backdrop-blur rounded-xl shadow-lg ring-1 ring-slate-200 p-3 flex items-center gap-2">
        <div class="h-9 w-9 rounded-lg bg-cyan-50 text-cyan-600 flex items-center justify-center ring-1 ring-cyan-100">
          <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="database"
            class="lucide lucide-database w-5 h-5">
            <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
            <path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
            <path d="M3 12A9 3 0 0 0 21 12"></path>
          </svg>
        </div>
        <div>
          <div class="text-sm font-medium text-slate-800">QuarryDB</div>
          <div class="text-[11px] text-slate-500">warehouse</div>
        </div>
      </div>
      <div class="bg-white/95 backdrop-blur rounded-xl shadow-lg ring-1 ring-slate-200 p-3 flex items-center gap-2">
        <div
          class="h-9 w-9 rounded-lg bg-amber-50 text-amber-600 flex items-center justify-center ring-1 ring-amber-100">
          <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="store"
            class="lucide lucide-store w-5 h-5">
            <path d="M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5"></path>
            <path
              d="M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244">
            </path>
            <path d="M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05"></path>
          </svg>
        </div>
        <div>
          <div class="text-sm font-medium text-slate-800">Shopwave</div>
          <div class="text-[11px] text-slate-500">commerce</div>
        </div>
      </div>
    </div>
  </div>

  <div class="md:px-12 mt-2 pr-6 pb-12 pl-6">
    <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
      <div class="text-sm text-slate-400">
        Stream to your lake, enrich in transit, and route anywhere—endpoints are fictional for demo purposes.
      </div>
      <div class="flex items-center gap-2">
        <div class="h-2 w-2 rounded-full bg-emerald-400"></div>
        <span class="text-xs text-slate-300">Status: All connectors healthy</span>
      </div>
    </div>
  </div>
</div>