1 files changed, 21 insertions, 23 deletions
diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx
index 5aa5f03..f31d219 100644
--- a/client/src/components/Home.tsx
+++ b/client/src/components/Home.tsx
@@ -1,25 +1,24 @@
 import React 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';
+import p1 from '/engagement1.webp';
+import p2 from '/engagement2.webp';
+import p3 from '/engagement3.webp';
+import p4 from '/engagement4.webp';
+import p5 from '/engagement5.webp';
+import p6 from '/engagement6.webp';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { AnimatePresence, motion } from 'framer-motion';
 
 function Home() {
   const [currentIndex, setIndex] = useState<number>(0);
-  const photos = [p0, p1, p2, p3, p4, p5];
+  const photos = [p1, p2, p3, p4, p5, p6];
   const isMobile = useMediaQuery('(max-width: 768px)');
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setIndex((prevIndex) =>
-        prevIndex === photos.length - 1 ? 0 : prevIndex + 1
-      );
-    }, 3000);
+      setIndex((prevIndex) => (prevIndex + 1) % photos.length);
+    }, 5000);
     return () => clearInterval(interval);
   }, [photos.length]);
 
@@ -38,18 +37,17 @@ function Home() {
         />
       )}
       <div className="carousel">
-        {photos.map((photo, index) => (
-          <div
-            key={index}
-            className={
-              index === currentIndex
-                ? 'carousel-slide active-slide'
-                : 'carousel-slide'
-            }
-          >
-            <img src={photo}></img>
-          </div>
-        ))}
+        <AnimatePresence mode="wait">
+          <motion.img
+            key={photos[currentIndex]}
+            src={photos[currentIndex]}
+            alt={`Engagement Photo ${currentIndex + 1}`}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 1 }}
+          />
+        </AnimatePresence>
       </div>
       {isMobile && (
         <img