Integration Product Light

                <!--
@type: Integration
@industry: Product
@style: Light
@category: Page Section, Support, Content
@framework: HTML/CSS
@license: Free
-->

<style>
:root {
  /* Colors */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-blue-50: #eff6ff;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-green-50: #f0fdf4;
  --color-green-700: #15803d;
  --color-amber-50: #fffbeb;
  --color-amber-700: #b45309;
  --color-red-500: #ef4444;
  --color-yellow-500: #eab308;
  --color-green-500: #22c55e;

  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;

  /* Container */
  --container-max-width: 80rem;
  --content-max-width: 48rem;
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base Styles */
body {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
}

/* Component Styles */
.integration-section {
  background-color: var(--color-gray-50);
  padding: var(--spacing-16) 0;
}

.integration-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

.section-header {
  max-width: var(--content-max-width);
  margin: 0 auto;
  text-align: center;
  margin-bottom: var(--spacing-12);
}

.section-label {
  color: var(--color-blue-600);
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.section-title {
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-gray-800);
  margin-top: var(--spacing-2);
}

.section-description {
  margin-top: var(--spacing-4);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-gray-600);
}

.tab-container {
  margin-bottom: var(--spacing-10);
  display: flex;
  justify-content: center;
}

.tab-group {
  display: inline-flex;
  flex-wrap: wrap;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  padding: var(--spacing-1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tab-button {
  border: none;
  background: none;
  padding: var(--spacing-2) var(--spacing-5);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-gray-600);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-button:hover {
  color: var(--color-gray-800);
}

.tab-button[aria-selected="true"] {
  background-color: var(--color-blue-50);
  color: var(--color-gray-800);
}

.integration-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
}

.integration-card {
  position: relative;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 1rem;
  padding: var(--spacing-8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.integration-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.integration-logo {
  height: 2.5rem;
  width: auto;
  margin-bottom: var(--spacing-6);
}

.integration-title {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-gray-800);
}

.integration-description {
  margin-top: var(--spacing-3);
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

.integration-footer {
  margin-top: var(--spacing-6);
  display: flex;
  align-items: center;
}

.integration-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 400;
  margin-right: var(--spacing-2);
}

.badge-icon {
  width: 0.75rem;
  height: 0.75rem;
  margin-right: var(--spacing-1);
}

.badge-green {
  background-color: var(--color-green-50);
  color: var(--color-green-700);
}

.badge-blue {
  background-color: var(--color-blue-50);
  color: var(--color-blue-700);
}

.badge-amber {
  background-color: var(--color-amber-50);
  color: var(--color-amber-700);
}

.connect-link {
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-blue-600);
  text-decoration: none;
  transition: color 0.2s ease;
}

.connect-link:hover {
  color: var(--color-blue-500);
}

.more-card {
  border-style: dashed;
  border-color: var(--color-gray-300);
}

.more-card:hover {
  border-color: var(--color-gray-400);
}

.more-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-blue-50);
  border-radius: 9999px;
  margin-bottom: var(--spacing-6);
}

.more-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-blue-600);
}

/* API Section Styles */
.api-section {
  margin-top: var(--spacing-16);
}

.api-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.api-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.api-content {
  padding: var(--spacing-8);
}

.api-badge {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-blue-50);
  color: var(--color-blue-700);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: var(--spacing-4);
}

.api-badge-icon {
  width: 0.75rem;
  height: 0.75rem;
  margin-right: var(--spacing-1);
}

.api-title {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-4);
}

.api-description {
  font-size: 1rem;
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-6);
}

.feature-list {
  list-style: none;
  margin-bottom: var(--spacing-8);
}

.feature-item {
  display: flex;
  margin-bottom: var(--spacing-3);
}

.feature-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-blue-600);
  margin-right: var(--spacing-2);
  flex-shrink: 0;
}

.feature-text {
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

.integration-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.integration-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.integration-button-secondary {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-800);
}

.integration-button-secondary:hover {
  background-color: var(--color-gray-50);
}

.integration-button-primary {
  background-color: var(--color-blue-600);
  border: 1px solid transparent;
  color: var(--color-white);
}

.integration-button-primary:hover {
  background-color: var(--color-blue-700);
}

.code-section {
  background-color: var(--color-gray-50);
  padding: var(--spacing-8);
  border-top: 1px solid var(--color-gray-200);
}

