Adding wedding website files.

2025-09-08 17:40:36 +00:00 · 2021-06-03 17:58:40 -07:00 · 2021-06-03 17:58:40 -07:00 · 7400a5b50d
commit 7400a5b50d
parent 8dcf63ff9d
118 changed files with 19355 additions and 0 deletions
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -0,0 +1,12 @@
 {
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "port": 9229
    }
  ]
 }
--- a/README.md
+++ b/README.md
@ -0,0 +1,17 @@
 # Wedding Website
 ## This is a skeleton template of the wedding website I created
 ## Names, Dates, Locations are all hardcoded to a value
 The site implements a basic auth to protect access without knowing the password to the site.
 ## Tech
 Overall a typical NextJS Application
 ### Frontend
 - ReactJS
 - Styled Components
 - Next Iron Session for Login
 ### Backend
 - NextJS APIs
 - Mongoose DB for MongoDB
  - Used to store RSVPs and default login
--- a/components/CustomNextCloudinaryImage.js
+++ b/components/CustomNextCloudinaryImage.js
@ -0,0 +1,81 @@
 import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { buildUrl } from 'cloudinary-build-url';
 // import wait from 'waait';
 import styled, { keyframes } from 'styled-components';
 const blurImageTransition = keyframes`
  from {
    filter: blur(0);
  }
  to {
    filter: blur(5px)
  }
 `;
 const unblurImageTransition = keyframes`
  from {
    filter: blur(5px)
  }
  to {
    filter: blur(0);
  }
 `;
 const CustomStylesContainer = styled.div`
  .unblur {
    animation: ${unblurImageTransition} 1s linear;
  }
  .blur {
    animation: ${blurImageTransition} 1s linear;
  }
 `;
 const CustomNextCloudinaryImage = (props) => {
  const { height, width, src, onLoad, blur, resize, ...other } = props;
  const [onLoadCount, setOnloadCount] = useState(0);
  const [imageLoaded, setImageLoaded] = useState(false);
  const transformations = {};
  if (resize) {
    transformations.resize = {
      type: 'scale',
      width,
      height,
    };
  }
  const imageUrl = buildUrl(`${process.env.NEXT_PUBLIC_FOLDER_NAME}/${src}`, {
    cloud: {
      cloudName: process.env.NEXT_PUBLIC_CLOUD_NAME,
    },
    transformations,
  });
  useEffect(() => {
    if (onLoadCount > 1) {
      setImageLoaded(true);
    }
  }, [onLoadCount]);
  return (
    <CustomStylesContainer>
      <Image
        className={`${imageLoaded ? 'unblur' : 'blur'}`}
        onLoad={(e) => {
          setOnloadCount((prev) => prev + 1);
          if (onLoad) onLoad(e);
        }}
        src={imageUrl}
        objectFit="cover"
        width={width}
        height={height}
        {...other}
      />
    </CustomStylesContainer>
  );
 };
 export default CustomNextCloudinaryImage;
--- a/components/CustomNextImage.js
+++ b/components/CustomNextImage.js
@ -0,0 +1,63 @@
 import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import styled, { keyframes } from 'styled-components';
 const blurImageTransition = keyframes`
  from {
    filter: blur(0);
  }
  to {
    filter: blur(5px)
  }
 `;
 const unblurImageTransition = keyframes`
  from {
    filter: blur(5px)
  }
  to {
    filter: blur(0);
  }
 `;
 const CustomStylesContainer = styled.div`
  .unblur {
    animation: ${unblurImageTransition} 1s linear;
  }
  .blur {
    animation: ${blurImageTransition} 1s linear;
  }
 `;
 const CustomNextImage = (props) => {
  const { height, width, src, onLoad, ...other } = props;
  const [onLoadCount, setOnloadCount] = useState(0);
  const [imageLoaded, setImageLoaded] = useState(false);
  useEffect(() => {
    if (onLoadCount > 1) {
      setImageLoaded(true);
    }
  }, [onLoadCount]);
  return (
    <CustomStylesContainer>
      <Image
        className={`${imageLoaded ? 'unblur' : 'blur'}`}
        onLoad={(e) => {
          setOnloadCount((prev) => prev + 1);
          if (onLoad) onLoad(e);
        }}
        src={imageUrl}
        objectFit="cover"
        width={width}
        height={height}
        {...other}
      />
    </CustomStylesContainer>
  );
 };
 export default CustomNextImage;
--- a/components/Event.js
+++ b/components/Event.js
@ -0,0 +1,69 @@
 import styled from 'styled-components';
 const EventStyles = styled.article`
  display: grid;
  gap: 2rem;
  justify-content: center;
  margin-top: 3.5rem;
  .schedule-event {
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--lightGrey);
  }
 `;
 const ScheduleStyle = styled.article`
  display: flex;
  gap: 1.5rem;
  flex-direction: row;
  text-align: center;
 `;
 export default function Event({ event }) {
  const {
    name,
    date,
    start,
    end,
    venueName,
    attire,
    description,
    openToAll,
    showSchedule,
    scheduleEvents,
  } = event;
  return (
    <EventStyles>
      <div className="center">
        <h2>{name}</h2>
        <h3>{date}</h3>
        <h3>
          {start}
          {end && ` - ${end}`}
        </h3>
        {venueName && <div dangerouslySetInnerHTML={{ __html: venueName }} />}
        {attire && <h4>{attire}</h4>}
        {description && <h4>{description}</h4>}
      </div>
      {showSchedule &&
        scheduleEvents &&
        scheduleEvents.map(({ name, start, end, venueName }) => (
          <ScheduleStyle key={name} className="schedule-event">
            <div>
              {start && (
                <h3>
                  {start}
                  {end && ` - {end}`}
                </h3>
              )}
            </div>
            <div>
              {name && <h3>{name}</h3>}
              {venueName && (
                <div dangerouslySetInnerHTML={{ __html: venueName }} />
              )}
            </div>
          </ScheduleStyle>
        ))}
    </EventStyles>
  );
 }
--- a/components/Footer.js
+++ b/components/Footer.js
@ -0,0 +1,75 @@
 import styled from 'styled-components';
 import Link from 'next/link';
 import useUser from '../lib/useUser';
 const FooterStyles = styled.footer`
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 1rem;
  text-align: center;
  margin-top: 6rem;
  @media (max-width: 800px) {
    margin-top: 2rem;
  }
  h2 {
    font-size: 4rem;
  }
  hr {
    display: block;
    max-width: 50%;
    height: 0;
    max-height: 0;
    border: solid;
    width: 100%;
    border-width: thin 0 0 0;
    transition: inherit;
    border-color: var(--lightShade);
    color: var(--lightShade);
  }
  p {
    margin: 0;
    padding: 0.2rem;
    font-weight: 600;
    color: var(--lightShade);
  }
  ul {
    margin: 0.5rem;
  }
 `;
 export default function Footer() {
  const { user } = useUser();
  return (
    <FooterStyles>
      <div>
        <h2>
          <Link href="/">
            <a>N & N</a>
          </Link>
        </h2>
        {user && user.isLoggedIn === true ? (
          <>
            <hr />
            <h3>06.03.2030</h3>
          </>
        ) : (
          ''
        )}
      </div>
      <div>
        <p>Created by Bradley</p>
      </div>
    </FooterStyles>
  );
 }
--- a/components/Form.js
+++ b/components/Form.js
@ -0,0 +1,43 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 const Form = ({ errorMessage, onSubmit }) => (
  <form onSubmit={onSubmit}>
    <label htmlFor="password">
      <span>Please enter the password to view this page</span>
      <input type="text" id="password" name="password" required />
    </label>
    <button type="submit">Login</button>
    {errorMessage && <p className="error">{errorMessage}</p>}
    <style jsx>{`
      form,
      label {
        display: flex;
        flex-flow: column;
      }
      label > span {
        font-weight: 600;
      }
      input {
        padding: 8px;
        margin: 0.3rem 0 1rem;
        border: 1px solid #ccc;
        border-radius: 4px;
      }
      .error {
        color: brown;
        margin: 1rem 0 0;
      }
    `}</style>
  </form>
 );
 export default Form;
 Form.propTypes = {
  errorMessage: PropTypes.string,
  onSubmit: PropTypes.func,
 };
--- a/components/GuestRSVP.js
+++ b/components/GuestRSVP.js
@ -0,0 +1,118 @@
 import { useState } from 'react';
 import styled from 'styled-components';
 import PlusOneRSVP from './PlusOneRSVP';
 export const GuestStyles = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  // flex-direction: row;
  justify-content: center;
  justify-items: center;
  align-content: center;
  align-items: center;
  gap: 1.5rem;
  margin: 1rem 0;
  h3 {
    margin-right: 2rem;
  }
  input[type='radio'] {
    opacity: 0;
    position: fixed;
    width: 0;
  }
  /* input[type='checkbox'] {
    margin: 0;
    padding: 0;
  } */
  label {
    background: none;
    color: var(--lightViolet);
    border: 1px solid var(--lightViolet);
    padding: 1rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    --cast: 2px;
    box-shadow: var(--cast) var(--cast) 0 var(--lightAccent);
    text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    text-decoration: none;
    &:hover {
      --cast: 4px;
    }
    &:active {
      --cast: 2px;
    }
  }
  label:hover {
    background-color: var(--lightViolet);
    color: var(--black);
  }
  input[type='radio']:checked + label {
    background: var(--lightViolet);
    color: var(--black);
    border: 0;
  }
  input[type='radio']:focus + label {
    background: var(--primary);
    color: var(--black);
    border: 0;
  }
 `;
 export default function GuestRSVP({ guest, inputs, handleChange }) {
  if (!guest) {
    return <p>Loading...</p>;
  }
  // const [plusOne, setPlusOne] = useState(
  //   guest?.rsvpStatus === 'accepted' && guest?.plusOne
  // );
  return (
    <>
      <GuestStyles key={guest.id}>
        <h3>
          {guest.firstName} {guest.lastName}
        </h3>
        <input
          type="radio"
          id={`${guest.id}-accepted`}
          name={`${guest.id}-rsvpStatus`}
          value="accepted"
          checked={inputs[guest.id]?.rsvpStatus === 'accepted'}
          onChange={handleChange}
        />
        <label htmlFor={`${guest.id}-accepted`}>
          {inputs[guest.id]?.rsvpStatus === 'accepted' ? 'Accepted' : 'Accept'}
        </label>
        <input
          type="radio"
          id={`${guest.id}-declined`}
          name={`${guest.id}-rsvpStatus`}
          value="declined"
          checked={inputs[guest.id]?.rsvpStatus === 'declined'}
          onChange={handleChange}
        />
        <label htmlFor={`${guest.id}-declined`}>
          {inputs[guest.id]?.rsvpStatus === 'declined' ? 'Declined' : 'Decline'}
        </label>
      </GuestStyles>
      {guest?.hasPlusOne && inputs[guest?.id]?.rsvpStatus === 'accepted' ? (
        <PlusOneRSVP
          guest={guest}
          inputs={inputs}
          handleChange={handleChange}
        />
      ) : (
        ''
      )}
    </>
  );
 }
--- a/components/Header.js
+++ b/components/Header.js
@ -0,0 +1,51 @@
 import React from 'react';
 import styled from 'styled-components';
 import Link from 'next/link';
 import useUser from '../lib/useUser';
 import WeddingStart from './WeddingStart';
 import Nav from './Nav';
 const HeaderStyles = styled.header`
  display: grid;
  gap: 1.8rem;
  margin: 2rem 1.5rem 1rem 1.5rem;
  nav {
    margin-top: 1.5rem;
  }
  @media (max-width: 650px) {
    h2 {
      font-size: var(--h3);
    }
  }
 `;
 const Header = () => {
  const { user, mutateUser } = useUser();
  return (
    <HeaderStyles>
      <div>
        <Link href="/">
          <a>
            <h1 className="center">Name & Name</h1>
          </a>
        </Link>
        {user && user.isLoggedIn === true ? (
          <>
            <h2 className="center">
              June 3rd, 2030 &#8226; New York, New York
            </h2>
            <h3 className="center">
              Countdown: <WeddingStart /> days!
            </h3>
          </>
        ) : (
          ''
        )}
      </div>
      {user && user.isLoggedIn === true ? <Nav /> : ''}
    </HeaderStyles>
  );
 };
 export default Header;
--- a/components/HomeContent.js
+++ b/components/HomeContent.js
@ -0,0 +1,23 @@
 import styled from 'styled-components';
 import CustomNextImage from './CustomNextImage';
 import Timeline from './Timeline';
 const HomeStyles = styled.div`
  display: grid;
  justify-items: center;
 `;
 export default function HomeContent() {
  return (
    <HomeStyles>
      <CustomNextImage
        src="https://via.placeholder.com/800X1307.png"
        height={880}
        width={1307}
        alt="Picture of Name and Name"
        blur
      />
      <Timeline />
    </HomeStyles>
  );
 }
--- a/components/Layout.js
+++ b/components/Layout.js
@ -0,0 +1,23 @@
 import React from 'react';
 import Head from 'next/head';
 import PropTypes from 'prop-types';
 const Layout = ({ children }) => (
  <>
    <Head>
      <title>NN By the Sea</title>
    </Head>
    <noscript>
      <h1>🐧🐧🐧 Please enable JavaScript to view our site. 🐧🐧🐧</h1>
    </noscript>
    <main>
      <div className="container">{children}</div>
    </main>
  </>
 );
 export default Layout;
 Layout.propTypes = {
  children: PropTypes.node,
 };
--- a/components/Login.js
+++ b/components/Login.js
@ -0,0 +1,176 @@
 import { useState } from 'react';
 import { useRouter } from 'next/router';
 import styled, { keyframes } from 'styled-components';
 import useUser from '../lib/useUser';
 import fetchJson from '../lib/fetchJson';
 import useForm from '../lib/useForm';
 const loadingFrame = keyframes`
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 100%;
  }
 `;
 const FormStyles = styled.form`
  display: grid;
  box-shadow: var(--level-2);
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--primary);
  padding: 20px;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 600;
  label {
    margin-top: 1.5rem;
    display: block;
    margin-bottom: 1rem;
  }
  input,
  textarea,
  select {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--primary);
    &:focus {
      outline: 0;
      border-color: var(--lightViolet);
    }
  }
  button,
  input[type='submit'] {
    width: 100%;
    margin-top: 0.5rem;
    font-size: 2rem;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
  }
  fieldset {
    border: 0;
    border-radius: 4px;
    padding: 0;
    &[disabled] {
      opacity: 0.5;
    }
    &::before {
      height: 10px;
      content: '';
      display: block;
      border-radius: 4px;
      background-image: linear-gradient(
        to right,
        var(--primary) 0%,
        var(--lightViolet) 50%,
        var(--primary) 100%
      );
    }
    &[aria-busy='true']::before {
      background-size: 50% auto;
      animation: ${loadingFrame} 0.5s linear infinite;
    }
  }
  .penguin {
    display: none;
  }
 `;
 const Login = () => {
  const router = useRouter();
  const { inputs, handleChange, clearForm, resetForm } = useForm({
    username: 'ibwedding',
    password: '',
    penguin: 'penguin',
  });
  const { mutateUser } = useUser({
    redirectTo: '/',
    redirectIfFound: true,
  });
  const [errorMsg, setErrorMsg] = useState('');
  const [loading, setLoading] = useState(false);
  async function handleSubmit({ username, password, penguin }) {
    const body = {
      username,
      password,
      penguin,
    };
    try {
      const res = await mutateUser(
        fetchJson('/api/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(body),
        })
      );
    } catch (error) {
      console.error('An unexpected error happened:', error);
      setErrorMsg('Unable to login');
    }
    setLoading(false);
  }
  return (
    <div>
      {/* <Form isLogin errorMessage={errorMsg} onSubmit={handleSubmit} /> */}
      <FormStyles
        onSubmit={async (e) => {
          e.preventDefault();
          setLoading(true);
          await handleSubmit(inputs);
          if (!errorMsg && errorMsg?.length !== 0) {
            router.push({
              pathname: `/rsvp`,
            });
          }
        }}
      >
        {errorMsg && <p className="error">Error: {errorMsg}</p>}
        <fieldset aria-busy={loading} disabled={loading}>
          <label htmlFor="username">
            <span>Username</span>
            <input
              required
              type="text"
              id="username"
              name="username"
              value={inputs.username}
              onChange={handleChange}
            />
          </label>
          <label htmlFor="password">
            <span>Please enter the password to view this page</span>
            <input
              required
              type="password"
              id="password"
              name="password"
              placeholder="Password"
              value={inputs.password}
              onChange={handleChange}
            />
          </label>
          <input
            type="penguin"
            name="penguin"
            value={inputs.penguin}
            onChange={handleChange}
            className="penguin"
          />
          <button type="submit">Login</button>
        </fieldset>
      </FormStyles>
    </div>
  );
 };
 export default Login;
--- a/components/Modal.js
+++ b/components/Modal.js
@ -0,0 +1,95 @@
 import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 const ModalOverlayStyles = styled.div`
  background-color: #999999;
  height: 100vh;
  left: 0;
  opacity: 0.5;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 500;
 `;
 const ModalWrapperStyles = styled.div`
  display: flex;
  justify-content: center;
  left: 0;
  outline: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 25%;
  width: 100%;
  z-index: 1000;
 `;
 const ModalStyles = styled.div`
  align-items: center;
  background: var(--background);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  margin: 1.8rem;
  max-width: 500px;
  position: relative;
  z-index: 100;
 `;
 const ModalHeaderStyles = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 1.8rem 0.95rem;
 `;
 const ModalTitleStyles = styled.h2`
  margin-bottom: 0.4rem;
 `;
 const ModalButtonStyles = styled.button`
  // border-top: 1px solid var(--primary);
  cursor: pointer;
  font-weight: bold;
  padding: 2rem;
  width: 100%;
 `;
 const ModalDescriptionStyles = styled.span`
  padding: 2rem;
  font-size: 2rem;
  text-align: center;
 `;
 const Modal = ({ isVisible, hideModal, title, message, children }) =>
  isVisible
    ? createPortal(
        <>
          <ModalOverlayStyles />
          <ModalWrapperStyles
            aria-modal
            aria-hidden={!isVisible}
            tabIndex={-1}
            role="dialog"
            aria-label={title}
          >
            <ModalStyles>
              <ModalHeaderStyles>
                <ModalTitleStyles>{title}</ModalTitleStyles>
                <ModalDescriptionStyles>
                  {message}
                  {children}
                </ModalDescriptionStyles>
              </ModalHeaderStyles>
              <ModalButtonStyles type="button" onClick={hideModal}>
                Close
              </ModalButtonStyles>
            </ModalStyles>
          </ModalWrapperStyles>
        </>,
        document.body
      )
    : null;
 export default Modal;
