<!--
@type: Logo Cloud
@industry: Product
@style: Light
@category: Page Section, Content, Social Proof
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-200: #e5e7eb;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-800: #1f2937;
--color-blue-100: #dbeafe;
--color-blue-400: #60a5fa;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--font-sm: 0.875rem;
--font-base: 1rem;
--font-xl: 1.25rem;
--font-3xl: 1.875rem;
--font-4xl: 2.25rem;
--transition-duration: 200ms;
--max-width-lg: 32rem;
--max-width-7xl: 80rem;
}
/* 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 */
.logo-cloud-section {
background-color: var(--color-gray-50);
padding: var(--spacing-16) 0;
overflow: hidden;
}
.container {
max-width: var(--max-width-7xl);
margin: 0 auto;
padding: 0 var(--spacing-4);
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-12);
}
.section-title {
font-size: var(--font-3xl);
font-weight: 500;
color: var(--color-gray-800);
margin-bottom: var(--spacing-3);
}
.section-description {
font-size: var(--font-base);
color: var(--color-gray-600);
max-width: var(--max-width-lg);
margin: 0 auto;
}
.logo-grid {
margin-top: var(--spacing-12);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-4);
width: 100%;
max-width: 100%;
overflow: hidden;
}
.logo-item {
display: flex;
justify-content: center;
align-items: center;
padding: var(--spacing-2);
width: 100%;
}
.logo-image {
max-width: 100%;
height: auto;
max-height: 2rem;
object-fit: contain;
width: auto;
}
.trust-text {
margin-top: var(--spacing-16);
text-align: center;
}
.trust-description {
font-size: var(--font-sm);
color: var(--color-gray-500);
margin-bottom: var(--spacing-6);
}
.cta-buttons {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-3);
}
.primary-button {
display: inline-flex;
align-items: center;
background-color: var(--color-white);
border: 1px solid var(--color-blue-400);
color: var(--color-gray-800);
padding: var(--spacing-3) var(--spacing-6);
border-radius: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: background-color var(--transition-duration);
text-decoration: none;
}
.primary-button:hover {
background-color: var(--color-gray-50);
}
.primary-button svg {
height: 1rem;
width: 1rem;
margin-left: var(--spacing-2);
}
.secondary-button {
display: inline-flex;
align-items: center;
background-color: transparent;
color: var(--color-gray-600);
padding: var(--spacing-3) var(--spacing-6);
border-radius: 0.5rem;
transition: color var(--transition-duration);
text-decoration: none;
}
.secondary-button:hover {
color: var(--color-blue-600);
}
.partner-card {
margin-top: var(--spacing-16);
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);
}
.partner-content {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.partner-info {
text-align: left;
max-width: var(--max-width-lg);
}
.partner-title {
font-size: var(--font-xl);
font-weight: 500;
color: var(--color-gray-800);
margin-bottom: var(--spacing-3);
}
.partner-description {
font-size: var(--font-base);
color: var(--color-gray-600);
margin-bottom: var(--spacing-6);
}
.logo-cloud-feature-list {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-4);
}
.logo-cloud-feature-item {
display: inline-flex;
align-items: center;
font-size: var(--font-sm);
color: var(--color-gray-600);
}
.logo-cloud-feature-icon {
height: 1.25rem;
width: 1.25rem;
color: var(--color-blue-500);
margin-right: var(--spacing-2);
}
.partner-form {
width: 100%;
}
.logo-cloud-form-group {
display: flex;
flex-direction: column;
gap: var(--spacing-3);
justify-content: flex-end;
}
.logo-cloud-form-input {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 0.5rem;
padding: var(--spacing-3) var(--spacing-4);
outline: none;
font-size: var(--font-base);
}
.logo-cloud-form-input:focus {
border-color: var(--color-blue-400);
box-shadow: 0 0 0 3px var(--color-blue-100);
}
.logo-cloud-submit-button {
background-color: var(--color-blue-600);
color: var(--color-white);
padding: var(--spacing-3) var(--spacing-6);
border-radius: 0.5rem;
border: none;
cursor: pointer;
transition: background-color var(--transition-duration);
white-space: nowrap;
min-width: 120px;
font-size: var(--font-base);
}
.logo-cloud-submit-button:hover {
background-color: var(--color-blue-700);
}
/* Responsive styles */
@media (min-width: 640px) {
.container {
padding: 0 var(--spacing-6);
}
.logo-cloud-form-group {
flex-direction: row;
align-items: center;
}
.logo-grid {
gap: var(--spacing-6);
}
.logo-item {
padding: var(--spacing-4);
}
}
@media (min-width: 768px) {
.section-title {
font-size: var(--font-4xl);
}
.logo-grid {
grid-template-columns: repeat(3, 1fr);
}
.partner-content {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.partner-form {
width: auto;
min-width: 400px;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 var(--spacing-8);
}
.logo-grid {
grid-template-columns: repeat(6, 1fr);
gap: var(--spacing-8);
}
.partner-form {
min-width: 480px;
}
}
</style>
<section class="logo-cloud-section">
<div class="container">
<div class="section-header">
<h2 class="section-title">Trusted by innovative teams worldwide</h2>
<p class="section-description">Join thousands of product teams who have streamlined their workflow with our platform</p>
</div>
<div class="logo-grid">
<div class="logo-item">
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack logo" width="200" height="51" loading="lazy">
</div>
<div class="logo-item">
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" alt="Shopify logo" width="200" height="63" loading="lazy">
</div>
<div class="logo-item">
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" alt="Stripe logo" width="200" height="93" loading="lazy">
</div>
<div class="logo-item">
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox logo" width="200" height="39" loading="lazy">
</div>
<div class="logo-item">
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" alt="Google logo" width="200" height="83" loading="lazy">
</div>
<div class="logo-item">
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" alt="Notion logo" width="200" height="70" loading="lazy">
</div>
</div>
<div class="trust-text">
<p class="trust-description">Over 10,000+ companies trust our product to improve their workflow</p>
<div class="cta-buttons">
<a href="#" class="primary-button">
<span>View customer stories</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</a>
<a href="#" class="secondary-button">
<span>Become a partner</span>
</a>
</div>
</div>
<div class="partner-card">
<div class="partner-content">
<div class="partner-info">
<h3 class="partner-title">Join our partner program</h3>
<p class="partner-description">Get exclusive benefits and resources to help grow your business with our product solutions.</p>
<div class="logo-cloud-feature-list">
<span class="logo-cloud-feature-item">
<svg xmlns="http://www.w3.org/2000/svg" class="logo-cloud-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>
Priority support
</span>
<span class="logo-cloud-feature-item">
<svg xmlns="http://www.w3.org/2000/svg" class="logo-cloud-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>
Co-marketing opportunities
</span>
<span class="logo-cloud-feature-item">
<svg xmlns="http://www.w3.org/2000/svg" class="logo-cloud-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>
Revenue sharing
</span>
</div>
</div>
<div class="partner-form">
<form class="logo-cloud-form-group">
<input type="email" placeholder="Enter your email" aria-label="Email address" class="logo-cloud-form-input" required>
<button type="submit" class="logo-cloud-submit-button">
Apply now
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Logo Cloud
@industry: Product
@style: Light
@category: Page Section, Content, Social Proof
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-50 py-16 overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-medium text-gray-800 mb-3">Trusted by innovative teams worldwide</h2>
<p class="text-base text-gray-600 max-w-2xl mx-auto">Join thousands of product teams who have streamlined their workflow with our platform</p>
</div>
<div class="mt-12 grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6">
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1 p-4">
<img class="h-8 object-contain" src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack logo" width="200" height="51" loading="lazy">
</div>
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1 p-4">
<img class="h-8 object-contain" src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" alt="Shopify logo" width="200" height="63" loading="lazy">
</div>
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1 p-4">
<img class="h-8 object-contain" src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" alt="Stripe logo" width="200" height="93" loading="lazy">
</div>
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1 p-4">
<img class="h-8 object-contain" src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox logo" width="200" height="39" loading="lazy">
</div>
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1 p-4">
<img class="h-8 object-contain" src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" alt="Google logo" width="200" height="83" loading="lazy">
</div>
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1 p-4">
<img class="h-8 object-contain" src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" alt="Notion logo" width="200" height="70" loading="lazy">
</div>
</div>
<div class="mt-16 text-center">
<p class="text-sm text-gray-500 mb-6">Over 10,000+ companies trust our product to improve their workflow</p>
<div class="inline-flex flex-wrap justify-center gap-3">
<a href="#" class="inline-flex items-center bg-white border border-blue-400 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition-colors duration-200">
<span>View customer stories</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</a>
<a href="#" class="inline-flex items-center bg-transparent text-gray-600 hover:text-blue-600 px-6 py-3 rounded-lg transition-colors duration-200">
<span>Become a partner</span>
</a>
</div>
</div>
<div class="mt-16 bg-white border border-gray-200 rounded-2xl p-8 shadow-sm">
<div class="flex flex-col md:flex-row items-center justify-between gap-8">
<div class="text-left max-w-lg">
<h3 class="text-xl font-medium text-gray-800 mb-3">Join our partner program</h3>
<p class="text-base text-gray-600 mb-6">Get exclusive benefits and resources to help grow your business with our product solutions.</p>
<div class="flex flex-wrap gap-4">
<span class="inline-flex items-center text-sm text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-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>
Priority support
</span>
<span class="inline-flex items-center text-sm text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-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>
Co-marketing opportunities
</span>
<span class="inline-flex items-center text-sm text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-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>
Revenue sharing
</span>
</div>
</div>
<div class="w-full md:w-auto">
<form class="flex flex-col sm:flex-row gap-3">
<input type="email" placeholder="Enter your email" aria-label="Email address" class="bg-white border border-gray-200 rounded-lg px-4 py-3 focus:border-blue-400 focus:ring-2 focus:ring-blue-100 outline-none" required>
<button type="submit" class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors duration-200">
Apply now
</button>
</form>
</div>
</div>
</div>
</div>
</section>
