Glass Integrations Card

<div class="flex flex-col bg-white/10 backdrop-blur-xl rounded-2xl p-6 ring-1 ring-white/20 transition hover:-translate-y-1 hover:shadow-2xl shadow-lg text-white">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
* { font-family: 'Inter', 'Helvetica Neue', sans-serif; }
  </style>
  <div class="mb-4 flex items-center gap-3">
    <div class="flex h-9 w-9 items-center justify-center rounded-md bg-white/10 backdrop-blur-md ring-1 ring-white/20">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
        <path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z"></path>
        <path d="m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18"></path>
        <path d="m2.3 2.3 7.286 7.286"></path>
        <circle cx="11" cy="11" r="2"></circle>
      </svg>
    </div>
    <p class="text-sm font-medium text-white/70">Seamless Links</p>
  </div>
  <h2 class="mb-6 text-2xl md:text-3xl font-semibold leading-tight tracking-tight">Connect Your Favorite Tools</h2>
  <div class="flex flex-wrap items-center gap-4 mb-6">
    <div class="h-12 w-12 flex ring-1 ring-white/20 hover:scale-105 transition bg-sky-50/50 rounded-xl items-center justify-center">
      <img src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/slack.svg" alt="Slack logo" class="h-6 w-6">
    </div>
    <div class="h-12 w-12 flex ring-1 ring-white/20 hover:scale-105 transition bg-white/50 rounded-xl items-center justify-center">
      <img src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/notion.svg" alt="Notion logo" class="h-6 w-6">
    </div>
    <div class="h-12 w-12 flex ring-1 ring-white/20 hover:scale-105 transition bg-white/50 rounded-xl items-center justify-center">
      <img src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/figma.svg" alt="Figma logo" class="h-6 w-6">
    </div>
    <div class="h-12 w-12 flex ring-1 ring-white/20 hover:scale-105 transition bg-sky-50/50 rounded-xl items-center justify-center">
      <img src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/zapier.svg" alt="Zapier logo" class="h-6 w-6">
    </div>
    <div class="h-12 w-12 flex ring-1 ring-white/20 hover:scale-105 transition bg-white/50 rounded-xl items-center justify-center">
      <img src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/github.svg" alt="GitHub logo" class="h-6 w-6">
    </div>
  </div>
  <p class="mb-6 text-white/70 font-medium text-sm leading-relaxed max-w-prose">Integrate popular applications to streamline your workflow with seamless connectivity.</p>
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div class="flex items-center gap-3 rounded-lg bg-white/5 p-4 ring-1 ring-white/15">
      <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" class="h-6 w-6 text-emerald-400 flex-shrink-0">
        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
        <path d="m9 12 2 2 4-4"></path>
      </svg>
      <span class="text-white font-medium text-sm">Instant Setup</span>
    </div>
    <div class="flex items-center gap-3 rounded-lg bg-white/5 p-4 ring-1 ring-white/15">
      <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" class="h-6 w-6 text-sky-500 flex-shrink-0">
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
        <path d="m9 12 2 2 4-4"></path>
      </svg>
      <span class="text-white font-medium text-sm">Secure Connections</span>
    </div>
    <div class="flex items-center gap-3 rounded-lg bg-white/5 p-4 ring-1 ring-white/15">
      <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" class="h-6 w-6 text-cyan-400 flex-shrink-0">
        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
        <path d="M21 3v5h-5"></path>
        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
        <path d="M3 21v-5h5"></path>
      </svg>
      <span class="text-white font-medium text-sm">Automatic Sync</span>
    </div>
    <div class="flex items-center gap-3 rounded-lg bg-white/5 p-4 ring-1 ring-white/15">
      <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" class="h-6 w-6 text-indigo-400 flex-shrink-0">
        <rect width="20" height="14" x="2" y="3" rx="2" ry="2"></rect>
        <line x1="8" x2="16" y1="21" y2="21"></line>
        <line x1="12" x2="12" y1="17" y2="21"></line>
      </svg>
      <span class="text-white font-medium text-sm">Real-time Updates</span>
    </div>
  </div>
</div>