--- a/components/Nav.js
+++ b/components/Nav.js
@ -0,0 +1,30 @@
 import { NavLink } from './NavLink';
 import NavStyles from './styles/NavStyles';
 export default function Nav() {
  return (
    <NavStyles>
      <NavLink href="/">
        <a>Home</a>
      </NavLink>
      <NavLink href="/cats">
        <a>Our Cats</a>
      </NavLink>
      <NavLink href="/party">
        <a>Wedding Party</a>
      </NavLink>
      <NavLink href="/photos">
        <a>Photos</a>
      </NavLink>
      <NavLink href="/travelstay">
        <a>Travel & Stay</a>
      </NavLink>
      <NavLink href="/qanda">
        <a>Q + A</a>
      </NavLink>
      <NavLink href="/rsvp">
        <a>RSVP</a>
      </NavLink>
    </NavStyles>
  );
 }
--- a/components/NavLink.js
+++ b/components/NavLink.js
@ -0,0 +1,19 @@
 import React from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 export const NavLink = ({ children, href }) => {
  const child = React.Children.only(children);
  const router = useRouter();
  return (
    <Link href={href}>
      {React.cloneElement(child, {
        'aria-current':
          router.pathname === href || router.pathname.includes(`${href}/`)
            ? 'page'
            : null,
      })}
    </Link>
  );
 };
--- a/components/Page.js
+++ b/components/Page.js
@ -0,0 +1,339 @@
 import PropTypes from 'prop-types';
 import styled, { createGlobalStyle } from 'styled-components';
 import 'normalize.css';
 import Header from './Header';
 import Typography from './Typography';
 import Footer from './Footer';
 import LayoutStyles from './styles/LayoutStyles';
 const GlobalStyles = createGlobalStyle`
  :root {
    /* Define Colors as colors */
    --red: #990000;
    --coral: #e64c44;
    --blue: #336699;
    --seaFoamBlue: #466b72;
    --purpleBlue: #2E2B5E;
    --white: #fffffe;
    --greyWhite: #E6E3E0;
    --grey: #efefef;
    --yellow: #ffc600;
    --light: #ffffff;
    --black: #1B2D45;
    --dark: #000000;
    --seaGreen: #83C6A4;
    --lighterDark: #131415;
    --shellYellow: #ffc850;
    --lightGrey: #C5C5C5;
    --lightGray: var(--lightGrey);
    --lightShade: #f8f7f5;
    --darkGrey: #272727;
    --coralTan: #ffddb7;
    // --coralTan: #fccfb9;
    // --coralTan: #ffddb7;
    // --darkTan: #dfb28e;
    --blueGreen: #1d384e;
    --lightViolet: #C298F7;
    --darkerViolet: #7551a9;
    /* Define Colors intentions */
    --primary: var(--coralTan);
    --secondary: var(--coralTan);
    --danger: var(--grey);
    --background: var(--seaFoamBlue);
    --textColor: var(--black);
    --buttonTextColor: var(--black);
    --textAccent: var(--purpleBlue);
    --lineColor: var(--grey);
    --cardBg: var(--darkGrey);
    --headerBackground: var(--darkGrey);
    --footerBackground: var(--darkGrey);
    --linkHover: var(--lightViolet);
    --lightHairLine: var(--lightGrey);
    /* Styles */
    --line: solid 1px var(--lineColor);
    /* Type */
    --headingFont: 'Istok Web';
    --bodyFont: 'Kanit';
    --baseFontSize: 100%;
    --h1: 4.209rem;
    --h2: 3.157rem;
    --h3: 2.369rem;
    --h4: 1.777rem;
    --h5: 1.333em;
    --h6: 1rem;
    --bodyTextSize: 1.777rem;
    --smallText: 1.333rem;
    --lineHeight: 1.75;
    /* Elevation */
    --level-0: none;
    --level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --level-1-primary: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0  rgba(0, 0, 0, 0.06);
    --level-2-primary: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px #C298F7;
    --level-3-primary: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px #C298F7;
    --level-4-primary: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 10px 10px -5px #C298F7;
    /* Positioning */
    --containerPadding: 2.5%;
    --headerHeight: 8rem;
    --borderRadius: 10px;
    --maxWidth: 850px;
    /* Media Queryies - Not yet supported in CSS */
    /* 
      --xsmall: 340px;
      --small: 500px;
      --large: 960px;
      --wide: 1200px;
    */
  }
  html {
    width: 100%;
    background-image: url('https://res.cloudinary.com/royvalentinedev/image/upload/v1621792514/wedding/Background_u0cgyd.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--seaFoamBlue);
    font-size: 62.5%;
    box-sizing: border-box;
  }
  *, *::before, *::after {
    box-sizing: inherit;
  }
  body {
    line-height: var(--lineHeight);
    color: var(--primary);
    padding: 0;
    margin: 0;
    font-size: var(--bodyTextSize);
  }
  body::-webkit-scrollbar {
    width: 12px;
  }
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--background);
  }
  body::-webkit-scrollbar-track {
    background: var(--background);
  }
  body::-webkit-scrollbar-thumb {
    background-color: var(--primary) ;
    border-radius: 6px;
    border: 3px solid var(--background);
  }
  ::selection {
    background: var(--primary);
    color: var(--background);
  }
  a.button,
  button {
    background: var(--lightViolet);
    color: var(--black);
    border: 0;
    padding: 1rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    --cast: 2px;
    box-shadow: var(--level-1-primary);
    text-shadow: 0.5px 0.5px 0 rgba(0,0,0,0.2);
    transition: all 0.2s;
    text-decoration: none;
    &:hover {
      /* --cast: 4px; */
      box-shadow: var(--level-2-primary)
    }
    &:active {
      /* --cast: 2px; */
      box-shadow: var(--level-0)
    }
  }
  a.button.ghost,
  button.ghost {
    background: none;
    color: var(--lightViolet);
    border: 1px solid var(--lightViolet);
    &:disabled {
      color: hsla(266, 86%, 78%, 0.53);
      border: 1px solid hsla(266, 86%, 78%, 0.53);
    }
  }
  a {
    text-decoration: none;
    color: var(--primary);
  }
  a:hover {
    color: var(--linkHover);
    // text-decoration: underline;
  }
  input,textarea {
    font-size: 2rem;
    padding: 0.4rem;
    border-radius: 4px;
    border: 1px solid var(--primary);
    background: inherit;
    color: var(--primary);
  }
  textarea {
    resize: vertical;
  }
  hr {
    border: 0;
    height: 1px;
  }
  nav {
    a::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 0.3rem;
      bottom: -0.4rem;
      left: 0px;
      background: var(--secondary);
      transition: transform 0.3s ease 0s;
      transition-timing-function: cubic-bezier(1, -0.65, 0, 2.31);
      transform: scale(0);
    }
    @media (max-width: 650px) {
      a { 
        margin-bottom: 2rem;
      }
    }
    a {
      position: relative;
      font-size: 2rem;
      text-decoration: none;
      margin: 0.4rem 0;
      &[aria-current='page'],
      &.current-parent {
        &:after {
          transform: scale(1);
        }
      }
      &:hover {
        color: var(--secondary);
        &:after {
          transform: scale(1);
        }
      }
    }
  }
  img {
    max-width: 100%;
  }
  img,
  figure {
    border-radius: 4px;
    box-shadow: var(--level-2);
  }
  .emoji:hover {
    cursor: pointer;
  }
  .card {
    padding: 1.5rem;
    background: var(--cardBg);
    box-shadow: var(--level-3);
    border-radius: var(--borderRadius);
  }
  /* First item will never have margin top */
  .card > *:first-child {
    margin-top: 0;
  }
  /* Last item will never have margin bottom */
  .card > *:last-child {
    margin-bottom: 0;
  }
  .modal {
    position: fixed;
    display: flex;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    align-items: center;
    justify-content: center;
  }
  .toast {
    color: white;
    background: var(--black);
    border-radius: var(--borderRadius);
    padding: 20px;
    box-shadow: var(--level-2);
    position: fixed;
    bottom: 10px;
    left: 10px;
    right: 10px;
  }
  .toast p {
    text-align: center;
    margin: 0;
    max-width: 100%;
  }
 `;
 const ContentStyles = styled.main`
  max-width: var(--maxWidth);
  margin: 0 auto;
  padding: 2rem;
  p {
    margin: 0 auto;
  }
 `;
 export default function Page({ children }) {
  return (
    <div>
      <GlobalStyles />
      <Typography />
      <LayoutStyles>
        <Header />
        <ContentStyles>{children}</ContentStyles>
        <Footer />
      </LayoutStyles>
    </div>
  );
 }
 Page.propTypes = {
  children: PropTypes.any,
 };
