change wallpaper to carousel

package-lock.json

@@ -25,6 +25,7 @@
         "framer-motion": "^11.16.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-material-ui-carousel": "^3.4.2",
         "react-redux": "^9.2.0",
         "react-router-dom": "^7.0.2",
         "react-scripts": "^5.0.1",
@@ -9455,6 +9456,15 @@
         }
       }
     },
+    "node_modules/framesync": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-5.3.0.tgz",
+      "integrity": "sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -9915,6 +9925,12 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
+      "license": "MIT"
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -13478,6 +13494,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/popmotion": {
+      "version": "9.3.6",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.3.6.tgz",
+      "integrity": "sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==",
+      "license": "MIT",
+      "dependencies": {
+        "framesync": "5.3.0",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "4.1.4",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -15240,6 +15268,282 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "license": "MIT"
     },
+    "node_modules/react-material-ui-carousel": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.4.2.tgz",
+      "integrity": "sha512-jUbC5aBWqbbbUOOdUe3zTVf4kMiZFwKJqwhxzHgBfklaXQbSopis4iWAHvEOLcZtSIJk4JAGxKE0CmxDoxvUuw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/react": "^11.7.1",
+        "@emotion/styled": "^11.6.0",
+        "@mui/icons-material": "^5.4.1",
+        "@mui/material": "^5.4.1",
+        "@mui/system": "^5.4.1",
+        "framer-motion": "^4.1.17"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "@mui/icons-material": "^5.0.0",
+        "@mui/material": "^5.0.0",
+        "@mui/system": "^5.0.0",
+        "react": "^17.0.1 || ^18.0.0",
+        "react-dom": "^17.0.2 || ^18.0.0"
+      }
+    },
+    "node_modules/react-material-ui-carousel/node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/react-material-ui-carousel/node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/react-material-ui-carousel/node_modules/@mui/core-downloads-tracker": {
+      "version": "5.16.14",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.14.tgz",
+      "integrity": "sha512-sbjXW+BBSvmzn61XyTMun899E7nGPTXwqD9drm1jBUAvWEhJpPFIRxwQQiATWZnd9rvdxtnhhdsDxEGWI0jxqA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/react-material-ui-carousel/node_modules/@mui/icons-material": {
+      "version": "5.16.14",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.14.tgz",
+      "integrity": "sha512-heL4S+EawrP61xMXBm59QH6HODsu0gxtZi5JtnXF2r+rghzyU/3Uftlt1ij8rmJh+cFdKTQug1L9KkZB5JgpMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-material-ui-carousel/node_modules/@mui/material": {
+      "version": "5.16.14",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.14.tgz",
+      "integrity": "sha512-eSXQVCMKU2xc7EcTxe/X/rC9QsV2jUe8eLM3MUCPYbo6V52eCE436akRIvELq/AqZpxx2bwkq7HC0cRhLB+yaw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/core-downloads-tracker": "^5.16.14",
+        "@mui/system": "^5.16.14",
+        "@mui/types": "^7.2.15",
+        "@mui/utils": "^5.16.14",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.0.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-material-ui-carousel/node_modules/@mui/private-theming": {
+      "version": "5.16.14",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.14.tgz",
+      "integrity": "sha512-12t7NKzvYi819IO5IapW2BcR33wP/KAVrU8d7gLhGHoAmhDxyXlRoKiRij3TOD8+uzk0B6R9wHUNKi4baJcRNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/utils": "^5.16.14",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-material-ui-carousel/node_modules/@mui/styled-engine": {
+      "version": "5.16.14",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.14.tgz",
+      "integrity": "sha512-UAiMPZABZ7p8mUW4akDV6O7N3+4DatStpXMZwPlt+H/dA0lt67qawN021MNND+4QTpjaiMYxbhKZeQcyWCbuKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@emotion/cache": "^11.13.5",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-material-ui-carousel/node_modules/@mui/system": {
+      "version": "5.16.14",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.14.tgz",
+      "integrity": "sha512-KBxMwCb8mSIABnKvoGbvM33XHyT+sN0BzEBG+rsSc0lLQGzs7127KWkCA6/H8h6LZ00XpBEME5MAj8mZLiQ1tw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/private-theming": "^5.16.14",
+        "@mui/styled-engine": "^5.16.14",
+        "@mui/types": "^7.2.15",
+        "@mui/utils": "^5.16.14",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-material-ui-carousel/node_modules/@mui/utils": {
+      "version": "5.16.14",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.14.tgz",
+      "integrity": "sha512-wn1QZkRzSmeXD1IguBVvJJHV3s6rxJrfb6YuC9Kk6Noh9f8Fb54nUs5JRkKm+BOerRhj5fLg05Dhx/H3Ofb8Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/types": "^7.2.15",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-material-ui-carousel/node_modules/framer-motion": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-4.1.17.tgz",
+      "integrity": "sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==",
+      "license": "MIT",
+      "dependencies": {
+        "framesync": "5.3.0",
+        "hey-listen": "^1.0.8",
+        "popmotion": "9.3.6",
+        "style-value-types": "4.1.4",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0",
+        "react-dom": ">=16.8 || ^17.0.0"
+      }
+    },
+    "node_modules/react-material-ui-carousel/node_modules/react-is": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz",
+      "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==",
+      "license": "MIT"
+    },
     "node_modules/react-redux": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
@@ -16955,6 +17259,16 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/style-value-types": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-4.1.4.tgz",
+      "integrity": "sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==",
+      "license": "MIT",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",

package.json

@@ -20,6 +20,7 @@
     "framer-motion": "^11.16.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-material-ui-carousel": "^3.4.2",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.0.2",
     "react-scripts": "^5.0.1",

src/components/Carousel/Carousel.jsx

@@ -2,30 +2,33 @@ import React from "react";
 import { Box, IconButton } from "@mui/material";
 import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
-import mainImage from "../../assets/images/mainwallpaper.jpg"
-import mainImageMobile from "../../assets/images/mainwallpaper-mobile.jpg"
+import mainImage1 from "../../assets/images/MAINHEADER-01.webp";
+import mainImage2 from "../../assets/images/MAINHEADER-02.webp";
+import mainImageMobile from "../../assets/images/mainwallpaper-mobile.jpg";
 
 const Carousel = () => {
-
+  const isMobile = window.innerWidth <= 768; // Adjust breakpoint for mobile
   const items = [
-    { img_src: mainImage, alt_name: "Image 1" }
-  ]
+    { img_src: mainImage1, alt_name: "Image 1" },
+    { img_src: mainImage2, alt_name: "Image 2" },
+  ];
 
   const items_mobile = [
-    { img_src: mainImageMobile, alt_name: "Image 1" }
-  ]
+    { img_src: mainImageMobile, alt_name: "Image 1" },
+  ];
 
