The Brands component displays official brand partner logos in a clean, centered layout with smooth hover interactions.
Overview
Brands showcases musical instrument manufacturers with:
- Logo grid layout with automatic wrapping
- Opacity transitions on hover
- Inverted color filter for consistent appearance
- Responsive spacing
Implementation
const BRANDS = [
{ name: "Fender", logo: "/brands/fender.svg" },
{ name: "Gibson", logo: "/brands/gibson.svg" },
{ name: "Ibanez", logo: "/brands/ibanez.svg" },
{ name: "PRS", logo: "/brands/prs.png" },
{ name: "Yamaha", logo: "/brands/yamaha.svg" },
];
function Brands() {
return (
<section className="py-20 px-6 bg-[#0e0e0e]">
<p className="text-center text-xs tracking-[0.4em] uppercase text-white/30 mb-12">
Marcas oficiales
</p>
<div className="max-w-5xl mx-auto flex flex-wrap justify-center items-center gap-12">
{BRANDS.map((brand) => (
<div
key={brand.name}
className="group flex items-center justify-center w-32 h-16 opacity-30 hover:opacity-100 transition-opacity duration-300 cursor-pointer"
>
<img
src={brand.logo}
alt={brand.name}
className="max-h-10 w-auto object-contain"
style={{ filter: "brightness(0) invert(1)" }}
/>
</div>
))}
</div>
</section>
);
}
export default Brands;
Brand List
The component displays logos for:
- Fender - American guitar and amplifier manufacturer
- Gibson - Iconic electric guitar brand
- Ibanez - Japanese guitar manufacturer
- PRS - Paul Reed Smith Guitars
- Yamaha - Japanese musical instruments corporation
Styling Features
Layout
- Centered flex container with wrap
- Maximum width constraint (max-w-5xl)
- Consistent gap between items (gap-12)
- Fixed item dimensions (w-32 h-16)
Visual Effects
- Default 30% opacity creates subtle presence
- Full opacity on hover for emphasis
- Smooth 300ms transition
- Color inversion filter for white logos on dark background
Typography
- Uppercase section label
- Extra wide letter spacing (0.4em)
- Reduced opacity for secondary text
Usage
import Brands from '../components/Brands/Brands';
function Body() {
return (
<div>
{/* Other sections */}
<div className="py-32">
<Brands />
</div>
</div>
);
}
Customization
To add or modify brands, update the BRANDS array:
const BRANDS = [
{ name: "Brand Name", logo: "/brands/logo.svg" },
// Add more brands...
];
Logo files should be SVG or PNG with transparent backgrounds. The component applies color inversion to display white logos.
