Integrations Base

<section class="ws-integrations bg-[var(--ws-integrations-bg)] py-16">
  <div class="mx-auto max-w-6xl px-6">
    <div class="text-center">
      <p class="text-sm font-semibold uppercase tracking-wider text-blue-600">Integrations</p>
      <h2 class="mt-2 text-3xl font-bold text-slate-900">Connect with your favorite tools</h2>
      <p class="mt-3 mx-auto max-w-xl text-lg text-slate-500">Seamlessly integrate with the tools your team already uses.</p>
    </div>

    <div class="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
      <!-- Integration card -->
      <a href="#" class="group rounded-xl border border-slate-200 bg-[var(--ws-integrations-card-bg)] p-6 transition hover:-translate-y-1 hover:shadow-lg dark:hover:border-slate-600">
        <div class="flex h-14 w-14 items-center justify-center rounded-xl bg-blue-100 text-2xl">
          <svg class="h-7 w-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
        </div>
        <h3 class="mt-4 text-base font-semibold text-slate-900">Figma</h3>
        <p class="mt-2 text-sm text-slate-500">Import designs directly from Figma and keep components in sync with your design system.</p>
        <span class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-blue-600 group-hover:gap-2 transition-all">
          View details
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </span>
      </a>

      <a href="#" class="group rounded-xl border border-slate-200 bg-[var(--ws-integrations-card-bg)] p-6 transition hover:-translate-y-1 hover:shadow-lg dark:hover:border-slate-600">
        <div class="flex h-14 w-14 items-center justify-center rounded-xl bg-emerald-100 text-2xl">
          <svg class="h-7 w-7 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
        </div>
        <h3 class="mt-4 text-base font-semibold text-slate-900">Notion</h3>
        <p class="mt-2 text-sm text-slate-500">Sync documentation and content from Notion pages directly into your project workflow.</p>
        <span class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-blue-600 group-hover:gap-2 transition-all">View details <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></span>
      </a>

      <a href="#" class="group rounded-xl border border-slate-200 bg-[var(--ws-integrations-card-bg)] p-6 transition hover:-translate-y-1 hover:shadow-lg dark:hover:border-slate-600">
        <div class="flex h-14 w-14 items-center justify-center rounded-xl bg-amber-100 text-2xl">
          <svg class="h-7 w-7 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
        </div>
        <h3 class="mt-4 text-base font-semibold text-slate-900">GitHub</h3>
        <p class="mt-2 text-sm text-slate-500">Push components to repositories and trigger CI/CD pipelines on every pattern update.</p>
        <span class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-blue-600 group-hover:gap-2 transition-all">View details <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></span>
      </a>

      <a href="#" class="group rounded-xl border border-slate-200 bg-[var(--ws-integrations-card-bg)] p-6 transition hover:-translate-y-1 hover:shadow-lg dark:hover:border-slate-600">
        <div class="flex h-14 w-14 items-center justify-center rounded-xl bg-purple-100 text-2xl">
          <svg class="h-7 w-7 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
        </div>
        <h3 class="mt-4 text-base font-semibold text-slate-900">Slack</h3>
        <p class="mt-2 text-sm text-slate-500">Get notifications in Slack when new patterns are published or components are updated.</p>
        <span class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-blue-600 group-hover:gap-2 transition-all">View details <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></span>
      </a>

      <a href="#" class="group rounded-xl border border-slate-200 bg-[var(--ws-integrations-card-bg)] p-6 transition hover:-translate-y-1 hover:shadow-lg dark:hover:border-slate-600">
        <div class="flex h-14 w-14 items-center justify-center rounded-xl bg-rose-100 text-2xl">
          <svg class="h-7 w-7 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
        </div>
        <h3 class="mt-4 text-base font-semibold text-slate-900">Zapier</h3>
        <p class="mt-2 text-sm text-slate-500">Automate workflows between your apps with 5,000+ Zapier integrations.</p>
        <span class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-blue-600 group-hover:gap-2 transition-all">View details <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></span>
      </a>

      <a href="#" class="group rounded-xl border border-slate-200 bg-[var(--ws-integrations-card-bg)] p-6 transition hover:-translate-y-1 hover:shadow-lg dark:hover:border-slate-600">
        <div class="flex h-14 w-14 items-center justify-center rounded-xl bg-cyan-100 text-2xl">
          <svg class="h-7 w-7 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
        </div>
        <h3 class="mt-4 text-base font-semibold text-slate-900">Analytics</h3>
        <p class="mt-2 text-sm text-slate-500">Track component usage and adoption metrics with built-in analytics dashboards.</p>
        <span class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-blue-600 group-hover:gap-2 transition-all">View details <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></span>
      </a>
    </div>
  </div>
</section>