weee

components/index/cards/hackers-wanted.js

@@ -0,0 +1,77 @@
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+
+/** @jsxImportSource theme-ui */
+
+const styled = `
+h3 {
+    font-family: Terminal_Grotesk;
+}
+`
+
+export default function HackersWanted() {
+  return (
+    <CardModel
+      color="white"
+      sx={{
+        backgroundSize: 'cover',
+        backgroundColor: '#17171d',
+        backgroundRepeat: 'repeat',
+        background: 'radial-gradient(#fff 1px,transparent 1px)',
+        backgroundSize: '24px 24px'
+      }}
+      position={[null, 'bottom', 'bottom']}
+      highlight="#ffffff"
+    >
+      <Text as="h3" sx={{ fontSize: '0.9em' }}>
+        Hackers Wanted
+      </Text>
+      <Grid columns={[1, '1fr 0.4fr']}>
+        <Box>
+          <Text
+            as="p"
+            variant="subtitle"
+            sx={{ zIndex: 2, position: 'relative' }}
+          >
+            An 8 minute expression of what it means to be a "hacker".
+          </Text>
+          <Text
+            as="p"
+            variant="subtitle"
+            sx={{ zIndex: 2, position: 'relative' }}
+          >
+            Some people are allergic to unthinking rules and outdated systems.
+            They want the world to be better, more magical, more free. Some also
+            have the creative energy to do something about it—without the need
+            for instructions, and without needing to be asked. These people are
+            hackers. This is our love letter to them, on behalf of a society
+            that’s long failed them.
+          </Text>
+        </Box>
+        <Box>
+          <Flex
+            sx={{
+              flexDirection: 'column',
+              mt: [3, 3, 4],
+              alignItems: 'end',
+              justifyContent: 'flex-end'
+            }}
+          >
+            <Buttons
+              icon="view"
+              href="/hackers-wanted"
+              target="_blank"
+              rel="noopener"
+              primary="#484137"
+              id="48"
+            >
+              Read more...
+            </Buttons>
+          </Flex>
+        </Box>
+      </Grid>
+      <style>{styled}</style>
+    </CardModel>
+  )
+}

lib/carousel.json

@@ -97,5 +97,14 @@
     "description": "An open source drawing machine and online editor for generative art",
     "img": "https://emoji.slack-edge.com/T0266FRGM/tw_pencil2/c6afadc2280e571d.png",
     "link": "https://haxidraw.hackclub.com"
+  },
+  {
+    "background": "dark",
+    "titleColor": "white",
+    "descriptionColor": "white",
+    "title": "Hackers Wanted",
+    "description": "Our open love letter to hackers",
+    "img": "https://cloud-gbwqdsj6z-hack-club-bot.vercel.app/0new_piskel-4.png.png",
+    "link": "/hackers-wanted"
   }
 ]

pages/api/address.js

@@ -1,4 +1,3 @@
-
 import AirtablePlus from 'airtable-plus'
 
 const airtable = new AirtablePlus({
@@ -8,43 +7,15 @@ const airtable = new AirtablePlus({
 })
 
 export default async function handler(req, res) {
-  await airtable.create({
-    Name: req.body,
-    Address1:req.body.Address1,
-    Address2:req.body.Address2,
-    City:req.body.City,
-    State:req.body.State,
-    Postal:req.body.Postal,
-    Country:req.body.Country
- })
+  if (req.method === 'POST') {
+    await airtable.create({
+      Name: req.body.Name,
+      Address1: req.body.Address1,
+      Address2: req.body.Address2,
+      City: req.body.City,
+      State: req.body.State,
+      Postal: req.body.Postal,
+      Country: req.body.Country
+    })
+  }
 }
-
-// var Airtable = require('airtable')
-// var base = new Airtable({ apiKey: 'keyQSNkQEsd4VBPHt' }).base(
-//   'appdPydXlWO2ZAhhV'
-// )
-
-// base('address').create(
-//   [
-//     {
-//       fields: {
-//         Name: req.body.Name,
-//         Address1: req.body.Address1,
-//         Address2: req.body.Address2,
-//         City: req.body.City,
-//         State: req.body.State,
-//         Postal: req.body.Postal,
-//         Country: req.body.Country
-//       }
-//     },
-//   ],
-//   function (err, records) {
-//     if (err) {
-//       console.error(err)
-//       return
-//     }
-//     records.forEach(function (record) {
-//       console.log(record.getId())
-//     })
-//   }
-// )

pages/index.js

@@ -232,10 +232,8 @@ function Page({
                   }}
                 >
                   <Text
-                    onClick={() => {
-                      setHover(false)
-                      !reveal ? setReveal(true) : setReveal(false)
-                    }}
+                  as="a"
+                  href="/hackers-wanted"
                     sx={{
                       // lineHeight: 0.875,
                       px: 2,
@@ -346,7 +344,7 @@ function Page({
               in-person to make things with code. Whether you’re a beginner
               programmer or have years of experience, there’s a place for you at
               Hack&nbsp;Club. Read about our{' '}
-              <Link href="/philosophy" target="_blank" rel="noopener">
+              <Link href="/hackers-wanted" target="_blank" rel="noopener">
                 hacker ethic
               </Link>
               .