Overview
While the LogoMarquee is great for sheer volume, a static ClientLogoGrid is often better for B2B sites where you want visitors to clearly recognize specific high-value partners.
This component features a robust CSS Grid layout that naturally responsive, and includes a classic interaction: logos sit in a grayscale, low-opacity state to blend into the design, and transition to full color on hover, revealing tooltips for clarity.
Usage
import { ClientLogoGrid } from "@/components/creative/client-logo-grid"
export default function TrustBar() {
const logos = [
{ id: 1, name: "Vercel", src: "/logos/vercel.svg" },
{ id: 2, name: "Stripe", src: "/logos/stripe.svg" },
// ...
]
return (
<section className="py-24 border-y border-white/10">
<div className="max-w-6xl mx-auto px-6">
<p className="text-center text-zinc-500 mb-12">Trusted by the best teams</p>
<ClientLogoGrid logos={logos} />
</div>
</section>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { ClientLogoGrid } from "@/components/creative/client-logo-grid";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { ClientLogoGrid } from "@/components/creative/client-logo-grid";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<ClientLogoGrid
logos{/* value */}
/>
</div>
);
}