Add SponsorLogos section above footer

src/components/BottomBar.jsx → src/components/Footer.jsx

@@ -24,7 +24,7 @@ import { getColorTheme } from "../utilities/colors";
 
 // sign-up data lives in this spreadsheet: https://docs.google.com/spreadsheets/d/1XgyHXaReTZ3Nq_r7QS18GDvqK_ht010QqnI6PXAnePA/edit#gid=1988825686
 
-export default (props) => {
+export default function Footer(props) {
   const [isModalVisible, setIsModalVisible] = useState(false); // show of modal
   const [isValidName, setIsValidName] = useState(false); // valid name or not
   const [isValidEmail, setIsValidEmail] = useState(false); // valid email or not
@@ -186,18 +186,18 @@ export default (props) => {
 
   return (
     <>
-      <EuiBottomBar position="static" style={{ backgroundColor: `${getColorTheme("bb_bgColor", props.theme)}`,}}>
-          <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
-            <EuiFlexItem grow={false} >
-              <EuiText color={getColorTheme("text", props.theme)}>
-                <h4>
-                  Hosted by Dunder Mifflin and Parks and Recreation Department
-                </h4>
-              </EuiText>
-              <EuiText color={getColorTheme("text", props.theme)}>
-                Group for all paper enthusiasts and bureaucrats
-              </EuiText>
-            </EuiFlexItem>
+      <EuiBottomBar position="static" style={{ backgroundColor: `${getColorTheme("bb_bgColor", props.theme)}` }}>
+        <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
+          <EuiFlexItem grow={false} >
+            <EuiText color={getColorTheme("text", props.theme)}>
+              <h4>
+                Hosted by Dunder Mifflin and Parks and Recreation Department
+              </h4>
+            </EuiText>
+            <EuiText color={getColorTheme("text", props.theme)}>
+              Group for all paper enthusiasts and bureaucrats
+            </EuiText>
+          </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiFlexGroup
               direction="row"

src/components/MainPage.jsx

@@ -7,12 +7,13 @@ import {
   EuiSpacer,
 } from "@elastic/eui";
 import Navbar from "./Navbar";
-import BottomBar from "./BottomBar";
+import Footer from "./Footer";
 import EventDetails from "./panels/EventDetails";
 import SpeakersPanel from "./panels/SpeakersPanel";
 import TalksPanel from "./panels/TalksPanel";
 import RecordingsPanel from "./panels/RecordingsPanel";
 import FAQsPanel from "./panels/FAQsPanel";
+import SponsorLogos from "./SponsorLogos";
 import { Routes, Route } from "react-router-dom";
 import history from "../utilities/history";
 
@@ -78,7 +79,7 @@ function MainPage(props) {
             verticalPosition="center"
             horizontalPosition="center"
           >
-            <EuiPageContentBody>
+            <EuiPageContentBody restrictWidth>
               <Routes>
                 <Route path="/" element={<EventDetails />} />
                 <Route path="/events" element={<EventDetails />} />
@@ -88,9 +89,11 @@ function MainPage(props) {
                 <Route path="/faq" element={<FAQsPanel />} />
               </Routes>
             </EuiPageContentBody>
-            <EuiSpacer size="l" />
+            <EuiSpacer size="xl" />
+            <SponsorLogos />
           </EuiPageContent>
-          <BottomBar theme={props.theme} />
+          <EuiSpacer size="xl" />
+          <Footer theme={props.theme} />
         </EuiPageBody>
       </EuiFlexGroup>
     </EuiPage>

src/components/SponsorLogos.jsx

@@ -0,0 +1,108 @@
+import { useState } from "react";
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+} from "@elastic/eui";
+import { sponsors } from "../data/sponsors";
+import { useIsXs, useIsS, useIsM } from "../hooks/responsive";
+import loadingSpinner from '../images/sponsor-logos/loading.gif';
+import useHover from "../hooks/hover";
+
+export const SponsorLogo = ({ src, name }) => {
+  const [logo, setLogo] = useState(loadingSpinner);
+  if (!src.startsWith('http')) {
+    import(`../images/sponsor-logos/${src}`).then((module) => {
+      setLogo(module.default);
+    });
+  }
+
+  const [hoverRef, isHovered] = useHover();
+  const borderWidth = '2px';
+  return (
+    <div ref={hoverRef} style={{
+      display: 'grid',
+      placeItems: 'center',
+      width: '200px',
+      height: '150px',
+      position: 'relative',
+      borderWidth,
+      borderStyle: 'solid',
+      borderColor: isHovered ? 'var(--color-accent)' : 'transparent',
+      transition: 'border-color .15s ease-out',
+      overflow: 'hidden',
+    }}>
+      <img
+        src={src.startsWith('http') ? src : logo}
+        alt={name}
+        title={name}
+        style={{
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          width: '100%',
+          height: '100%',
+          objectFit: 'contain',
+          padding: '1rem',
+        }}
+      />
+      <div style={{
+        position: 'absolute',
+        bottom: '0',
+        left: `-${borderWidth}`,
+        width: `calc(100% + (${borderWidth} * 2))`,
+        height: 'auto',
+        backgroundColor: 'var(--color-accent)',
+        border: `${borderWidth} solid var(--color-accent)`,
+        opacity: isHovered ? 1 : 0,
+        textDecoration: 'none',
+        color: 'black',
+        fontSize: '1rem',
+        fontWeight: 600,
+        padding: '2px 4px',
+        transform: isHovered ? 'translateY(0%)' : 'translateY(100%)',
+        transition: 'opacity .15s ease-out, transform .15s ease-out',
+      }}>{name}</div>
+    </div>
+  );
+};
+
+export default function SponsorLogos() {
+  const [isXs, isS] = [useIsXs(), useIsS(), useIsM()];
+  const titleSize = isXs ? "xs" : isS ? "s" : "m";
+
+  return (
+    <>
+      <EuiFlexGroup
+        className="xMargin"
+        direction="column"
+      >
+        <div style={{ maxWidth: '1200px' }}>
+          <EuiTitle size={titleSize}>
+            <h1 style={{ marginTop: '12px', marginBottom: '24px' }} className="eui-textCenter">Featured Sponsors</h1>
+          </EuiTitle>
+          <EuiFlexItem style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            flexDirection: 'row',
+            justifyContent: 'center',
+            gap: '1rem',
+          }}>
+            {sponsors.map(({ name, src, href }) => {
+              if (href?.length) {
+                return (
+                  <a href={href} key={name} target="_blank" rel="noreferrer" title={name}>
+                    <SponsorLogo src={src} name={name} />
+                  </a>
+                );
+              }
+              return (
+                <SponsorLogo src={src} name={name} />
+              );
+            })}
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+    </>
+  );
+};

src/components/panels/SpeakersPanel.jsx

@@ -10,7 +10,7 @@ import React from "react";
 import { useEffect } from "react";
 import axios from 'axios'
 import { useState } from "react";
-import {webAppUrl as url} from '../../utilities/env' 
+import { webAppUrl as url } from '../../utilities/env' 
 
 // speaker data lives in this spreadsheet: https://docs.google.com/spreadsheets/d/1XgyHXaReTZ3Nq_r7QS18GDvqK_ht010QqnI6PXAnePA/edit#gid=0
 

src/data/sponsors.jsx

@@ -0,0 +1,37 @@
+export const sponsors = [
+  {
+    name: "Google",
+    src: "https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg",
+    href: "https://www.google.com/",
+  },
+  {
+    name: "Sponsor Name",
+    src: "fake-logo.png",
+    // `href` is optional, can be ommitted for unlinked sponsors
+  },
+  {
+    name: "Sponsor Name",
+    src: "fake-logo.png",
+    href: "#",
+  },
+  {
+    name: "Sponsor Name",
+    src: "fake-logo.png",
+    href: "#",
+  },
+  {
+    name: "Sponsor Name",
+    src: "fake-logo.png",
+    href: "#",
+  },
+  {
+    name: "Sponsor Name",
+    src: "fake-logo.png",
+    href: "#",
+  },
+  {
+    name: "Sponsor Name",
+    src: "fake-logo.png",
+    href: "#",
+  },
+];

src/hooks/hover.js

@@ -0,0 +1,24 @@
+// source: https://usehooks.com/useHover/
+import { useEffect, useState, useRef } from 'react';
+
+export default function useHover() {
+  const [value, setValue] = useState(false);
+  const ref = useRef(null);
+  const handleMouseOver = () => setValue(true);
+  const handleMouseOut = () => setValue(false);
+  useEffect(
+    () => {
+      const node = ref.current;
+      if (node) {
+        node.addEventListener("mouseover", handleMouseOver);
+        node.addEventListener("mouseout", handleMouseOut);
+        return () => {
+          node.removeEventListener("mouseover", handleMouseOver);
+          node.removeEventListener("mouseout", handleMouseOut);
+        };
+      }
+    },
+    [ref.current]
+  );
+  return [ref, value];
+}