add language on what hack club is :) (#637)

components/footer.js

@@ -58,8 +58,8 @@ const Footer = ({ dark = false, children, ...props }) => (
     as="footer"
     {...props}
   >
-    {children}
     <Container px={[3, null, 4]}>
+    {children}
       <Grid
         as="article"
         gap={[2, 4]}

components/winter/footer.js

@@ -0,0 +1,44 @@
+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}>
+      A project by <a href="https://hackclub.com/">Hack Club</a>.
+    </Heading>
+    <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
+      Hack Club is a registered 501(c)3 nonprofit organization that supports a
+      network of 20k+ technical high schoolers. We believe you learn best by
+      building so we're removing barriers to hardware access so any teenager can
+      explore. In the past few years, we've{' '}
+      <Link href="https://summer.hackclub.com" target="_blank">
+        partnered with GitHub to give away $50k of hardware
+      </Link>
+      ,{' '}
+      <Link
+        href="https://github.com/hackclub/the-hacker-zephyr"
+        target="_blank"
+      >
+        hosted the world's longest hackathon on land
+      </Link>
+      , and{' '}
+      <Link href="https://github.com/hackclub/assemble" target="_blank">
+        brought 183 teenagers to SF for a hackathon
+      </Link>
+      .
+    </Text>
+    <Text as="p" variant="caption" mb={1}>
+      Illustrations by Ripley.
+    </Text>
+  </Box>
+)
+
+const WinterFooter = () => {
+  return (
+    <Footer>
+      <Description />
+    </Footer>
+  )
+}
+
+export default WinterFooter

components/winter/landing.js

@@ -111,7 +111,7 @@ export default function Landing({ rsvpCount }) {
                 }}
               >
                 <Dot />
-                {rsvpCount} more RSVPs till the start of a hacker's
+                RSVP to join {rsvpCount} hackers for a
               </Heading>
             </Fade>
             <Fade left cascade>

components/winter/timeline.js

@@ -113,8 +113,8 @@ export default function RealTimeline() {
     <Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
       <Step
         icon="post"
-        name="Instructions sent out on how to submit your hardware plan to qualify for the grant."
-        duration="When we reach 500 RSVPs"
+        name="Instructions will be sent out on how to submit your hardware plan to qualify for the grant."
+        duration="Now"
       />
       <Step
         icon="send"

pages/winter.js

@@ -14,7 +14,7 @@ import {
   Flex
 } from 'theme-ui'
 import Snowfall from 'react-snowfall'
-import Footer from '../components/footer'
+import WinterFooter from '../components/winter/footer'
 import FadeIn from '../components/fade-in'
 import { useState } from 'react'
 import ForceTheme from '../components/force-theme'
@@ -51,7 +51,7 @@ export function Winter() {
         <Snowfall />
         <ForceTheme theme="light" />
         {/* filter out rsvps that are "invalid" */}
-        <Landing rsvpCount={500 - rsvpCount} />
+        <Landing rsvpCount={rsvpCount} />
         <Breakdown />
         <Projects />
         <InfoGrid />
@@ -125,19 +125,8 @@ export function Winter() {
         {/* Timeline */}
 
         <Recap />
-        <Container
-          sx={{
-            margin: 'auto',
-            fontStyle: 'italic',
-            color: 'snow',
-            mb: 3,
-            textAlign: 'left'
-          }}
-        >
-          Illustrations by Ripley
-        </Container>
         {/* <Signup /> */}
-        <Footer />
+        <WinterFooter />
       </Box>
     </>
   )