Add marquee to website carousel component

package.json

@@ -15,18 +15,19 @@
   "dependencies": {
     "gh-pages": "^6.0.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-fast-marquee": "^1.6.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "eslint": "^8.45.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",

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 */

src/components/Reusables/VolunteerItem/VolunteerItem.module.css

@@ -1,18 +1,19 @@
 .team {
   position: relative;
-  height: 40rem;
-  width: clamp(60%, 100%, 100%);
+  height: 30rem;
+  width: 90%
 }
 
 .team__container {
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  overflow-y: hidden;
+  padding-right: 20rem;
+  flex-direction: column;
   margin: 0 var(--margin-small);
   border-radius: 1rem;
   height: 100%;
-  position: relative;
   cursor: pointer;
 }
 
@@ -54,7 +55,7 @@
 
 @media screen and (max-width: 1024px) {
   .team {
-    height: 35rem;
+    height: 30rem;
   }
 }
 
@@ -66,6 +67,6 @@
 
 @media screen and (max-width: 325px) {
   .team {
-    height: 25rem;
+    height: 20rem;
   }
 }