Logo-cloud Business Modern

                <!--
@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>