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
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
Categories Gallery
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
Featured Product
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
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.
