From d8d6298b267ae062834ca8310e870b4576fb17af Mon Sep 17 00:00:00 2001 From: Michael Hunteman Date: Fri, 10 Jan 2025 16:05:45 -0800 Subject: Add carousel transition --- client/.env | 2 +- client/package.json | 1 + client/public/EngagmentSession_06.23.2024-131.jpg | Bin 2188838 -> 0 bytes client/public/EngagmentSession_06.23.2024-161.jpg | Bin 3150499 -> 0 bytes client/public/EngagmentSession_06.23.2024-164.jpg | Bin 3437736 -> 0 bytes client/public/EngagmentSession_06.23.2024-259.jpg | Bin 1643595 -> 0 bytes client/public/EngagmentSession_06.23.2024-267.jpg | Bin 1699370 -> 0 bytes client/public/EngagmentSession_06.23.2024-284.jpg | Bin 3429096 -> 0 bytes client/public/divine-shepherd.jpg | Bin 202918 -> 0 bytes client/public/divine-shepherd.webp | Bin 0 -> 87202 bytes client/public/engagement1.webp | Bin 0 -> 443490 bytes client/public/engagement2.webp | Bin 0 -> 988522 bytes client/public/engagement3.webp | Bin 0 -> 1035762 bytes client/public/engagement4.webp | Bin 0 -> 400510 bytes client/public/engagement5.webp | Bin 0 -> 423440 bytes client/public/engagement6.webp | Bin 0 -> 1047326 bytes client/src/components/Home.tsx | 44 +++++++++++----------- client/src/components/Schedule.tsx | 2 +- 18 files changed, 24 insertions(+), 25 deletions(-) delete mode 100644 client/public/EngagmentSession_06.23.2024-131.jpg delete mode 100644 client/public/EngagmentSession_06.23.2024-161.jpg delete mode 100644 client/public/EngagmentSession_06.23.2024-164.jpg delete mode 100644 client/public/EngagmentSession_06.23.2024-259.jpg delete mode 100644 client/public/EngagmentSession_06.23.2024-267.jpg delete mode 100644 client/public/EngagmentSession_06.23.2024-284.jpg delete mode 100644 client/public/divine-shepherd.jpg create mode 100644 client/public/divine-shepherd.webp create mode 100644 client/public/engagement1.webp create mode 100644 client/public/engagement2.webp create mode 100644 client/public/engagement3.webp create mode 100644 client/public/engagement4.webp create mode 100644 client/public/engagement5.webp create mode 100644 client/public/engagement6.webp 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 Binary files a/client/public/EngagmentSession_06.23.2024-131.jpg and /dev/null differ 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 Binary files a/client/public/EngagmentSession_06.23.2024-161.jpg and /dev/null differ 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 Binary files a/client/public/EngagmentSession_06.23.2024-164.jpg and /dev/null differ 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 Binary files a/client/public/EngagmentSession_06.23.2024-259.jpg and /dev/null differ 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 Binary files a/client/public/EngagmentSession_06.23.2024-267.jpg and /dev/null differ 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 Binary files a/client/public/EngagmentSession_06.23.2024-284.jpg and /dev/null differ diff --git a/client/public/divine-shepherd.jpg b/client/public/divine-shepherd.jpg deleted file mode 100644 index c89749e..0000000 Binary files a/client/public/divine-shepherd.jpg and /dev/null differ diff --git a/client/public/divine-shepherd.webp b/client/public/divine-shepherd.webp new file mode 100644 index 0000000..14a82df Binary files /dev/null and b/client/public/divine-shepherd.webp differ diff --git a/client/public/engagement1.webp b/client/public/engagement1.webp new file mode 100644 index 0000000..b8ce0f1 Binary files /dev/null and b/client/public/engagement1.webp differ diff --git a/client/public/engagement2.webp b/client/public/engagement2.webp new file mode 100644 index 0000000..2c8b01a Binary files /dev/null and b/client/public/engagement2.webp differ diff --git a/client/public/engagement3.webp b/client/public/engagement3.webp new file mode 100644 index 0000000..84e8adc Binary files /dev/null and b/client/public/engagement3.webp differ diff --git a/client/public/engagement4.webp b/client/public/engagement4.webp new file mode 100644 index 0000000..6098083 Binary files /dev/null and b/client/public/engagement4.webp differ diff --git a/client/public/engagement5.webp b/client/public/engagement5.webp new file mode 100644 index 0000000..b9faf7e Binary files /dev/null and b/client/public/engagement5.webp differ diff --git a/client/public/engagement6.webp b/client/public/engagement6.webp new file mode 100644 index 0000000..3e85e1f Binary files /dev/null and b/client/public/engagement6.webp differ 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(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() { /> )}
- {photos.map((photo, index) => ( -
- -
- ))} + + +
{isMobile && (