change header + add spotlight effect (#1051)

* header

* small changes

* add bg

components/nav.js

@@ -146,10 +146,10 @@ const Navigation = props => (
       <Link>Hackathons</Link>
     </NextLink>
     <NextLink href="/slack" passHref>
-      <Link>Slack</Link>
+      <Link>Community</Link>
     </NextLink>
     <Link href="https://scrapbook.hackclub.com/">Scrapbook</Link>
-    <Link href="https://jams.hackclub.com/">Jams</Link>
+    <Link href="https://jams.hackclub.com/">Workshops</Link>
     <NextLink href="/onboard" passHref>
       <Link>OnBoard</Link>
     </NextLink>

components/secret.js

@@ -15,7 +15,7 @@ export default function Secret({ reveal, ...props }) {
         right: 5,
         bottom: 0,
         transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
-        transition: '1s',
+        transition: '2s',
         zIndex: 3
       }}
       {...props}

pages/index.js

@@ -1,7 +1,17 @@
-import {Badge, Box, Button, Card, Flex, Grid, Heading, Link, Text} from 'theme-ui'
+import {
-import React, {useEffect, useRef, useState} from 'react'
+  Badge,
+  Box,
+  Button,
+  Card,
+  Flex,
+  Grid,
+  Heading,
+  Link,
+  Text
+} from 'theme-ui'
+import React, { useEffect, useRef, useState } from 'react'
 import Head from 'next/head'
-import {useRouter} from 'next/router'
+import { useRouter } from 'next/router'
 import Meta from '@hackclub/meta'
 import Nav from '../components/nav'
 import BGImg from '../components/background-image'
@@ -120,6 +130,24 @@ function Page({
     }
   }, [count, images.length])
 
