Savepoint aaaaaaaaaaaaaaa

components/hackathons/features/money.js

@@ -1,5 +1,5 @@
-import { Button, Box, Container, Heading, Text } from 'theme-ui'
-import Link from 'next/link'
+import { Button, Box, Container, Heading, Text, Link } from 'theme-ui'
+import NextLink from 'next/link'
 import { Fade } from 'react-reveal'
 import Icon from '../../icon'
 
@@ -44,9 +44,9 @@ const Content = () => (
           body={
             <>
               In partnership with{' '}
-              <Link href="https://www.firstinspires.org/">
-                <em>FIRST®</em>
-              </Link>
+              <NextLink href="https://www.firstinspires.org/" passHref>
+                <Link sx={{ fontStyle: 'italic' }}>FIRST®</Link>
+              </NextLink>
               , in-person hackathons running on Hack Club Bank are eligible for
               a $500 grant (with proof of venue).
             </>
@@ -67,11 +67,11 @@ const Content = () => (
           debit cards, a domain name, Google Workspace, stickers, and more.`}
         />
       </List>
-      <Link href="/bank/apply" passHref>
+      <NextLink href="/bank/apply" passHref>
         <Button as="a" variant="outlineLg" sx={{ width: 500 }}>
           Apply for Hack Club Bank →
         </Button>
-      </Link>
+      </NextLink>
     </Container>
   </>
 )

components/hackathons/features/slack.js

@@ -37,18 +37,12 @@ const Content = () => (
       </Text>
       .
     </Heading>
-    {/* random note unrealted to this: there should be a thing in the Slack onboarding flow that asks if
-    the user is a hackathon organizer & points them to the #hackathon-organisers channel */}
     <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
-      The
-      <Box as="span" sx={{ bg: 'muted', px: 1, borderRadius: 5 }}>
-        #hackathon-organizers
-      </Box>{' '}
-      channel is where {thousands}+ teenagers around the world share about their
-      own hackathon-organizing experiences and ask for advice. An active
-      channel, you'll have the chance to connect with someone within hours. Ask
-      questions, get help, and share your own experiences. We'll always be there
-      to support you.
+      The {/* <Box as="span" sx={{ bg: 'muted', px: 1, borderRadius: 5 }}> */}
+      #hackathon-organizers
+      {/* </Box> */} channel is where teenagers around the world ask questions
+      and share their own hackathon organizing experiences. You'll connect with
+      other teens, like yourself, who have organized amazing events.
     </Text>
     <Link href="/slack" passHref>
       <Button

components/hackathons/landing.js

@@ -12,6 +12,7 @@ import Fade from 'react-reveal/Fade'
 import ScrollHint from '../scroll-hint'
 import Image from 'next/image'
 import hero from '../../public/hackathons/mahacks.jpeg'
+import Icon from '../icon'
 
 export default function Landing() {
   return (
@@ -48,6 +49,7 @@ export default function Landing() {
               >
                 <Button
                   as="a"
+                  target="_blank"
                   variant="cta"
                   href="https://hackathons.hackclub.com"
                   sx={{
@@ -62,7 +64,8 @@ export default function Landing() {
                     fontSize: [2, 3]
                   }}
                 >
-                  Looking for hackathons?
+                  Looking for hackathons?{' '}
+                  <Icon glyph="external" size={30} sx={{ pl: 1, pb: 1 }} />
                 </Button>
                 {/* <Text as="p" variant="headline" sx={{ mt: 0, color: 'muted' }}>
                   Leading text

components/hackathons/organize.js

@@ -0,0 +1,49 @@
+import { Box, Container, Heading, Text, Button, Card } from 'theme-ui'
+import Icon from '../icon'
+import NextLink from 'next/link'
+import ScrollHint from '../scroll-hint'
+
+import theme from '../../lib/theme'
+
+export default function Organize() {
+  return (
+    <Box
+      as="section"
+      sx={{
+        bg: 'white',
+        my: [4, 5]
+      }}
+      variant="layout.copy"
+    >
+      <Card
+        sx={{
+          textAlign: 'center',
+          color: 'white',
+          backgroundImage: t => t.util.gx('green', 'blue'),
+          //   backgroundImage:
+          //     'url(https://cloud-d86slt0pv-hack-club-bot.vercel.app/0dsc_1269.jpg)',
+          objectFit: 'cover'
+        }}
+      >
+        <Icon glyph="idea" size={72} sx={{ color: 'white' }} />
+        <Heading variant="headline">Want to organize a hackathon?</Heading>
+        <Text
+          variant="subtitle"
+          sx={{ lineHeight: 'caption', mb: 3, display: 'inline-block' }}
+        >
+          This semester, Hack Club is providing the tools and resources to high
+          schoolers around the world to bring the magic of hackathons to their
+          lcoal communities.
+        </Text>
+
+        <Icon glyph="down-caret" size={24} sx={{ color: 'white' }} />
+
+        {/* <NextLink href="/slack" passHref>
+          <Button variant="cta" sx={{ py: 2, px: 3, fontSize: 2 }} as="a">
+            Join our Slack
+          </Button>
+        </NextLink> */}
+      </Card>
+    </Box>
+  )
+}

pages/hackathons.js

@@ -1,19 +1,17 @@
-import { Box, Container, Button, Heading, Text } from 'theme-ui'
+import { Box, Container } from 'theme-ui'
 import Meta from '@hackclub/meta'
 import Head from 'next/head'
 import ForceTheme from '../components/force-theme'
 import Nav from '../components/nav'
 import Footer from '../components/footer'
 
-import Icon from '@hackclub/icons'
-import NextLink from 'next/link'
-
 import Rundown from '../components/hackathons/rundown'
 import Philosophy from '../components/hackathons/philosophy'
 import Slack from '../components/hackathons/features/slack'
 import Money from '../components/hackathons/features/money'
 import Landing from '../components/hackathons/landing'
 import Marketing from '../components/hackathons/features/marketing'
+import Organize from '../components/hackathons/organize'
 
 export default function Hackathons() {
   return (
@@ -30,37 +28,7 @@ export default function Hackathons() {
         <Box as="main">
           <Landing />
           <Philosophy />
-
-          <Box
-            as="section"
-            sx={{
-              color: 'black',
-              bg: 'white',
-              py: [4, 5]
-            }}
-          >
-            <Container variant="copy" sx={{ textAlign: 'center' }}>
-              <Icon glyph="message-new" size={72} sx={{ color: 'blue' }} />
-              <Heading variant="headline">
-                Want to organize a hackathon?
-              </Heading>
-              <Text
-                variant="subtitle"
-                sx={{ lineHeight: 'caption', mb: 3, display: 'inline-block' }}
-              >
-                This semester, Hack Club is providing the tools and resources to
-                high schoolers around the world to bring the magic of hackathons
-                to their lcoal communities.
-              </Text>
-
-              <NextLink href="/slack" passHref>
-                <Button variant="cta" sx={{ py: 2, px: 3, fontSize: 2 }} as="a">
-                  Join our Slack
-                </Button>
-              </NextLink>
-            </Container>
-          </Box>
-
+          <Organize />
           <Money />
           <Slack />
           <Marketing />