Add photos

15 files changed, 141 insertions, 128 deletions

diff --git a/client/public/EngagmentSession_06.23.2024-131.jpg b/client/public/EngagmentSession_06.23.2024-131.jpg
new file mode 100644
index 0000000..0657a40
--- /dev/null
+++ b/client/public/EngagmentSession_06.23.2024-131.jpg
diff --git a/client/public/EngagmentSession_06.23.2024-161.jpg b/client/public/EngagmentSession_06.23.2024-161.jpg
new file mode 100644
index 0000000..92b5be5
--- /dev/null
+++ b/client/public/EngagmentSession_06.23.2024-161.jpg
diff --git a/client/public/EngagmentSession_06.23.2024-164.jpg b/client/public/EngagmentSession_06.23.2024-164.jpg
new file mode 100644
index 0000000..529a324
--- /dev/null
+++ b/client/public/EngagmentSession_06.23.2024-164.jpg
diff --git a/client/public/EngagmentSession_06.23.2024-259.jpg b/client/public/EngagmentSession_06.23.2024-259.jpg
new file mode 100644
index 0000000..075480c
--- /dev/null
+++ b/client/public/EngagmentSession_06.23.2024-259.jpg
diff --git a/client/public/EngagmentSession_06.23.2024-267.jpg b/client/public/EngagmentSession_06.23.2024-267.jpg
new file mode 100644
index 0000000..7222c16
--- /dev/null
+++ b/client/public/EngagmentSession_06.23.2024-267.jpg
diff --git a/client/public/EngagmentSession_06.23.2024-284.jpg b/client/public/EngagmentSession_06.23.2024-284.jpg
new file mode 100644
index 0000000..2f06a42
--- /dev/null
+++ b/client/public/EngagmentSession_06.23.2024-284.jpg
diff --git a/client/public/divine-shepherd.jpg b/client/public/divine-shepherd.jpg
new file mode 100644
index 0000000..c89749e
--- /dev/null
+++ b/client/public/divine-shepherd.jpg
diff --git a/client/src/components/Carousel.css b/client/src/components/Carousel.css
new file mode 100644
index 0000000..e2fbc1c
--- /dev/null
+++ b/client/src/components/Carousel.css
@@ -0,0 +1,24 @@
+.carousel-container {
+  height: 100%;
+  width: 100%;
+}
+
+.carousel {
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+}
+
+.carousel-slide {
+  display: none;
+}
+
+.carousel-slide.active-slide {
+  display: flex;
+}
+
+.carousel img {
+  width: 100%;
+  max-height: 100vh;
+  object-fit: cover;
+}
diff --git a/client/src/components/GuestLogin.tsx b/client/src/components/GuestLogin.tsx
index c06bc6e..16b4478 100644
--- a/client/src/components/GuestLogin.tsx
+++ b/client/src/components/GuestLogin.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import { Button, Container, TextField, Typography } from '@mui/material';
+import { Button, TextField, Typography } from '@mui/material';
 import { useForm } from 'react-hook-form';
 import { setCredentials } from '../slices/authSlice';
 import { useLoginMutation } from '../slices/apiSlice';