+  // Spotlight effect
+  const spotlightRef = useRef()
+  useEffect(() => {
+    const handler = event => {
+      var rect = document.getElementById('spotlight').getBoundingClientRect()
+      var x = event.clientX - rect.left //x position within the element.
+      var y = event.clientY - rect.top //y position within the element.
+
+      spotlightRef.current.style.background = `radial-gradient(
+				circle at ${x}px ${y}px,
+				rgba(132, 146, 166, 0) 10px,
+				rgba(249, 250, 252, 0.9) 80px
+			)`
+    }
+    window.addEventListener('mousemove', handler)
+    return () => window.removeEventListener('mousemove', handler)
+  }, [])
+
   return (
     <>
       <Meta
@@ -148,15 +176,15 @@ function Page({
           reveal={reveal}
           onMouseEnter={() => {
             setHover(true)
+            console.log(hover)
           }}
           onMouseOut={() => {
-            setHover(false)
+            setReveal(false)
           }}
         />
         <Konami action={easterEgg}>
           {"Hey, I'm an Easter Egg! Look at me!"}
         </Konami>
-
         <Box
           as="header"
           sx={{
@@ -228,7 +256,6 @@ function Page({
                 >
                   <Text
                     onClick={() => {
-                      setHover(false)
                       !reveal ? setReveal(true) : setReveal(false)
                     }}
                     sx={{
@@ -586,21 +613,38 @@ function Page({
         </Box>
         <Carousel cards={carouselCards} />
         <Box
+          id="spotlight"
           as="section"
           sx={{
-            background: 'snow',
+            backgroundImage: `
-            backgroundImage: `url('https://icons.hackclub.com/api/icons/0xF4F7FB/glyph:rep.svg')`,
+              linear-gradient(rgba(249, 250, 252, 0.7), rgba(249, 250, 252, 0.7)),
+              url('https://icons.hackclub.com/api/icons/0x8492a6/glyph:rep.svg')
+            `,
             backgroundSize: '40px 40px',
             backgroundRepeat: 'repeat',
-            backgroundPosition: '10% 10%'
+            position: 'relative'
           }}
         >
+          <Box
+            ref={spotlightRef}
+            sx={{
+              position: 'absolute',
+              zIndex: 2,
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              bg: 'snow',
+              pointerEvents: 'none'
+            }}
+          />
           <Box
             sx={{
               position: 'relative',
               width: '90vw',
               maxWidth: 'layout',
-              margin: 'auto'
+              margin: 'auto',
+              zIndex: 5
             }}
             py={[4, 4, 5]}
           >
@@ -1068,78 +1112,79 @@ function Page({
             </Grid>
           </Box>
         </Box>
-      </Box>
+
-      {new URL(asPath, 'http://example.com').searchParams.get('gen') ===
+        {new URL(asPath, 'http://example.com').searchParams.get('gen') ===
-        'z' && (
+          'z' && (
-        <>
+          <>
-          <Box
-            sx={{
-              position: 'fixed',
-              top: 0,
-              width: '100%',
-              zIndex: 1000
-            }}
-          >
             <Box
               sx={{
-                position: 'relative',
+                position: 'fixed',
-                margin: 'auto',
+                top: 0,
-                width: 'fit-content',
+                width: '100%',
+                zIndex: 1000
+              }}
+            >
+              <Box
+                sx={{
+                  position: 'relative',
+                  margin: 'auto',
+                  width: 'fit-content',
+                  lineHeight: 0
+                }}
+              >
+                <iframe
+                  width="560"
+                  height="315"
+                  src="https://www.youtube-nocookie.com/embed/sJNK4VKeoBM?si=zvhDKhb9C5G2b4TJ&controls=1&autoplay=1&mute=1"
+                  title="YouTube video player"
+                  frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen
+                ></iframe>
+              </Box>
+            </Box>
+            <Box
+              sx={{
+                position: 'fixed',
+                bottom: 0,
+                right: 0,
+                zIndex: 1000,
                 lineHeight: 0
               }}
             >
               <iframe
                 width="560"
                 height="315"
-                src="https://www.youtube-nocookie.com/embed/sJNK4VKeoBM?si=zvhDKhb9C5G2b4TJ&controls=1&autoplay=1&mute=1"
+                src="https://www.youtube-nocookie.com/embed/ChBg4aowzX8?si=X2J_T95yiaKXB2q4&controls=1&autoplay=1&mute=1"
                 title="YouTube video player"
                 frameborder="0"
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                 allowfullscreen
               ></iframe>
             </Box>
-          </Box>
+            <Box
-          <Box
+              sx={{
-            sx={{
+                position: 'fixed',
-              position: 'fixed',
+                bottom: 0,
-              bottom: 0,
+                left: 0,
-              right: 0,
+                zIndex: 1000,
-              zIndex: 1000,
+                lineHeight: 0
-              lineHeight: 0
+              }}
-            }}
+            >
-          >
+              <iframe
-            <iframe
+                width="560"
-              width="560"
+                height="315"
-              height="315"
+                src="https://www.youtube-nocookie.com/embed/JDQr1vICu54?si=U6-9AFtk7EdTabfp&autoplay=1&mute=1"
-              src="https://www.youtube-nocookie.com/embed/ChBg4aowzX8?si=X2J_T95yiaKXB2q4&controls=1&autoplay=1&mute=1"
+                title="YouTube video player"
-              title="YouTube video player"
+                frameborder="0"
-              frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen
-              allowfullscreen
+              ></iframe>
-            ></iframe>
+            </Box>
-          </Box>
+          </>
-          <Box
+        )}
-            sx={{
+        <MailingList />
-              position: 'fixed',
+      </Box>
-              bottom: 0,
-              left: 0,
-              zIndex: 1000,
-              lineHeight: 0
-            }}
-          >
-            <iframe
-              width="560"
-              height="315"
-              src="https://www.youtube-nocookie.com/embed/JDQr1vICu54?si=U6-9AFtk7EdTabfp&autoplay=1&mute=1"
-              title="YouTube video player"
-              frameborder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-              allowfullscreen
-            ></iframe>
-          </Box>
-        </>
-      )}
-      <MailingList />
       <Footer
         dark
         sx={{
@@ -1225,7 +1270,7 @@ export async function getStaticProps() {
   } catch (error) {
     hackathonsData = [] // or some default value if an error occurs
   }
-  hackathonsData.sort((a, b) => new Date(a.start) - new Date(b.start));
+  hackathonsData.sort((a, b) => new Date(a.start) - new Date(b.start))
 
   let events = await fetch(
     'https://events.hackclub.com/api/events/upcoming/'