Donate v3.5 (#439)

* Add Image Slider * Make it all work * Update donate.js
2026-04-19 22:05:11 +00:00 · 2022-05-03 15:58:31 +08:00 · 2022-05-03 15:58:31 +08:00 · 6eae0c8b03
commit 6eae0c8b03
parent 77a0988d90
18 changed files with 336 additions and 83 deletions
--- a/package.json
+++ b/package.json
@ -32,12 +32,14 @@
    "next-transpile-modules": "^9.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
+    "react-marquee-slider": "^1.1.5",
    "react-masonry-css": "^1.0.16",
    "react-reveal": "^1.2.2",
    "react-scrolllock": "^5.0.1",
    "react-tsparticles": "^2.0.6",
    "react-use-websocket": "3.0.0",
    "resnow": "^1.0.0",
+    "styled-components": "^5.3.5",
    "swr": "^1.3.0",
    "theme-ui": "^0.14",
    "tinytime": "^0.2.6",
--- a/pages/donate.js
+++ b/pages/donate.js
@ -9,9 +9,9 @@ import {
  Card,
  Link as A,
  Text,
-  Avatar,
-  Grid
+  Avatar
 } from 'theme-ui'
+import Image from 'next/image'
 import Head from 'next/head'
 import Meta from '@hackclub/meta'
 import ForceTheme from '../components/force-theme'
@ -19,17 +19,25 @@ import Nav from '../components/nav'
 import Footer from '../components/footer'
 import Sponsors from '../components/donate/sponsors'
 import donors from '../components/donate/donors.json'
+import Marquee from 'react-marquee-slider'
+import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
+import HackCamp from '../public/donate/sf.jpg'
+import HackerGames from '../public/donate/0img_20210830_161125.jpg'
+import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
+import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
+import HackPenn from '../public/donate/0color_pop.jpg'
+import ElonAMA from '../public/donate/elon.jpg'
+import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
+import Flagship from '../public/donate/flagship.png'
+import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
+import HackCamp2020 from '../public/donate/0img_6447.jpg'
+import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
+import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
+import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
+import GoldenTrain from '../public/home/golden-train.png'

 const Header = styled(Box)`
  background: url('/pattern.svg');
-  > div {
-    display: grid;
-    grid-gap: 24px;
-    align-items: center;
-    @media screen and (min-width: 48em) {
-      grid-template-columns: 3fr 2fr;
-    }
-  }
 `

 const Sheet = styled(Card)`
@ -59,10 +67,6 @@ const Row = styled(Box)`
  }
 `

-const DonateSheet = styled(Sheet)`
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.0625), 0 16px 32px rgba(0, 0, 0, 0.125) !important;
-`
-
 const Quote = styled(Sheet)`
  position: relative;
  &:before {
@ -150,6 +154,41 @@ const DonorCard = ({ name, link = false }) => (
  </DonorCardBase>
 )

+const PhotoRow = ({ photos }) => (
+  <Box sx={{ height: '200px', overflow: 'hidden', width: '100vw' }}>
+    <Box sx={{display: ['block', 'block', 'block', 'block', 'none']}}>
+      <Marquee velocity={12}>
+        {photos.map((photo, index) => (
+          <Image
+            placeholder="blur"
+            src={photo}
+            objectFit="cover"
+            className="next-image"
+            height="200px"
+            width="300px"
+            key={"image-"+index}
+          />
+        ))}
+      </Marquee>
+    </Box>
+    <Box sx={{display: ['none', 'none', 'none', 'none', 'block']}}>
+      <Marquee velocity={12}>
+        {photos.map((photo, index) => (
+          <Image
+            placeholder="blur"
+            src={photo}
+            objectFit="cover"
+            className="next-image"
+            height="200px"
+            width="600px"
+            key={"image-"+index}
+          />
+        ))}
+      </Marquee>
+    </Box>
+  </Box>
+)
+
 const DonorListing = ({ name, url }) => {
  if (url) {
    return (
@ -173,72 +212,95 @@ export default function Donate() {
      />
      <Nav color="muted" />
      <ForceTheme theme="light" />
-      <Header pt={[5, 5, 6]}>
-        <Grid
-          color="black"
-          sx={{ maxWidth: '64rem', mx: 'auto' }}
-          align="left"
-          py={3}
-          px={3}
-          columns={[1, '3fr 2fr']}
+      <Header sx={{ position: 'relative' }}>
+        <Box
+          sx={{
+            background: 'rgba(0,0,0, 0.8)',
+            zIndex: 1,
+            position: 'relative',
+            color: 'white!important',
+            height: '600px'
+          }}
+          pt={[5, 5, '110px']}
        >
-          <Container sx={{ maxWidth: '48rem' }}>
-            <Heading
-              sx={{ fontSize: [3, 4], textTransform: 'uppercase' }}
-              color="primary"
-              caps
-            >
-              Donate to Hack Club
-            </Heading>
-            <Heading
-              sx={{ fontSize: ['48px', '54px'], maxWidth: '32rem', my: 2 }}
-            >
-              We rely on people like you to bring coding to the world.
-            </Heading>
-            <Box sx={{ fontSize: ['24px', '24px'] }}>
-              Contribute today to empower the next generation. Help start a Hack
-              Club at every high school.
-            </Box>
-            <Text sx={{ mt: 1, display: 'block' }} fontSize={2} color="muted">
-              Your contribution is tax-deductible.
-              <br />
-              Hack Club is a 501(c)(3) non-profit with the EIN 81-2908499.
-            </Text>
-          </Container>
-          <DonateSheet
-            bg="primary"
-            color="white"
-            align="center"
-            style={{
-              backgroundImage: `radial-gradient( ellipse farthest-corner at top left, #e4732d 0%, #e42d42 100%)`,
-              position: 'relative',
-              width: '100%',
-              color: 'white',
-              textAlign: 'center'
+          <Box
+            sx={{
+              maxWidth: '64rem',
+              mx: 'auto',
+              zIndex: 1,
+              position: 'relative'
            }}
+            align="center"
+            py={2}
+            px={[1, 3]}
          >
-            <Heading
-              mb={1}
-              fontSize={5}
-              sx={{ color: 'white', fontSize: '36px' }}
-            >
-              Become a patron
-            </Heading>
-            <Text color="snow" fontSize={1} sx={{ mb: 2, display: 'block' }}>
-              Just $3 supports a student for a month
-            </Text>
-            <Button
-              as="a"
-              href="https://bank.hackclub.com/donations/start/hq"
-              width={1}
-              chevronRight
-              inverted
-              sx={{ width: '100%', bg: 'white', color: 'red', py: 3 }}
-            >
-              Donate now »
-            </Button>
-          </DonateSheet>
-        </Grid>
+            <Container sx={{ maxWidth: '48rem' }}>
+              <Heading
+                sx={{ fontSize: ['42px', '72px'], my: 2, color: 'white' }}
+              >
+                We rely on people like you to bring coding to the world.
+              </Heading>
+              <Box
+                sx={{
+                  fontSize: ['22px', '28px'],
+                  maxWidth: '40rem',
+                  color: 'white'
+                }}
+              >
+                Contribute today to empower the next generation. Help start a
+                Hack Club at every high school.
+              </Box>
+              <Button
+                variant="ctaLg"
+                my={3}
+                sx={{ width: ['100%', 'auto'] }}
+                as="a"
+                href="https://bank.hackclub.com/donations/start/hq"
+              >
+                Donate
+                <Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
+                  to Hack Club
+                </Text>
+              </Button>
+              <Text sx={{ mt: 1, display: 'block', opacity: 0.8 }} fontSize={2} color="white">
+                Your contribution is tax-deductible.
+                <br />
+                Hack Club is a 501(c)(3) non-profit with the EIN 81-2908499.
+              </Text>
+            </Container>
+          </Box>
+        </Box>
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            zIndex: 0,
+            width: '100%',
+            display: 'block'
+          }}
+        >
+          <PhotoRow
+            photos={[
+              ExecuteBig,
+              HackCamp,
+              HackerGames,
+              LaptopDonations,
+              Kerala
+            ]}
+          />
+          <PhotoRow
+            photos={[HackPenn, ElonAMA, SpaceX, GoldenTrain, Flagship]}
+          />
+          <PhotoRow
+            photos={[
+              HackCamp2020,
+              InnovationCircuit,
+              WindyCity,
+              MAHacks,
+              ZephyrFun
+            ]}
+          />
+        </Box>
      </Header>
      <Container variant="copy" mt={5}>
        <FirstQuote>
--- a/public/donate/0color_pop.jpg
+++ b/public/donate/0color_pop.jpg
--- a/public/donate/0img-20210918-wa0091.jpg
+++ b/public/donate/0img-20210918-wa0091.jpg
--- a/public/donate/0img_20210830_161125.jpg
+++ b/public/donate/0img_20210830_161125.jpg
--- a/public/donate/0img_6447.jpg
+++ b/public/donate/0img_6447.jpg
--- a/public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png
+++ b/public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png
--- a/public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png
+++ b/public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png
--- a/public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png
+++ b/public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png
--- a/public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png
+++ b/public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png
--- a/public/donate/0spacex_and_hack_club.jpg
+++ b/public/donate/0spacex_and_hack_club.jpg
--- a/public/donate/1ae6618_52a8d7fbf108462a8c540fd13973b879_mv2.jpg
+++ b/public/donate/1ae6618_52a8d7fbf108462a8c540fd13973b879_mv2.jpg
--- a/public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png
+++ b/public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png
--- a/public/donate/codedaydc_hack.jpg
+++ b/public/donate/codedaydc_hack.jpg
--- a/public/donate/elon.jpg
+++ b/public/donate/elon.jpg
--- a/public/donate/flagship.png
+++ b/public/donate/flagship.png
--- a/public/donate/sf.jpg
+++ b/public/donate/sf.jpg
--- a/yarn.lock
+++ b/yarn.lock
@ -2,7 +2,7 @@
 # yarn lockfile v1


-"@babel/code-frame@^7.0.0":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.16.7":
  version "7.16.7"
  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
@ -47,6 +47,29 @@
    jsesc "^2.5.1"
    source-map "^0.5.0"

+"@babel/generator@^7.17.10":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.10.tgz#c281fa35b0c349bbe9d02916f4ae08fc85ed7189"
+  integrity sha512-46MJZZo9y3o4kmhBVc7zW7i8dtR1oIK/sdO5NcfcZRhTGYi+KKJRtHNgsU6c4VUcJmUNV/LQdebD/9Dlv4K+Tg==
+  dependencies:
+    "@babel/types" "^7.17.10"
+    "@jridgewell/gen-mapping" "^0.1.0"
+    jsesc "^2.5.1"
+
+"@babel/helper-annotate-as-pure@^7.16.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
+  integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-environment-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
+  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-function-name@^7.12.13":
  version "7.12.13"
  resolved "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz"
@ -56,6 +79,14 @@
    "@babel/template" "^7.12.13"
    "@babel/types" "^7.12.13"

+"@babel/helper-function-name@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz#136fcd54bc1da82fcb47565cf16fd8e444b1ff12"
+  integrity sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.17.0"
+
 "@babel/helper-get-function-arity@^7.12.13":
  version "7.12.13"
  resolved "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz"
@ -63,6 +94,13 @@
  dependencies:
    "@babel/types" "^7.12.13"

+"@babel/helper-hoist-variables@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
+  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-member-expression-to-functions@^7.13.0":
  version "7.13.0"
  resolved "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.0.tgz"
@ -70,6 +108,13 @@
  dependencies:
    "@babel/types" "^7.13.0"

+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
+  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-module-imports@^7.12.13":
  version "7.12.13"
  resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz"
@ -138,6 +183,13 @@
  dependencies:
    "@babel/types" "^7.12.13"

+"@babel/helper-split-export-declaration@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
+  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-validator-identifier@^7.12.11":
  version "7.12.11"
  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz"
@ -180,6 +232,11 @@
  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.13.11.tgz"
  integrity sha512-PhuoqeHoO9fc4ffMEVk4qb/w/s2iOSWohvbHxLtxui0eBg3Lg5gN1U8wp1V1u61hOWkPQJJyJzGH6Y+grwkq8Q==

+"@babel/parser@^7.16.7", "@babel/parser@^7.17.10":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.10.tgz#873b16db82a8909e0fbd7f115772f4b739f6ce78"
+  integrity sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ==
+
 "@babel/plugin-proposal-object-rest-spread@7.12.1":
  version "7.12.1"
  resolved "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz"
@ -241,6 +298,15 @@
    "@babel/parser" "^7.12.13"
    "@babel/types" "^7.12.13"

+"@babel/template@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
+  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0":
  version "7.13.0"
  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.0.tgz"
@ -256,6 +322,22 @@
    globals "^11.1.0"
    lodash "^4.17.19"

+"@babel/traverse@^7.4.5":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.10.tgz#1ee1a5ac39f4eac844e6cf855b35520e5eb6f8b5"
+  integrity sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.10"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.17.9"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.17.10"
+    "@babel/types" "^7.17.10"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.12.13", "@babel/types@^7.12.7", "@babel/types@^7.13.0":
  version "7.13.0"
  resolved "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz"
@ -265,6 +347,14 @@
    lodash "^4.17.19"
    to-fast-properties "^2.0.0"

+"@babel/types@^7.16.7", "@babel/types@^7.17.0", "@babel/types@^7.17.10":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.10.tgz#d35d7b4467e439fcf06d195f8100e0fea7fc82c4"
+  integrity sha512-9O26jG0mBYfGkUYCYZRnBwbVLd1UZOICEr2Em6InB6jVfsAv1GKgwXHmrSg+WFWDmeKTA6vyTZiN8tCSM5Oo3A==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@emotion/babel-plugin@^11.7.1":
  version "11.7.2"
  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz#fec75f38a6ab5b304b0601c74e2a5e77c95e5fa0"
@ -306,7 +396,7 @@
  dependencies:
    "@emotion/memoize" "0.7.4"

-"@emotion/is-prop-valid@^1.1.2":
+"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.1.2":
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz#34ad6e98e871aa6f7a20469b602911b8b11b3a95"
  integrity sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==
@ -363,7 +453,12 @@
    "@emotion/serialize" "^1.0.2"
    "@emotion/utils" "^1.1.0"

-"@emotion/unitless@^0.7.5":
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4", "@emotion/unitless@^0.7.5":
  version "0.7.5"
  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
@ -422,6 +517,24 @@
  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==

+"@jridgewell/gen-mapping@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
+  integrity sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.0"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
+"@jridgewell/set-array@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.0.tgz#1179863356ac8fbea64a5a4bcde93a4871012c01"
+  integrity sha512-SfJxIxNVYLTsKwzB3MoOQ1yxf4w/E6MdkvTgrgAt1bfxjSrLUoHMKrDOykwN14q65waezZIdqDneUIPh4/sKxg==
+
+"@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.11"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec"
+  integrity sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==
+
 "@mdx-js/loader@^1.6.22":
  version "1.6.22"
  resolved "https://registry.npmjs.org/@mdx-js/loader/-/loader-1.6.22.tgz"
@ -1191,6 +1304,22 @@ babel-plugin-macros@^2.6.1:
    cosmiconfig "^6.0.0"
    resolve "^1.12.0"

+"babel-plugin-styled-components@>= 1.12.0":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086"
+  integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-module-imports" "^7.16.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+    picomatch "^2.3.0"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 bail@^1.0.0:
  version "1.0.5"
  resolved "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz"
@ -1285,6 +1414,11 @@ camelcase@^5.3.1:
  resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz"
  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==

+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 caniuse-lite@^1.0.30001283:
  version "1.0.30001299"
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz#d753bf6444ed401eb503cbbe17aa3e1451b5a68c"
@ -1434,6 +1568,20 @@ cross-spawn@^7.0.2:
    shebang-command "^2.0.0"
    which "^2.0.1"

+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 csstype@^3.0.10:
  version "3.0.10"
  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
@ -2189,7 +2337,7 @@ hastscript@^6.0.0:
    property-information "^5.0.0"
    space-separated-tokens "^1.0.0"

-hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.1:
  version "3.3.2"
  resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@ -2671,11 +2819,16 @@ lodash@4.17.15:
  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz"
  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==

-lodash@^4.17.19, lodash@^4.17.21:
+lodash@^4.17.11, lodash@^4.17.19:
  version "4.17.21"
  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==

+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loose-envify@^1.1.0, loose-envify@^1.4.0:
  version "1.4.0"
  resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
@ -3047,6 +3200,16 @@ picomatch@^2.0.5, picomatch@^2.2.1:
  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz"
  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==

+picomatch@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+postcss-value-parser@^4.0.2:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
 postcss@8.4.5:
  version "8.4.5"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95"
@ -3145,6 +3308,11 @@ react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

+react-marquee-slider@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/react-marquee-slider/-/react-marquee-slider-1.1.5.tgz#5dc34c259071e513eb7c4084c405823233b28bb9"
+  integrity sha512-eta0DSKMu8F+82O3zF4jlWdTTlsmJg3h8n12trqCndBYo5DAc07odVlfxSfSsEGcBEHYli12RehrK3EYc4LwrQ==
+
 react-masonry-css@^1.0.16:
  version "1.0.16"
  resolved "https://registry.npmjs.org/react-masonry-css/-/react-masonry-css-1.0.16.tgz"
@ -3390,6 +3558,11 @@ setprototypeof@1.0.3:
  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
  integrity sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=

+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@ -3510,6 +3683,22 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
  dependencies:
    inline-style-parser "0.1.1"

+styled-components@^5.3.5:
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4"
+  integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 styled-jsx@5.0.1:
  version "5.0.1"
  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.1.tgz#78fecbbad2bf95ce6cd981a08918ce4696f5fc80"
@ -3539,7 +3728,7 @@ stylis@4.0.13:
  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==

-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
  version "5.5.0"
  resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==