<!--
@type: Integration
@industry: Software
@style: Minimal
@category: Page Section, Support, Content
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-indigo-50: #eef2ff;
--color-indigo-500: #6366f1;
--color-indigo-600: #4f46e5;
--color-green-50: #f0fdf4;
--color-green-500: #22c55e;
--color-green-700: #15803d;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
* {
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";
}
.integration-section {
background-color: var(--color-white);
padding: 4rem 1rem;
}
@media (min-width: 640px) {
.integration-section {
padding: 6rem 1.5rem;
}
}
.container {
max-width: 80rem;
margin: 0 auto;
}
@media (min-width: 640px) {
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
}
.integration-header {
text-align: center;
max-width: 48rem;
margin: 0 auto 4rem;
}
.header-badge {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-indigo-600);
}
.header-title {
margin-top: 0.5rem;
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
@media (min-width: 640px) {
.header-title {
font-size: 2.25rem;
}
}
.header-description {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.integration-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 640px) {
.integration-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.integration-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.integration-card {
position: relative;
border-radius: 0.75rem;
border: 1px solid var(--color-gray-200);
background-color: var(--color-white);
padding: 2rem;
box-shadow: var(--shadow-sm);
transition: all 0.3s;
}
.integration-card:hover {
box-shadow: var(--shadow-md);
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rem;
}
.icon-wrapper {
height: 3rem;
width: 3rem;
background-color: var(--color-indigo-50);
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.icon-wrapper svg {
height: 2rem;
width: 2rem;
color: var(--color-indigo-600);
}
.popular-badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
background-color: var(--color-green-50);
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
font-weight: 500;
color: var(--color-green-700);
}
.integration-card-title {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-gray-900);
}
.integration-card-description {
margin-top: 0.5rem;
font-size: 1rem;
color: var(--color-gray-600);
}
.feature-list {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.feature-item {
display: flex;
align-items: center;
font-size: 0.875rem;
color: var(--color-gray-600);
}
.integration-feature-icon {
height: 1.25rem;
width: 1.25rem;
color: var(--color-green-500);
margin-right: 0.5rem;
}
.card-link {
margin-top: 2rem;
display: flex;
align-items: center;
}
.learn-more {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-indigo-600);
text-decoration: none;
transition: color 0.2s;
}
.learn-more:hover {
color: var(--color-indigo-500);
}
.learn-more span {
margin-left: 0.25rem;
}
</style>
<section class="integration-section" aria-labelledby="integration-heading">
<div class="container">
<!-- Section Header -->
<div class="integration-header">
<span class="header-badge">Powerful Integrations</span>
<h2 id="integration-heading" class="header-title">
Connect with your essential business tools
</h2>
<p class="header-description">
Seamlessly integrate with the tools your small business already uses, no technical expertise required
</p>
</div>
<!-- Featured Integrations -->
<div class="integration-grid">
<!-- QuickBooks Integration -->
<div class="integration-card">
<div class="card-header">
<div class="icon-wrapper">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 01-.75.75h-.75m-6-1.5H2.25m19.5 0v.75c0 .414-.336.75-.75.75h-.75m-1.5 0H21m-1.5 0h.75m-.75 0v-.75c0-.414.336-.75.75-.75h.75m-.375-.375H21a.375.375 0 01.375.375v.75a.375.375 0 01-.375.375h-.375m-.375 0h-.375m.375 0v-.375c0-.207.168-.375.375-.375h.375m-.375 0H21" />
</svg>
</div>
<div>
<span class="popular-badge">Popular</span>
</div>
</div>
<h3 class="integration-card-title">QuickBooks Integration</h3>
<p class="integration-card-description">Automatically sync invoices, expenses, and financial data. Save hours on bookkeeping and ensure accuracy.</p>
<div class="feature-list">
<div class="feature-item">
<svg class="integration-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Real-time sync
</div>
<div class="feature-item">
<svg class="integration-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Automated reconciliation
</div>
</div>
<div class="card-link">
<a href="#quickbooks" class="learn-more">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
<!-- Google Workspace Integration -->
<div class="integration-card">
<div class="card-header">
<div class="icon-wrapper">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
</div>
</div>
<h3 class="integration-card-title">Google Workspace</h3>
<p class="integration-card-description">Seamlessly connect with Gmail, Calendar, and Drive. Keep your team's communication and files in sync.</p>
<div class="feature-list">
<div class="feature-item">
<svg class="integration-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Email integration
</div>
<div class="feature-item">
<svg class="integration-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Calendar sync
</div>
</div>
<div class="card-link">
<a href="#google" class="learn-more">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
<!-- Stripe Integration -->
<div class="integration-card">
<div class="card-header">
<div class="icon-wrapper">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 13.5h13.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H5.25a2.25 2.25 0 00-2.25 2.25v13.5a2.25 2.25 0 002.25 2.25zm13.5-13.5h-13.5a2.25 2.25 0 00-2.25 2.25v13.5a2.25 2.25 0 002.25 2.25h13.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25z" />
</svg>
</div>
</div>
<h3 class="integration-card-title">Stripe Payments</h3>
<p class="integration-card-description">Accept payments and manage subscriptions with ease. Automatic invoice generation and payment tracking.</p>
<div class="feature-list">
<div class="feature-item">
<svg class="integration-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Secure payments
</div>
<div class="feature-item">
<svg class="integration-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Automated billing
</div>
</div>
<div class="card-link">
<a href="#stripe" class="learn-more">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Integration
@industry: Software
@style: Minimal
@category: Page Section, Support, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24" aria-labelledby="integration-heading">
<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">
<span class="text-lg font-semibold text-indigo-600">Powerful Integrations</span>
<h2 id="integration-heading" class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Connect with your essential business tools
</h2>
<p class="mt-4 text-lg text-gray-600">
Seamlessly integrate with the tools your small business already uses, no technical expertise required
</p>
</div>
<!-- Featured Integrations -->
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- QuickBooks Integration -->
<div class="relative rounded-xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-all duration-300">
<div class="flex items-center justify-between mb-8">
<div class="h-12 w-12 bg-indigo-50 rounded-lg flex items-center justify-center">
<svg class="h-8 w-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 01-.75.75h-.75m-6-1.5H2.25m19.5 0v.75c0 .414-.336.75-.75.75h-.75m-1.5 0H21m-1.5 0h.75m-.75 0v-.75c0-.414.336-.75.75-.75h.75m-.375-.375H21a.375.375 0 01.375.375v.75a.375.375 0 01-.375.375h-.375m-.375 0h-.375m.375 0v-.375c0-.207.168-.375.375-.375h.375m-.375 0H21" />
</svg>
</div>
<div class="flex items-center">
<span class="inline-flex items-center rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700">Popular</span>
</div>
</div>
<h3 class="text-lg font-medium text-gray-900">QuickBooks Integration</h3>
<p class="mt-2 text-base text-gray-600">Automatically sync invoices, expenses, and financial data. Save hours on bookkeeping and ensure accuracy.</p>
<div class="mt-6 space-y-2">
<div class="flex items-center text-sm text-gray-600">
<svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Real-time sync
</div>
<div class="flex items-center text-sm text-gray-600">
<svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Automated reconciliation
</div>
</div>
<div class="mt-8 flex items-center">
<a href="#quickbooks" class="text-sm font-semibold text-indigo-600 hover:text-indigo-500">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
<!-- Google Workspace Integration -->
<div class="relative rounded-xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-all duration-300">
<div class="flex items-center justify-between mb-8">
<div class="h-12 w-12 bg-indigo-50 rounded-lg flex items-center justify-center">
<svg class="h-8 w-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
</div>
</div>
<h3 class="text-lg font-medium text-gray-900">Google Workspace</h3>
<p class="mt-2 text-base text-gray-600">Seamlessly connect with Gmail, Calendar, and Drive. Keep your team's communication and files in sync.</p>
<div class="mt-6 space-y-2">
<div class="flex items-center text-sm text-gray-600">
<svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Email integration
</div>
<div class="flex items-center text-sm text-gray-600">
<svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Calendar sync
</div>
</div>
<div class="mt-8 flex items-center">
<a href="#google" class="text-sm font-semibold text-indigo-600 hover:text-indigo-500">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
<!-- Stripe Integration -->
<div class="relative rounded-xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-all duration-300">
<div class="flex items-center justify-between mb-8">
<div class="h-12 w-12 bg-indigo-50 rounded-lg flex items-center justify-center">
<svg class="h-8 w-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 13.5h13.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H5.25a2.25 2.25 0 00-2.25 2.25v13.5a2.25 2.25 0 002.25 2.25zm13.5-13.5h-13.5a2.25 2.25 0 00-2.25 2.25v13.5a2.25 2.25 0 002.25 2.25h13.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25z" />
</svg>
</div>
</div>
<h3 class="text-lg font-medium text-gray-900">Stripe Payments</h3>
<p class="mt-2 text-base text-gray-600">Accept payments and manage subscriptions with ease. Automatic invoice generation and payment tracking.</p>
<div class="mt-6 space-y-2">
<div class="flex items-center text-sm text-gray-600">
<svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Secure payments
</div>
<div class="flex items-center text-sm text-gray-600">
<svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Automated billing
</div>
</div>
<div class="mt-8 flex items-center">
<a href="#stripe" class="text-sm font-semibold text-indigo-600 hover:text-indigo-500">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</div>
</section>
