Components Overview

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 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';

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>;
}

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