recap site

components/arcade/review/aFooter.js

@@ -0,0 +1,33 @@
+import { Box, Heading, Text, Link } from 'theme-ui'
+import Footer from '../footer'
+
+const Description = () => (
+  <Box sx={{ a: { color: 'blue' }, pb: 4 }}>
+    <Heading as="h3" variant="subheadline" mb={2}>
+      <Link
+        href="/arcade/landing"
+        title="Rewind back to the main landing page."
+      >
+        {' '}
+        ⏮
+      </Link>
+      A project by <a href="https://hackclub.com/">Hack Club</a> for Summer
+      2024.
+    </Heading>
+
+    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
+      Thank you to: Manitej, Acon, Max, Zach L, Mel, Chris, Christina, Bartosz,
+      Leo, Aarya, Arnav, Arish, and Zach R.
+    </Text>
+  </Box>
+)
+
+const AFooter = () => {
+  return (
+    <Footer>
+      <Description />
+    </Footer>
+  )
+}
+
+export default AFooter

components/arcade/review/arcader.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Text } from 'theme-ui'
+/** @jsxImportSource theme-ui */
+
+export default function Arcader({ quote, name, age, country, image, center }) {
+  return (
+    <div>
+      <Text
+        sx={{
+          fontSize: [1, '16px'],
+          maxWidth: '600px',
+          display: 'block',
+          textAlign: center ? 'center' : 'left'
+        }}
+      >
+        {quote.split('<br>').map((line, index) => (
+          <React.Fragment key={index}>
+            {line}
+            <br />
+          </React.Fragment>
+        ))}
+      </Text>
+      <div sx={{ display: 'flex', alignItems: 'center', justifyContent: center ? 'center' : 'start', mt: 3 }}>
+        {/* <Text variant='subtitle' as="h1">- </Text> */}
+        <img
+          src={image}
+          sx={{ borderRadius: '5px', width: '35px', height: '35px', mr: 2 }}
+        />
+        <div>
+          <Text as="p" sx={{
+          fontSize: [1, '25px'],
+          display: 'block',
+          textAlign: center ? 'center' : 'left',
+          fontWeight: 'bold'
+        }}>@{name}</Text>
+          {(age || country) && (
+            <Text as="p">
+              {age && `${age}, `}{country}
+            </Text>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

components/arcade/review/dragged.js

@@ -0,0 +1,31 @@
+import { Text } from 'theme-ui'
+/** @jsxImportSource theme-ui */
+
+export default function Dragged({ title, img, small, ...props }) {
+  return (
+
+      <div sx={{ border: '1px solid #35290F', width: small ? '100%' :'60vw', maxWidth: '350px', cursor: 'pointer', boxShadow: '10px 10px #35290F', backgroundColor: '#FFF7E5', margin: 'auto', mb: 3 }} {...props}>
+        <Text
+          variant="subtitle"
+          sx={{
+            backgroundColor: '#FFEEC6',
+            py: 2,
+            borderBottom: '1px solid #35290F',
+            color: '#FF5C02',
+            width: '100%', 
+            display: 'block',
+            mt: 0,
+            px: 2,
+            fontSize: [2, '18px', '22px']
+          }}
+          className="slackey"
+        >
+          {title}
+        </Text>
+        <img
+          src={img}
+          sx={{ width: 'calc(100% - 20px)', height: 'auto', m: '10px' }}
+        />
+      </div>
+  )
+}

components/arcade/review/map.js

@@ -0,0 +1,36 @@
+import React, { useEffect, useRef } from 'react';
+import L from 'leaflet';
+import 'leaflet.markercluster';
+
+const LeafletMap = ({ points }) => {
+  const mapRef = useRef();
+
+  useEffect(() => {
+    const map = L.map(mapRef.current).setView([21.505, -10.09], 2);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    }).addTo(map);
+
+    const markers = L.markerClusterGroup();
+
+    points.forEach((point) => {
+      const marker = L.marker([point.lat, point.lng]).bindPopup(point.name);
+      markers.addLayer(marker);
+    });
+
+    map.addLayer(markers);
+
+    return () => {
+      map.remove();
+    };
+  }, [points]);
+
+  return (
+    <div>
+      <div ref={mapRef} style={{ height: '50vh', minHeight: '300px', width: '100%', borderRadius: '10px' }} />
+    </div>
+  );
+};
+
+export default LeafletMap;

components/arcade/review/preview.js

@@ -0,0 +1,155 @@
+import { Text } from 'theme-ui'
+import { Balancer } from 'react-wrap-balancer'
+import Fade from 'react-reveal/Fade'
+import Zoom from 'react-reveal/Zoom'
+import { useInView } from 'react-intersection-observer'
+import { useEffect, useState } from 'react'
+
+/** @jsxImportSource theme-ui */
+
+export default function Preview({
+  text,
+  img,
+  imgAlt,
+  isSmallScreen,
+  rotation,
+  sticker1,
+  sticker2,
+  // position,
+  // ref,
+  // opacity,
+  // inView,
+  elementRef
+}) {
+  const { ref, inView } = useInView({ threshold: 0.9 })
+  const [position, setPosition] = useState([])
+  useEffect(() => {
+    console.log(inView)
+    setPosition([
+      Math.floor(Math.random() * 12) + 5,
+      Math.floor(Math.random() * 15) + 8,
+      Math.random() * 20 + 3,
+      Math.random() > 0.4
+    ])
+  }, [])
+  return (
+    <section
+      sx={{
+        scrollSnapAlign: 'start',
+        height: '100vh'
+      }}
+    >
+      <div
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr'],
+          alignItems: 'center',
+          position: 'relative',
+          px: '10vw',
+          height: ['70vh', '70vh', '100vh'],
+          pt: ['18vh', '20vh', '0vh']
+        }}
+        ref={ref}
+      >
+        <Balancer>
+          {inView && (
+            <Fade>
+              <Text
+                variant="subtitle"
+                className="slackey"
+                sx={{
+                  transition: 'opacity 0.3s ease-in-out',
+                  display: 'block'
+                }}
+              >
+                {text}
+              </Text>
+            </Fade>
+            // )
+          )}
+        </Balancer>
+        {inView && (
+          <div
+            sx={{
+              display: ['none', 'none', 'block'],
+              position: 'absolute',
+              top: `${position[3] ? position[0] : position[0] + 60}vh`,
+              left: `${position[1]}vh`,
+              width: '62px',
+              transform: `rotate(${position[2]}deg)`,
+              zIndex: 5,
+              transitionDuration: '0.52s'
+            }}
+          >
+            <Zoom>
+              <img
+                src={sticker1}
+                sx={{ width: '100%', filter: 'drop-shadow(2px 2px #24ffffff)' }}
+              />
+            </Zoom>
+          </div>
+        )}
+
+        {inView && (
+          <div
+            sx={{
+              position: 'absolute',
+              bottom: [
+                '-120px',
+                '-120px',
+                `${position[3] ? position[0] : position[0] + 60}vh`
+              ],
+              right: ['23px', '23px', `${position[1]}vh`],
+              width: ['50px', '81px'],
+              transform: `rotate(-${position[2]}deg)`,
+              zIndex: 5,
+              transitionDuration: '0.52s'
+            }}
+          >
+            <Zoom>
+              <img
+                src={sticker2}
+                sx={{ width: '100%', filter: 'drop-shadow(2px 2px #24ffffff)' }}
+              />
+            </Zoom>
+          </div>
+        )}
+
+        {inView && (
+          <div
+            sx={{
+              position: 'relative',
+              display: ['block', 'block', 'none'],
+              transition: 'opacity 0.3s ease-in-out'
+            }}
+          >
+            <img
+              src={img}
+              alt={imgAlt}
+              sx={{
+                width: ['300px', '350px', '400px'],
+                height: 'auto',
+                margin: 'auto',
+                display: 'block'
+              }}
+            />
+          </div>
+        )}
+
+        <div sx={{ position: 'relative', display: ['none', 'none', 'block'] }}>
+          <img
+            src={img}
+            alt={imgAlt}
+            sx={{
+              width: ['300px', '350px', '400px'],
+              height: 'auto',
+              margin: 'auto',
+              display: 'block',
+              transform: `rotate(${rotation}deg)`
+            }}
+          />
+        </div>
+      </div>
+    </section>
+  )
+}

