Integrations Detail

<section class="ws-integrations ws-integration-detail mx-auto max-w-3xl px-6 py-16">
  <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-700">← Back to Integrations</a>

  <!-- Connection diagram -->
  <div class="mt-8 flex items-center justify-center gap-6">
    <div class="flex h-20 w-20 items-center justify-center rounded-2xl bg-slate-100 shadow-sm ring-1 ring-slate-200">
      <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-color-surface-inverse)] text-sm font-bold text-white">W</div>
    </div>
    <div class="flex items-center gap-2 text-slate-300">
      <div class="h-px w-8 bg-current"></div>
      <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 2H4m0 0l4 4m-4-4l4-4"/></svg>
      <div class="h-px w-8 bg-current"></div>
    </div>
    <div class="flex h-20 w-20 items-center justify-center rounded-2xl bg-blue-50 shadow-sm ring-1 ring-blue-200">
      <svg class="h-10 w-10 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>
  </div>

  <div class="mt-6 text-center">
    <h1 class="text-2xl font-bold text-slate-900">Webspire + Figma</h1>
    <p class="mt-2 text-slate-500">Import designs directly from Figma and keep your component library in sync.</p>
  </div>

  <!-- Setup steps -->
  <div class="mt-12 space-y-6">
    <h2 class="text-lg font-semibold text-slate-900">Setup Guide</h2>

    <div class="rounded-2xl border border-slate-200 bg-[var(--ws-color-surface)] p-6">
      <div class="flex items-start gap-4">
        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-600">1</span>
        <div>
          <h3 class="text-sm font-semibold text-slate-900">Install the Figma Plugin</h3>
          <p class="mt-1 text-sm text-slate-500">Open Figma, go to Plugins → Search for "Webspire" → Install. The plugin will appear in your toolbar.</p>
        </div>
      </div>
    </div>

    <div class="rounded-2xl border border-slate-200 bg-[var(--ws-color-surface)] p-6">
      <div class="flex items-start gap-4">
        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-600">2</span>
        <div>
          <h3 class="text-sm font-semibold text-slate-900">Connect Your Account</h3>
          <p class="mt-1 text-sm text-slate-500">Click "Connect" in the plugin and paste your Webspire API key. You can find your key in Settings → API.</p>
        </div>
      </div>
    </div>

    <div class="rounded-2xl border border-slate-200 bg-[var(--ws-color-surface)] p-6">
      <div class="flex items-start gap-4">
        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-600">3</span>
        <div>
          <h3 class="text-sm font-semibold text-slate-900">Import Components</h3>
          <p class="mt-1 text-sm text-slate-500">Select any Figma frame and click "Import to Webspire". Your components will appear in the registry within seconds.</p>
        </div>
      </div>
    </div>
  </div>
</section>