Skip to main content
The Body component serves as the main content container for the homepage, composing multiple sections including the category gallery, featured product, and brand showcase.

​
Overview

Body orchestrates the homepage experience by rendering:
  • Circular category gallery with scroll animations
  • Featured “Guitar of the Month” section
  • Brand logos showcase
  • Animated background patterns

​
Dependencies

import { useEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import CircularGallery from "../CircularGallery/CircularGallery";
import GuitarOfTheMonth from "../GuitarOfTheMth/GuitarOfTheMonth";
import Squares from "../Squares/Squares";
import Brands from "../Brands/Brands";

​
Implementation

Body.jsx
import { useEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import CircularGallery from "../CircularGallery/CircularGallery";
import GuitarOfTheMonth from "../GuitarOfTheMth/GuitarOfTheMonth";
import Squares from "../Squares/Squares";
import Brands from "../Brands/Brands";

gsap.registerPlugin(ScrollTrigger);

function Body() {
  const titleRef = useRef(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.fromTo(titleRef.current,
        { y: 50, opacity: 0 },
        {
          y: 0, opacity: 1, duration: 1.2, ease: "power3.out",
          scrollTrigger: { trigger: titleRef.current, start: "top 85%" }
        }
      );
    });
    return () => ctx.revert();
  }, []);

  return (
    <div className="bg-[#0e0e0e] text-white">
      {/* Categories section */}
      <div className="py-20 px-1">
        <h2 ref={titleRef} className="text-4xl font-semibold mb-16 text-center">
          CATEGORIAS
        </h2>
        <div id="categorias" style={{ height: "600px", position: "relative" }}>
          <CircularGallery 
            bend={1}
            textColor="#ffffff"
            borderRadius={0.05}
            scrollSpeed={2}
            scrollEase={0.05}
            items={[
              { image: "/img/guitarras.jpg", text: "Guitarras" },
              { image: "/img/bajos.jpg", text: "Bajos" },
              { image: "/img/baterias.jpg", text: "Baterías" },
              { image: "/img/teclados.jpg", text: "Teclados" },
            ]}
          />
        </div>
      </div>

      {/* Guitar of the Month section */}
      <section className="relative w-full overflow-hidden py-32">
        <div className="absolute inset-0 z-0">
          <Squares
            speed={0.5}
            squareSize={40}
            direction="diagonal"
            borderColor="#726e6e"
            hoverFillColor="#222"
          />
        </div>
        <div className="relative z-10 mx-6 md:mx-24 rounded-3xl bg-[#0a0a0a]/80">
          <GuitarOfTheMonth />
        </div>
      </section>

      {/* Brands section */}
      <div className="py-32">
        <Brands />
      </div>

      <footer className="text-center py-12 bg-black">
        <p className="text-white/30 text-sm">© 2026 MusicStore</p>
      </footer>
    </div>
  );
}

export default Body;

​
Sections

Displays product categories in a 3D circular carousel:
  • Uses CircularGallery with custom bend and scroll settings
  • Title animates in with ScrollTrigger
  • Fixed height container for consistent layout
Showcases the monthly featured guitar:
  • Animated Squares background pattern
  • GuitarOfTheMonth component with 3D tilt effect
  • Glassmorphic container with backdrop blur

​
Brand Showcase

Displays official brand partner logos with hover effects.

​
Usage

Home.jsx
import Body from '../components/Body/Body';
import Hero from '../components/Hero/Hero';

function Home() {
  return (
    <>
      <Hero />
      <Body />
    </>
  );
}

​
Styling

The component uses:
  • Dark background (bg-[#0e0e0e])
  • Section dividers with subtle borders
  • Glassmorphic effects with backdrop blur
  • Responsive padding and spacing
Body is the main composition component for the homepage and coordinates multiple animated sections.