--- a/components/PlusOneRSVP.js
+++ b/components/PlusOneRSVP.js
@ -0,0 +1,122 @@
 import { useState } from 'react';
 import styled from 'styled-components';
 const PlusOneStyles = styled.div`
  display: grid;
  gap: 1rem;
  .plusone__names {
    display: grid;
    gap: 1.2rem;
  }
  .checkbox {
    display: grid;
    grid-template-columns: min-content auto;
    align-items: center;
    align-content: center;
    gap: 0.5rem;
    font-size: 2rem;
    .checkbox__input {
      display: grid;
      grid-template-areas: 'checkbox';
      > * {
        grid-area: checkbox;
      }
    }
    .checkbox__input input:checked + .checkbox__control svg {
      transform: scale(1);
    }
    .checkbox__input input:focus + .checkbox__control {
      box-shadow: var(--level-2-primary);
    }
    .checkbox__control {
      display: inline-grid;
      width: 1em;
      height: 1em;
      border-radius: 0.1em;
      border: 0.1em solid var(--lightViolet);
      svg {
        transition: transform 0.1s ease-in 25ms;
        transform: scale(0);
        transform-origin: bottom left;
      }
    }
    input[type='checkbox'] {
      opacity: 0;
      width: 1em;
      height: 1em;
    }
  }
 `;
 export default function PlusOneRSVP({ guest, inputs, handleChange }) {
  function onChangePlusOne(e) {
    handleChange({
      target: {
        value: !inputs[`${guest.id}`].plusOne,
        name: `${guest.id}-plusOne`,
        type: 'text',
      },
    });
  }
  return (
    <PlusOneStyles key={`${guest.id}`}>
      <label htmlFor={`${guest.id}`} className="checkbox">
        <span className="checkbox__input">
          <input
            id={`${guest.id}`}
            name={`${guest.id}`}
            checked={inputs[`${guest.id}`].plusOne}
            onChange={onChangePlusOne}
            type="checkbox"
          />
          <span className="checkbox__control">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              aria-hidden="true"
              focusable="false"
            >
              <path
                fill="none"
                stroke="currentColor"
                strokeWidth="3"
                d="M1.73 12.91l6.37 6.37L22.79 4.59"
              />
            </svg>
          </span>
        </span>
        <span className="checkbox__label">Plus one? </span>
      </label>
      {inputs[`${guest.id}`].plusOne && (
        <div className="plusone__names">
          <input
            type="text"
            id={`${guest.id}-plusOneFirstName`}
            name={`${guest.id}-plusOneFirstName`}
            placeholder="First Name"
            value={inputs[`${guest.id}`]?.plusOneFirstName}
            onChange={handleChange}
          />
          <input
            type="text"
            id={`${guest.id}-plusOneLastName`}
            name={`${guest.id}-plusOneLastName`}
            placeholder="Last Name"
            value={inputs[`${guest.id}`]?.plusOneLastName}
            onChange={handleChange}
          />
        </div>
      )}
    </PlusOneStyles>
  );
 }
--- a/components/Timeline.js
+++ b/components/Timeline.js
@ -0,0 +1,11 @@
 import timelineData from '../lib/events.json';
 import Event from './Event';
 export default function Timeline() {
  return timelineData.map(
    (timelineEvent) =>
      timelineEvent?.openToAll && (
        <Event key={timelineEvent?.name} event={timelineEvent} />
      )
  );
 }
--- a/components/Typography.js
+++ b/components/Typography.js
@ -0,0 +1,77 @@
 import { createGlobalStyle } from 'styled-components';
 const Typography = createGlobalStyle`
  @font-face {
    font-family: 'Josefin_Sans';
    src: url('/fonts/Josefin_Sans/static/JosefinSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    display: swap;
  }
  @font-face {
    font-family: 'Josefin_Sans_Bold';
    src: url('/fonts/Josefin_Sans/static/JosefinSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    display: swap;
  }
  html {
    font-family: 'Josefin_Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    /* TODO: Change to theme value of light or dark */
    color: var(--lightGrey);
  }
  p, li {
    letter-spacing: 0.5px;
    font-size: 1.5rem;
  }
  h1,h2,h3,h4,h5,h6 {
    font-family: 'Josefin_Sans_Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    /* TODO: Change to theme value of light or dark */
    color: var(--primary);
    font-weight: normal;
    margin: 0;
  }
  h1 {
    margin-top: 0;
    font-size: var(--h1);
  }
  h2 {
    font-size: var(--h2);
  }
  h3 {
    font-size: var(--h3);
  }
  h4 {
    font-size: var(--h4);
  }
  h5 {
    font-size: var(--h5);
  }
  body {
    font-family: 'Josefin_Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
  a {
    color: var(--lightGrey);
  }
  .center {
    text-align: center;
  }
  .tilt {
    transform: rotate(-2deg);
  }
 `;
 export default Typography;
--- a/components/WeddingStart.js
+++ b/components/WeddingStart.js
@ -0,0 +1,22 @@
 import { useState } from 'react';
 import useInterval from '../utils/useInterval';
 function useWeddingStart({ update = 60000 }) {
  const weddingDate = 1906736400000;
  const [timeToWedding, setTime] = useState(weddingDate - Date.now());
  useInterval(() => {
    setTime(weddingDate - Date.now());
  }, update);
  return {
    timeToWedding,
    timeAsDays: Math.ceil(timeToWedding / 1000 / 60 / 60 / 24),
  };
 }
 export default function WeddingStart() {
  const { timeToWedding, timeAsDays } = useWeddingStart({
    update: 60000,
  });
  return <>{timeAsDays}</>;
 }
--- a/components/styles/Form.js
+++ b/components/styles/Form.js
@ -0,0 +1,75 @@
 import styled, { keyframes } from 'styled-components';
 const loading = keyframes`
  from {
    background-position: 0 0;
    /* rotate: 0; */
  }
  to {
    background-position: 100% 100%;
    /* rotate: 360deg; */
  }
 `;
 const Form = styled.form`
  display: grid;
  box-shadow: var(--level-2);
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--primary);
  padding: 20px;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 600;
  label {
    margin-top: 1.5rem;
    display: block;
    margin-bottom: 1rem;
  }
  input,
  textarea,
  select {
    width: 100%;
    border: 1px solid var(--primary);
    &:focus {
      outline: 0;
      border-color: var(--lightViolet);
    }
  }
  button,
  input[type='submit'] {
    width: 100%;
    margin-top: 0.5rem;
    font-size: 2rem;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
  }
  fieldset {
    border: 0;
    border-radius: 4px;
    padding: 0;
    &[disabled] {
      opacity: 0.5;
    }
    &::before {
      height: 10px;
      content: '';
      display: block;
      border-radius: 4px;
      background-image: linear-gradient(
        to right,
        var(--primary) 0%,
        var(--lightViolet) 50%,
        var(--primary) 100%
      );
    }
    &[aria-busy='true']::before {
      background-size: 50% auto;
      animation: ${loading} 0.5s linear infinite;
    }
  }
 `;
 export default Form;
--- a/components/styles/LayoutStyles.js
+++ b/components/styles/LayoutStyles.js
@ -0,0 +1,16 @@
 import styled from 'styled-components';
 const LayoutStyles = styled.div`
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  p,
  li {
    word-wrap: normal;
    font-size: var(--bodyTextSize);
    color: var(--primary);
  }
 `;
 export default LayoutStyles;
--- a/components/styles/NavStyles.js
+++ b/components/styles/NavStyles.js
@ -0,0 +1,38 @@
 import styled from 'styled-components';
 const NavStyles = styled.nav`
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 2rem;
  gap: 1.5rem;
  a,
  button {
    padding: 1rem 3rem;
    display: flex;
    align-items: center;
    position: relative;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.8rem;
    background: none;
    border: 0;
    cursor: pointer;
    @media (max-width: 700px) {
      font-size: 1.5rem;
      padding: 0 10px;
    }
  }
  @media (max-width: 1300px) {
    // border-top: 1px solid var(--lightGray);
    width: 100%;
    justify-content: center;
    font-size: 1.5rem;
  }
 `;
 export default NavStyles;
--- a/components/styles/nprogress.css
+++ b/components/styles/nprogress.css
@ -0,0 +1,80 @@
 /* Make clicks pass-through */
 #nprogress {
  pointer-events: none;
 }
 #nprogress .bar {
  background: var(--secondary);
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
 }
 /* Fancy blur effect */
 #nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px var(--secondary), 0 0 5px var(--secondary);
  opacity: 1;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
 }
 /* Remove these to get rid of the spinner */
 #nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
 }
 #nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: solid 2px transparent;
  border-top-color: var(--secondary);
  border-left-color: var(--secondary);
  border-radius: 50%;
  -webkit-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite;
 }
 .nprogress-custom-parent {
  overflow: hidden;
  position: relative;
 }
 .nprogress-custom-parent #nprogress .spinner,
 .nprogress-custom-parent #nprogress .bar {
  position: absolute;
 }
@-webkit-keyframes nprogress-spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
 }
@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
 }
--- a/lib/events.json
+++ b/lib/events.json
@ -0,0 +1,69 @@
 [
  {
    "name": "Wedding Practicing",
    "date": "Sunday, June 2nd, 2030",
    "start": "",
    "end": "",
    "venueName": "",
    "attire": "",
    "description": "Rehearsal & Rehearsal Dinner",
    "openToAll": false,
    "showSchedule": false,
    "scheduleEvents": []
  },
  {
    "name": "Wedding Saying Hello",
    "date": "Sunday, June 2nd, 2030",
    "start": "9:00 PM",
    "end": "",
    "venueName": "",
    "attire": "",
    "description": "Come hang out with us and say hi! Location TBD",
    "openToAll": true,
    "showSchedule": false,
    "scheduleEvents": []
  },
  {
    "name": "Wedding Saying I Do",
    "date": "Monday, June 3rd, 2030",
    "start": "5:00 PM",
    "end": "11:00 PM",
    "venueName": "<div><h4>Central Park New York, NY, USA</h4></div>",
    "attire": "",
    "description": "",
    "openToAll": true,
    "showSchedule": false,
    "scheduleEvents": [
      {
        "name": "Ceremony",
        "start": "5:00 PM",
        "end": "",
        "venueName": "<div><h4>Central Park New York, NY, USA</h4></div>"
      },
      {
        "name": "Cocktail Hour",
        "start": "5:30 PM",
        "end": "",
        "venueName": "<div><h4>Central Park New York, NY, USA</h4></div>"
      },
      {
        "name": "Dinner, Dancing, Dessert",
        "start": "7:00 PM",
        "end": "",
        "venueName": "<div><h4>Central Park New York, NY, USA</h4></div>"
      }
    ]
  },
  {
    "name": "Wedding Saying Goodbye",
    "date": "Tuesday, June 4th, 2030",
    "start": "",
    "end": "",
    "venueName": "",
    "attire": "",
    "description": "Farewell Brunch",
    "openToAll": false,
    "showSchedule": false,
    "scheduleEvents": []
  }
 ]
--- a/lib/fetchJson.js
+++ b/lib/fetchJson.js
@ -0,0 +1,24 @@
 export default async function fetcher(...args) {
  try {
    const response = await fetch(...args);
    // if the server replies, there's always some data in json
    // if there's a network error, it will throw at the previous line
    const data = await response.json();
    if (response.ok) {
      return data;
    }
    // console.log(JSON.stringify(data));
    const error = new Error(response?.statusText || data?.message);
    error.response = response;
    error.data = data;
    throw error;
  } catch (error) {
    if (!error.data) {
      error.data = { message: error.message };
    }
    throw error;
  }
 }
--- a/lib/session.js
+++ b/lib/session.js
@ -0,0 +1,14 @@
 // this file is a wrapper with defaults to be used in both API routes and `getServerSideProps` functions
 import { withIronSession } from 'next-iron-session';
 export default function withSession(handler) {
  return withIronSession(handler, {
    password: process.env.SECRET_COOKIE_PASSWORD,
    cookieName: 'weddingwebsitesession',
    cookieOptions: {
      // the next line allows to use the session in non-https environments like
      // Next.js dev mode (http://localhost:3000)
      secure: process.env.NODE_ENV === 'production',
    },
  });
 }
