updated design

hackclub · Nov 24, 2023 · 0b23d14 · 0b23d14
1 parent 7690aec
commit 0b23d14
Showing 1 changed file with 64 additions and 47 deletions.
diff --git a/components/index/cards/onboard.js b/components/index/cards/onboard.js
@@ -1,36 +1,62 @@
+import { useEffect, useState } from 'react'
+import { Box, Flex, Grid, Text } from 'theme-ui'
 import CardModel from './card-model'
-import { Box, Flex, Text } from 'theme-ui'
 import Buttons from './button'
 
 // todo:
-// - get magic dino to work
 // - come up with a copy
-// - better buttons!
-// - make project count live
+// - better buttons! ✅
+// - make project count live ✅
+// - buttons show a tooltip for some reason. fix that!
+// - could have a better icon for the learn pcb design button
+
+/*function Project({ description }) {
+  // 💁 pass in props to make this component reusable, and adjust design. this is just a placeholder for now!
+  return (
+    <Card sx={{ background: 'black', placeItems: 'center', display: 'grid' }}>
+      <Text sx={{ color: 'white', fontWeight: 'normal' }} as="h3">{description}</Text>
+    </Card>
+  )
+}*/
+
+export default function Onboard({ stars }) {
+  const [projects, setProjects] = useState(0)
+
+  useEffect(() => {
+    fetch('https://api.github.com/search/issues?q=repo:hackclub/onboard+is:pr+is:merged+label:Submission')
+      .then(response => response.json())
+      .then(data => setProjects(data.total_count))
+  }, [])
 
-export default function Onboard({ projects }) {
   return (
     <CardModel
       sx={{
-        backgroundColor: "#000",
-        backgroundImage: `url('https://cloud-fyrwj5rn5-hack-club-bot.vercel.app/0pcb.svg')`,
+        backgroundColor: "rgba(0,0,0)",
+        backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.4) 50%), url('https://cloud-fyrwj5rn5-hack-club-bot.vercel.app/0pcb.svg')`,
         backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
       }}
+      github_link="https://github.com/hackclub/onboard/"
+      color="white"
+      highlight="#87ffa1"
+      stars={stars}
     >
-      <Flex>
+      <Text
+        variant="title"
+        as="h3"
+        sx={{
+          fontSize: ["36px", 4, 5],
+          maxWidth: "copyPlus",
+          textShadow: "0 0 30px rgba(42, 252, 88, 0.6)",
+          color: "#87ffa1",
+        }}
+      >
+        OnBoard
+      </Text>
+      <Grid columns={[1, 2]}>
         <Box>
-          <Text
-            variant="title"
-            as="h3"
-            sx={{
-              fontSize: ["36px", 4, 5],
-              maxWidth: "copyPlus",
-              textShadow: "0 0 30px rgba(42, 252, 88, 0.6)",
-              color: "#87ffa1",
-            }}
-          >
-            Onboard
-          </Text>
+
           <Text
             as="p"
             variant="subheadline"
@@ -39,41 +65,32 @@ export default function Onboard({ projects }) {
               py: 1,
               width: "fit-content",
               borderRadius: "extra",
-              color: "white",
               border: "rgba(255,255,255,0.2) dashed 1px",
               zIndex: 2,
+              color: "white",
               position: ["absolute", "relative", "relative"],
               top: ["24px", 0, "5px"],
             }}
           >
-            {345} projects built
+            {projects} projects built
           </Text>
-          <Text as="p" variant="subtitle" sx={{ color: "white", maxWidth: "" }}>
-            Id occaecat dolor consequat. Deserunt ut velit et amet Lorem dolore
-            laborum consectetur quis veniam magna tempor cupidatat.
+          <Text as="p" variant="subtitle" sx={{ color: "white" }}>
+            Circuit boards are magical. You design one, we'll print it. Completely free! Get a $100 grant to fuel the creation of your dream project with OnBoard.
           </Text>
-
-          <Flex sx={{ flexDirection: "column", mt: [3, 3, 4] }}>
-            <Buttons
-                icon="plus"
-                link="https://github.com/hackclub/OnBoard/blob/main/README.md"
-                primary="#87ffa1"
-                id="6"
-                sx={{ color: 'black' }}
-            >
-                Get a grant
-            </Buttons>
-            <Buttons icon="plus" link="https://jams.hackclub.com/tag/pcb">Learn PCB design now</Buttons>
-          </Flex>
         </Box>
-        {/*<Image
-          src="https://cloud-8lszi55ph-hack-club-bot.vercel.app/00frame_1.png"
-          alt="A circuit board of a dino wizard with a light up wand."
-          sx={{
-            width: ["90%", "320px", "450px", "500px"],
-          }}
-        />*/}
-      </Flex>
+        <Flex sx={{ flexDirection: "column", mt: [3, 3, 4], placeSelf: "start" }}>
+          <Buttons
+            icon="emoji"
+            link="https://github.com/hackclub/OnBoard/blob/main/README.md"
+            primary="#87ffa1"
+            color="black"
+          >
+            Get a grant
+          </Buttons>
+          <Buttons icon="docs" link="https://jams.hackclub.com/tag/pcb">Learn PCB design now</Buttons>
+          <Buttons icon="friend" link="/slack?event=onboard">See what other hackers have built</Buttons>
+        </Flex>
+      </Grid>
     </CardModel>
   );
-}
+}