mirror of
https://github.com/System-End/site.git
synced 2026-04-19 23:22:49 +00:00
94 lines
2.8 KiB
JavaScript
94 lines
2.8 KiB
JavaScript
import { useEffect, useState } from 'react'
|
|
import { Box, Flex, Grid, Text } from 'theme-ui'
|
|
import CardModel from './card-model'
|
|
import Buttons from './button'
|
|
|
|
/** @jsxImportSource theme-ui */
|
|
|
|
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))
|
|
}, [])
|
|
|
|
return (
|
|
<CardModel
|
|
sx={{
|
|
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}
|
|
>
|
|
<Text
|
|
variant="title"
|
|
as="h3"
|
|
sx={{
|
|
fontSize: ['36px', 4, 5],
|
|
maxWidth: 'copyPlus',
|
|
textShadow: '0 0 30px rgba(42, 252, 88, 0.6)',
|
|
color: '#87ffa1',
|
|
mt: ['38px', 0, 0],
|
|
position: 'relative'
|
|
}}
|
|
>
|
|
OnBoard
|
|
</Text>
|
|
<Grid columns={[1, 2]}>
|
|
<Box>
|
|
<Text
|
|
as="p"
|
|
variant="subheadline"
|
|
sx={{
|
|
px: 2,
|
|
py: 1,
|
|
width: 'fit-content',
|
|
borderRadius: 'extra',
|
|
border: 'rgba(255,255,255,0.2) dashed 1px',
|
|
zIndex: 2,
|
|
color: 'white',
|
|
position: ['absolute', 'relative', 'relative'],
|
|
top: ['24px', 0, '5px']
|
|
}}
|
|
>
|
|
{projects} projects built
|
|
</Text>
|
|
<Text as="p" variant="subtitle">
|
|
Circuit boards are magical. You design one, we'll print it.
|
|
Completely for free! Get a $100 grant to fuel the creation of your
|
|
dream project with OnBoard.
|
|
</Text>
|
|
</Box>
|
|
<Flex
|
|
sx={{ flexDirection: 'column', mt: [3, 3, 4], placeSelf: 'start' }}
|
|
>
|
|
<Buttons
|
|
id="59"
|
|
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" id="60">
|
|
Learn how to design a PCB
|
|
</Buttons>
|
|
<Buttons icon="friend" link="/slack?event=onboard" id="61">
|
|
See what other hackers have built
|
|
</Buttons>
|
|
</Flex>
|
|
</Grid>
|
|
</CardModel>
|
|
)
|
|
}
|