components/arcade/review/project.js

@@ -0,0 +1,53 @@
+import { Box, Flex, Text } from 'theme-ui'
+
+/** @jsxImportSource theme-ui */
+
+const Project = ({ img, name, projectName, playLink, country }) => {
+  return (
+    <Box
+      as="a"
+      href={playLink}
+      sx={{
+        backgroundColor: '#FFF7E5',
+        borderRadius: '5px',
+        display: 'flex',
+        px: 2,
+        py: 2,
+        my: 2,
+        mr: 3,
+        color: '#35290F',
+        width: '280px',
+        height: '100%',
+        transitionDuration: '0.3s',
+        textDecoration: 'none',
+        border: '#FFF7E5 dashed 1px',
+        '&:hover': {
+            border: '#09AFB4 dashed 1px',
+            transform: 'scale(1.05)',
+        }
+      }}
+    >
+      <Box
+        sx={{
+          backgroundImage: `url('${img}')`,
+          width: '50px',
+          height: '50px',
+          backgroundSize: 'cover',
+          mr: 2
+        }}
+      ></Box>
+      <Box>
+        <Text sx={{ fontWeight: 'bold' }} as="p">
+          {projectName}
+        </Text>
+        <Text as="p" sx={{ fontSize: 1 }}>
+          {name.split(' ')[0]}
+          {country != '' && country != undefined ? `, ${country}` : ''}
+        </Text>
+        {/* <Text>{name.split(" ")[0].length + (country != undefined ? country.length : 0)}</Text> */}
+      </Box>
+    </Box>
+  )
+}
+
+export default Project

components/arcade/review/supporters.js

@@ -0,0 +1,9 @@
+/** @jsxImportSource theme-ui */
+
+export default function Supporters({img}) {
+    return(
+        <div sx={{backgroundColor: '#FAEFD6', display: 'flex', justifyContent: 'center', alignItems: 'center',  borderRadius: '5px', px: 3, py: 2}}>
+            <img src={img} alt={img} sx={{height: '40px', width: 'auto'}}/>
+        </div>
+    )
+}