--- a/lib/svgs.js
+++ b/lib/svgs.js
@ -0,0 +1,35 @@
 export const CalendarIcon = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M11 6.5C11 6.36739 11.0527 6.24021 11.1464 6.14645C11.2402 6.05268 11.3674 6 11.5 6H12.5C12.6326 6 12.7598 6.05268 12.8536 6.14645C12.9473 6.24021 13 6.36739 13 6.5V7.5C13 7.63261 12.9473 7.75979 12.8536 7.85355C12.7598 7.94732 12.6326 8 12.5 8H11.5C11.3674 8 11.2402 7.94732 11.1464 7.85355C11.0527 7.75979 11 7.63261 11 7.5V6.5Z"
      fill="#FCCFB9"
    />
    <path
      d="M3.5 0C3.63261 0 3.75979 0.0526784 3.85355 0.146447C3.94732 0.240215 4 0.367392 4 0.5V1H12V0.5C12 0.367392 12.0527 0.240215 12.1464 0.146447C12.2402 0.0526784 12.3674 0 12.5 0C12.6326 0 12.7598 0.0526784 12.8536 0.146447C12.9473 0.240215 13 0.367392 13 0.5V1H14C14.5304 1 15.0391 1.21071 15.4142 1.58579C15.7893 1.96086 16 2.46957 16 3V14C16 14.5304 15.7893 15.0391 15.4142 15.4142C15.0391 15.7893 14.5304 16 14 16H2C1.46957 16 0.960859 15.7893 0.585786 15.4142C0.210714 15.0391 0 14.5304 0 14V3C0 2.46957 0.210714 1.96086 0.585786 1.58579C0.960859 1.21071 1.46957 1 2 1H3V0.5C3 0.367392 3.05268 0.240215 3.14645 0.146447C3.24021 0.0526784 3.36739 0 3.5 0V0ZM1 4V14C1 14.2652 1.10536 14.5196 1.29289 14.7071C1.48043 14.8946 1.73478 15 2 15H14C14.2652 15 14.5196 14.8946 14.7071 14.7071C14.8946 14.5196 15 14.2652 15 14V4H1Z"
      fill="#FCCFB9"
    />
  </svg>
 );
 export const MapIcon = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M15.817 0.112823C15.8743 0.159759 15.9204 0.218822 15.952 0.285748C15.9837 0.352674 16 0.425792 16 0.499823V14.4998C15.9999 14.6154 15.9598 14.7273 15.8866 14.8167C15.8133 14.906 15.7113 14.9672 15.598 14.9898L10.598 15.9898C10.5333 16.0027 10.4667 16.0027 10.402 15.9898L5.5 15.0098L0.598 15.9898C0.525489 16.0043 0.450665 16.0025 0.378921 15.9846C0.307176 15.9667 0.240296 15.9331 0.183099 15.8863C0.125903 15.8394 0.0798134 15.7804 0.0481518 15.7136C0.0164902 15.6468 4.46527e-05 15.5738 0 15.4998L0 1.49982C6.9782e-05 1.38428 0.0401561 1.27232 0.113443 1.18299C0.186731 1.09366 0.288695 1.03247 0.402 1.00982L5.402 0.00982311C5.46669 -0.00310763 5.53331 -0.00310763 5.598 0.00982311L10.5 0.989823L15.402 0.00982311C15.4745 -0.00476108 15.5493 -0.00308756 15.6211 0.0147231C15.6928 0.0325338 15.7597 0.0660382 15.817 0.112823V0.112823ZM10 1.90982L6 1.10982V14.0898L10 14.8898V1.90982ZM11 14.8898L15 14.0898V1.10982L11 1.90982V14.8898ZM5 14.0898V1.10982L1 1.90982V14.8898L5 14.0898Z"
      fill="#FCCFB9"
    />
  </svg>
 );
--- a/lib/useForm.js
+++ b/lib/useForm.js
@ -0,0 +1,71 @@
 import { useEffect, useState } from 'react';
 export default function useForm(initial = {}) {
  // Create a state object for our inputs
  const [inputs, setInputs] = useState(initial);
  const initialValues = Object.values(initial).join('');
  useEffect(() => {
    // This function runs when the things we are watching change
    setInputs(initial);
  }, [initialValues]);
  function handleChange(e) {
    let { value, name, type } = e.target;
    // console.log(value, name, type);
    if (name.includes('-')) {
      const values = name.split('-');
      // console.log(`Values: ${JSON.stringify(values)}`);
      const [id, property] = values;
      const data = inputs[id];
      // console.log(`Data: ${JSON.stringify(data)}`);
      // console.log(`Value: ${JSON.stringify(value)}`);
      // console.log(`Property: ${JSON.stringify(property)}`);
      data[property] = value;
      if (property === 'rsvpStatus' && value !== 'accepted') {
        // console.log('Setting plus one to false');
        data.plusOne = false;
      }
      setInputs({
        ...inputs,
        [id]: data,
      });
    } else {
      if (type === 'number') {
        value = parseInt(value);
      }
      if (type === 'file') {
        value[0] = e.target.files;
      }
      setInputs({
        // Copy the existing state
        ...inputs,
        [name]: value,
      });
    }
    // console.log(`Inputs after: ${JSON.stringify(inputs)}`);
  }
  function resetForm() {
    setInputs(initial);
  }
  function clearForm() {
    const blankState = Object.fromEntries(
      Object.entries(inputs).map(([key, value]) => [key, ''])
    );
    setInputs(blankState);
  }
  // Return the things we want to surface from this custom hook
  return {
    inputs,
    handleChange,
    resetForm,
    clearForm,
  };
 }
--- a/lib/useModal.js
+++ b/lib/useModal.js
@ -0,0 +1,16 @@
 import { useState } from 'react';
 const useModal = () => {
  const [isVisible, setIsVisible] = useState(false);
  function toggleModal() {
    setIsVisible(!isVisible);
  }
  return {
    isVisible,
    toggleModal,
  };
 };
 export default useModal;
--- a/lib/useUser.js
+++ b/lib/useUser.js
@ -0,0 +1,27 @@
 import { useEffect } from 'react';
 import Router from 'next/router';
 import useSWR from 'swr';
 export default function useUser({
  redirectTo = false,
  redirectIfFound = false,
 } = {}) {
  const { data: user, mutate: mutateUser } = useSWR('/api/user');
  useEffect(() => {
    // if no redirect needed, just return (example: already on /dashboard)
    // if user data not yet there (fetch in progress, logged in or not) then don't do anything yet
    if (!redirectTo || !user) return;
    if (
      // If redirectTo is set, redirect if the user was not found.
      (redirectTo && !redirectIfFound && !user?.isLoggedIn) ||
      // If redirectIfFound is also set, redirect if the user was found
      (redirectIfFound && user?.isLoggedIn)
    ) {
      Router.push(redirectTo);
    }
  }, [user, redirectIfFound, redirectTo]);
  return { user, mutateUser };
 }
--- a/lib/utils.js
+++ b/lib/utils.js
@ -0,0 +1,7 @@
 export async function copyToClipboard(textToCopy) {
  try {
    await navigator.clipboard.writeText(textToCopy);
  } catch (e) {
    console.error(e);
  }
 }
--- a/models/Group.js
+++ b/models/Group.js
@ -0,0 +1,20 @@
 import mongoose from 'mongoose';
 const { Schema } = mongoose;
 const groupSchema = new Schema({
  name: String,
  note: String,
  rsvpSubmitted: {
    type: Boolean,
    deafult: false,
  },
  guests: [
    {
      type: Schema.Types.ObjectId,
      ref: 'Guest',
    },
  ],
 });
 export default mongoose.models.Group || mongoose.model('Group', groupSchema);
--- a/models/Guest.js
+++ b/models/Guest.js
@ -0,0 +1,26 @@
 import mongoose from 'mongoose';
 const { Schema } = mongoose;
 const guestSchema = new Schema({
  firstName: { type: String, required: true },
  lastName: { type: String, required: true },
  role: String,
  rsvpStatus: {
    type: String,
    enum: ['invited', 'accepted', 'declined'],
    default: 'invited',
  },
  dietaryNotes: String,
  songRequests: String,
  hasPlusOne: { type: Boolean, default: false },
  plusOne: { type: Boolean, default: false },
  plusOneFirstName: String,
  plusOneLastName: String,
  group: {
    type: Schema.Types.ObjectId,
    ref: 'Group.guests',
  },
 });
 export default mongoose.models.Guest || mongoose.model('Guest', guestSchema);
--- a/models/User.js
+++ b/models/User.js
@ -0,0 +1,15 @@
 import mongoose from 'mongoose';
 const { Schema } = mongoose;
 const UserSchema = new Schema({
  username: String,
  password: String,
  role: {
    type: String,
    enum: ['admin', 'guest'],
    default: 'guest',
  },
 });
 export default mongoose.models.User || mongoose.model('User', UserSchema);
--- a/next.config.js
+++ b/next.config.js
@ -0,0 +1,5 @@
 module.exports = {
  images: {
    domains: ['res.cloudinary.com', 'via.placeholder.com'],
  },
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,111 @@
 {
  "name": "nextjs",
  "version": "0.1.0",
  "description": "Wedding Website",
  "private": true,
  "scripts": {
    "dev": "NODE_OPTIONS='--inspect' next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-plugin-styled-components": "^1.12.0",
    "bcryptjs": "^2.4.3",
    "cloudinary-build-url": "^0.2.1",
    "dotenv": "^10.0.0",
    "jsonwebtoken": "^8.5.1",
    "mongodb": "^3.6.8",
    "mongoose": "^5.12.11",
    "next": "^10.2.3",
    "next-iron-session": "^4.1.13",
    "next-with-apollo": "^5.1.1",
    "normalize.css": "^8.0.1",
    "nprogress": "^0.2.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "styled-components": "^5.3.0",
    "swr": "^0.5.6",
    "waait": "^1.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.13.13",
    "@babel/preset-env": "^7.14.2",
    "@typescript-eslint/eslint-plugin": "^4.25.0",
    "@typescript-eslint/parser": "^4.25.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.27.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^7.1.0",
    "eslint-config-wesbos": "^2.0.0-beta.5",
    "eslint-plugin-html": "^6.1.2",
    "eslint-plugin-import": "^2.23.3",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.3.0",
    "typescript": "^4.2.4"
  },
  "eslintConfig": {
    "extends": [
      "wesbos"
    ]
  },
  "//": "This is our babel config, I prefer this over a .babelrc file",
  "babel": {
    "env": {
      "development": {
        "presets": [
          "next/babel"
        ],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": true
            }
          ]
        ]
      },
      "production": {
        "presets": [
          "next/babel"
        ],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": true
            }
          ]
        ]
      },
      "test": {
        "presets": [
          [
            "next/babel",
            {
              "preset-env": {
                "modules": "commonjs"
              }
            }
          ]
        ],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": true
            }
          ]
        ]
      }
    }
  }
 }
--- a/pages/404.js
+++ b/pages/404.js
@ -0,0 +1,14 @@
 import Head from 'next/head';
 export default function FourOhFourPage() {
  return (
    <>
      <Head>
        <title>404 - Page not found</title>
      </Head>
      <h1>Sorry page not found!</h1>
      <p>404.</p>
      <p>You just hit a route that doesn&#39;t exist.</p>
    </>
  );
 }
--- a/pages/_app.js
+++ b/pages/_app.js
@ -0,0 +1,51 @@
 import Head from 'next/head';
 import NProgress from 'nprogress';
 import { Router } from 'next/router';
 import { SWRConfig } from 'swr';
 import Page from '../components/Page';
 import '../components/styles/nprogress.css';
 import fetch from '../lib/fetchJson';
 Router.events.on('routeChangeStart', () => NProgress.start());
 Router.events.on('routeChangeComplete', () => NProgress.done());
 Router.events.on('routeChangeError', () => NProgress.done());
 function MyApp({ Component, pageProps }) {
  return (
    <SWRConfig
      value={{
        fetcher: fetch,
        onError: (err) => {
          console.error(err);
        },
      }}
    >
      <Page>
        <Head>
          <link rel="icon" type="image/svg" href="/penguin.svg" />
          {/* meta tags */}
          <meta charSet="utf-8" />
          <meta name="description" content="Wedding Website" />
          <meta name="theme-color" content="#FCCFB9" />
          <meta name="robots" content="noindex" />
          <meta name="googlebot" content="noindex" />
          <link
            rel="preload"
            href="/fonts/Josefin_Sans/static/JosefinSans-Regular.ttf"
            as="font"
            crossOrigin=""
          />
          <link
            rel="preload"
            href="/fonts/Josefin_Sans/static/JosefinSans-Bold.ttf"
            as="font"
            crossOrigin=""
          />
        </Head>
        <Component {...pageProps} />
      </Page>
    </SWRConfig>
  );
 }
 export default MyApp;
