<!--
@type: Logo Cloud
@industry: SaaS
@style: Minimal
@category: Page Section, Content, Social Proof
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-300: #d1d5db;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
}
/* 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-white);
padding: 3rem 0;
}
.container {
max-width: 80rem; /* max-w-7xl */
margin: 0 auto;
padding: 0 1rem;
width: 100%;
}
.section-header {
text-align: center;
}
.section-title {
font-size: 1.875rem;
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: 1rem;
}
.section-description {
font-size: 1.125rem;
color: var(--color-gray-600);
max-width: 42rem;
margin: 1rem auto 0;
}
.logo-grid {
margin-top: 3rem;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
align-items: center;
width: 100%;
}
.logo-container {
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem;
}
.logo-image {
height: 2rem;
width: auto;
object-fit: contain;
max-width: 100%;
}
.cta-container {
margin-top: 3rem;
text-align: center;
}
.cta-text {
font-size: 1rem;
color: var(--color-gray-600);
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-900);
background-color: var(--color-white);
border: 1px solid var(--color-gray-300);
border-radius: 0.5rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
text-decoration: none;
transition: all 200ms;
}
.cta-button:hover {
background-color: #f9fafb;
color: var(--color-blue-600);
}
.cta-button:focus {
outline: none;
}
.cta-button:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-blue-500);
}
.cta-button svg {
width: 1.25rem;
height: 1.25rem;
margin-left: 0.5rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.logo-cloud-section {
padding: 4rem 0;
}
.container {
padding: 0 1.5rem;
}
.section-title {
font-size: 2.25rem;
}
.logo-grid {
gap: 2rem;
}
}
@media (min-width: 768px) {
.logo-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
.logo-grid {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 2rem;
}
}
</style>
<!-- Logo Cloud Section -->
<section class="logo-cloud-section">
<!-- Container -->
<div class="container">
<!-- Section Header -->
<div class="section-header">
<h2 class="section-title">Trusted by innovative companies</h2>
<p class="section-description">Join thousands of leading companies who trust our platform to scale their business.</p>
</div>
<!-- Logo Grid -->
<div class="logo-grid">
<!-- Google Logo -->
<div class="logo-container">
<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>
<!-- Stripe Logo -->
<div class="logo-container">
<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>
<!-- Shopify Logo -->
<div class="logo-container">
<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>
<!-- Slack Logo -->
<div class="logo-container">
<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>
<!-- Notion Logo -->
<div class="logo-container">
<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>
<!-- Dropbox Logo -->
<div class="logo-container">
<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>
<!-- Product Hunt Logo -->
<div class="logo-container">
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" alt="Product Hunt logo" width="200" height="72" loading="lazy">
</div>
</div>
<!-- Call to Action -->
<div class="cta-container">
<p class="cta-text">Join over 4,000+ companies already growing with us</p>
<a href="#" class="cta-button" role="button" aria-label="Request demo">
Request demo
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</section>
<!--
@type: Logo Cloud
@industry: SaaS
@style: Minimal
@category: Page Section, Content, Social Proof
@framework: Tailwind
@license: Free
-->
<!-- Logo Cloud Section -->
<section class="bg-white py-12 sm:py-16">
<!-- Container -->
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center">
<h2 class="text-3xl font-semibold text-gray-900 sm:text-4xl mb-4">Trusted by innovative companies</h2>
<p class="mx-auto mt-4 max-w-2xl text-lg text-gray-600">Join thousands of leading companies who trust our platform to scale their business.</p>
</div>
<!-- Logo Grid -->
<div class="mt-12 grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-7">
<!-- Google Logo -->
<!-- Brand logo by Google -->
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1">
<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>
<!-- Stripe Logo -->
<!-- Brand logo by Stripe -->
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1">
<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>
<!-- Shopify Logo -->
<!-- Brand logo by Shopify -->
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1">
<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>
<!-- Slack Logo -->
<!-- Brand logo by Slack -->
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1">
<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>
<!-- Notion Logo -->
<!-- Brand logo by Notion -->
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1">
<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>
<!-- Dropbox Logo -->
<!-- Brand logo by Dropbox -->
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1">
<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>
<!-- Product Hunt Logo -->
<!-- Brand logo by Product Hunt -->
<div class="col-span-1 flex justify-center md:col-span-1 lg:col-span-1">
<img class="h-8 object-contain" src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" alt="Product Hunt logo" width="200" height="72" loading="lazy">
</div>
</div>
<!-- Call to Action -->
<div class="mt-12 text-center">
<p class="text-base text-gray-600">Join over 4,000+ companies already growing with us</p>
<div class="mt-8">
<a href="#" class="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-6 py-3 text-base font-medium text-gray-900 shadow-sm transition duration-200 hover:bg-gray-50 hover:text-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" role="button" aria-label="Request demo">
Request demo
<svg class="ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
</section>
