Diagram based feature section
Category: Features
Below is the component for your context <!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Integrations - OutreachAI</title>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<style>
.animate-on-scroll-hidden {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animate-on-scroll-visible {
opacity: 1;
transform: translateY(0);
}
</style>
<style type="text/tailwindcss">@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
@apply antialiased;
}
}
.integration-line {
background-repeat: no-repeat;
background-size: 100% 100%;
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'brand-primary': 'rgb(14, 28, 41)',
'neutral-background': 'rgb(216, 223, 229)',
'neutral-surface': 'rgb(246, 251, 255)',
'text-primary': 'rgb(14, 28, 41)',
'text-secondary': 'rgba(14, 28, 41, 0.8)',
'accent-teal': 'rgb(45,106,119)',
},
fontFamily: {
'primary': ['Plus Jakarta Sans', 'sans-serif'],
'secondary': ['Inter', 'sans-serif'],
},
boxShadow: {
'icon-card': 'rgba(141, 194, 235, 0.25) 0px -3px 0px 2px inset, rgba(16, 49, 77, 0.21) 0px 0.706592px 0.706592px -0.583333px, rgba(16, 49, 77, 0.2) 0px 1.80656px 1.80656px -1.16667px, rgba(16, 49, 77, 0.2) 0px 3.62176px 3.62176px -1.75px, rgba(16, 49, 77, 0.18) 0px 6.8656px 6.8656px -2.33333px, rgba(16, 49, 77, 0.16) 0px 13.6468px 13.6468px -2.91667px, rgba(16, 49, 77, 0.09) 0px 30px 30px -3.5px',
'logo-inner': 'rgba(16, 49, 77, 0.24) 0px 0.706592px 0.706592px -0.666667px, rgba(16, 49, 77, 0.23) 0px 1.80656px 1.80656px -1.33333px, rgba(16, 49, 77, 0.22) 0px 3.62176px 3.62176px -2px, rgba(16, 49, 77, 0.2) 0px 6.8656px 6.8656px -2.66667px, rgba(16, 49, 77, 0.16) 0px 13.6468px 13.6468px -3.33333px, rgba(16, 49, 77, 0.06) 0px 30px 30px -4px',
}
}
}
}</script></head>
<body id="app-root" class="bg-neutral-background font-secondary text-text-primary">
<main><section class="relative w-full max-w-[1200px] mx-auto py-[100px] px-10 flex flex-col items-center justify-center gap-8 overflow-hidden bg-neutral-background rounded-[20px]">
<!-- Header Section -->
<div class="flex flex-col items-center gap-4 text-center max-w-[640px] z-10" data-animation-on-scroll="">
<div class="flex items-center justify-center px-3 py-0.5 rounded-full border border-neutral-background bg-[rgba(240,248,255,0.9)] shadow-[0_0_0_2px_rgba(240,248,255,0.9)] gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="currentColor" viewBox="0 0 256 256">
<path d="M220,169.09l-92,53.65L36,169.09A8,8,0,0,0,28,182.91l96,56a8,8,0,0,0,8.06,0l96-56A8,8,0,1,0,220,169.09Z"></path>
<path d="M220,121.09l-92,53.65L36,121.09A8,8,0,0,0,28,134.91l96,56a8,8,0,0,0,8.06,0l96-56A8,8,0,1,0,220,121.09Z"></path>
<path d="M28,86.91l96,56a8,8,0,0,0,8.06,0l96-56a8,8,0,0,0,0-13.82l-96-56a8,8,0,0,0-8.06,0l-96,56a8,8,0,0,0,0,13.82Z"></path>
</svg>
<span class="text-[14px] font-secondary text-brand-primary">Integrations</span>
</div>
<h2 class="font-primary text-[56px] leading-[1.2] tracking-[-0.56px] text-text-primary">
Integrates with
</h2>
<p class="font-secondary text-base leading-6 text-text-secondary">
Seamlessly integrate with your favorite tools
</p>
</div>
<!-- Visual Integrations Container -->
<div class="relative w-full h-[527px] flex items-center justify-center" data-animation-on-scroll="">
<!-- Central Logo -->
<div class="absolute z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-24 h-24 p-2.5 bg-neutral-surface rounded-2xl shadow-icon-card flex items-center justify-center">
<div class="w-[76px] h-[76px] bg-brand-primary rounded-xl shadow-logo-inner flex items-center justify-center p-4">
<img src="https://framerusercontent.com/images/Vw4SxE2qkEuKYpt0YYdU2kV6Irg.png" alt="Main logo" class="w-11 h-11 object-contain">
</div>
</div>
<!-- Background Connection Lines (SVG Patterns) -->
<!-- Left Top -->
<div class="absolute inset-[71px_550px_263px_133px] integration-line" style="background-image: url('data:image/svg+xml,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 437 193\'><path d=\'M 0 1 L 122.022 1 C 130.298 1 137.01 7.702 137.022 15.978 L 137.175 122.029 C 137.187 130.302 143.895 137.003 152.168 137.007 L 275.007 137.066 C 283.289 137.07 290 143.785 290 152.066 L 290 177 C 290 185.284 296.716 192 305 192 L 437 192\' fill=\'transparent\' stroke=\'rgb(45,106,119)\' stroke-miterlimit=\'10\' stroke-dasharray=\'5,3\'></path></svg>');"></div>
<!-- Left Center -->
<div class="absolute inset-[261.987px_550px_263.013px_197px] border-t border-dashed border-accent-teal opacity-60"></div>
<!-- Left Bottom -->
<div class="absolute inset-[262px_550px_72px_133px] integration-line" style="background-image: url('data:image/svg+xml,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 437 193\'><path d=\'M 0 192 L 122.022 192 C 130.298 192 137.01 185.298 137.022 177.022 L 137.175 70.971 C 137.187 62.698 143.906 55.997 152.179 55.993 L 274.996 55.933 C 283.278 55.93 290 49.215 290 40.933 L 290 16 C 290 7.716 296.716 1 305 1 L 437 1\' fill=\'transparent\' stroke=\'rgb(45,106,119)\' stroke-miterlimit=\'10\' stroke-dasharray=\'5,3\'></path></svg>');"></div>
<!-- Right Top -->
<div class="absolute inset-[73px_133px_261px_550px] integration-line" style="background-image: url('data:image/svg+xml,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 437 193\'><path d=\'M 437 1 L 314.978 1 C 306.702 1 299.99 7.702 299.978 15.978 L 299.825 122.029 C 299.813 130.302 293.105 137.003 284.832 137.007 L 161.993 137.066 C 153.711 137.07 147 143.785 147 152.066 L 147 177 C 147 185.284 140.284 192 132 192 L 0 192\' fill=\'transparent\' stroke=\'rgb(45,106,119)\' stroke-miterlimit=\'10\' stroke-dasharray=\'5,3\'></path></svg>');"></div>
<!-- Right Center -->
<div class="absolute inset-[263.987px_197px_261.013px_550px] border-t border-dashed border-accent-teal opacity-60"></div>
<!-- Right Bottom -->
<div class="absolute inset-[264px_133px_70px_550px] integration-line" style="background-image: url('data:image/svg+xml,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 437 193\'><path d=\'M 437 192 L 314.978 192 C 306.702 192 299.99 185.298 299.978 177.022 L 299.825 70.971 C 299.813 62.698 293.105 55.997 284.832 55.993 L 161.993 55.933 C 153.711 55.93 147 49.215 147 40.933 L 147 16 C 147 7.716 140.284 1 132 1 L 0 1\' fill=\'transparent\' stroke=\'rgb(45,106,119)\' stroke-miterlimit=\'10\' stroke-dasharray=\'5,3\'></path></svg>');"></div>
<!-- Left Icons Column -->
<div class="absolute right-[940px] flex flex-col gap-[90px] items-start">
<!-- Icon 1 (Apollo-like) -->
<div class="w-24 h-24 p-2.5 bg-neutral-surface rounded-2xl shadow-icon-card flex items-center justify-center">
<div class="w-[76px] h-[76px] flex items-center justify-center rounded-full p-4">
<svg class="w-11 h-11 text-brand-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
</div>
</div>
<!-- Icon 2 (Salesforce-like offset) -->
<div class="ml-16 w-24 h-24 p-2.5 bg-neutral-surface rounded-2xl shadow-icon-card flex items-center justify-center">
<div class="w-[76px] h-[76px] flex items-center justify-center rounded-full p-4">
<svg class="w-11 h-11 text-brand-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17.5 19c.7 0 1.25-.56 1.25-1.25S18.2 16.5 17.5 16.5 16.25 17.06 16.25 17.75 16.8 19 17.5 19zM12 12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"></path></svg>
</div>
</div>
<!-- Icon 3 (Hubspot-like) -->
<div class="w-24 h-24 p-2.5 bg-neutral-surface rounded-2xl shadow-icon-card flex items-center justify-center">
<div class="w-[76px] h-[76px] flex items-center justify-center rounded-full p-4">
<svg class="w-11 h-11 text-brand-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path></svg>
</div>
</div>
</div>
<!-- Right Icons Column -->
<div class="absolute left-[940px] flex flex-col gap-[90px] items-end">
<!-- Icon 4 (LinkedIn) -->
<div class="w-24 h-24 p-2.5 bg-neutral-surface rounded-2xl shadow-icon-card flex items-center justify-center">
<div class="w-[76px] h-[76px] flex items-center justify-center rounded-full p-4">
<svg class="w-11 h-11 text-brand-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2zM4 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"></path></svg>
</div>
</div>
<!-- Icon 5 (Zapier offset) -->
<div class="mr-16 w-24 h-24 p-2.5 bg-neutral-surface rounded-2xl shadow-icon-card flex items-center justify-center">
<div class="w-[76px] h-[76px] flex items-center justify-center rounded-full p-4">
<svg class="w-11 h-11 text-brand-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></svg>
</div>
</div>
<!-- Icon 6 (Gmail) -->
<div class="w-24 h-24 p-2.5 bg-neutral-surface rounded-2xl shadow-icon-card flex items-center justify-center">
<div class="w-[76px] h-[76px] flex items-center justify-center rounded-full p-4">
<svg class="w-11 h-11 text-brand-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2zM22 6l-10 7L2 6"></path></svg>
</div>
</div>
</div>
</div>
<!-- Row Features -->
<div class="w-full max-w-[1120px] flex flex-wrap justify-center items-center gap-8 py-4 opacity-80" data-animation-on-scroll="">
<div class="flex items-center gap-2.5 h-8">
<svg class="w-8 h-8 text-brand-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
<span class="text-base font-secondary">Seamless Automation</span>
</div>
<div class="hidden md:block w-0.5 h-8 bg-brand-primary opacity-20 rounded-full"></div>
<div class="flex items-center gap-2.5 h-8">
<svg class="w-8 h-8 text-brand-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9"></path></svg>
<span class="text-base font-secondary">Real-Time Data Sync</span>
</div>
<div class="hidden md:block w-0.5 h-8 bg-brand-primary opacity-20 rounded-full"></div>
<div class="flex items-center gap-2.5 h-8">
<svg class="w-8 h-8 text-brand-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M11 4H4v14a2 2 0 002 2h12a2 2 0 002-2v-5M9 15l3 3 7-7M15 3h6v6"></path></svg>
<span class="text-base font-secondary">Customizable Solutions</span>
</div>
</div>
</section></main>
<script>
document.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-on-scroll-visible');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('[data-animation-on-scroll]').forEach(el => {
el.classList.add('animate-on-scroll-hidden');
observer.observe(el);
});
});
</script>
</body></html>
change the content
Created by: LandingHero
![\"Main](\"https://framerusercontent.com/images/Vw4SxE2qkEuKYpt0YYdU2kV6Irg.png\")
\n