Component:

Integration Product Light

Name: Integration Product Light
Availability: InStock

Free

Tags: Integration Page Section Content Support Product Light

Colors:

Description:

This carefully crafted Integration component is perfect for Product landing pages, featuring a Light design that looks great and converts well.

Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.


                <!--
@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>

Integration Product Light

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions