mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
add Counterspell and High Seas
This commit is contained in:
BrightTheBackpack
parent
e2726d5b9c
commit
27510456f2
4 changed files with 277 additions and 2 deletions
|
|
@ -10,6 +10,7 @@ const CardModel = ({
|
|||
background,
|
||||
children,
|
||||
image,
|
||||
image_fit,
|
||||
link,
|
||||
highlight,
|
||||
github_link,
|
||||
|
|
@ -141,7 +142,7 @@ const CardModel = ({
|
|||
src={image}
|
||||
draggable="false"
|
||||
sx={{
|
||||
objectFit: 'cover',
|
||||
objectFit: image_fit ? image_fit : 'cover',
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
|
|
|
|||
161
components/index/cards/counterspell.js
Normal file
161
components/index/cards/counterspell.js
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
import CardModel from './card-model'
|
||||
import { Box, Flex, Grid, Image, Text } from 'theme-ui'
|
||||
import Buttons from './button'
|
||||
import { Global } from '@emotion/react'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
export default function Counterspell() {
|
||||
return (
|
||||
|
||||
<CardModel
|
||||
color="white"
|
||||
sx={{
|
||||
backgroundSize: 'cover',
|
||||
backgroundColor: '#90A8E1',
|
||||
fontFamily: "Fraunces",
|
||||
objectFit: "contain"
|
||||
}}
|
||||
position={[null, 'bottom', 'bottom']}
|
||||
|
||||
>
|
||||
<Global
|
||||
styles={`
|
||||
@font-face {
|
||||
font-family: 'NeueBit';
|
||||
src: url('https://counterspell.hackclub.com/_next/static/media/retro.1fb39db6.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
<Grid columns={[1, 1, 1]} sx={{ position: 'relative', zIndex: 2 }}>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
position: 'relative',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="https://counterspell.hackclub.com/title.png"
|
||||
sx={{
|
||||
width: ['200px', '300px', '350px'],
|
||||
mt: ['30px', '40px', '45px'],
|
||||
mb: ['30px', '30px', '30px'],
|
||||
position: 'relative',
|
||||
zIndex: 3,
|
||||
ml: '0px',
|
||||
mr: '30px',
|
||||
fontSize: ['36px', 4, 5],
|
||||
color: 'white',
|
||||
// mx: 'auto'
|
||||
}}
|
||||
alt="Counterspell"
|
||||
/>
|
||||
<Image
|
||||
src="https://counterspell.hackclub.com/billboard.png"
|
||||
sx={{
|
||||
width: ['400px', '500px', '600px'],
|
||||
position: 'absolute',
|
||||
zIndex: 2,
|
||||
fontSize: ['36px', 4, 5],
|
||||
color: 'white',
|
||||
|
||||
mx: 'auto'
|
||||
}}
|
||||
alt="Counterspell"
|
||||
/>
|
||||
|
||||
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: ['row', 'row', 'column'],
|
||||
justifyContent: 'space-between'
|
||||
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
as="p"
|
||||
variant="subheadline"
|
||||
sx={{
|
||||
ml: ['0px', '0px', '-15px'],
|
||||
mt: ['-30px', '0px', '-10px'],
|
||||
mb: ['0px', '0px', '20px'],
|
||||
zIndex: 2,
|
||||
textAlign: 'center',
|
||||
fontFamily: 'NeueBit, sans-serif', // Apply the custom font
|
||||
|
||||
color: '#FFFFFFF',
|
||||
|
||||
fontSize: ['5px !important','5px !important','16px !important'],
|
||||
|
||||
}}
|
||||
>
|
||||
HACK CLUB'S BEGINNER FRIENDLY GAME JAM
|
||||
|
||||
<br />
|
||||
100+ CITIES NOV 23-24
|
||||
</Text>
|
||||
|
||||
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Buttons
|
||||
href="https://counterspell.hackclub.com/"
|
||||
target="_blank"
|
||||
sx = {{
|
||||
|
||||
}}
|
||||
rel="noopener"
|
||||
primary="#24479C"
|
||||
icon = "door-enter"
|
||||
id="43"
|
||||
>
|
||||
|
||||
Learn More
|
||||
</Buttons>
|
||||
|
||||
|
||||
</Grid>
|
||||
<Image
|
||||
src="https://counterspell.hackclub.com/hero/bg1.png"
|
||||
sx={{
|
||||
width: ['100%', '100%', '100%'],
|
||||
mb: ['0px', '0px', '0px'],
|
||||
mr: ['0px', '0px', '0px'],
|
||||
ml: ['0px', '0px', '0px'],
|
||||
position: 'absolute',
|
||||
zIndex: 1,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
fontSize: ['36px', 4, 5],
|
||||
color: 'white',
|
||||
|
||||
mx: 0
|
||||
}}
|
||||
alt="Buildings"
|
||||
/>
|
||||
<Image
|
||||
src="https://counterspell.hackclub.com/hero/bg2.png"
|
||||
sx={{
|
||||
width: ['100%', '100%', '100%'],
|
||||
mb: ['0px', '0px', '0px'],
|
||||
mr: ['0px', '0px', '0px'],
|
||||
ml: ['0px', '0px', '0px'],
|
||||
position: 'absolute',
|
||||
zIndex: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
fontSize: ['36px', 4, 5],
|
||||
color: 'white',
|
||||
|
||||
mx: 0
|
||||
}}
|
||||
alt="Buildings"
|
||||
/>
|
||||
</CardModel>
|
||||
)
|
||||
}
|
||||
110
components/index/cards/highseas.js
Normal file
110
components/index/cards/highseas.js
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
import CardModel from './card-model'
|
||||
import { Box, Flex, Grid, Image, Text } from 'theme-ui'
|
||||
import Buttons from './button'
|
||||
import { Global } from '@emotion/react'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
export default function HighSeas() {
|
||||
return (
|
||||
<CardModel
|
||||
color="white"
|
||||
sx={{
|
||||
backgroundSize: 'cover',
|
||||
backgroundColor: '#FFF5D8',
|
||||
|
||||
fontFamily: "Fraunces"
|
||||
}}
|
||||
position={[null, 'bottom', 'bottom']}
|
||||
image={"https://cloud-lyjdp3j9h-hack-club-bot.vercel.app/0image.svg"}
|
||||
>
|
||||
<Global
|
||||
styles={`
|
||||
@font-face {
|
||||
font-family: 'HighSeas1';
|
||||
src: url('https://highseas.hackclub.com/_next/static/media/0fc6f5e9d9c3e206-s.p.ttf') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
<Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between'
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="https://cloud-5tm6hh4kb-hack-club-bot.vercel.app/0image__1_.svg"
|
||||
sx={{
|
||||
width: ['200px', '250px', '300px'],
|
||||
mt: ['-5px', '-5px', '-5px'],
|
||||
mb: ['30px', '30px', '30px'],
|
||||
position: 'relative',
|
||||
zIndex: 2,
|
||||
fontSize: ['36px', 4, 5],
|
||||
color: 'white'
|
||||
}}
|
||||
alt="HighSeas"
|
||||
/>
|
||||
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: ['row', 'row', 'column'],
|
||||
justifyContent: 'space-between'
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
as="p"
|
||||
variant="subheadline"
|
||||
sx={{
|
||||
ml: ['0px', '0px', '10px'],
|
||||
mt: ['0px', '0px', '-10px'],
|
||||
mb: ['0px', '0px', '20px'],
|
||||
zIndex: 2,
|
||||
color: '#FFFFFFF',
|
||||
fontSize: ['24px !important'],
|
||||
fontFamily: 'HighSeas1, sans-serif', // Apply the custom font
|
||||
|
||||
|
||||
}}
|
||||
>
|
||||
Build personal projects. Get free stuff.
|
||||
|
||||
<br />
|
||||
Oct 30 - Jan 31
|
||||
</Text>
|
||||
|
||||
<Buttons
|
||||
href="https://highseas.hackclub.com/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
primary="#24479C"
|
||||
id="43"
|
||||
>
|
||||
|
||||
Join Now!
|
||||
</Buttons>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Box style={{display: "flex", alignItems: "center"}}>
|
||||
<Image
|
||||
src=" https://highseas.hackclub.com/chest.svg"
|
||||
sx={{
|
||||
width: ['200px', '250px', '300px'],
|
||||
mt: ['-5px', '-5px', '-5px'],
|
||||
mb: ['30px', '30px', '30px'],
|
||||
ml: ['0px', '0px', '50px'],
|
||||
position: 'relative',
|
||||
zIndex: 2,
|
||||
fontSize: ['36px', 4, 5],
|
||||
color: 'white'
|
||||
}}
|
||||
alt="HighSeas"
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
</CardModel>
|
||||
)
|
||||
}
|
||||
|
|
@ -41,7 +41,8 @@ import Comma from '../components/comma'
|
|||
import Haxidraw from '../components/index/cards/haxidraw'
|
||||
import Onboard from '../components/index/cards/onboard'
|
||||
import Trail from '../components/index/cards/trail'
|
||||
|
||||
import HighSeas from '../components/index/cards/highseas'
|
||||
import Counterspell from '../components/index/cards/counterspell'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
function Page({
|
||||
|
|
@ -675,6 +676,8 @@ function Page({
|
|||
and make things together!
|
||||
</Text>
|
||||
</Box>
|
||||
<HighSeas />
|
||||
<Counterspell />
|
||||
<Pizza />
|
||||
<Trail />
|
||||
<Slack slackKey={slackKey} data={slackData} events={events} />
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue