hackclub · CodeWithShreyans · Jun 23, 2024
diff --git a/components/announcement.js b/components/announcement.js
@@ -1,7 +1,7 @@
 import { Card, Text, Box } from 'theme-ui'
 import { keyframes } from '@emotion/react'
 import Icon from './icon'
-import Image from 'next/image'
+import Image from "next/legacy/image"
 
 const unfold = keyframes({
   from: { transform: 'scaleY(0)' },

diff --git a/components/announcements/cta.js b/components/announcements/cta.js
@@ -28,13 +28,13 @@ export default function SlackCTA() {
           </Text>
           <br />
           <br />
-          <NextLink href="/" passHref>
+          <NextLink href="/" passHref legacyBehavior>
             <Button bg="cyan" as="a">
               Learn more
             </Button>
           </NextLink>
         </Box>
       </Grid>
     </Box>
-  )
+  );
 }
diff --git a/components/arcade/projects.js b/components/arcade/projects.js
@@ -14,7 +14,7 @@ import {
   Image
 } from 'theme-ui'
 import Photo from '../../components/photo'
-import NextImage from 'next/image'
+import NextImage from "next/legacy/image"
 import Marquee from 'react-marquee-slider'
 import Photo1 from '../../public/winter/1.jpeg'
 import Photo2 from '../../public/winter/2.png'

diff --git a/components/background-image.js b/components/background-image.js
@@ -1,5 +1,5 @@
 import { Box } from 'theme-ui'
