LogoCloud

Partner/client logo display for social proof.

Usage

import { LogoCloud } from '@/components/landing';

<LogoCloud />

Location: src/components/landing/LogoCloud.tsx

Purpose

Display logos of companies that use your product, trust your brand, or have partnered with you. This builds credibility and trust.

Customization

Add logo images to public/images/logos/ and update the component:

const logos = [
  { src: '/images/logos/company1.svg', alt: 'Company 1' },
  { src: '/images/logos/company2.svg', alt: 'Company 2' },
  { src: '/images/logos/company3.svg', alt: 'Company 3' },
  { src: '/images/logos/company4.svg', alt: 'Company 4' },
  { src: '/images/logos/company5.svg', alt: 'Company 5' },
];

i18n

Update translations:

{
  "landing": {
    "logoCloud": {
      "title": "Trusted by industry leaders",
      "subtitle": "Join thousands of companies using our platform"
    }
  }
}

Example Layout

<section className="py-16 bg-zinc-50 dark:bg-zinc-900/50">
  <div className="container mx-auto px-4">
    <p className="text-center text-sm text-zinc-600 dark:text-zinc-400 mb-8">
      {t('title')}
    </p>

    <div className="flex items-center justify-center gap-8 md:gap-12 flex-wrap">
      {logos.map((logo, index) => (
        <div
          key={index}
          className="grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all"
        >
          <Image
            src={logo.src}
            alt={logo.alt}
            width={120}
            height={40}
            className="h-8 w-auto object-contain"
          />
        </div>
      ))}
    </div>
  </div>
</section>

Styling Tips

Grayscale Effect

Make logos uniform with grayscale, reveal color on hover:

className="grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all"

Responsive Grid

For many logos, use a scrolling marquee on mobile:

<div className="flex gap-8 overflow-x-auto md:flex-wrap md:justify-center">
  {logos.map(...)}
</div>

Dark Mode Logos

For logos that don't work on dark backgrounds, provide alternate versions:

<Image
  src={isDark ? logo.srcDark : logo.src}
  alt={logo.alt}
/>

Or use CSS filters:

className="dark:invert dark:brightness-0"