--- a/pages/_document.js
+++ b/pages/_document.js
@ -0,0 +1,25 @@
 import Document, { Html, Head, NextScript, Main } from 'next/document';
 import { ServerStyleSheet } from 'styled-components';
 export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet();
    const page = renderPage((App) => (props) =>
      sheet.collectStyles(<App {...props} />)
    );
    const styleTags = sheet.getStyleElement();
    return { ...page, styleTags };
  }
  render() {
    return (
      <Html lang="en-US">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
 }
--- a/pages/api/group.js
+++ b/pages/api/group.js
@ -0,0 +1,93 @@
 import withSession from '../../lib/session';
 import Group from '../../models/Group';
 import Guest from '../../models/Guest';
 import connectDb from '../../utils/db';
 export default withSession(async (req, res) => {
  const {
    query: { id },
    method,
    body,
    session,
  } = req;
  const user = session.get('user');
  if (!user?.isLoggedIn) {
    res.status(401).end();
    return;
  }
  await connectDb();
  // const { id: groupId } = await req.body;
  // console.log(`groupId: ${groupId}`);
  const response = {};
  switch (method) {
    case 'GET':
      try {
        const group = await Group.findById(id);
        // console.log('group', group);
        response.id = id;
        const guestList = [];
        for (const guestId of group?.guests) {
          // console.log(JSON.stringify(guestId));
          const guestData = await Guest.findById(guestId);
          const guest = {
            id: guestData.id,
            firstName: guestData.firstName,
            lastName: guestData.lastName,
            role: guestData.role,
            rsvpStatus: guestData.rsvpStatus || '',
            dietaryNotes: guestData.dietaryNotes || '',
            songRequests: guestData.songRequests || '',
          };
          guestList.push(guest);
        }
        response.guests = guestList;
        response.note = group?.note || '';
        // console.log('response', response);
        res.status(200).json(JSON.stringify(response));
      } catch (error) {
        const { response: fetchResponse } = error;
        res.status(fetchResponse?.status || 500).json(error.data);
      }
      break;
    case 'POST':
      try {
        const { groupId, guests, note } = body;
        for (const guest of guests) {
          // console.log(`Updating ${guest.id} with status ${guest.rsvpStatus}`);
          const guestData = await Guest.findById(guest.id);
          const accepted = guest?.rsvpStatus === 'accepted';
          guestData.rsvpStatus =
            guest?.rsvpStatus !== 'invited' ? guest?.rsvpStatus : 'invited';
          guestData.dietaryNotes = guest?.dietaryNotes;
          guestData.songRequests = guest?.songRequests;
          guestData.plusOne =
            (guestData?.hasPlusOne && guest?.plusOne && accepted) || false;
          guestData.plusOneFirstName =
            (guestData?.hasPlusOne && guest?.plusOneFirstName) || '';
          guestData.plusOneLastName =
            (guestData?.hasPlusOne && guest?.plusOneLastName) || '';
          guestData.save();
        }
        await Group.findByIdAndUpdate(groupId, {
          note,
        });
        res.status(200).json(JSON.stringify({ message: 'SUCCESS' }));
      } catch (error) {
        const { response: fetchResponse } = error;
        console.error('error', error);
        res
          .status(fetchResponse?.status || 500)
          .json({ message: 'Unable to RSVP Your Group' });
      }
      break;
    default:
      res.status(400).json({ message: 'Unable to RSVP Your Group' });
      break;
  }
 });
--- a/pages/api/guest.js
+++ b/pages/api/guest.js
@ -0,0 +1,38 @@
 import withSession from '../../lib/session';
 import Guest from '../../models/Guest';
 import connectDb from '../../utils/db';
 export default withSession(async (req, res) => {
  const {
    query: { id },
    method,
    session,
  } = req;
  const user = session.get('user');
  if (!user?.isLoggedIn) {
    res.status(401).end();
    return;
  }
  await connectDb();
  switch (method) {
    case 'GET':
      try {
        const guest = await Guest.findById(id);
        if (!guest) {
          return res.status(400).json({ success: false });
        }
        res.status(200).json({ success: true, data: guest });
      } catch (error) {
        const { response: fetchResponse } = error;
        res.status(fetchResponse?.status || 500).json(error.data);
      }
      break;
    default:
      res.status(400).json({ success: false });
      break;
  }
 });
--- a/pages/api/login.js
+++ b/pages/api/login.js
@ -0,0 +1,36 @@
 import bcrypt from 'bcryptjs';
 import withSession from '../../lib/session';
 import connectDb from '../../utils/db';
 import User from '../../models/User';
 const { compare } = bcrypt;
 export default withSession(async (req, res) => {
  const { username, password, penguin } = await req.body;
  await connectDb();
  try {
    if (username && password && penguin && penguin === 'penguin') {
      let isAuthorized = false;
      const userData = await User.findOne({ username });
      const savedPassword = userData?.password || '';
      isAuthorized = await compare(password, savedPassword);
      if (isAuthorized) {
        const user = { isLoggedIn: isAuthorized, id: userData._id };
        req.session.set('user', user);
        await req.session.save();
        res.json(user);
      } else {
        res.status(400).json({ message: 'Unable to login' });
      }
    } else {
      res.status(400).json({ message: 'Unable to login' });
    }
  } catch (error) {
    console.error(error);
    const { response: fetchResponse } = error;
    res
      .status(fetchResponse?.status || 500)
      .json({ message: 'Unable to login' });
  }
 });
--- a/pages/api/logout.js
+++ b/pages/api/logout.js
@ -0,0 +1,6 @@
 import withSession from '../../lib/session';
 export default withSession(async (req, res) => {
  req.session.destroy();
  res.json({ isLoggedIn: false });
 });
--- a/pages/api/permissions.js
+++ b/pages/api/permissions.js
@ -0,0 +1,38 @@
 import withSession from '../../lib/session';
 import User from '../../models/User';
 const rootDomain = process.env.ROOT_DOMAIN;
 const protectedRoutes = [`${rootDomain}/register`, `${rootDomain}/createguest`];
 export default async function permissions(req, res) {
  const { method, session } = req;
  const user = session.get('user');
  if (!user?.isLoggedIn) {
    res.status(401).end();
    return;
  }
  // const user = req.session.get('user');
  // console.log(JSON.stringify(req.body));
  res.status(200).json({});
  // if (user) {
  //   const dbUser = await User.findOne({ _id: user.id });
  //   const { role } = dbUser;
  //   const referrer = req?.headers?.referrer;
  //   let permitted = false;
  //   if (protectedRoutes.includes(referrer)) {
  //     if (role === 'admin') {
  //       permitted = true;
  //     }
  //   }
  //   res.json({
  //     permitted,
  //   });
  // } else {
  //   res.json({
  //     permissted: false,
  //   });
  // }
 }
--- a/pages/api/register.js
+++ b/pages/api/register.js
@ -0,0 +1,27 @@
 import { genSalt, hash } from 'bcryptjs';
 import withSession from '../../lib/session';
 import connectDb from '../../utils/db.js';
 import User from '../../models/User';
 export default withSession(async (req, res) => {
  const { username, password } = await req.body;
  await connectDb();
  const salt = await genSalt(10);
  const hashedPassword = await hash(password, salt);
  try {
    const result = await User.create({
      username,
      password: hashedPassword,
      role: 'guest',
    });
    const user = { isLoggedIn: true, id: result?._id };
    req.session.set('user', user);
    await req.session.save();
    res.status(201).json({ success: true });
  } catch (error) {
    const { response: fetchResponse } = error;
    res.status(fetchResponse?.status || 500).json(error.data);
  }
 });
--- a/pages/api/rsvp.js
+++ b/pages/api/rsvp.js
@ -0,0 +1,34 @@
 import withSession from '../../lib/session';
 import connectDb from '../../utils/db.js';
 import Guest from '../../models/Guest';
 export default withSession(async (req, res) => {
  const {
    query: { id },
    method,
    session,
  } = req;
  const user = session.get('user');
  if (!user?.isLoggedIn) {
    res.status(401).end();
    return;
  }
  // const { method } = req;
  await connectDb();
  const { firstName, lastName } = await req.body;
  try {
    const result = await Guest.findOne({
      firstName: { $regex: new RegExp(firstName.trim(), 'i') },
      lastName: { $regex: new RegExp(lastName.trim(), 'i') },
    });
    // console.log(JSON.stringify(result));
    res.status(200).json({ status: 'SUCCESS', groupId: result.group });
  } catch (error) {
    const { response: fetchResponse } = error;
    res.status(fetchResponse?.status || 500).json({ status: 'FAILURE' });
  }
 });
--- a/pages/api/user.js
+++ b/pages/api/user.js
@ -0,0 +1,18 @@
 import withSession from '../../lib/session';
 export default withSession(async (req, res) => {
  const user = req.session.get('user');
  if (user) {
    // in a real world application you might read the user id from the session and then do a database request
    // to get more information on the user if needed
    res.json({
      isLoggedIn: true,
      ...user,
    });
  } else {
    res.json({
      isLoggedIn: false,
    });
  }
 });
--- a/pages/cats.js
+++ b/pages/cats.js
@ -0,0 +1,80 @@
 import Head from 'next/head';
 import { RiExternalLinkLine } from 'react-icons/ri';
 import CustomNextImage from '../components/CustomNextImage';
 import Layout from '../components/Layout';
 import useUser from '../lib/useUser';
 import { PhotoPageStyles, PhotosStyles } from './photos';
 export default function CatsPage() {
  const { user } = useUser({ redirectTo: '/login' });
  if (!user || user.isLoggedIn === false) {
    return <Layout>Loading...</Layout>;
  }
  const cats = [
    {
      url: 'https://via.placeholder.com/500x500.png',
      alt: 'Cat 1',
    },
    {
      url: 'https://via.placeholder.com/500x500.png',
      alt: 'Cat 2',
    },
    {
      url: 'https://via.placeholder.com/500x500.png',
      alt: 'Cat 3',
    },
    {
      url: 'https://via.placeholder.com/500x500.png',
      alt: 'Cat 4',
    },
    {
      url: 'https://via.placeholder.com/500x500.png',
      alt: 'Cat 5',
    },
    {
      url: 'https://via.placeholder.com/500x500.png',
      alt: 'Cat 6',
    },
  ];
  return (
    <div>
      <Head>
        <title key="title">N & N | Our Cats</title>
      </Head>
      <PhotoPageStyles className="center">
        <h1>Photos</h1>
        <a
          target="_blank"
          rel="noopener noreferrer nofollow"
          aria-label="Link to Photo Gallery"
          href="https://example.com"
        >
          Link to full photo gallery <RiExternalLinkLine />
        </a>
        <PhotosStyles>
          {cats.map((cat) => (
            <CustomNextImage
              key={cat.url}
              src={cat.url}
              alt={cat.alt}
              height={500}
              width={500}
              blur
            />
          ))}
        </PhotosStyles>
        <a
          target="_blank"
          rel="noopener noreferrer nofollow"
          aria-label="Link to Photo Gallery"
          href="https://example.com"
        >
          Link to full photo gallery <RiExternalLinkLine />
        </a>
      </PhotoPageStyles>
    </div>
  );
 }
--- a/pages/home.js
+++ b/pages/home.js
@ -0,0 +1,28 @@
 import Head from 'next/head';
 import styled from 'styled-components';
 import Layout from '../components/Layout';
 import useUser from '../lib/useUser';
 const HomeStyles = styled.div`
  display: grid;
  gap: 2rem;
 `;
 export default function HomePage() {
  const { user } = useUser({ redirectTo: '/login' });
  if (!user || user.isLoggedIn === false) {
    return <Layout>Loading...</Layout>;
  }
  return (
    <>
      <Head>
        <title>N & N - Wedding</title>
      </Head>
      <HomeStyles>
        <h1>Welcome!</h1>
      </HomeStyles>
    </>
  );
 }
--- a/pages/index.js
+++ b/pages/index.js
@ -0,0 +1,36 @@
 import styled from 'styled-components';
 import Head from 'next/head';
 import useUser from '../lib/useUser';
 import HomeContent from '../components/HomeContent';
 import connectDb from '../utils/db';
 import Login from '../components/Login';
 import Layout from '../components/Layout';
 const LandingStyles = styled.div`
  display: grid;
 `;
 export default function Home() {
  const { user, mutateUser } = useUser();
  if (!user) {
    return (
      <Layout>
        <h1>Loading...</h1>
      </Layout>
    );
  }
  return (
    <LandingStyles>
      <Head>
        <title key="title">N & N | Wedding</title>
      </Head>
      {user && user.isLoggedIn === true ? <HomeContent /> : <Login />}
    </LandingStyles>
  );
 }
 export async function getServerSideProps() {
  return { props: {} };
 }
--- a/pages/login.js
+++ b/pages/login.js
@ -0,0 +1,5 @@
 import Login from '../components/Login';
 export default function LoginPage() {
  return <Login />;
 }
--- a/pages/logout.js
+++ b/pages/logout.js
@ -0,0 +1,35 @@
 import { Router, useRouter } from 'next/router';
 import Layout from '../components/Layout';
 import fetchJson from '../lib/fetchJson';
 import useUser from '../lib/useUser';
 async function logout(router) {
  try {
    fetchJson('/api/logout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({}),
    }).then((e) => {
      router.push({
        pathname: `/`,
      });
    });
  } catch (e) {
    console.error();
  }
 }
 export default function LogoutPage() {
  const router = useRouter();
  const { user } = useUser({ redirectTo: '/login' });
  if (!user || user.isLoggedIn === false) {
    return <Layout>loading...</Layout>;
  }
  return (
    <button type="button" onClick={() => logout(router)}>
      LOGOUT
    </button>
  );
 }
