<!--
@type: Logo Cloud
@industry: Business
@style: Modern
@category: Page Section, Content, Social Proof
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--primary-bg: #f8fafc; /* slate-50 */
--primary-text: #0f172a; /* slate-900 */
--secondary-text: #475569; /* slate-600 */
--button-bg: #4f46e5; /* indigo-600 */
--button-bg-hover: #4338ca; /* indigo-700 */
--button-focus-ring: #c7d2fe; /* indigo-200 */
--placeholder-bg: #e5e7eb; /* gray-200 */
--placeholder-text: #6b7280; /* gray-500 */
--shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
--radius: 0.5rem;
--font-main: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.logo-cloud-section {
background: var(--primary-bg);
padding: 2.5rem 1rem;
font-family: var(--font-main);
}
@media (min-width: 640px) {
.logo-cloud-section {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.logo-cloud-section {
padding-left: 2rem;
padding-right: 2rem;
}
}
.logo-cloud-header {
max-width: 56rem;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 2.5rem;
}
.logo-cloud-title {
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 700;
color: var(--primary-text);
margin-bottom: 1rem;
}
@media (min-width: 640px) {
.logo-cloud-title {
font-size: 2.25rem;
line-height: 2.5rem;
}
}
.logo-cloud-desc {
font-size: 1rem;
line-height: 1.5rem;
color: var(--secondary-text);
margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
.logo-cloud-desc {
font-size: 1.125rem;
line-height: 1.75rem;
}
}
.logo-cloud-logos {
max-width: 64rem;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
align-items: center;
justify-content: center;
}
@media (min-width: 640px) {
.logo-cloud-logos {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) {
.logo-cloud-logos {
grid-template-columns: repeat(4, 1fr);
}
}
.logo-cloud-img {
display: block;
margin-left: auto;
margin-right: auto;
object-fit: contain;
height: 2.5rem;
max-width: 100%;
}
.logo-cloud-img.h-12 {
height: 3rem;
}
.logo-cloud-placeholder {
background: var(--placeholder-bg);
aspect-ratio: 16/9;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
color: var(--placeholder-text);
height: 2.5rem;
}
@media (min-width: 640px) {
.logo-cloud-placeholder {
height: 3rem;
}
}
.logo-cloud-placeholder svg {
width: 2rem;
height: 2rem;
display: block;
}
.logo-cloud-footer {
max-width: 42rem;
margin-left: auto;
margin-right: auto;
margin-top: 2.5rem;
text-align: center;
}
.logo-cloud-btn {
display: inline-block;
background: var(--button-bg);
color: #fff;
padding: 0.75rem 1.5rem;
border-radius: var(--radius);
font-weight: 600;
box-shadow: var(--shadow);
text-decoration: none;
transition: background 0.2s;
outline: none;
border: none;
font-size: 1rem;
line-height: 1.5rem;
cursor: pointer;
position: relative;
}
.logo-cloud-btn:hover,
.logo-cloud-btn:focus-visible {
background: var(--button-bg-hover);
}
.logo-cloud-btn:focus {
box-shadow: 0 0 0 2px var(--button-focus-ring);
}
</style>
<section class="logo-cloud-section" aria-label="Logo cloud">
<div class="logo-cloud-header">
<h2 class="logo-cloud-title">Trusted by Leading Businesses</h2>
<p class="logo-cloud-desc">Our solutions empower companies worldwide. Join our network of innovative partners and clients who trust us to deliver excellence every day.</p>
</div>
<div class="logo-cloud-logos" aria-label="Partner logos">
<img src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" width="200" height="39" alt="Dropbox logo" class="logo-cloud-img" loading="lazy" />
<img src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" width="200" height="83" alt="Google logo" class="logo-cloud-img h-12" loading="lazy" />
<img src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" width="200" height="70" alt="Notion logo" class="logo-cloud-img" loading="lazy" />
<img src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" width="200" height="72" alt="Product Hunt logo" class="logo-cloud-img" loading="lazy" />
<img src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" width="200" height="63" alt="Shopify logo" class="logo-cloud-img" loading="lazy" />
<img src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" width="200" height="51" alt="Slack logo" class="logo-cloud-img" loading="lazy" />
<img src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" width="200" height="93" alt="Stripe logo" class="logo-cloud-img h-12" loading="lazy" />
<div class="logo-cloud-placeholder" aria-label="More partners coming soon">
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
</div>
</div>
<div class="logo-cloud-footer">
<a href="#contact" class="logo-cloud-btn" aria-label="Contact sales">Contact Sales</a>
</div>
</section>
<!--
@type: Logo Cloud
@industry: Business
@style: Modern
@category: Page Section, Content, Social Proof
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-10 px-4 sm:px-6 lg:px-8 font-inter">
<div class="max-w-4xl mx-auto text-center mb-10">
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">Trusted by Leading Businesses</h2>
<p class="text-base sm:text-lg text-slate-600 mb-6">Our solutions empower companies worldwide. Join our network of innovative partners and clients who trust us to deliver excellence every day.</p>
</div>
<div class="max-w-5xl mx-auto grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6 items-center justify-center" aria-label="Partner logos">
<!-- Dropbox image by unknown -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" width="200" height="39" alt="Dropbox logo" class="mx-auto h-10 object-contain" loading="lazy" />
<!-- Google image by unknown -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" width="200" height="83" alt="Google logo" class="mx-auto h-12 object-contain" loading="lazy" />
<!-- Notion image by unknown -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" width="200" height="70" alt="Notion logo" class="mx-auto h-10 object-contain" loading="lazy" />
<!-- Product Hunt image by unknown -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" width="200" height="72" alt="Product Hunt logo" class="mx-auto h-10 object-contain" loading="lazy" />
<!-- Shopify image by unknown -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" width="200" height="63" alt="Shopify logo" class="mx-auto h-10 object-contain" loading="lazy" />
<!-- Slack image by unknown -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" width="200" height="51" alt="Slack logo" class="mx-auto h-10 object-contain" loading="lazy" />
<!-- Stripe image by unknown -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" width="200" height="93" alt="Stripe logo" class="mx-auto h-12 object-contain" loading="lazy" />
<!-- Placeholder for future partner -->
<div class="bg-gray-200 aspect-video flex items-center justify-center rounded-lg text-gray-500 h-10 sm:h-12" aria-label="More partners coming soon">
<svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
</div>
</div>
<div class="max-w-2xl mx-auto mt-10 text-center">
<a href="#contact" class="inline-block bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold shadow hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-200" aria-label="Contact sales">Contact Sales</a>
</div>
</section>