@@ -33,17 +33,26 @@ function GuestLogin() {
   };
 
   return (
-    <Container
-      component="form"
-      maxWidth="xs"
+    <form
+      style={{
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'start',
+      }}
       noValidate
       onSubmit={handleSubmit(onSubmit)}
     >
       <div
         style={{
-          marginTop: 80,
+          width: 384,
+          marginTop: 128,
+          marginLeft: '0.5rem',
+          marginRight: '0.5rem',
           display: 'flex',
           flexDirection: 'column',
+          justifyContent: 'center',
           alignItems: 'center',
         }}
       >
@@ -72,7 +81,7 @@ function GuestLogin() {
           Log in
         </Button>
       </div>
-    </Container>
+    </form>
   );
 }
 
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>
diff --git a/client/src/components/NavBar.tsx b/client/src/components/NavBar.tsx
index a8e0a14..7cae800 100644
--- a/client/src/components/NavBar.tsx
+++ b/client/src/components/NavBar.tsx
@@ -9,7 +9,7 @@ function NavBar() {
   const isMobile = useMediaQuery('(max-width: 768px)');
 
   return (
-    <AppBar position="relative">
+    <AppBar>
       <Toolbar>
         <Typography
           variant="h5"
diff --git a/client/src/components/Registry.tsx b/client/src/components/Registry.tsx
index 60a73f9..038bd1d 100644
--- a/client/src/components/Registry.tsx
+++ b/client/src/components/Registry.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 
 function Registry() {
   return (
-    <>
-      <p>Registry</p>
-    </>
+    <div style={{ height: '100%', width: '100%', display: 'flex' }}>
+      <p style={{ marginTop: 64 }}>Registry</p>
+    </div>
   );
 }
 
diff --git a/client/src/components/RsvpForm.tsx b/client/src/components/RsvpForm.tsx
index 4454c77..63981f8 100644
--- a/client/src/components/RsvpForm.tsx
+++ b/client/src/components/RsvpForm.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import { useRef } from 'react';
-import { useNavigate, useOutletContext } from 'react-router-dom';
+import { useOutletContext } from 'react-router-dom';
 import {
   Alert,
   Button,
-  Container,
   FormControl,
   FormControlLabel,
   FormLabel,
@@ -22,7 +21,6 @@ function RsvpForm() {
     useUpdateGuestMutation();
   const guest: Guest = useOutletContext();
   const previousPartySize = useRef(guest?.partySize - 1);
-  const navigate = useNavigate();
 
   const {
     register,
@@ -77,13 +75,18 @@ function RsvpForm() {
   };
 
   return (
-    <Container
-      component="form"
-      maxWidth="sm"
+    <form
+      style={{
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'start',
+      }}
       noValidate
       onSubmit={handleSubmit(onSubmit)}
     >
-      <Grid container spacing={2} sx={{ mt: 8 }}>
+      <Grid container spacing={2} sx={{ width: 600, mt: 16, mx: 0.5 }}>
         <Grid item xs={12}>
           <p>
             Please RSVP for the wedding by March 10, 2025. The ceremony will
@@ -236,7 +239,7 @@ function RsvpForm() {
           </div>
         </Grid>
       </Grid>
-    </Container>
+    </form>
   );
 }
 
diff --git a/client/src/components/Schedule.tsx b/client/src/components/Schedule.tsx
index bb5f809..cc6e8bd 100644
--- a/client/src/components/Schedule.tsx
+++ b/client/src/components/Schedule.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
-import { Container, Paper, Typography, useTheme } from '@mui/material';
+import { Paper, Typography, useTheme } from '@mui/material';
+import divineShepherd from '/divine-shepherd.jpg';
 
 const FlexBox = (props: any) => {
   return (
     <div
       style={{
-        height: '100%',
-        width: '100%',
         display: 'flex',
         alignItems: 'center',
       }}
@@ -19,83 +18,72 @@ const FlexBox = (props: any) => {
 function Schedule() {
   const theme = useTheme();
   return (
-    <Container
-      maxWidth="sm"
-      sx={{
+    <div
+      style={{
+        height: '100%',
         display: 'flex',
         justifyContent: 'center',
+        alignItems: 'center',
+        backgroundImage: `url(${divineShepherd})`,
+        backgroundSize: 'cover',
       }}
     >
       <Paper
         elevation={3}
         sx={{
-          mt: 10,
+          width: 512,
+          mx: 0.5,
           px: 2,
-          height: '100%',
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
         }}
       >
-        <div
-          style={{
-            height: '100%',
-            width: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-          }}
-        >
-          <FlexBox>
-            <div style={{ width: '35%' }}>
-              <p>April 26, 2025</p>
-            </div>
-            <div style={{ width: '65%' }}>
-              <Typography variant="h5">Wedding Schedule</Typography>
-            </div>
-          </FlexBox>
-          <hr style={{ width: '100%' }} />
-          <FlexBox>
-            <div style={{ width: '35%' }}>
-              <p>3:00 PM</p>
-            </div>
-            <div style={{ width: '65%' }}>
-              <Typography variant="h6">Ceremony</Typography>
-              <p>
-                Divine Shepherd
-                <br />
-                <a
-                  href="https://maps.app.goo.gl/dGWvmjPiVjNGBVkZ9"
-                  style={{ color: theme.palette.primary.main }}
-                >
-                  15005 Q St, Omaha, NE 68137
-                </a>
-              </p>
-            </div>
-          </FlexBox>
-          <hr style={{ width: '100%' }} />
-          <FlexBox>
-            <div style={{ width: '35%' }}>
-              <p>5:00 PM</p>
-            </div>
-            <div style={{ width: '65%' }}>
-              <Typography variant="h6">Reception</Typography>
-              <p>
-                A Venue on the Ridge
-                <br />
-                <a
-                  href="https://maps.app.goo.gl/35RRqxzQdq6E4eSMA"
-                  style={{ color: theme.palette.primary.main }}
-                >
-                  20033 Elkhorn Ridge Dr, Elkhorn, NE 68022
-                </a>
-              </p>
-            </div>
-          </FlexBox>
-        </div>
+        <FlexBox>
+          <div style={{ width: '35%' }}>
+            <p>April 26, 2025</p>
+          </div>
+          <div style={{ width: '65%' }}>
+            <Typography variant="h5">Wedding Schedule</Typography>
+          </div>
+        </FlexBox>
+        <hr style={{ width: '100%' }} />
+        <FlexBox>
+          <div style={{ width: '35%' }}>
+            <p>3:00 PM</p>
+          </div>
+          <div style={{ width: '65%' }}>
+            <Typography variant="h6">Ceremony</Typography>
+            <p>
+              Divine Shepherd
+              <br />
+              <a
+                href="https://maps.app.goo.gl/dGWvmjPiVjNGBVkZ9"
+                style={{ color: theme.palette.primary.main }}
+              >
+                15005 Q St, Omaha, NE 68137
+              </a>
+            </p>
+          </div>
+        </FlexBox>
+        <hr style={{ width: '100%' }} />
+        <FlexBox>
+          <div style={{ width: '35%' }}>
+            <p>5:00 PM</p>
+          </div>
+          <div style={{ width: '65%' }}>
+            <Typography variant="h6">Reception</Typography>
+            <p>
+              A Venue on the Ridge
+              <br />
+              <a
+                href="https://maps.app.goo.gl/35RRqxzQdq6E4eSMA"
+                style={{ color: theme.palette.primary.main }}
+              >
+                20033 Elkhorn Ridge Dr, Elkhorn, NE 68022
+              </a>
+            </p>
+          </div>
+        </FlexBox>
       </Paper>
-    </Container>
+    </div>
   );
 }
 
diff --git a/client/src/main.css b/client/src/main.css
index 5cb7cd6..1ef15c5 100644
--- a/client/src/main.css
+++ b/client/src/main.css
@@ -1,4 +1,4 @@
 #root, body {
-  height: 100vh;
+  height: 100dvh;
   margin: 0
 }