--- a/pages/party.js
+++ b/pages/party.js
@ -0,0 +1,145 @@
 import Head from 'next/head';
 import styled from 'styled-components';
 import Layout from '../components/Layout';
 import useUser from '../lib/useUser';
 import CustomNextImage from '../components/CustomNextImage';
 const PartyPageStyles = styled.div`
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  img,
  figure {
    border-radius: 4px;
  }
 `;
 const PartyStyles = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  @media (max-width: 1000px) {
    grid-template-columns: 1fr 1fr;
  }
  @media (max-width: 650px) {
    grid-template-columns: 1fr;
  }
 `;
 const PartyCard = styled.div`
  display: grid;
  h3 {
    margin-top: 1rem;
  }
 `;
 const weddingParty = [
  {
    name: 'Best Man',
    title: 'Best Man',
    imageUrl: '',
  },
  {
    name: 'Man/Maid of Honor',
    title: 'Man/Maid of Honor',
    imageUrl: '',
  },
  {
    name: 'Groomsman',
    title: 'Groomsman',
    imageUrl: '',
  },
  {
    name: 'Bridesmaid',
    title: 'Bridesmaid',
    imageUrl: '',
  },
  {
    name: 'Groomsman',
    title: 'Groomsman',
    imageUrl: '',
  },
  {
    name: 'Bridesmaid',
    title: 'Bridesmaid',
    imageUrl: '',
  },
  {
    name: 'Groomsman',
    title: 'Groomsman',
    imageUrl: '',
  },
  {
    name: 'Bridesmaid',
    title: 'Bridesmaid',
    imageUrl: '',
  },
 ];
 export default function PartyPage() {
  const { user } = useUser({ redirectTo: '/login' });
  if (!user || user.isLoggedIn === false) {
    return <Layout>Loading...</Layout>;
  }
  return (
    <PartyPageStyles>
      <Head>
        <title key="title">N & N | Wedding Party</title>
      </Head>
      <div
        style={{
          display: 'grid',
        }}
      >
        <h1 className="center">Meet our Wedding Party</h1>
        <CustomNextImage
          src="https://via.placeholder.com/450X800.png"
          alt="Wedding Part"
          height={450}
          width={800}
        />
      </div>
      <h2 className="center">The Party</h2>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(300px, 400px)',
          justifyContent: 'center',
          margin: '1rem 0',
        }}
      >
        <PartyCard className="card">
          <h2 className="center">Officiant</h2>
          <CustomNextImage
            src="https://via.placeholder.com/1200x1600.png"
            alt="Wedding Officiant"
            objectFit="cover"
            width="1200"
            height="1600"
          />
          <h3 className="center">Wedding Officiant</h3>
        </PartyCard>
      </div>
      <PartyStyles>
        {weddingParty.map((party, index) => (
          <PartyCard className="card" key={index}>
            <h2 className="center">{party.name}</h2>
              <CustomNextImage
                src="https://via.placeholder.com/1200x1600.png"
                alt={`${party.name} - ${party.title}`}
                objectFit="cover"
                width="1200"
                height="1600"
              />
            <h3 className="center">{party.title}</h3>
          </PartyCard>
        ))}
      </PartyStyles>
    </PartyPageStyles>
  );
 }
--- a/pages/photos.js
+++ b/pages/photos.js
@ -0,0 +1,113 @@
 import Head from 'next/head';
 import { RiExternalLinkLine } from 'react-icons/ri';
 import styled from 'styled-components';
 import CustomNextCloudinaryImage from '../components/CustomNextCloudinaryImage';
 import Layout from '../components/Layout';
 import useUser from '../lib/useUser';
 export const PhotoPageStyles = styled.div`
  display: grid;
  gap: 1.5rem;
  a {
    text-decoration: underline;
  }
 `;
 export const PhotosStyles = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5rem;
  margin: 0.5rem auto;
  @media (max-width: 1000px) {
    grid-template-columns: 1fr 1fr;
  }
  @media (max-width: 650px) {
    grid-template-columns: repeat(1, minmax(150px, 2000px));
    grid-gap: 1.2rem;
    margin: 0.2rem 0;
    justify-content: center;
  }
  img,
  figure {
    border-radius: 4px;
    box-shadow: var(--level-1);
  }
 `;
 export default function PhotosPage() {
  const { user } = useUser({ redirectTo: '/login' });
  if (!user || user.isLoggedIn === false) {
    return <Layout>Loading...</Layout>;
  }
  const photos = [
    {
      url: 'https://via.placeholder.com/1000x1000.png',
      alt: 'Photo 1',
    },
    {
      url: 'https://via.placeholder.com/1000x1000.png',
      alt: 'Photo 2',
    },
    {
      url: 'https://via.placeholder.com/1000x1000.png',
      alt: 'Photo 3',
    },
    {
      url: 'https://via.placeholder.com/1000x1000.png',
      alt: 'Photo 4',
    },
    {
      url: 'https://via.placeholder.com/1000x1000.png',
      alt: 'Photo 5',
    },
    {
      url: 'https://via.placeholder.com/1000x1000.png',
      alt: 'Photo 6',
    },
  ];
  return (
    <div>
      <Head>
        <title key="title">N & N | Photos</title>
      </Head>
      <PhotoPageStyles className="center">
        <h1>Photos</h1>
        <a
          target="_blank"
          rel="noopener noreferrer nofollow"
          aria-label="Link to Photo Gallery"
          href="https://example.com"
        >
          Link to full photo gallery <RiExternalLinkLine />
        </a>
        <PhotosStyles>
          {photos.map((photo, index) => (
            <CustomNextCloudinaryImage
              key={index}
              src={photo.url}
              alt={photo.alt}
              height={1000}
              width={1000}
              blur
            />
          ))}
        </PhotosStyles>
        <a
          target="_blank"
          rel="noopener noreferrer nofollow"
          aria-label="Link to Photo Gallery"
          href="https://example.com"
        >
          Link to full photo gallery <RiExternalLinkLine />
        </a>
      </PhotoPageStyles>
    </div>
  );
 }
--- a/pages/profile-sg.js
+++ b/pages/profile-sg.js
@ -0,0 +1,37 @@
 import useUser from '../lib/useUser'
 import Layout from '../components/Layout'
 const SgProfile = () => {
  const { user } = useUser({ redirectTo: '/login' })
  if (!user || user.isLoggedIn === false) {
    return <Layout>loading...</Layout>
  }
  return (
    <Layout>
      <h1>Your GitHub profile</h1>
      <h2>
        This page uses{' '}
        <a href="https://nextjs.org/docs/basic-features/pages#static-generation-recommended">
          Static Generation (SG)
        </a>{' '}
        and the <a href="/api/user">/api/user</a> route (using{' '}
        <a href="https://github.com/zeit/swr">SWR</a>)
      </h2>
      <p style={{ fontStyle: 'italic' }}>
        Public data, from{' '}
        <a href={githubUrl(user.login)}>{githubUrl(user.login)}</a>, reduced to
        `login` and `avatar_url`.
      </p>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
 }
 function githubUrl(login) {
  return `https://api.github.com/users/${login}`
 }
 export default SgProfile
--- a/pages/profile-ssr.js
+++ b/pages/profile-ssr.js
@ -0,0 +1,61 @@
 import PropTypes from 'prop-types';
 import Layout from '../components/Layout';
 import withSession from '../lib/session';
 const SsrProfile = ({ user }) => (
  <Layout>
    <h1>Your GitHub profile</h1>
    <h2>
      This page uses{' '}
      <a href="https://nextjs.org/docs/basic-features/pages#server-side-rendering">
        Server-side Rendering (SSR)
      </a>{' '}
      and{' '}
      <a href="https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering">
        getServerSideProps
      </a>
    </h2>
    {user?.isLoggedIn && (
      <>
        <p style={{ fontStyle: 'italic' }}>
          Public data, from{' '}
          <a href={githubUrl(user.login)}>{githubUrl(user.login)}</a>, reduced
          to `login` and `avatar_url`.
        </p>
        <pre>{JSON.stringify(user, null, 2)}</pre>
      </>
    )}
  </Layout>
 );
 export const getServerSideProps = withSession(async ({ req, res }) => {
  const user = req.session.get('user');
  if (!user) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }
  return {
    props: { user: req.session.get('user') },
  };
 });
 export default SsrProfile;
 function githubUrl(login) {
  return `https://api.github.com/users/${login}`;
 }
 SsrProfile.propTypes = {
  user: PropTypes.shape({
    isLoggedIn: PropTypes.bool,
    login: PropTypes.string,
    avatarUrl: PropTypes.string,
  }),
 };
--- a/pages/qanda.js
+++ b/pages/qanda.js
@ -0,0 +1,57 @@
 import Head from 'next/head';
 import Link from 'next/link';
 import styled from 'styled-components';
 import Layout from '../components/Layout';
 import useUser from '../lib/useUser';
 const QAStyles = styled.div`
  ol > li {
    margin-top: 2rem;
  }
  a {
    text-decoration: underline;
  }
  li {
    font-weight: bold;
  }
  p {
    color: var(--white);
  }
 `;
 export default function QandAPage() {
  const { user } = useUser({ redirectTo: '/login' });
  if (!user || user.isLoggedIn === false) {
    return <Layout>Loading...</Layout>;
  }
  return (
    <div>
      <Head>
        <title key="title">N & N | QA</title>
      </Head>
      <h1 className="center">Q & A</h1>
      <QAStyles>
        <ol>
          <li>Question 1</li>
          <p>
            Answer 1
          </p>
          <li>How do I get to the venue?</li>
          <p>
            See more detailed info on our{' '}
            <Link href="/travelstay">Travel & Stay</Link> page.
          </p>
          <li>I still have questions, what is the best way to contact you?</li>
          <p>
            If you have any questions not answered by this Q&A feel free to
            contact Name and Name at{' '}
            <a href="mailto:name@example.com">name@example.com</a>.
          </p>
        </ol>
      </QAStyles>
    </div>
  );
 }
