Gym website using react

 . . import React from "react" ; import { Box , Typography , Button } from "@mui/material" ; import HeroBannerImage from "../../assets/images/banner.png" ; const HeroBanner = () => {   return (     < Box       sx = { {         mt : { lg : "212px" , xs : "70px" },         ml : { sm : "50px" },       } }       position = "relative"       p = "20px"     >       < Typography color = "ff2625" fontWeight = "600" fontSize = "26px" >         Fitness Club       </ Typography >       < Typography         fontWeight = "700"         sx = { {           fontSize : { lg : "44px" , xs : "40px" },         } }         mb = "23px"         mt...

 .Mui docs is the best way to learn it . Go to Mui docs and search for the component you want then see its visualization,usage,props,interactive visualization, reaposiveness etc. go to its api of that component to see all values of all props available for that component. for now we will use stack component .It is like a list used for styled list or menus import React from "react" ; import { Stack } from "@mui/material" ; import { Link } from "react-router-dom" ; import Logo from "../../assets/images/Logo.png" ; const Navbar = () => {   return (     < Stack       direction = "row"       justifyContent = "none"       spacing = { { sm : 12.2 , xs : 4 } }       sx = { {         // gap: { sm: "122px", xs: "40px" },         mt : { sm : "32px" , xs : "20px" },         px : "20px" ,       } }     > ...

 Here is the project structure: Now in app.js file:do: import React from "react" ; import { Routes , Route } from "react-router-dom" ; import { Box } from "@mui/material" ; import Navbar from "./components/Navbar/Navbar" ; import Footer from "./components/Footer/Footer" ; import Home from "./pages/Home/Home" ; import ExerciseDetail from "./pages/ExerciseDetail/ExerciseDetail" ; import "./App.css" ; const App = () => {   return (     < Box width = '400px' sx = { { width : { xl : "1448px" } } } m = "auto" >       < Navbar />       < Routes >         < Route path = "/" element = { < Home /> } />         < Route path = "/exercise/:id" element = { < ExerciseDetail /> } />       </ Routes >       < Footer />     </ Box >   ); }; export default App ; <B...

 create react project: insdie gym folder ,do: >> npx create-react-app gym install all dependencies to be used: To install all the dependencies used in this project ,run: > > npm i react-horizontal-scrolling-menu react-loader-spinner react-router-dom @mui/icons-material @mui/material @emotion/react @emotion/styled or you can download my package.json and run: > > npm install But if run in any trouble,use: > > npm install --legacy-peer-depps This would install all dependencies of exact same version as in my package.json now download and put assets folder(icons and images) to src folder. add css to app.css folder .It has basic classes to be used in project's elements.