Components Overview

Overview of all React components in the Music Store application

The Music Store application is built with a collection of custom React components that create an immersive, animated shopping experience for musical instruments.

Component Architecture

All components are organized in the /src/components/ directory with the following structure:

src/components/
├── Body/
│   └── Body.jsx
├── Brands/
│   └── Brands.jsx
├── CartPanel/
│   └── CartPanel.jsx
├── CircularGallery/
│   └── CircularGallery.jsx
├── Grainient/
│   └── Grainient.jsx
├── GuitarOfTheMth/
│   └── GuitarOfTheMonth.jsx
├── Hero/
│   └── Hero.jsx
├── Loader/
│   └── Loader.jsx
├── Navbar/
│   └── NavbarGlass.jsx
├── ShinyText/
│   └── ShinyText.jsx
├── Squares/
│   └── Squares.jsx
└── productos/
    └── ProductosDetalle.jsx

Import Patterns

Components follow standard ES6 module imports:

import Body from './components/Body/Body';
import Brands from './components/Brands/Brands';
import CartPanel from './components/CartPanel/CartPanel';
import CircularGallery from './components/CircularGallery/CircularGallery';
import Grainient from './components/Grainient/Grainient';
import GuitarOfTheMonth from './components/GuitarOfTheMth/GuitarOfTheMonth';
import Hero from './components/Hero/Hero';
import Loader from './components/Loader/Loader';
import NavbarGlass from './components/Navbar/NavbarGlass';
import ShinyText from './components/ShinyText/ShinyText';
import Squares from './components/Squares/Squares';
import ProductosDetalle from './components/productos/ProductosDetalle';

Available Components

Body

Main homepage composition component with category gallery and featured sections

Brands

Brand logos showcase with hover effects and responsive grid layout

CartPanel

Sliding side panel for shopping cart management with item controls

CircularGallery

WebGL-powered 3D circular image gallery with physics-based scrolling

Grainient

Animated gradient background with grain texture and warp effects

GuitarOfTheMonth

Featured product spotlight with 3D tilt effect and scroll animations

Hero

Full-screen landing section with animated gradient background and GSAP animations

Loader

Full-screen loading animation displayed on app initialization

Navbar

Glassmorphic navigation bar with cart counter and category links

ProductoDetalle

Product detail page with animations and cart integration

ShinyText

Animated gradient text effect with customizable shine animation

Squares

Animated grid background pattern with interactive hover effects

Key Dependencies

The components leverage these core libraries:

• React - UI framework with hooks (useState, useEffect, useRef)
• GSAP - Animation library for smooth transitions
• OGL - Minimal WebGL library for 3D rendering
• React Router - Navigation and routing

Common Patterns

Animation

Most components use GSAP for entrance animations:

import gsap from 'gsap';
import { useEffect, useRef } from 'react';

function Component() {
  const elementRef = useRef(null);
  
  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.fromTo(elementRef.current,
        { y: 50, opacity: 0 },
        { y: 0, opacity: 1, duration: 1.5 }
      );
    });
    return () => ctx.revert();
  }, []);
  
  return <div ref={elementRef}>Content</div>;
}

Styling

Components use Tailwind CSS with custom glassmorphic effects:

className="bg-white/10 backdrop-blur-lg border border-white/20"

All components are designed to work together as part of the Music Store e-commerce experience.