Redesign resources section

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

components/AboutUsGallery.js

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+import ImageTileContainer from './ImageTileContainer';
+import Carousel from './Carousel';
+import styled from 'styled-components';
+
+const GalleryContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 400px;
+  width: 100%;
+  gap: 16px;
+
+  & > * {
+    flex-basis: 50%;
+  }
+
+  ${(p) => p.theme.mediaQueries.mobile} {
+    flex-direction: column;
+    height: auto;
+
+    & > * {
+      flex-basis: auto;
+    }
+  }
+`;
+
+const GalleryVideo = styled.iframe`
+  height: 400px;
+  width: 100%;
+  margin-bottom: 10px;
+  border: none;
+  border-radius: 6px;
+
+  ${(p) => p.theme.mediaQueries.mobile} {
+    height: 225px;
+  }
+`;
+
+const Image = styled.img`
+  height: 400px;
+  width: 100%;
+  margin-bottom: 10px;
+  border-radius: 6px;
+  object-fit: cover;
+
+  ${(p) => p.theme.mediaQueries.mobile} {
+    height: 225px;
+  }
+`;
+
+/**
+ *
+ * @param {{ videoSrc: string, images: import('./ImageTileContainer').ImageTileRow[] }} param0
+ * @returns
+ */
+function AboutUsGallery({ videoSrc, images }) {
+  const [width, setWidth] = useState(0);
+  const mobileBreakpoint = 768;
+
+  useEffect(() => {
+    setWidth(window.innerWidth);
+    window.addEventListener('resize', () => setWidth(window.innerWidth));
+  }, []);
+
+  return width <= mobileBreakpoint ? (
+    <Carousel
+      items={[
+        <GalleryVideo
+          src={videoSrc}
+          title='YouTube video player'
+          allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+          referrerpolicy='strict-origin-when-cross-origin'
+          allowFullScreen
+          key='video'
+        ></GalleryVideo>,
+        ...images.flatMap((imgTileRow) => [
+          <Image src={imgTileRow.leftImg} key={imgTileRow.leftImg} />,
+          <Image src={imgTileRow.rightImg} key={imgTileRow.rightImg} />,
+        ]),
+      ]}
+    />
+  ) : (
+    <GalleryContainer>
+      <GalleryVideo
+        src={videoSrc}
+        title='YouTube video player'
+        allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+        referrerpolicy='strict-origin-when-cross-origin'
+        allowFullScreen
+      ></GalleryVideo>
+      <ImageTileContainer rows={images} />;
+    </GalleryContainer>
+  );
+}
+
+export default AboutUsGallery;

components/Carousel.js

@@ -37,14 +37,6 @@ const EmptyDiamond = styled.div`
     cursor: pointer;
 `;
 
-const Image = styled.img`
-    height: 100%;
-    width: 100%;
-    margin-bottom: 10px;
-    border-radius: 6px;
-    object-fit: cover;
-`;
-
 const BaseArrow = css`
     border: solid ${(p) => p.theme.colors.primary};
     border-width: 0 2px 2px 0;
@@ -70,9 +62,9 @@ const LeftArrow = styled.i`
     left: 5%;
 `
 
-export default function Carousel ({ images, height, width }) {
+export default function Carousel ({ items, height, width }) {
     const [imageIndex, setImageIndex] = useState(0);
-    const numImages = images.length;
+    const numImages = items.length;
 
     useEffect(() => {
         const interval = setInterval(() => {
@@ -89,9 +81,9 @@ export default function Carousel ({ images, height, width }) {
                 <Container width={width} height={height}>
                     <RightArrow onClick={() => setImageIndex(imageIndex == numImages - 1 ? 0 : imageIndex + 1)}/>
                     <LeftArrow onClick={() => setImageIndex(imageIndex == 0 ? numImages - 1 : imageIndex - 1)}/>
-                    <Image src={images[imageIndex]} />
+                    {items[imageIndex]}
                     <FlexBox>
-                        {images.map((item, index) => {
+                        {items.map((item, index) => {
                             return index == imageIndex
                                 ? <FilledDiamond key={index} />
                                 : <EmptyDiamond key={index} onClick={() => setImageIndex(index)}/>

components/Footer.js

@@ -69,15 +69,15 @@ const profiles = [
       name: 'Alissa Guo',
       emoji: '🥘',
       color: '#FFC0CB',
-      title: 'Cmd-f logistics coordinator',
+      title: 'cmd-f Logistics Coordinator',
       social: 'https://www.linkedin.com/in/alissa-guo/'
   },
   {
       img: '/assets/profiles/Allison_Chu.png',
       name: 'Allison Chu',
       emoji: '🚅',
       color: '#01DACC',
-      title: '',
+      title: 'Design Coordinator',
       social: ''
   },
   {
@@ -301,7 +301,7 @@ const profiles = [
       name: 'Khoa Bui',
       emoji: '🐧',
       color: '#e46060',
-      title: 'Logistics Coordinator',
+      title: 'nwHacks Logistics Coordinator',
       social: ''
   },
   {
@@ -365,15 +365,15 @@ const profiles = [
       name: 'Michelle Wan',
       emoji: '🙆🏻‍♀️',
       color: '#e8dcfc',
-      title: 'Sponsorships Coordinator',
+      title: 'Sponsorship Coordinator',
       social: 'https://mwchelle.me'
   },
   {
       img: '/assets/profiles/Michelle_Wang.png',
       name: 'Michelle Wang',
       emoji: '❄️',
       color: '#9CDDFB',
-      title: 'Tres',
+      title: 'Treasurer',
       social: 'https://www.linkedin.com/in/michelle-wang-mw/'
   },
   {

components/ImageTileContainer.js

@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const ImageTileRow = styled.div`
+  position: relative;
+  display: flex;
+  height: calc(50% - 8px);
+  gap: 16px;
+  z-index: 1;
+
+  ${(p) =>
+    p.withMascots &&
+    `
+      &:before {
+        z-index: -1;
+        content: '';
+        position: absolute;
+        top: -100px;
+        right: 0;
+        background: url('assets/about-us-mascots.svg');
+        background-position: top right;
+        background-repeat: no-repeat;
+        width: 300px;
+        height: 152px;
+      }
+    `}
+
+  ${(p) => p.theme.mediaQueries.mobile} {
+    height: auto;
+
+    &:before {
+      display: none;
+    }
+  }
+`;
+
+const GalleryImage = styled.img`
+  width: ${(p) => (p.small ? '33%' : '66%')};
+  border-radius: 6px;
+  object-fit: cover;
+
+  ${(p) => p.theme.mediaQueries.mobile} {
+    height: 115px;
+  }
+`;
+
+/**
+ * @typedef {{leftImg: string, rightImg: string}} ImageTileRow
+ */
+
+/**
+ *
+ * @param {{rows: ImageTileRow[]}} props
+ */
+const ImageTileContainer = ({ rows }) => {
+  return (
+    <Container>
+      {rows.map((row, i) => (
+        <ImageTileRow withMascots={i == 0} key={i}>
+          <GalleryImage small={i % 2 == 0} src={row.leftImg} />
+          <GalleryImage small={i % 2 == 1} src={row.rightImg} />
+        </ImageTileRow>
+      ))}
+    </Container>
+  );
+};
+
+export default ImageTileContainer;