Add carousel transition

18 files changed, 24 insertions, 25 deletions

diff --git a/client/.env b/client/.env
index 6bb9cb3..a873abb 100644
--- a/client/.env
+++ b/client/.env
@@ -1 +1 @@
-VITE_BASE_URL=https://wedding.huntm.net/
+VITE_BASE_URL=https://wedding.huntm.net/api/
diff --git a/client/package.json b/client/package.json
index f7bf568..0849953 100644
--- a/client/package.json
+++ b/client/package.json
@@ -18,6 +18,7 @@
     "@mui/x-date-pickers": "^7.14.0",
     "@reduxjs/toolkit": "^2.2.1",
     "export-to-csv": "^1.4.0",
+    "framer-motion": "^11.17.0",
     "material-react-table": "^2.13.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/client/public/EngagmentSession_06.23.2024-131.jpg b/client/public/EngagmentSession_06.23.2024-131.jpg
deleted file mode 100644
index 0657a40..0000000
--- a/client/public/EngagmentSession_06.23.2024-131.jpg
+++ /dev/null
diff --git a/client/public/EngagmentSession_06.23.2024-161.jpg b/client/public/EngagmentSession_06.23.2024-161.jpg
deleted file mode 100644
index 92b5be5..0000000
--- a/client/public/EngagmentSession_06.23.2024-161.jpg
+++ /dev/null
diff --git a/client/public/EngagmentSession_06.23.2024-164.jpg b/client/public/EngagmentSession_06.23.2024-164.jpg
deleted file mode 100644
index 529a324..0000000
--- a/client/public/EngagmentSession_06.23.2024-164.jpg
+++ /dev/null
diff --git a/client/public/EngagmentSession_06.23.2024-259.jpg b/client/public/EngagmentSession_06.23.2024-259.jpg
deleted file mode 100644
index 075480c..0000000
--- a/client/public/EngagmentSession_06.23.2024-259.jpg
+++ /dev/null
diff --git a/client/public/EngagmentSession_06.23.2024-267.jpg b/client/public/EngagmentSession_06.23.2024-267.jpg
deleted file mode 100644
index 7222c16..0000000
--- a/client/public/EngagmentSession_06.23.2024-267.jpg
+++ /dev/null
diff --git a/client/public/EngagmentSession_06.23.2024-284.jpg b/client/public/EngagmentSession_06.23.2024-284.jpg
deleted file mode 100644
index 2f06a42..0000000
--- a/client/public/EngagmentSession_06.23.2024-284.jpg
+++ /dev/null
diff --git a/client/public/divine-shepherd.jpg b/client/public/divine-shepherd.jpg
deleted file mode 100644
index c89749e..0000000
--- a/client/public/divine-shepherd.jpg
+++ /dev/null
diff --git a/client/public/divine-shepherd.webp b/client/public/divine-shepherd.webp
new file mode 100644
index 0000000..14a82df
--- /dev/null
+++ b/client/public/divine-shepherd.webp
diff --git a/client/public/engagement1.webp b/client/public/engagement1.webp
new file mode 100644
index 0000000..b8ce0f1
--- /dev/null
+++ b/client/public/engagement1.webp
diff --git a/client/public/engagement2.webp b/client/public/engagement2.webp
new file mode 100644
index 0000000..2c8b01a
--- /dev/null
+++ b/client/public/engagement2.webp
diff --git a/client/public/engagement3.webp b/client/public/engagement3.webp
new file mode 100644
index 0000000..84e8adc
--- /dev/null
+++ b/client/public/engagement3.webp
diff --git a/client/public/engagement4.webp b/client/public/engagement4.webp
new file mode 100644
index 0000000..6098083
--- /dev/null
+++ b/client/public/engagement4.webp
diff --git a/client/public/engagement5.webp b/client/public/engagement5.webp
new file mode 100644
index 0000000..b9faf7e
--- /dev/null
+++ b/client/public/engagement5.webp
diff --git a/client/public/engagement6.webp b/client/public/engagement6.webp
new file mode 100644
index 0000000..3e85e1f
--- /dev/null
+++ b/client/public/engagement6.webp
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
diff --git a/client/src/components/Schedule.tsx b/client/src/components/Schedule.tsx
index 348e6b3..6440d92 100644
--- a/client/src/components/Schedule.tsx
+++ b/client/src/components/Schedule.tsx
@@ -6,7 +6,7 @@ import {
   useMediaQuery,
   useTheme,
 } from '@mui/material';
-import divineShepherd from '/divine-shepherd.jpg';
+import divineShepherd from '/divine-shepherd.webp';
 import InsertInvitationIcon from '@mui/icons-material/InsertInvitation';
 import { useAppDispatch } from '../hooks';
 import { showDialog } from '../slices/uiSlice';