1 files changed, 29 insertions, 40 deletions
diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx
index 558c104..bfa3fa8 100644
--- a/client/src/components/Home.tsx
+++ b/client/src/components/Home.tsx
@@ -1,51 +1,40 @@
 import React from 'react';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
+import './Carousel.css';
+import p0 from '/EngagmentSession_06.23.2024-131.jpg';
+import p1 from '/EngagmentSession_06.23.2024-161.jpg';
+import p2 from '/EngagmentSession_06.23.2024-164.jpg';
+import p3 from '/EngagmentSession_06.23.2024-259.jpg';
+import p4 from '/EngagmentSession_06.23.2024-267.jpg';
+import p5 from '/EngagmentSession_06.23.2024-284.jpg';
 
 function Home() {
-  const [index, setIndex] = useState(0);
-  const colors = ['#FF0000', '#00FF00', '#0000FF'];
-  const timeout = useRef(0);
+  const [currentIndex, setIndex] = useState(0);
+  const photos = [p0, p1, p2, p3, p4, p5];
 
   useEffect(() => {
-    resetTimeout();
-    timeout.current = window.setTimeout(
-      () =>
-        setIndex((prevIndex) =>
-          prevIndex === colors.length - 1 ? 0 : prevIndex + 1
-        ),
-      2500
-    );
-
-    return () => {
-      resetTimeout();
-    };
-  }, [index]);
-
-  const resetTimeout = () => {
-    if (timeout.current) {
-      clearTimeout(timeout.current);
-    }
-  };
+    const interval = setInterval(() => {
+      setIndex((prevIndex) =>
+        prevIndex === photos.length - 1 ? 0 : prevIndex + 1
+      );
+    }, 5000);
+    return () => clearInterval(interval);
+  }, [photos.length]);
 
   return (
-    <div style={{ margin: 'auto', overflow: 'hidden' }}>
-      <div
-        style={{
-          whiteSpace: 'nowrap',
-          transform: `translateX(${-index * 100}%)`,
-          transition: 'ease 1000ms',
-        }}
-      >
-        {colors.map((backgroundColor, colorIndex) => (
+    <div className="carousel-container">
+      <div className="carousel">
+        {photos.map((photo, index) => (
           <div
-            key={colorIndex}
-            style={{
-              display: 'inline-block',
-              backgroundColor,
-              height: '80vh',
-              width: '100%',
-            }}
-          />
+            key={index}
+            className={
+              index === currentIndex
+                ? 'carousel-slide active-slide'
+                : 'carousel-slide'
+            }
+          >
+            <img src={photo}></img>
+          </div>
         ))}
       </div>
     </div>