Add marquee to Alumni Section

Signed-off-by: Vipul Gupta (@vipulgupta2048) <vipulgupta2048@gmail.com>

Author: vipulgupta2048

src/components/Reusables/AlumniItem/AlumniItem.module.css

@@ -3,6 +3,7 @@
   justify-content: center;
   align-items: center;
   overflow-y: hidden;
+  padding-right: 5rem;
 }
 
 .alumni_item__detail {

src/components/Reusables/Carousel/Carousel.jsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/prop-types */
+import Marquee from "react-fast-marquee"
 import styles from "./Carousel.module.css"
 
 /**
@@ -10,50 +11,13 @@ import styles from "./Carousel.module.css"
  * @returns {JSX.Element} - The rendered carousel item component.
  */
 const Carousel = ({ id, props }) => {
-  const handleClickScrollLeft = (e) => {
-    const carousel = document.getElementById(e)
-    if (carousel) {
-      carousel.scrollBy({
-        left: -carousel.offsetWidth,
-        behavior: "smooth",
-      })
-    }
-  }
-
-  const handleClickScrollRight = (e) => {
-    const carousel = document.getElementById(e)
-    if (carousel) {
-      carousel.scrollBy({
-        left: carousel.offsetWidth,
-        behavior: "smooth",
-      })
-    }
-  }
   return (
     <div className={styles.carousel__container}>
-      <button
-        className={styles.carousel__button__left}
-        onClick={() => handleClickScrollLeft(id)}
-      >
-        <img
-          className={styles.carousel__button__img}
-          src="assets/icons/left-arrow.svg"
-          alt="arrow"
-        />
-      </button>
       <div id={id} className={styles.carousel}>
-        {props}
+        <Marquee speed={220} pauseOnHover={true}>
+          {props}
+        </Marquee>
       </div>
-      <button
-        className={styles.carousel__button__right}
-        onClick={() => handleClickScrollRight(id)}
-      >
-        <img
-          className={styles.carousel__button__img}
-          src="assets/icons/right-arrow.svg"
-          alt="arrow"
-        />
-      </button>
     </div>
   )
 }

src/components/Reusables/Carousel/Carousel.module.css

@@ -12,14 +12,8 @@
 }
 
 .carousel {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: calc((100% - var(--gap)) / var(--items));
-  gap: var(--gap);
   overflow-x: auto;
-  scrollbar-width: none;
   width: 100%;
-  max-width: 1445px;
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */