Logo Cloud

A responsive logo showcase component displaying technology stack or partners with dark mode support

Preview

Logo Cloud Component

Features

🎨 Clean, responsive layout design
🖼️ Automatic dark mode support with invert effect
🌐 Multi-language support
🛠️ Easily customizable logos
📱 Mobile-friendly arrangement

Usage

Import and use the LogoCloud component in your page:

page.tsx

import LogoCloud from '@/components/logo-cloud';
 
export default function Page() {
  return (
    <main>
      <LogoCloud />
      {/* Other content */}
    </main>
  );
}

Customization Section Content

You can customize the section title, heading, and description by setting the appropriate values in the messages/en.json file.

messages/en.json

{
  "logos": {
    "title": "Our Technology Stack",
    "heading": "Powered by the best",
    "description": "We leverage cutting-edge technologies to deliver the best experience."
  }
}

Customization Logos

The logos displayed can be customized by modifying the LOGOS array in the logo-cloud component:

const LOGOS = [
  {
    src: nextjs,
    alt: 'Next.js',
    height: 28
  },
  {
    src: stripe,
    alt: 'Stripe',
    height: 40
  },
  // Add more logos as needed
];

Adding New Logos

To add a new logo:

Add the logo image file to the public/images/logos/ directory
Import the logo in the component
Add it to the LOGOS array with the appropriate alt text and height

import newLogo from '@/public/images/logos/new-logo.svg';
 
const LOGOS = [
  // Existing logos...
  {
    src: newLogo,
    alt: 'New Logo',
    height: 40
  }
];

Customization Styling

You can customize the appearance of the logos by modifying the className in the component:

<Image 
  key={logo.alt} 
  src={logo.src} 
  alt={logo.alt} 
  height={logo.height} 
  style={{ height: logo.height }}
  className="dark:invert dark:grayscale hover:grayscale-0" // Modify this line for different effects
/>