-import Image from 'next/image'
+import Image from "next/legacy/image"
 
 /*
  * Use this component inside a container with CSS:

diff --git a/components/comma.js b/components/comma.js
@@ -1,5 +1,5 @@
 export default function Comma({ children }) {
   return children
     ? children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-    : ''
+    : '';
 }
diff --git a/components/fiscal-sponsorship/features.js b/components/fiscal-sponsorship/features.js
@@ -1,7 +1,7 @@
 import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
 import Icon from '../icon'
 import { Balancer } from 'react-wrap-balancer'
-import Image from 'next/image'
+import Image from "next/legacy/image"
 import imgLaptop from '../../public/fiscal-sponsorship/laptop.png'
 
 export default function Features() {

diff --git a/components/fiscal-sponsorship/first/features.js b/components/fiscal-sponsorship/first/features.js
@@ -1,7 +1,7 @@
 import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
 import Icon from '../../icon'
 import Masonry from 'react-masonry-css'
-import NextImage from 'next/image'
+import NextImage from "next/legacy/image"
 
 import Fade from 'react-reveal/Fade'
 

diff --git a/components/fiscal-sponsorship/tooltip.js b/components/fiscal-sponsorship/tooltip.js
@@ -8,7 +8,7 @@ const addClassNameToChildren = (children, className) =>
   )
 
 const tooltip = direction =>
-  function Tooltip({ children, text, id }) {
+  (function Tooltip({ children, text, id }) {
     const escapedText = text.replace(/'/g, "\\'")
     const directionalStyles = {
       e: `
@@ -89,7 +89,7 @@ const tooltip = direction =>
         {children}
       </>
     )
-  }
+  })
 
 const Tooltip = tooltip()
 Tooltip.N = tooltip('n')

diff --git a/components/flag.js b/components/flag.js
@@ -58,7 +58,7 @@ const Base = styled('a')`
 `
 
 const Flag = props => (
-  <Link href="/" passHref>
+  <Link href="/" passHref legacyBehavior>
     <Base href="https://hackclub.com/" title="Homepage" {...props} />
   </Link>
 )

diff --git a/components/footer.js b/components/footer.js
@@ -90,22 +90,22 @@ const Footer = ({
           <Heading as="h2" variant="subheadline" mb={3}>
             Hack&nbsp;Club
           </Heading>
-          <NextLink href="/philosophy" passHref>
+          <NextLink href="/philosophy" passHref legacyBehavior>
             <Link>Philosophy</Link>
           </NextLink>
-          <NextLink href="/team" passHref>
+          <NextLink href="/team" passHref legacyBehavior>
             <Link>Our Team & Board</Link>
           </NextLink>
-          <NextLink href="/jobs" passHref>
+          <NextLink href="/jobs" passHref legacyBehavior>
             <Link>Jobs</Link>
           </NextLink>
-          <NextLink href="/brand" passHref>
+          <NextLink href="/brand" passHref legacyBehavior>
             <Link>Branding</Link>
           </NextLink>
-          <NextLink href="/press" passHref>
+          <NextLink href="/press" passHref legacyBehavior>
             <Link>Press Inquiries</Link>
           </NextLink>
-          <NextLink href="/philanthropy" passHref>
+          <NextLink href="/philanthropy" passHref legacyBehavior>
             <Link>Donate</Link>
           </NextLink>
         </Box>

diff --git a/components/hackathons/features/marketing.js b/components/hackathons/features/marketing.js
@@ -27,7 +27,7 @@ const Content = () => (
       the first Google search result for "high school hackathons." Your event
       will also be emailed to a network of high school hackers in your area.
     </Text>
-    <Link href="https://hackathons.hackclub.com" passHref>
+    <Link href="https://hackathons.hackclub.com" passHref legacyBehavior>
       <Button
         as="a"
         variant="ctaLg"

diff --git a/components/hackathons/features/money.js b/components/hackathons/features/money.js
@@ -34,7 +34,7 @@ const Content = () => (
             <>
               Running on HCB? Get a $500 grant once you have a venue, provided
               by Hack Club.
-              <NextLink href="/hackathons/grant">
+              <NextLink href="/hackathons/grant" legacyBehavior>
                 <Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
               </NextLink>
             </>
@@ -56,7 +56,7 @@ const Content = () => (
           debit cards, a domain name, stickers, and more.`}
         />
       </List>
-      <NextLink href="/fiscal-sponsorship" passHref>
+      <NextLink href="/fiscal-sponsorship" passHref legacyBehavior>
         <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
           Apply&nbsp;
           <Box as="span" sx={{ display: ['none', 'inline', ''] }}>

diff --git a/components/hackathons/features/slack.js b/components/hackathons/features/slack.js
@@ -58,7 +58,7 @@ const Content = () => (
       own hackathon organizing experiences—from finding a venue to securing
       sponsorships to ordering food.
     </Text>
-    <NextLink href="/slack" passHref>
+    <NextLink href="/slack" passHref legacyBehavior>
       <Button
         as="a"
         variant="ctaLg"

diff --git a/components/hackathons/grant/apply.js b/components/hackathons/grant/apply.js
@@ -3,7 +3,7 @@ import { Link, Button, Card } from 'theme-ui'
 import { Slide } from 'react-reveal'
 import Zoom from 'react-reveal/Zoom'
 import MSparkles from '../../sparkles/money'
-import Image from 'next/image'
+import Image from "next/legacy/image"
 /** @jsxImportSource theme-ui */
 
 const Photo = ({

diff --git a/components/hackathons/keep-exploring.js b/components/hackathons/keep-exploring.js
@@ -3,92 +3,90 @@ import Link from 'next/link'
 import Icon from '../icon'
 
 export default function KeepExploring() {
-  return (
-    <>
-      <Box
+  return <>
+    <Box
+      sx={{
+        backgroundImage: t => t.util.gx('orange', 'red'),
+        margin: 'auto',
+        maxWidth: '90%',
+        my: 4,
+        borderRadius: 8,
+        color: 'white',
+        textAlign: 'center',
+        py: 5
+      }}
+    >
+      <Heading
+        as="h1"
         sx={{
-          backgroundImage: t => t.util.gx('orange', 'red'),
-          margin: 'auto',
-          maxWidth: '90%',
-          my: 4,
-          borderRadius: 8,
-          color: 'white',
-          textAlign: 'center',
-          py: 5
+          fontSize: 6,
+          mb: 3,
+          display: 'flex',
+          justifyContent: 'center',
+          alignContent: 'center'
         }}
       >
-        <Heading
-          as="h1"
+        Keep exploring{' '}
+        <Icon
+          glyph="explore"
+          size={70}
+          sx={{ display: ['none', 'flex', 'flex'] }}
+        />
+      </Heading>
+      <Link href="/slack" passHref legacyBehavior>
+        <Button
           sx={{
-            fontSize: 6,
-            mb: 3,
-            display: 'flex',
-            justifyContent: 'center',
-            alignContent: 'center'
+            bg: 'white',
+            color: 'red',
+            mr: [0, 3],
+            mb: [3, 0],
+            fontSize: [2, 3]
           }}
+          as="a"
         >
-          Keep exploring{' '}
-          <Icon
-            glyph="explore"
-            size={70}
-            sx={{ display: ['none', 'flex', 'flex'] }}
-          />
-        </Heading>
-        <Link href="/slack" passHref>
-          <Button
-            sx={{
-              bg: 'white',
-              color: 'red',
-              mr: [0, 3],
-              mb: [3, 0],
-              fontSize: [2, 3]
-            }}
-            as="a"
-          >
-            Meet other hackers
-          </Button>
-        </Link>
+          Meet other hackers
+        </Button>
+      </Link>
 
-        <Link href="https://hackathons.hackclub.com" passHref>
-          <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
-            Discover more hackathons
-          </Button>
-        </Link>
-      </Box>
+      <Link href="https://hackathons.hackclub.com" passHref legacyBehavior>
+        <Button sx={{ bg: 'white', color: 'red', fontSize: [2, 3] }} as="a">
+          Discover more hackathons
+        </Button>
+      </Link>
+    </Box>
 
-      <Container>
-        <Grid
-          columns={[null, '1fr 2fr']}
-          my={[3, 5]}
-          sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+    <Container>
+      <Grid
+        columns={[null, '1fr 2fr']}
+        my={[3, 5]}
+        sx={{ maxWidth: 'copyUltra', mx: 'auto' }}
+      >
+        <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
+          Behind the scenes...
+        </Heading>
+        <Text
+          as="p"
+          variant="lead"
+          sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
         >
-          <Heading as="h3" variant="headline" sx={{ fontSize: [4, 5], mb: 0 }}>
-            Behind the scenes...
-          </Heading>
-          <Text
-            as="p"
-            variant="lead"
-            sx={{ mt: 0, a: { variant: 'styles.a', color: 'blue' } }}
+          Teenagers organize hackathons like{' '}
+          <a
+            href="https://assemble.hackclub.com"
+            target="_blank"
+            rel="noreferrer"
           >
-            Teenagers organize hackathons like{' '}
-            <a
-              href="https://assemble.hackclub.com"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Assemble
-            </a>{' '}
-            &{' '}
-            <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
-              Windy&nbsp;City&nbsp;Hacks
-            </a>
-            . The&nbsp;hack’s the limit.
-            <Box as="div" sx={{ mt: 3 }}></Box>
-            Hack Club is providing grants, support, and more, to help you run
-            the next amazing hackathon.
-          </Text>
-        </Grid>
-      </Container>
-    </>
-  )
+            Assemble
+          </a>{' '}
+          &{' '}
+          <a href="https://windyhacks.com" target="_blank" rel="noreferrer">
+            Windy&nbsp;City&nbsp;Hacks
+          </a>
+          . The&nbsp;hack’s the limit.
+          <Box as="div" sx={{ mt: 3 }}></Box>
+          Hack Club is providing grants, support, and more, to help you run
+          the next amazing hackathon.
+        </Text>
+      </Grid>
+    </Container>
+  </>;
 }
diff --git a/components/hackathons/landing.js b/components/hackathons/landing.js
@@ -1,7 +1,7 @@
 import { Box, Button, Heading, Text, Card } from 'theme-ui'
 import Fade from 'react-reveal/Fade'
 import ScrollHint from '../scroll-hint'
-import Image from 'next/image'
+import Image from "next/legacy/image"
 import hero from '../../public/hackathons/assemble.JPG'
 import Icon from '../icon'