Merge pull request #133 from CodeHive-Solutions/dev

Use the old home carousel

package.json

@@ -21,6 +21,8 @@
         "cally": "^0.7.1",
         "depcheck": "^1.4.7",
         "embla-carousel-autoplay": "^8.2.1",
+        "embla-carousel-fade": "^8.2.1",
+        "embla-carousel-react": "^8.2.1",
         "formik": "^2.4.6",
         "lodash": "^4.17.21",
         "node-fetch": "^3.3.2",

src/components/pages/Home.jsx

@@ -26,7 +26,7 @@ import mapProcess from "../../images/home-carousel/process-map.png";
 import coexistence from "../../images/home-carousel/coexistence.png";
 import electricityCampaign from "../../images/home-carousel/electricity-campaign.png";
 import depression from "../../images/home-carousel/depression.png";
-import passwords from "../../images/home-carousel/passwords.png";
+import passwords from "../../images/home-carousel/password.png";
 import lockers from "../../images/home-carousel/lockers.png";
 
 
@@ -167,12 +167,12 @@ const Home = () => {
 
     return (
         <>
-            {/* <Box sx={{ display: "flex", mt: "5.5rem", px: "2rem", textAlign: "center", justifyContent: "center" }}>
+            <Box sx={{ display: "flex", mt: "5.5rem", px: "2rem", textAlign: "center", justifyContent: "center" }}>
                 <CarouselComponent items={homeImages} contain={true} height={matches ? "648px" : "480px"} width={matches ? "1152px" : "854px"} />
-            </Box> */}
-            <Box sx={{ mt: "6rem", display: "flex", alignItems: "center", justifyContent: "center" }}>
-                <EmblaCarousel />
             </Box>
+            {/* <Box sx={{ mt: "6rem", display: "flex", alignItems: "center", justifyContent: "center" }}>
+                <EmblaCarousel />
+            </Box> */}
             <Container sx={{ display: "flex", flexDirection: "column", gap: "2rem", mt: "2rem" }}>
                 <Typography
                     color="primary"

src/components/shared/EmblaCarousel.jsx

@@ -1,12 +1,13 @@
 import React from "react";
 import useEmblaCarousel from "embla-carousel-react";
 import depression from "../../images/home-carousel/depression.png";
-import brothers from "../../images/home-carousel/brothers.png";
+import password from "../../images/home-carousel/password.png";
 import water from "../../images/home-carousel/water.png";
 import Autoplay from "embla-carousel-autoplay";
+import Fade from "embla-carousel-fade";
 
 export function EmblaCarousel() {
-    const [emblaRef] = useEmblaCarousel({ loop: true }, [Autoplay({ delay: 4000, stopOnInteraction: false })]);
+    const [emblaRef] = useEmblaCarousel({ loop: true }, [Autoplay({ delay: 4000, stopOnInteraction: false })], [Fade()]);
 
     return (
         <div className="embla" style={{ overflow: "hidden" }} ref={emblaRef}>
@@ -15,7 +16,7 @@ export function EmblaCarousel() {
                     <img style={{ borderRadius: "1.8rem" }} src={depression} alt="depression" />
                 </div>
                 <div style={{ flex: "0 0 auto", minWidth: 0, maxWidth: "100%", margin: "20px 20px 0 0" }} className="embla__slide">
-                    <img style={{ borderRadius: "1.8rem" }} src={brothers} alt="brothers" />
+                    <img style={{ borderRadius: "1.8rem" }} src={password} alt="password" />
                 </div>
                 <div style={{ flex: "0 0 auto", minWidth: 0, maxWidth: "100%", margin: "20px 20px 0 0" }} className="embla__slide">
                     <img style={{ borderRadius: "1.8rem" }} src={water} alt="water" />