Components Overview

App
└── Menu (page)
    ├── Navbar
    │   └── Categories
    ├── LogoSplash
    ├── ProductCard (multiple instances)
    └── Footer

import Navbar from "./components/navbar/Navbar";
import Categories from "./components/Categories/Categories";
import ProductCard from "./components/ProductCard/ProductCard";
import LogoSplash from "./components/LogoSplash/LogoSplash";
import Footer from "./components/footer/footer";

src/components/
├── navbar/
│   ├── Navbar.jsx
│   └── Navbar.css
├── Categories/
│   ├── Categories.jsx
│   └── Categories.css
├── ProductCard/
│   ├── ProductCard.jsx
│   └── ProductCard.css
├── LogoSplash/
│   ├── LogoSplash.jsx
│   └── LogoSplash.css
└── footer/
    ├── footer.jsx
    └── footer.css

// Menu.jsx - Parent component manages state
const [activeCategoryId, setActiveCategoryId] = useState(null);
const [products, setProducts] = useState([]);

const handleCategoryChange = (categoryId) => {
  setActiveCategoryId(categoryId);
};

// Pass callback to child components
<Navbar onCategoryChange={handleCategoryChange} />