Added Haxidraw card & slide (#821)

* Added Haxidraw card

* Removed github link

components/index/cards/button.js

@@ -10,6 +10,7 @@ export default function Buttons({
   content,
   link,
   primary,
+  overrideColor,
   ...props
 }) {
   let fontWeight = primary ? '700' : '400'
@@ -26,7 +27,7 @@ export default function Buttons({
         data-effect="solid"
         data-tip
         sx={{
-          background: primary || 'rgb(255, 255, 255, 0.3)',
+          background: primary || (overrideColor || 'rgb(255, 255, 255, 0.3)'),
           borderRadius: '100px',
           border: 'none',
           display: 'flex',

components/index/cards/haxidraw.js

@@ -0,0 +1,72 @@
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
+import Buttons from './button'
+import styled from '@emotion/styled'
+import RelativeTime from 'react-relative-time'
+
+/** @jsxImportSource theme-ui */
+
+export default function Haxidraw() {
+  return (
+    <CardModel
+      github_link="https://github.com/hackclub/haxidraw/"
+      color="white"
+      sx={{
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5',
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
+      }}
+      position={[null, 'bottom', 'bottom']}
+      highlight="#271932"
+      filter="brightness(0.8)"
+    >
+    <Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
+     Haxidraw
+    </Text>
+      <Grid columns={[1, 2]}>
+        <Box>
+        <Text
+            as="p"
+            variant="subtitle"
+            sx={{ zIndex: 2, position: 'relative' }}
+          >
+            Haxidraw is a W.I.P. open source drawing machine and online editor,
+            designed to be a fun and beginner friendly
+            introduction to digital fabrication and generative art.
+        </Text>
+        </Box>
+        <Box>
+          <Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
+            <Buttons
+              id="51"
+              icon="align-left"
+              link="https://haxidraw.hackclub.com"
+              primary="rgba(255, 255, 255, 0.9)"
+              sx={{ color: 'black' }}
+            >
+              Learn more
+            </Buttons>
+            <Buttons
+              id="52"
+              icon="code"
+              link="https://haxidraw.hackclub.dev"
+              primary="rgba(255, 255, 255, 0.9)"
+              sx={{ color: 'black' }}
+            >
+              Create something in the editor
+            </Buttons>
+            <Buttons
+              id="54"
+              icon="slack"
+              link="/slack"
+              overrideColor="rgba(255, 255, 255, 0.7)"
+              sx={{ color: 'black' }}
+            >
+              Share your creations and chat on Slack
+            </Buttons>
+          </Flex>
+        </Box>
+      </Grid>
+    </CardModel>
+  )
+}

lib/carousel.json

@@ -79,5 +79,14 @@
     "description": "Join 1k teens designing PCBs, learning hardware, and building electronics",
     "img": "https://cloud-jrox24mrn.vercel.app/orpheus_leap_micro_final.png",
     "link": "/onboard"
+  }, 
+  {
+    "background": "dark",
+    "titleColor": "blue",
+    "textColor": "white",
+    "title": "Haxidraw",
+    "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"
   }
 ]

pages/index.js

@@ -37,6 +37,7 @@ import Icon from '../components/icon'
 import GitHub from '../components/index/github'
 import Photo from '../components/photo'
 import Comma from '../components/comma'
+import Haxidraw from '../components/index/cards/haxidraw'
 
 /** @jsxImportSource theme-ui */
 
@@ -752,6 +753,7 @@ function Page({
                 gameImage={gameImage}
                 gameImage1={gameImage1}
               />
+              <Haxidraw/>
               <Sinerider delay={200} stars={stars.sinerider.stargazerCount} />
               <Box as="section" id="sprig">
                 <SprigConsole