diff options
Diffstat (limited to 'client')
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 Binary files differdeleted 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 Binary files differdeleted 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 Binary files differdeleted 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 Binary files differdeleted 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 Binary files differdeleted 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 Binary files differdeleted 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 Binary files differdeleted 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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'; |