.code-window {
  background-color: var(--color-gray-900);
  border-radius: 0.5rem;
  padding: var(--spacing-5);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  color: var(--color-gray-300);
  overflow: hidden;
}

.code-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.window-dots {
  display: flex;
  gap: var(--spacing-1);
}

.window-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
}

.dot-red {
  background-color: var(--color-red-500);
}

.dot-yellow {
  background-color: var(--color-yellow-500);
}

.dot-green {
  background-color: var(--color-green-500);
}

.code-filename {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--color-gray-500);
}

.code-content {
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-x: auto;
}

/* Responsive Breakpoints */
@media (min-width: 640px) {
  .integration-section {
    padding: var(--spacing-24) 0;
  }

  .integration-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .integration-container {
    padding: 0 var(--spacing-8);
  }

  .section-title {
    font-size: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .integration-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .api-section {
    margin-top: var(--spacing-24);
  }

  .api-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .api-content {
    padding: var(--spacing-12);
  }

  .code-section {
    padding: var(--spacing-12);
    border-top: none;
    border-left: 1px solid var(--color-gray-200);
  }
}

@media (min-width: 1280px) {
  .integration-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
</style>

<section class="integration-section">
  <div class="integration-container">
    <!-- Section Header -->
    <div class="section-header">
      <span class="section-label">Powerful Ecosystem</span>
      <h2 class="section-title">Integrate with your essential tools</h2>
      <p class="section-description">Our product seamlessly connects with over 50+ tools and platforms you already use, creating a unified workflow experience.</p>
    </div>

    <!-- Integration Categories -->
    <div class="tab-container">
      <div class="tab-group" role="tablist" aria-label="Integration categories">
        <button type="button" class="tab-button" role="tab" aria-selected="true">Popular</button>
        <button type="button" class="tab-button" role="tab" aria-selected="false">Analytics</button>
        <button type="button" class="tab-button" role="tab" aria-selected="false">Productivity</button>
        <button type="button" class="tab-button" role="tab" aria-selected="false">E-commerce</button>
      </div>
    </div>

    <!-- Integration Grid -->
    <div class="integration-grid">
      <!-- Slack Integration -->
      <div class="integration-card">
        <img src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack" class="integration-logo" />
        <h3 class="integration-title">Slack</h3>
        <p class="integration-description">Send automated notifications and updates directly to your team's channels.</p>
        <div class="integration-footer">
          <span class="integration-badge badge-green">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="badge-icon">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
            Easy setup
          </span>
          <a href="#" class="connect-link">Connect <span aria-hidden="true">→</span></a>
        </div>
      </div>

      <!-- Shopify Integration -->
      <div class="integration-card">
        <img src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" alt="Shopify" class="integration-logo" />
        <h3 class="integration-title">Shopify</h3>
        <p class="integration-description">Sync inventory, orders and customer data between your store and our platform.</p>
        <div class="integration-footer">
          <span class="integration-badge badge-green">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="badge-icon">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
            Popular
          </span>
          <a href="#" class="connect-link">Connect <span aria-hidden="true">→</span></a>
        </div>
      </div>

      <!-- Stripe Integration -->
      <div class="integration-card">
        <img src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" alt="Stripe" class="integration-logo" />
        <h3 class="integration-title">Stripe</h3>
        <p class="integration-description">Process payments securely and manage subscriptions with flexible options.</p>
        <div class="integration-footer">
          <span class="integration-badge badge-blue">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="badge-icon">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
            Recommended
          </span>
          <a href="#" class="connect-link">Connect <span aria-hidden="true">→</span></a>
        </div>
      </div>

      <!-- Google Integration -->
      <div class="integration-card">
        <img src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" alt="Google" class="integration-logo" />
        <h3 class="integration-title">Google</h3>
        <p class="integration-description">Connect with Google Analytics, Drive, and other Google services.</p>
        <div class="integration-footer">
          <span class="integration-badge badge-green">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="badge-icon">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
            Popular
          </span>
          <a href="#" class="connect-link">Connect <span aria-hidden="true">→</span></a>
        </div>
      </div>

      <!-- Notion Integration -->
      <div class="integration-card">
        <img src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" alt="Notion" class="integration-logo" />
        <h3 class="integration-title">Notion</h3>
        <p class="integration-description">Embed product data directly in your Notion workspace and documents.</p>
        <div class="integration-footer">
          <span class="integration-badge badge-amber">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="badge-icon">
              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
            </svg>
            Beta
          </span>
          <a href="#" class="connect-link">Connect <span aria-hidden="true">→</span></a>
        </div>
      </div>

      <!-- Dropbox Integration -->
      <div class="integration-card">
        <img src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox" class="integration-logo" />
        <h3 class="integration-title">Dropbox</h3>
        <p class="integration-description">Automatically sync and manage your files across Dropbox and our platform.</p>
        <div class="integration-footer">
          <span class="integration-badge badge-green">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="badge-icon">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
            Easy setup
          </span>
          <a href="#" class="connect-link">Connect <span aria-hidden="true">→</span></a>
        </div>
      </div>

      <!-- Product Hunt Integration -->
      <div class="integration-card">
        <img src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" alt="Product Hunt" class="integration-logo" />
        <h3 class="integration-title">Product Hunt</h3>
        <p class="integration-description">Share your product updates and collect feedback from the community.</p>
        <div class="integration-footer">
          <span class="integration-badge badge-amber">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="badge-icon">
              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
            </svg>
            Beta
          </span>
          <a href="#" class="connect-link">Connect <span aria-hidden="true">→</span></a>
        </div>
      </div>

      <!-- More Integrations Card -->
      <div class="integration-card more-card">
        <div class="more-icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="more-icon">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
          </svg>
        </div>
        <h3 class="integration-title">More coming soon</h3>
        <p class="integration-description">Don't see what you need? Request an integration with your favorite tools.</p>
        <div class="integration-footer">
          <a href="#" class="connect-link">Request integration <span aria-hidden="true">→</span></a>
        </div>
      </div>
    </div>

    <!-- API Section -->
    <div class="api-section">
      <div class="api-card">
        <div class="api-grid">
          <div class="api-content">
            <div class="api-badge">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="api-badge-icon">
                <path fill-rule="evenodd" d="M4.25 2A2.25 2.25 0 002 4.25v11.5A2.25 2.25 0 004.25 18h11.5A2.25 2.25 0 0018 15.75V4.25A2.25 2.25 0 0015.75 2H4.25zm4.03 6.28a.75.75 0 00-1.06-1.06L4.97 9.47a.75.75 0 000 1.06l2.25 2.25a.75.75 0 001.06-1.06L6.56 10l1.72-1.72zm4.5-1.06a.75.75 0 10-1.06 1.06L13.44 10l-1.72 1.72a.75.75 0 101.06 1.06l2.25-2.25a.75.75 0 000-1.06l-2.25-2.25z" clip-rule="evenodd" />
              </svg>
              Developer API
            </div>
            <h3 class="api-title">Build custom integrations</h3>
            <p class="api-description">Need something more specialized? Our comprehensive API allows you to build custom integrations tailored to your specific workflow needs.</p>
            <ul class="feature-list">
              <li class="feature-item">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="feature-icon">
                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                </svg>
                <span class="feature-text">RESTful API with comprehensive documentation</span>
              </li>
              <li class="feature-item">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="feature-icon">
                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                </svg>
                <span class="feature-text">Webhooks for real-time event notifications</span>
              </li>
              <li class="feature-item">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="feature-icon">
                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                </svg>
                <span class="feature-text">OAuth 2.0 authentication for secure access</span>
              </li>
            </ul>
            <div class="integration-button-group">
              <a href="#" class="integration-button integration-button-secondary">View API docs</a>
              <a href="#" class="integration-button integration-button-primary">Get API key</a>
            </div>
          </div>
          <div class="code-section">
            <div class="code-window">
              <div class="code-header">
                <div class="window-dots">
                  <div class="window-dot dot-red"></div>
                  <div class="window-dot dot-yellow"></div>
                  <div class="window-dot dot-green"></div>
                </div>
                <div class="code-filename">api-example.js</div>
              </div>
              <pre class="code-content"><code>// Initialize the API client
const client = new ProductAPI({
  apiKey: 'YOUR_API_KEY'
});

// Fetch available integrations
const integrations = await client.integrations.list();

// Connect to a service
const connection = await client.integrations.connect({
  service: 'slack',
  config: {
    webhookUrl: 'https://hooks.slack.com/...',
    channel: '#notifications',
    events: ['product.updated', 'order.created']
  }
});

// Success! Integration is now active
console.log(`Connected to ${connection.service}`);
console.log(`Status: ${connection.status}`);</code></pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
  // Simple tab functionality
  document.addEventListener('DOMContentLoaded', function() {
    const tabButtons = document.querySelectorAll('[role="tab"]');
    
    tabButtons.forEach(button => {
      button.addEventListener('click', function() {
        // Remove active state from all tabs
        tabButtons.forEach(btn => {
          btn.classList.remove('bg-blue-50');
          btn.classList.add('hover:text-gray-800');
          btn.setAttribute('aria-selected', 'false');
        });
        
        // Set active state on clicked tab
        this.classList.add('bg-blue-50');
        this.classList.remove('hover:text-gray-800');
        this.setAttribute('aria-selected', 'true');
        
        // In a real implementation, you would show/hide content based on selected tab
        // For this demo, we're just showing the UI interaction
      });
    });
  });
</script>
            

                <!--
@type: Integration
@industry: Product
@style: Light
@category: Page Section, Support, Content
@framework: Tailwind
@license: Free
-->

<section class="bg-gray-50 py-16 sm:py-24">
  <div class="container mx-auto px-4 md:px-8">
    <!-- Section Header -->
    <div class="mx-auto max-w-3xl text-center mb-12">
      <span class="text-blue-600 font-medium text-sm uppercase tracking-wider">Powerful Ecosystem</span>
      <h2 class="text-3xl font-medium tracking-tight text-gray-800 sm:text-4xl">
        Integrate with your essential tools
      </h2>
      <p class="mt-4 text-base leading-7 text-gray-600">
        Our product seamlessly connects with over 50+ tools and platforms you already use, creating a unified workflow experience.
      </p>
    </div>

    <!-- Integration Categories -->
    <div class="mb-10 flex justify-center">
      <div class="inline-flex flex-wrap rounded-lg border border-gray-200 bg-white p-1 shadow-sm" role="tablist" aria-label="Integration categories">
        <button type="button" class="rounded-md px-5 py-2.5 text-sm font-normal text-gray-800 bg-blue-50" role="tab" aria-selected="true">
          Popular
        </button>
        <button type="button" class="rounded-md px-5 py-2.5 text-sm font-normal text-gray-600 hover:text-gray-800" role="tab" aria-selected="false">
          Analytics
        </button>
        <button type="button" class="rounded-md px-5 py-2.5 text-sm font-normal text-gray-600 hover:text-gray-800" role="tab" aria-selected="false">
          Productivity
        </button>
        <button type="button" class="rounded-md px-5 py-2.5 text-sm font-normal text-gray-600 hover:text-gray-800" role="tab" aria-selected="false">
          E-commerce
        </button>
      </div>
    </div>

    <!-- Integration Grid -->
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
      <!-- Slack Integration -->
      <div class="group relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all duration-200 hover:shadow-md hover:border-gray-200">
        <!-- Slack Logo -->
        <img src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack" class="h-10 w-auto mb-6" />
        <h3 class="text-lg font-normal leading-7 text-gray-800">Slack</h3>
        <p class="mt-3 text-sm text-gray-600">
          Send automated notifications and updates directly to your team's channels.
        </p>
        <div class="mt-6 flex items-center">
          <span class="inline-flex items-center rounded-full bg-green-50 px-2.5 py-1 text-xs font-normal text-green-700 mr-2">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-1 h-3 w-3">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
            Easy setup
          </span>
          <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500 ml-auto">
            Connect <span aria-hidden="true">→</span>
          </a>
        </div>
      </div>

      <!-- Shopify Integration -->
      <div class="group relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all duration-200 hover:shadow-md hover:border-gray-200">
        <!-- Shopify Logo -->
        <img src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" alt="Shopify" class="h-10 w-auto mb-6" />
        <h3 class="text-lg font-normal leading-7 text-gray-800">Shopify</h3>
        <p class="mt-3 text-sm text-gray-600">
          Sync inventory, orders and customer data between your store and our platform.
        </p>
        <div class="mt-6 flex items-center">
          <span class="inline-flex items-center rounded-full bg-green-50 px-2.5 py-1 text-xs font-normal text-green-700 mr-2">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-1 h-3 w-3">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
            Popular
          </span>
          <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500 ml-auto">
            Connect <span aria-hidden="true">→</span>
          </a>
        </div>
      </div>

      <!-- Stripe Integration -->
      <div class="group relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all duration-200 hover:shadow-md hover:border-gray-200">
        <!-- Stripe Logo -->
        <img src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" alt="Stripe" class="h-10 w-auto mb-6" />
        <h3 class="text-lg font-normal leading-7 text-gray-800">Stripe</h3>
        <p class="mt-3 text-sm text-gray-600">
          Process payments securely and manage subscriptions with flexible options.
        </p>
        <div class="mt-6 flex items-center">
          <span class="inline-flex items-center rounded-full bg-blue-50 px-2.5 py-1 text-xs font-normal text-blue-700 mr-2">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-1 h-3 w-3">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
            Recommended
          </span>
          <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500 ml-auto">
            Connect <span aria-hidden="true">→</span>
          </a>
        </div>
      </div>

      <!-- Google Integration -->
      <div class="group relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all duration-200 hover:shadow-md hover:border-gray-200">
        <!-- Google Logo -->
        <img src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" alt="Google" class="h-10 w-auto mb-6" />
        <h3 class="text-lg font-normal leading-7 text-gray-800">Google</h3>
        <p class="mt-3 text-sm text-gray-600">
          Connect with Google Analytics, Drive, and other Google services.
        </p>
        <div class="mt-6 flex items-center">
          <span class="inline-flex items-center rounded-full bg-green-50 px-2.5 py-1 text-xs font-normal text-green-700 mr-2">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-1 h-3 w-3">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
            Popular
          </span>
          <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500 ml-auto">
            Connect <span aria-hidden="true">→</span>
          </a>
        </div>
      </div>

      <!-- Notion Integration -->
      <div class="group relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all duration-200 hover:shadow-md hover:border-gray-200">
        <!-- Notion Logo -->
        <img src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" alt="Notion" class="h-10 w-auto mb-6" />
        <h3 class="text-lg font-normal leading-7 text-gray-800">Notion</h3>
        <p class="mt-3 text-sm text-gray-600">
          Embed product data directly in your Notion workspace and documents.
        </p>
        <div class="mt-6 flex items-center">
          <span class="inline-flex items-center rounded-full bg-amber-50 px-2.5 py-1 text-xs font-normal text-amber-700 mr-2">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-1 h-3 w-3">
              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
            </svg>
            Beta
          </span>
          <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500 ml-auto">
            Connect <span aria-hidden="true">→</span>
          </a>
        </div>
      </div>

      <!-- Dropbox Integration -->
      <div class="group relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all duration-200 hover:shadow-md hover:border-gray-200">
        <!-- Dropbox Logo -->
        <img src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox" class="h-10 w-auto mb-6" />
        <h3 class="text-lg font-normal leading-7 text-gray-800">Dropbox</h3>
        <p class="mt-3 text-sm text-gray-600">
          Automatically sync and manage your files across Dropbox and our platform.
        </p>
        <div class="mt-6 flex items-center">
          <span class="inline-flex items-center rounded-full bg-green-50 px-2.5 py-1 text-xs font-normal text-green-700 mr-2">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-1 h-3 w-3">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
            Easy setup
          </span>
          <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500 ml-auto">
            Connect <span aria-hidden="true">→</span>
          </a>
        </div>
      </div>

      <!-- Product Hunt Integration -->
      <div class="group relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm transition-all duration-200 hover:shadow-md hover:border-gray-200">
        <!-- Product Hunt Logo -->
        <img src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" alt="Product Hunt" class="h-10 w-auto mb-6" />
        <h3 class="text-lg font-normal leading-7 text-gray-800">Product Hunt</h3>
        <p class="mt-3 text-sm text-gray-600">
          Share your product updates and collect feedback from the community.
        </p>
        <div class="mt-6 flex items-center">
          <span class="inline-flex items-center rounded-full bg-amber-50 px-2.5 py-1 text-xs font-normal text-amber-700 mr-2">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-1 h-3 w-3">
              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
            </svg>
            Beta
          </span>
          <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500 ml-auto">
            Connect <span aria-hidden="true">→</span>
          </a>
        </div>
      </div>

      <!-- More Integrations Card -->
      <div class="group relative rounded-2xl border border-dashed border-gray-300 bg-white p-8 shadow-sm transition-all duration-200 hover:shadow-md hover:border-gray-400">
        <div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-50 mb-6">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-blue-600">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
          </svg>
        </div>
        <h3 class="text-lg font-normal leading-7 text-gray-800">More coming soon</h3>
        <p class="mt-3 text-sm text-gray-600">
          Don't see what you need? Request an integration with your favorite tools.
        </p>
        <div class="mt-6">
          <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">
            Request integration <span aria-hidden="true">→</span>
          </a>
        </div>
      </div>
    </div>

    <!-- API Section -->
    <div class="mt-16 lg:mt-24">
      <div class="rounded-2xl bg-white border border-gray-200 shadow-sm overflow-hidden">
        <div class="grid grid-cols-1 lg:grid-cols-2">
          <div class="p-8 lg:p-12">
            <div class="inline-flex items-center rounded-full bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700 mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-1 h-3 w-3">
                <path fill-rule="evenodd" d="M4.25 2A2.25 2.25 0 002 4.25v11.5A2.25 2.25 0 004.25 18h11.5A2.25 2.25 0 0018 15.75V4.25A2.25 2.25 0 0015.75 2H4.25zm4.03 6.28a.75.75 0 00-1.06-1.06L4.97 9.47a.75.75 0 000 1.06l2.25 2.25a.75.75 0 001.06-1.06L6.56 10l1.72-1.72zm4.5-1.06a.75.75 0 10-1.06 1.06L13.44 10l-1.72 1.72a.75.75 0 101.06 1.06l2.25-2.25a.75.75 0 000-1.06l-2.25-2.25z" clip-rule="evenodd" />
              </svg>
              Developer API
            </div>
            <h3 class="text-2xl font-medium text-gray-800 mb-4">Build custom integrations</h3>
            <p class="text-base text-gray-600 mb-6">
              Need something more specialized? Our comprehensive API allows you to build custom integrations tailored to your specific workflow needs.
            </p>
            <ul class="space-y-3 mb-8">
              <li class="flex">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-blue-600 mr-2 flex-shrink-0">
                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                </svg>
                <span class="text-sm text-gray-600">RESTful API with comprehensive documentation</span>
              </li>
              <li class="flex">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-blue-600 mr-2 flex-shrink-0">
                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                </svg>
                <span class="text-sm text-gray-600">Webhooks for real-time event notifications</span>
              </li>
              <li class="flex">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-blue-600 mr-2 flex-shrink-0">
                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                </svg>
                <span class="text-sm text-gray-600">OAuth 2.0 authentication for secure access</span>
              </li>
            </ul>
            <div class="flex flex-wrap gap-4">
              <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-gray-200 rounded-lg text-sm font-medium text-gray-800 bg-white hover:bg-gray-50 shadow-sm transition-colors">
                View API docs
              </a>
              <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 shadow-sm transition-colors">
                Get API key
              </a>
            </div>
          </div>
          <div class="bg-gray-50 p-8 lg:p-12 border-t lg:border-t-0 lg:border-l border-gray-200">
            <div class="rounded-lg bg-gray-900 p-5 font-mono text-sm text-gray-300 overflow-hidden" aria-label="API code example">
              <div class="flex items-center mb-4">
                <div class="flex space-x-1.5">
                  <div class="h-3 w-3 rounded-full bg-red-500"></div>
                  <div class="h-3 w-3 rounded-full bg-yellow-500"></div>
                  <div class="h-3 w-3 rounded-full bg-green-500"></div>
                </div>
                <div class="ml-auto text-xs text-gray-500">api-example.js</div>
              </div>
              <pre class="text-xs leading-relaxed overflow-x-auto"><code>// Initialize the API client
const client = new ProductAPI({
  apiKey: 'YOUR_API_KEY'
});

// Fetch available integrations
const integrations = await client.integrations.list();

// Connect to a service
const connection = await client.integrations.connect({
  service: 'slack',
  config: {
    webhookUrl: 'https://hooks.slack.com/...',
    channel: '#notifications',
    events: ['product.updated', 'order.created']
  }
});

// Success! Integration is now active
console.log(`Connected to ${connection.service}`);
console.log(`Status: ${connection.status}`);</code></pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
  // Simple tab functionality
  document.addEventListener('DOMContentLoaded', function() {
    const tabButtons = document.querySelectorAll('[role="tab"]');
    
    tabButtons.forEach(button => {
      button.addEventListener('click', function() {
        // Remove active state from all tabs
        tabButtons.forEach(btn => {
          btn.classList.remove('bg-blue-50');
          btn.classList.add('hover:text-gray-800');
          btn.setAttribute('aria-selected', 'false');
        });
        
        // Set active state on clicked tab
        this.classList.add('bg-blue-50');
        this.classList.remove('hover:text-gray-800');
        this.setAttribute('aria-selected', 'true');
        
        // In a real implementation, you would show/hide content based on selected tab
        // For this demo, we're just showing the UI interaction
      });
    });
  });
</script>