--- a/pages/register.js
+++ b/pages/register.js
@ -0,0 +1,100 @@
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import styled from 'styled-components';
 import useForm from '../lib/useForm';
 import useUser from '../lib/useUser';
 import fetchJson from '../lib/fetchJson';
 const FormStyles = styled.form`
  display: grid;
  label {
    display: grid;
    gap: 1rem;
  }
  button {
    margin-top: 0.5rem;
    width: 100%;
  }
 `;
 export default function RegisterPage() {
  const router = useRouter();
  const { inputs, handleChange, clearForm, resetForm } = useForm({
    username: '',
    password: '',
  });
  const { mutateUser } = useUser({
    redirectTo: '/',
    redirectIfFound: true,
  });
  const [errorMsg, setErrorMsg] = useState('');
  async function handleSubmit(username, password) {
    const body = {
      username,
      password,
    };
    try {
      const res = await fetchJson('/api/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      console.log(res);
    } catch (error) {
      console.error('An unexpected error happened:', error);
      setErrorMsg(error.data.message);
    }
  }
  return (
    <FormStyles
      onSubmit={async (e) => {
        e.preventDefault();
        await handleSubmit(inputs.username, inputs.password);
        if (!errorMsg && errorMsg?.length !== 0) {
          router.push({
            pathname: `/`,
          });
        } else {
          console.log(errorMsg);
        }
      }}
    >
      {errorMsg && <p className="error">Error: {errorMsg}</p>}
      <fieldset aria-busy={false} disabled={false}>
        <label htmlFor="username">
          <span>Username</span>
          <input
            required
            type="text"
            id="username"
            name="username"
            placeholder="Username"
            value={inputs.username}
            onChange={handleChange}
          />
        </label>
        <label htmlFor="password">
          <span>Password</span>
          <input
            required
            type="password"
            id="password"
            name="password"
            placeholder="Password"
            value={inputs.password}
            onChange={handleChange}
          />
        </label>
        <button type="submit">Login</button>
      </fieldset>
    </FormStyles>
  );
 }
--- a/pages/rsvp/[id].js
+++ b/pages/rsvp/[id].js
@ -0,0 +1,418 @@
 import Head from 'next/head';
 import { useState } from 'react';
 import styled, { keyframes } from 'styled-components';
 import GuestRSVP from '../../components/GuestRSVP';
 import Layout from '../../components/Layout';
 import useForm from '../../lib/useForm';
 import useUser from '../../lib/useUser';
 import fetchJson from '../../lib/fetchJson';
 import Group from '../../models/Group';
 import Guest from '../../models/Guest';
 import connectDb from '../../utils/db';
 import { CalendarIcon, MapIcon } from '../../lib/svgs';
 import useModal from '../../lib/useModal';
 import Modal from '../../components/Modal';
 const RSVPGroupStyles = styled.div`
  h2 {
    margin: 2rem 0;
  }
 `;
 const loadingFrame = keyframes`
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 100%;
  }
 `;
 const FormStyles = styled.form`
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
  &::before,
  &::after {
    height: 10px;
    content: '';
    display: block;
    border-radius: 4px;
    background-image: linear-gradient(
      to right,
      var(--primary) 0%,
      var(--lightViolet) 50%,
      var(--primary) 100%
    );
  }
  &[aria-busy='true']::before,
  &[aria-busy='true']::after {
    background-size: 50% auto;
    animation: ${loadingFrame} 0.5s linear infinite;
  }
  label {
    display: grid;
    gap: 1rem;
  }
  input,
  textarea,
  select {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--primary);
    &:focus {
      outline: 0;
      border-color: var(--lightViolet);
    }
  }
  button[type='submit'],
  input[type='submit'] {
    width: 100%;
    font-size: 2rem;
    font-weight: 600;
    padding: 1.2rem 1.2rem;
  }
  hr {
    display: block;
    max-width: 100%;
    height: 0;
    max-height: 0;
    border: solid;
    width: 100%;
    border-width: thin 0 0 0;
    transition: inherit;
    border-color: var(--lightShade);
    color: var(--lightShade);
    margin: 2.5rem 0;
  }
  button:disabled {
    background: var(--lightGray);
  }
  fieldset {
    border-radius: 4px;
    &[disabled] {
      opacity: 0.5;
    }
  }
 `;
 const AddressStyles = styled.div`
  button {
    background: none;
    color: var(--primary);
    padding: 0;
  }
 `;
 const QuestionStyles = styled.div`
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  @media (max-width: 600px) {
    grid-template-columns: auto;
  }
 `;
 const ErrorContactStyles = styled.p`
  font-weight: bold;
  a {
    text-decoration: underline;
  }
 `;
 export default function SingleGroupPage({ group }) {
  const { guests, note } = group;
  const { user } = useUser({ redirectTo: '/login' });
  const [errorMsg, setErrorMsg] = useState('');
  const [errorCount, setErrorCount] = useState(0);
  const [message, setMessage] = useState('');
  const [loading, setLoading] = useState(false);
  const [groupHasPlusOne, setGroupHasPlusOne] = useState(false);
  const { isVisible, toggleModal } = useModal();
  const address = 'Central Park, New York, New York, USA';
  function getInitialFormData() {
    const initial = {};
    for (const guest of guests) {
      const guestData = {
        rsvpStatus: guest?.rsvpStatus || '',
        dietaryNotes: guest?.dietaryNotes || '',
        songRequests: guest?.songRequests || '',
        hasPlusOne: guest?.hasPlusOne || false,
        plusOne: guest?.plusOne || false,
        plusOneFirstName: guest?.plusOneFirstName || '',
        plusOneLastName: guest?.plusOneLastName || '',
      };
      initial[guest.id] = guestData;
      if (guest.hasPlusOne) {
        setGroupHasPlusOne(true);
      }
    }
    initial.note = note || '';
    return initial;
  }
  const { inputs, handleChange, clearForm, resetForm } = useForm(
    getInitialFormData
  );
  if (!user || user.isLoggedIn === false) {
    return <Layout>Loading...</Layout>;
  }
  if (group?.guests?.length === 0) return <p>Loading...</p>;
  async function handleSubmit(groupId) {
    const keys = Object.keys(inputs);
    const guestData = [];
    // console.log(JSON.stringify(inputs));
    keys.forEach((key, index) => {
      if (key !== 'note') {
        guestData.push({
          id: key,
          ...inputs[key],
        });
      }
    });
    const body = {
      groupId,
      note: inputs.note,
      guests: guestData,
    };
    try {
      const res = await fetchJson('/api/group', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      if (res.message === 'SUCCESS') {
        setMessage(
          `Successfully submited your RSVP${
            body.guests.length > 1 ? 's' : ''
          }. Don't forget to save the date!!`
        );
        toggleModal();
      } else {
        setErrorCount(errorCount + 1);
        setErrorMsg('Unable to RSVP Your Group');
      }
    } catch (error) {
      // console.error('An unexpected error happened:', error);
      setErrorCount(errorCount + 1);
      setErrorMsg(error.data.message);
    }
  }
  return (
    <div>
      <Head>
        <title key="title">N & N | RSVP</title>
      </Head>
      <RSVPGroupStyles>
        <h2>Wedding SAYING I DO</h2>
        <div>
          <a href="/myevents.ics" aria-label="Add to calendar">
            <CalendarIcon />
          </a>{' '}
          Monday, June 3rd, 2030 at 5:00 PM
        </div>
        <AddressStyles>
          <p>
            <a
              target="_blank"
              href="https://share.here.com/p/s-YmI9LTczLjk4MTYxJTJDNDAuNzY0MjclMkMtNzMuOTQ4ODIlMkM0MC44MDA0OTtjPWFkbWluaXN0cmF0aXZlLXJlZ2lvbjtsYXQ9NDAuNzgyMzg7bG9uPS03My45NjUyMTtuPUNlbnRyYWwrUGFyazt6PTE0O2g9MWM3MDIz"
              rel="noopener noreferrer nofollow"
              aria-label="Go to map"
            >
              <MapIcon />
            </a>{' '}
            Wedding Location
          </p>
          <p>{address}</p>
        </AddressStyles>
      </RSVPGroupStyles>
      <FormStyles
        onSubmit={async (e) => {
          e.preventDefault();
          setLoading(true);
          await handleSubmit(group.id);
          setLoading(false);
        }}
        aria-busy={loading}
        disabled={loading}
      >
        {errorMsg && <p className="error">Error: {errorMsg}</p>}
        {errorMsg && errorCount > 3 && (
          <ErrorContactStyles>
            Support contact:{' '}
            <a
              href={`mailto:name@example.com?subject=RSVP Group Failed: ${errorMsg} ${group.id}`}
            >
              name@example.com
            </a>
          </ErrorContactStyles>
        )}
        <fieldset aria-busy={loading} disabled={loading}>
          <legend>RSVP Invitation</legend>
          {group.guests.map((guest) => (
            <GuestRSVP
              key={guest.id}
              guest={guest}
              inputs={inputs}
              handleChange={handleChange}
            />
          ))}
        </fieldset>
        <fieldset aria-busy={loading} disabled={loading}>
          <legend>
            Do you {groupHasPlusOne ? 'or your plus one ' : ''}have any dietary
            restrictions?
          </legend>
          <div
            style={{
              display: 'grid',
              gap: '1rem',
            }}
          >
            {group.guests.map((guest) =>
              !guest.isPlusOne ? (
                <QuestionStyles key={`${guest?.id}-dietaryNotes`}>
                  <p>
                    {guest.firstName} {guest.lastName} :
                  </p>
                  <label htmlFor={`${guest.id}-dietaryNotes`}>
                    <textarea
                      name={`${guest.id}-dietaryNotes`}
                      id={`${guest.id}-dietaryNotes`}
                      cols="30"
                      rows="2"
                      placeholder="Example: Nut allergy, Fish, etc."
                      value={inputs[guest.id]?.dietaryNotes}
                      onChange={handleChange}
                    />
                  </label>
                </QuestionStyles>
              ) : (
                ''
              )
            )}
          </div>
        </fieldset>
        <fieldset aria-busy={loading} disabled={loading}>
          <legend>Do you have any song requests?</legend>
          <div
            style={{
              display: 'grid',
              gap: '1rem',
            }}
          >
            {group.guests.map((guest) =>
              !guest?.isPlusOne ? (
                <QuestionStyles key={`${guest?.id}-songRequests`}>
                  <p>
                    {guest.firstName} {guest.lastName}:
                  </p>
                  <label htmlFor={`${guest.id}-songRequests`}>
                    <textarea
                      name={`${guest.id}-songRequests`}
                      id={`${guest.id}-songRequests`}
                      cols="30"
                      rows="2"
                      placeholder="Example: Paint It Black - Rolling Stones"
                      value={inputs[guest.id]?.songRequests}
                      onChange={handleChange}
                    />
                  </label>
                </QuestionStyles>
              ) : (
                ''
              )
            )}
          </div>
        </fieldset>
        <fieldset aria-busy={loading} disabled={loading}>
          <legend>Additonal Notes?</legend>
          <textarea
            name="note"
            id="note"
            cols="30"
            rows="10"
            value={inputs.note}
            onChange={handleChange}
            placeholder="Anything you want to ask us?"
          />
        </fieldset>
        <hr />
        {errorMsg && <p className="error">Error: {errorMsg}</p>}
        {errorMsg && errorCount > 3 && (
          <ErrorContactStyles>
            Support contact:{' '}
            <a
              href={`mailto:name@example.com?subject=RSVP Group Failed: ${errorMsg}`}
            >
              name@example.com
            </a>
          </ErrorContactStyles>
        )}
        <button type="submit">Submit RSVP</button>
      </FormStyles>
      <Modal isVisible={isVisible} hideModal={toggleModal} title="RSVP Success">
        <p>{message}</p>
        <div>
          <p>Monday, June 3, 2030 at 5:00 PM</p>
          <a href="/myevents.ics" aria-label="Click to add to calendar">
            <CalendarIcon /> Add to Calendar
          </a>
        </div>
      </Modal>
    </div>
  );
 }
 export async function getServerSideProps({ params }) {
  try {
    await connectDb();
    const groupData = await Group.findById(params.id);
    const group = {};
    group.id = params.id;
    const guestList = [];
    for (const guestId of groupData?.guests) {
      const guestData = await Guest.findById(guestId);
      const guest = {
        id: guestData.id,
        firstName: guestData.firstName,
        lastName: guestData.lastName,
        rsvpStatus: guestData.rsvpStatus || '',
        dietaryNotes: guestData.dietaryNotes || '',
        songRequests: guestData.songRequests || '',
        hasPlusOne: guestData.hasPlusOne || false,
        plusOne: guestData.plusOne || false,
        plusOneFirstName: guestData.plusOneFirstName || '',
        plusOneLastName: guestData.plusOneLastName || '',
      };
      guestList.push(guest);
    }
    group.guests = guestList;
    group.note = groupData.note || '';
    return { props: { group } };
  } catch (error) {
    console.error(error);
    return { notFound: true };
  }
 }
--- a/pages/rsvp/index.js
+++ b/pages/rsvp/index.js
@ -0,0 +1,123 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import styled from 'styled-components';
 import Layout from '../../components/Layout';
 import Form from '../../components/styles/Form';
 import fetchJson from '../../lib/fetchJson';
 import useForm from '../../lib/useForm';
 import useUser from '../../lib/useUser';
 const RSVPStyles = styled.div`
  display: grid;
 `;
 const ErrorContactStyles = styled.p`
  font-weight: bold;
  a {
    text-decoration: underline;
  }
 `;
 export default function RsvpPage() {
  const router = useRouter();
  const { inputs, handleChange, clearForm, resetForm } = useForm({
    firstName: '',
    lastName: '',
  });
  const [errorMsg, setErrorMsg] = useState('');
  const [errorCount, setErrorCount] = useState(0);
  const [loading, setLoading] = useState(false);
  const { user, mutateUser } = useUser({ redirectTo: '/login' });
  if (!user || user.isLoggedIn === false) {
    return <Layout>Loading...</Layout>;
  }
  async function handleSubmit(firstName, lastName, groupId) {
    const body = {
      firstName,
      lastName,
    };
    try {
      const res = await fetchJson('/api/rsvp', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      if (res.status === 'SUCCESS') {
        router.push({
          pathname: `/rsvp/${res.groupId}`,
        });
      } else {
        setErrorCount(errorCount + 1);
        setErrorMsg('Unable to RSVP');
      }
    } catch (error) {
      // console.error('An unexpected error happened:', error);
      setErrorCount(errorCount + 1);
      setErrorMsg('Unable to RSVP');
    }
  }
  return (
    <RSVPStyles>
      <Head>
        <title key="title">N & N | RSVP</title>
      </Head>
      <h1 className="center">RSVP to our wedding</h1>
      <Form
        onSubmit={async (e) => {
          e.preventDefault();
          setLoading(true);
          await handleSubmit(inputs.firstName, inputs.lastName);
          setLoading(false);
        }}
      >
        {errorMsg && <p className="error">Error: {errorMsg}</p>}
        {errorMsg && errorCount > 3 && (
          <ErrorContactStyles>
            Support contact:{' '}
            <a
              href={`mailto:name@example.com?subject=RSVP Failed for ${inputs.firstName} ${inputs.lastName}`}
            >
              name@example.com
            </a>
          </ErrorContactStyles>
        )}
        <fieldset aria-busy={loading} disabled={loading}>
          <label htmlFor="username">
            <span>First Name</span>
            <input
              required
              type="text"
              id="firstName"
              name="firstName"
              placeholder="First Name"
              value={inputs.firstName}
              onChange={handleChange}
            />
          </label>
          <label htmlFor="password">
            <span>Last Name</span>
            <input
              required
              type="text"
              id="lastName"
              name="lastName"
              placeholder="Last Name"
              value={inputs.lastName}
              onChange={handleChange}
            />
          </label>
          <button type="submit">Click to RSVP</button>
        </fieldset>
      </Form>
    </RSVPStyles>
  );
 }
--- a/pages/travelstay.js
+++ b/pages/travelstay.js
@ -0,0 +1,123 @@
 import Head from 'next/head';
 import styled from 'styled-components';
 import { RiExternalLinkLine } from 'react-icons/ri';
 import Layout from '../components/Layout';
 import { MapIcon } from '../lib/svgs';
 import useUser from '../lib/useUser';
 const TravelAndStayStyles = styled.div`
  display: grid;
  gap: 4rem;
  text-align: center;
  ul {
    list-style-type: none;
    padding: 0;
    li {
      margin-top: 1.5rem;
    }
  }
  a.link {
    text-decoration: underline;
    color: var(--primary);
  }
 `;
 export default function TravelAndStayPage() {
  const { user } = useUser({ redirectTo: '/login' });
  if (!user || user.isLoggedIn === false) {
    return <Layout>Loading...</Layout>;
  }
  return (
    <>
      <Head>
        <title>Wedding - Travel & Stay</title>
      </Head>
      <TravelAndStayStyles>
        <h1>Travel & Stay</h1>
        <div>
          <h2>Traveling to the wedding</h2>
          <p>
            <a
              target="_blank"
              href="https://share.here.com/p/s-YmI9LTczLjk4MTYxJTJDNDAuNzY0MjclMkMtNzMuOTQ4ODIlMkM0MC44MDA0OTtjPWFkbWluaXN0cmF0aXZlLXJlZ2lvbjtsYXQ9NDAuNzgyMzg7bG9uPS03My45NjUyMTtuPUNlbnRyYWwrUGFyazt6PTE0O2g9MWM3MDIz"
              rel="noopener noreferrer nofollow"
              aria-label="Go to map"
            >
              <MapIcon />
            </a>{' '}
            Central Park
          </p>
          <p>Central Park, New York, NY, USA</p>
          <p>
            <a
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Link to Example Hotel Website"
              href="https://hotelexample.com/contact/"
            >
              Hotel Website <RiExternalLinkLine />
            </a>
          </p>
          <p>
            <a
              target="_blank"
              href="https://share.here.com/p/s-YmI9LTczLjk4MTYxJTJDNDAuNzY0MjclMkMtNzMuOTQ4ODIlMkM0MC44MDA0OTtjPWFkbWluaXN0cmF0aXZlLXJlZ2lvbjtsYXQ9NDAuNzgyMzg7bG9uPS03My45NjUyMTtuPUNlbnRyYWwrUGFyazt6PTE0O2g9MWM3MDIz"
              rel="noopener noreferrer nofollow"
              aria-label="Go to map"
              className="link"
            >
              Get Directions to the hotel
            </a>
          </p>
        </div>
        <div>
          <h2>Hotel Information</h2>
          <h2>Do I need to book a hotel room?</h2>
          <p>
            Answer
          </p>
          <p>There are also hotels in the area such as:</p>
          <ul>
            <li>
              <a
                href="https://www.hotelexample.com/"
                aria-label="Name of Hotel"
                target="_blank"
                rel="noopener noreferrer"
              >
                Example 1 <RiExternalLinkLine />
              </a>
            </li>
            <p>Travel Time: X minute drive (X miles)</p>
            <li>
              <a
                href="https://www.hotelexample.com/"
                aria-label="Name of Hotel"
                target="_blank"
                rel="noopener noreferrer"
              >
                Example 1 <RiExternalLinkLine />
              </a>
            </li>
            <p>Travel Time: X minute drive (X miles)</p><li>
              <a
                href="https://www.hotelexample.com/"
                aria-label="Name of Hotel"
                target="_blank"
                rel="noopener noreferrer"
              >
                Example 1 <RiExternalLinkLine />
              </a>
            </li>
            <p>Travel Time: X minute drive (X miles)</p>
          </ul>
        </div>
      </TravelAndStayStyles>
    </>
  );
 }
--- a/public/assets/Background.jpeg
+++ b/public/assets/Background.jpeg
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/fonts/Istok_Web/IstokWeb-Bold.ttf
+++ b/public/fonts/Istok_Web/IstokWeb-Bold.ttf
--- a/public/fonts/Istok_Web/IstokWeb-BoldItalic.ttf
+++ b/public/fonts/Istok_Web/IstokWeb-BoldItalic.ttf
--- a/public/fonts/Istok_Web/IstokWeb-Italic.ttf
+++ b/public/fonts/Istok_Web/IstokWeb-Italic.ttf
--- a/public/fonts/Istok_Web/IstokWeb-Regular.ttf
+++ b/public/fonts/Istok_Web/IstokWeb-Regular.ttf
--- a/public/fonts/Istok_Web/OFL.txt
+++ b/public/fonts/Istok_Web/OFL.txt
@ -0,0 +1,94 @@
 Copyright (c) 2008-2012, 2014, Andrey V. Panov (panov@canopus.iacp.dvo.ru),
 with Reserved Font Name Istok.
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at:
 http://scripts.sil.org/OFL
 -----------------------------------------------------------
 SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
 -----------------------------------------------------------
 PREAMBLE
 The goals of the Open Font License (OFL) are to stimulate worldwide
 development of collaborative font projects, to support the font creation
 efforts of academic and linguistic communities, and to provide a free and
 open framework in which fonts may be shared and improved in partnership
 with others.
 The OFL allows the licensed fonts to be used, studied, modified and
 redistributed freely as long as they are not sold by themselves. The
 fonts, including any derivative works, can be bundled, embedded, 
 redistributed and/or sold with any software provided that any reserved
 names are not used by derivative works. The fonts and derivatives,
 however, cannot be released under any other type of license. The
 requirement for fonts to remain under this license does not apply
 to any document created using the fonts or their derivatives.
 DEFINITIONS
 "Font Software" refers to the set of files released by the Copyright
 Holder(s) under this license and clearly marked as such. This may
 include source files, build scripts and documentation.
 "Reserved Font Name" refers to any names specified as such after the
 copyright statement(s).
 "Original Version" refers to the collection of Font Software components as
 distributed by the Copyright Holder(s).
 "Modified Version" refers to any derivative made by adding to, deleting,
 or substituting -- in part or in whole -- any of the components of the
 Original Version, by changing formats or by porting the Font Software to a
 new environment.
 "Author" refers to any designer, engineer, programmer, technical
 writer or other person who contributed to the Font Software.
 PERMISSION & CONDITIONS
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of the Font Software, to use, study, copy, merge, embed, modify,
 redistribute, and sell modified and unmodified copies of the Font
 Software, subject to the following conditions:
 1) Neither the Font Software nor any of its individual components,
 in Original or Modified Versions, may be sold by itself.
 2) Original or Modified Versions of the Font Software may be bundled,
 redistributed and/or sold with any software, provided that each copy
 contains the above copyright notice and this license. These can be
 included either as stand-alone text files, human-readable headers or
 in the appropriate machine-readable metadata fields within text or
 binary files as long as those fields can be easily viewed by the user.
 3) No Modified Version of the Font Software may use the Reserved Font
 Name(s) unless explicit written permission is granted by the corresponding
 Copyright Holder. This restriction only applies to the primary font name as
 presented to the users.
 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
 Software shall not be used to promote, endorse or advertise any
 Modified Version, except to acknowledge the contribution(s) of the
 Copyright Holder(s) and the Author(s) or with their explicit written
 permission.
 5) The Font Software, modified or unmodified, in part or in whole,
 must be distributed entirely under this license, and must not be
 distributed under any other license. The requirement for fonts to
 remain under this license does not apply to any document created
 using the Font Software.
 TERMINATION
 This license becomes null and void if any of the above conditions are
 not met.
 DISCLAIMER
 THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
 MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
 OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
 COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
 DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
 OTHER DEALINGS IN THE FONT SOFTWARE.