+  const activeItems = isMobile ? items_mobile : items;
   const [currentIndex, setCurrentIndex] = React.useState(0);
 
   const handlePrev = () => {
     setCurrentIndex((prevIndex) =>
-      prevIndex === 0 ? items.length - 1 : prevIndex - 1
+      prevIndex === 0 ? activeItems.length - 1 : prevIndex - 1
     );
   };
 
   const handleNext = () => {
     setCurrentIndex((prevIndex) =>
-      prevIndex === items.length - 1 ? 0 : prevIndex + 1
+      prevIndex === activeItems.length - 1 ? 0 : prevIndex + 1
     );
   };
 
@@ -37,38 +40,72 @@ const Carousel = () => {
         alignItems: "center",
         justifyContent: "center",
         width: "100%",
-        objectPosition: "top center",
+        height: "100vh", // Full viewport height
         overflow: "hidden",
       }}
     >
-      {/* Filter */}
-      <Box sx={{
-        position: "absolute",
-        top: 0,
-        right: 0,
-        backgroundColor: "rgba(0, 0, 0, 0.2)",
-        width: "100%",
-        height: "100%"
-      }}></Box>
-
-      {items.map((item, index) => (
-        <Box
-          key={index}
-          component="img"
-          src={item.img_src}
-          alt={item.alt_name}
-          sx={{
-            width: "100%",
-            height: "100%",
-            backgroundImage: `url(${item.img_src})`,
-            objectFit: "cover",
-            objectPosition: "center center",
-          }}
-        />
-      ))}
+      {/* Overlay Filter */}
+      <Box
+        sx={{
+          position: "absolute",
+          top: 0,
+          right: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.2)",
+          width: "100%",
+          height: "100%",
+          zIndex: 1,
+        }}
+      />
 
+      {/* Render the Current Image */}
+      <Box
+        key={currentIndex}
+        component="img"
+        src={activeItems[currentIndex].img_src}
+        alt={activeItems[currentIndex].alt_name}
+        sx={{
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          transition: "opacity 0.5s ease-in-out",
+          zIndex: 0,
+        }}
+      />
 
+      {/* Navigation Buttons */}
+      <IconButton
+        onClick={handlePrev}
+        sx={{
+          position: "absolute",
+          left: "10px",
+          top: "50%",
+          transform: "translateY(-50%)",
+          zIndex: 10,
+          color: "white",
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          "&:hover": { backgroundColor: "rgba(0, 0, 0, 0.7)" },
+        }}
+        aria-label="Previous Slide"
+      >
+        <ArrowBackIosIcon />
+      </IconButton>
 
+      <IconButton
+        onClick={handleNext}
+        sx={{
+          position: "absolute",
+          right: "10px",
+          top: "50%",
+          transform: "translateY(-50%)",
+          zIndex: 10,
+          color: "white",
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          "&:hover": { backgroundColor: "rgba(0, 0, 0, 0.7)" },
+        }}
+        aria-label="Next Slide"
+      >
+        <ArrowForwardIosIcon />
+      </IconButton>
     </Box>
   );
 };