Skip to main content
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

Brands.jsx
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

Body.jsx
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.