--- a/public/fonts/Josefin_Sans/JosefinSans-Italic-VariableFont_wght.ttf
+++ b/public/fonts/Josefin_Sans/JosefinSans-Italic-VariableFont_wght.ttf
--- a/public/fonts/Josefin_Sans/JosefinSans-VariableFont_wght.ttf
+++ b/public/fonts/Josefin_Sans/JosefinSans-VariableFont_wght.ttf
--- a/public/fonts/Josefin_Sans/OFL.txt
+++ b/public/fonts/Josefin_Sans/OFL.txt
@ -0,0 +1,93 @@
 Copyright (c) 2010, Santiago Orozco (hi@typemade.mx)
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at:
 http://scripts.sil.org/OFL
 -----------------------------------------------------------
 SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
 -----------------------------------------------------------
 PREAMBLE
 The goals of the Open Font License (OFL) are to stimulate worldwide
 development of collaborative font projects, to support the font creation
 efforts of academic and linguistic communities, and to provide a free and
 open framework in which fonts may be shared and improved in partnership
 with others.
 The OFL allows the licensed fonts to be used, studied, modified and
 redistributed freely as long as they are not sold by themselves. The
 fonts, including any derivative works, can be bundled, embedded, 
 redistributed and/or sold with any software provided that any reserved
 names are not used by derivative works. The fonts and derivatives,
 however, cannot be released under any other type of license. The
 requirement for fonts to remain under this license does not apply
 to any document created using the fonts or their derivatives.
 DEFINITIONS
 "Font Software" refers to the set of files released by the Copyright
 Holder(s) under this license and clearly marked as such. This may
 include source files, build scripts and documentation.
 "Reserved Font Name" refers to any names specified as such after the
 copyright statement(s).
 "Original Version" refers to the collection of Font Software components as
 distributed by the Copyright Holder(s).
 "Modified Version" refers to any derivative made by adding to, deleting,
 or substituting -- in part or in whole -- any of the components of the
 Original Version, by changing formats or by porting the Font Software to a
 new environment.
 "Author" refers to any designer, engineer, programmer, technical
 writer or other person who contributed to the Font Software.
 PERMISSION & CONDITIONS
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of the Font Software, to use, study, copy, merge, embed, modify,
 redistribute, and sell modified and unmodified copies of the Font
 Software, subject to the following conditions:
 1) Neither the Font Software nor any of its individual components,
 in Original or Modified Versions, may be sold by itself.
 2) Original or Modified Versions of the Font Software may be bundled,
 redistributed and/or sold with any software, provided that each copy
 contains the above copyright notice and this license. These can be
 included either as stand-alone text files, human-readable headers or
 in the appropriate machine-readable metadata fields within text or
 binary files as long as those fields can be easily viewed by the user.
 3) No Modified Version of the Font Software may use the Reserved Font
 Name(s) unless explicit written permission is granted by the corresponding
 Copyright Holder. This restriction only applies to the primary font name as
 presented to the users.
 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
 Software shall not be used to promote, endorse or advertise any
 Modified Version, except to acknowledge the contribution(s) of the
 Copyright Holder(s) and the Author(s) or with their explicit written
 permission.
 5) The Font Software, modified or unmodified, in part or in whole,
 must be distributed entirely under this license, and must not be
 distributed under any other license. The requirement for fonts to
 remain under this license does not apply to any document created
 using the Font Software.
 TERMINATION
 This license becomes null and void if any of the above conditions are
 not met.
 DISCLAIMER
 THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
 MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
 OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
 COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
 DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
 OTHER DEALINGS IN THE FONT SOFTWARE.
--- a/public/fonts/Josefin_Sans/README.txt
+++ b/public/fonts/Josefin_Sans/README.txt
@ -0,0 +1,77 @@
 Josefin Sans Variable Font
 ==========================
 This download contains Josefin Sans as both variable fonts and static fonts.
 Josefin Sans is a variable font with this axis:
  wght
 This means all the styles are contained in these files:
  Josefin_Sans/JosefinSans-VariableFont_wght.ttf
  Josefin_Sans/JosefinSans-Italic-VariableFont_wght.ttf
 If your app fully supports variable fonts, you can now pick intermediate styles
 that aren’t available as static fonts. Not all apps support variable fonts, and
 in those cases you can use the static font files for Josefin Sans:
  Josefin_Sans/static/JosefinSans-Thin.ttf
  Josefin_Sans/static/JosefinSans-ExtraLight.ttf
  Josefin_Sans/static/JosefinSans-Light.ttf
  Josefin_Sans/static/JosefinSans-Regular.ttf
  Josefin_Sans/static/JosefinSans-Medium.ttf
  Josefin_Sans/static/JosefinSans-SemiBold.ttf
  Josefin_Sans/static/JosefinSans-Bold.ttf
  Josefin_Sans/static/JosefinSans-ThinItalic.ttf
  Josefin_Sans/static/JosefinSans-ExtraLightItalic.ttf
  Josefin_Sans/static/JosefinSans-LightItalic.ttf
  Josefin_Sans/static/JosefinSans-Italic.ttf
  Josefin_Sans/static/JosefinSans-MediumItalic.ttf
  Josefin_Sans/static/JosefinSans-SemiBoldItalic.ttf
  Josefin_Sans/static/JosefinSans-BoldItalic.ttf
 Get started
 -----------
 1. Install the font files you want to use
 2. Use your app's font picker to view the font family and all the
 available styles
 Learn more about variable fonts
 -------------------------------
  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
  https://variablefonts.typenetwork.com
  https://medium.com/variable-fonts
 In desktop apps
  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
 Online
  https://developers.google.com/fonts/docs/getting_started
  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
 Installing fonts
  MacOS: https://support.apple.com/en-us/HT201749
  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
 Android Apps
  https://developers.google.com/fonts/docs/android
  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
 License
 -------
 Please read the full license text (OFL.txt) to understand the permissions,
 restrictions and requirements for usage, redistribution, and modification.
 You can use them freely in your products & projects - print or digital,
 commercial or otherwise. However, you can't sell the fonts on their own.
 This isn't legal advice, please consider consulting a lawyer and see the full
 license for all details.
--- a/public/fonts/Josefin_Sans/static/JosefinSans-Bold.ttf
+++ b/public/fonts/Josefin_Sans/static/JosefinSans-Bold.ttf
--- a/public/fonts/Josefin_Sans/static/JosefinSans-BoldItalic.ttf
+++ b/public/fonts/Josefin_Sans/static/JosefinSans-BoldItalic.ttf
--- a/public/fonts/Josefin_Sans/static/JosefinSans-ExtraLight.ttf
+++ b/public/fonts/Josefin_Sans/static/JosefinSans-ExtraLight.ttf
--- a/public/fonts/Josefin_Sans/static/JosefinSans-ExtraLightItalic.ttf
+++ b/public/fonts/Josefin_Sans/static/JosefinSans-ExtraLightItalic.ttf
--- a/public/fonts/Josefin_Sans/static/JosefinSans-Italic.ttf
+++ b/public/fonts/Josefin_Sans/static/JosefinSans-Italic.ttf
--- a/public/fonts/Josefin_Sans/static/JosefinSans-Light.ttf
+++ b/public/fonts/Josefin_Sans/static/JosefinSans-Light.ttf
--- a/public/fonts/Josefin_Sans/static/JosefinSans-LightItalic.ttf
+++ b/public/fonts/Josefin_Sans/static/JosefinSans-LightItalic.ttf
--- a/public/fonts/Josefin_Sans/static/JosefinSans-Medium.ttf
+++ b/public/fonts/Josefin_Sans/static/JosefinSans-Medium.ttf
--- a/public/fonts/Josefin_Sans/static/JosefinSans-MediumItalic.ttf
+++ b/public/fonts/Josefin_Sans/static/JosefinSans-MediumItalic.ttf
--- a/public/fonts/Josefin_Sans/static/JosefinSans-Regular.ttf
+++ b/public/fonts/Josefin_Sans/static/JosefinSans-Regular.ttf
--- a/public/fonts/Josefin_Sans/static/JosefinSans-SemiBold.ttf
+++ b/public/fonts/Josefin_Sans/static/JosefinSans-SemiBold.ttf
--- a/public/fonts/Josefin_Sans/static/JosefinSans-SemiBoldItalic.ttf
+++ b/public/fonts/Josefin_Sans/static/JosefinSans-SemiBoldItalic.ttf
--- a/public/fonts/Josefin_Sans/static/JosefinSans-Thin.ttf
+++ b/public/fonts/Josefin_Sans/static/JosefinSans-Thin.ttf
--- a/public/fonts/Josefin_Sans/static/JosefinSans-ThinItalic.ttf
+++ b/public/fonts/Josefin_Sans/static/JosefinSans-ThinItalic.ttf
--- a/public/fonts/Kanit/Kanit-Black.ttf
+++ b/public/fonts/Kanit/Kanit-Black.ttf
--- a/public/fonts/Kanit/Kanit-BlackItalic.ttf
+++ b/public/fonts/Kanit/Kanit-BlackItalic.ttf
--- a/public/fonts/Kanit/Kanit-Bold.ttf
+++ b/public/fonts/Kanit/Kanit-Bold.ttf
--- a/public/fonts/Kanit/Kanit-BoldItalic.ttf
+++ b/public/fonts/Kanit/Kanit-BoldItalic.ttf
--- a/public/fonts/Kanit/Kanit-ExtraBold.ttf
+++ b/public/fonts/Kanit/Kanit-ExtraBold.ttf
--- a/public/fonts/Kanit/Kanit-ExtraBoldItalic.ttf
+++ b/public/fonts/Kanit/Kanit-ExtraBoldItalic.ttf
--- a/public/fonts/Kanit/Kanit-ExtraLight.ttf
+++ b/public/fonts/Kanit/Kanit-ExtraLight.ttf
--- a/public/fonts/Kanit/Kanit-ExtraLightItalic.ttf
+++ b/public/fonts/Kanit/Kanit-ExtraLightItalic.ttf
--- a/public/fonts/Kanit/Kanit-Italic.ttf
+++ b/public/fonts/Kanit/Kanit-Italic.ttf
--- a/public/fonts/Kanit/Kanit-Light.ttf
+++ b/public/fonts/Kanit/Kanit-Light.ttf
--- a/public/fonts/Kanit/Kanit-LightItalic.ttf
+++ b/public/fonts/Kanit/Kanit-LightItalic.ttf
--- a/public/fonts/Kanit/Kanit-Medium.ttf
+++ b/public/fonts/Kanit/Kanit-Medium.ttf
--- a/Show more
+++ b/Show more