<!--
@type: Integration
@industry: SaaS
@style: Minimal
@category: Support
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Component Styles */
.integration-section {
background-color: var(--color-white);
padding: var(--spacing-16) 0;
}
.container {
max-width: 80rem; /* max-w-7xl */
margin: 0 auto;
padding: 0 var(--spacing-4);
}
.section-header {
max-width: 48rem; /* max-w-3xl */
margin: 0 auto var(--spacing-16);
text-align: center;
}
.section-title {
font-size: 1.875rem; /* text-3xl */
font-weight: 600;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
.section-description {
margin-top: var(--spacing-4);
font-size: 1.125rem; /* text-lg */
line-height: 1.75;
color: var(--color-gray-600);
}
.integration-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
.integration-card {
position: relative;
border-radius: 1rem;
border: 1px solid var(--color-gray-200);
background-color: var(--color-white);
padding: var(--spacing-8);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
transition: box-shadow 0.15s ease-in-out;
}
.integration-card:hover {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.integration-logo {
height: 2rem; /* h-8 */
width: auto;
margin-bottom: 1.5rem; /* mb-6 */
}
.integration-title {
font-size: 1.125rem; /* text-lg */
font-weight: 600;
line-height: 1.75;
color: var(--color-gray-900);
}
.integration-description {
margin-top: var(--spacing-4);
font-size: 1rem; /* text-base */
color: var(--color-gray-600);
}
.integration-link {
margin-top: var(--spacing-6);
display: flex;
align-items: center;
gap: 0.75rem;
}
.learn-more-btn {
font-size: 0.875rem; /* text-sm */
font-weight: 600;
line-height: 1.5;
color: var(--color-blue-600);
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.learn-more-btn:hover {
color: var(--color-blue-500);
}
.cta-section {
margin-top: var(--spacing-12);
text-align: center;
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 0.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-white);
background-color: var(--color-blue-600);
text-decoration: none;
transition: background-color 0.15s ease-in-out;
}
.cta-button:hover {
background-color: var(--color-blue-700);
}
.cta-button span {
margin-left: 0.5rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.integration-section {
padding: var(--spacing-24) 0;
}
.container {
padding: 0 var(--spacing-6);
}
.section-title {
font-size: 2.25rem; /* text-4xl */
}
.integration-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.container {
padding: 0 var(--spacing-8);
}
.integration-grid {
grid-template-columns: repeat(3, 1fr);
}
.cta-section {
margin-top: var(--spacing-16);
}
}
</style>
<section class="integration-section">
<div class="container">
<!-- Section Header -->
<div class="section-header">
<h2 class="section-title">
Seamlessly integrate with your favorite tools
</h2>
<p class="section-description">
Connect your workflow with 100+ integrations. Our platform works with the tools you already use and love.
</p>
</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 Integration</h3>
<p class="integration-description">
Get real-time notifications and updates directly in your Slack channels. Keep your team in sync without switching context.
</p>
<div class="integration-link">
<button type="button" class="learn-more-btn">
Learn more <span aria-hidden="true">→</span>
</button>
</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 Integration</h3>
<p class="integration-description">
Automatically sync and manage your files across Dropbox. Access and share documents seamlessly.
</p>
<div class="integration-link">
<button type="button" class="learn-more-btn">
Learn more <span aria-hidden="true">→</span>
</button>
</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 Workspace</h3>
<p class="integration-description">
Integrate with Google Calendar, Drive, and other Google services for a unified workflow experience.
</p>
<div class="integration-link">
<button type="button" class="learn-more-btn">
Learn more <span aria-hidden="true">→</span>
</button>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<a href="#" class="cta-button">
View all integrations
<span aria-hidden="true">→</span>
</a>
</div>
</div>
</section>
<!--
@type: Integration
@industry: SaaS
@style: Minimal
@category: Support
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="mx-auto max-w-3xl text-center mb-16">
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
Seamlessly integrate with your favorite tools
</h2>
<p class="mt-4 text-lg leading-8 text-gray-600">
Connect your workflow with 100+ integrations. Our platform works with the tools you already use and love.
</p>
</div>
<!-- Integration Grid -->
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Slack Integration -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<!-- Slack Logo -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack" class="h-8 w-auto mb-6" />
<h3 class="text-lg font-semibold leading-8 text-gray-900">Slack Integration</h3>
<p class="mt-4 text-base text-gray-600">
Get real-time notifications and updates directly in your Slack channels. Keep your team in sync without switching context.
</p>
<div class="mt-6 flex items-center gap-x-3">
<button type="button" class="text-sm font-semibold leading-6 text-blue-600 hover:text-blue-500">
Learn more <span aria-hidden="true">→</span>
</button>
</div>
</div>
<!-- Dropbox Integration -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<!-- Dropbox Logo -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox" class="h-8 w-auto mb-6" />
<h3 class="text-lg font-semibold leading-8 text-gray-900">Dropbox Integration</h3>
<p class="mt-4 text-base text-gray-600">
Automatically sync and manage your files across Dropbox. Access and share documents seamlessly.
</p>
<div class="mt-6 flex items-center gap-x-3">
<button type="button" class="text-sm font-semibold leading-6 text-blue-600 hover:text-blue-500">
Learn more <span aria-hidden="true">→</span>
</button>
</div>
</div>
<!-- Google Integration -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<!-- Google Logo -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" alt="Google" class="h-8 w-auto mb-6" />
<h3 class="text-lg font-semibold leading-8 text-gray-900">Google Workspace</h3>
<p class="mt-4 text-base text-gray-600">
Integrate with Google Calendar, Drive, and other Google services for a unified workflow experience.
</p>
<div class="mt-6 flex items-center gap-x-3">
<button type="button" class="text-sm font-semibold leading-6 text-blue-600 hover:text-blue-500">
Learn more <span aria-hidden="true">→</span>
</button>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="mt-12 lg:mt-16 text-center">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-base font-medium text-white bg-blue-600 hover:bg-blue-700 transition duration-150 ease-in-out">
View all integrations
<span class="ml-2" aria-hidden="true">→</span>
</a>
</div>
</div>
</section>
