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,
|
background,
|
||||||
children,
|
children,
|
||||||
image,
|
image,
|
||||||
|
image_fit,
|
||||||
link,
|
link,
|
||||||
highlight,
|
highlight,
|
||||||
github_link,
|
github_link,
|
||||||
|
|
@ -141,7 +142,7 @@ const CardModel = ({
|
||||||
src={image}
|
src={image}
|
||||||
draggable="false"
|
draggable="false"
|
||||||
sx={{
|
sx={{
|
||||||
objectFit: 'cover',
|
objectFit: image_fit ? image_fit : 'cover',
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: '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 Haxidraw from '../components/index/cards/haxidraw'
|
||||||
import Onboard from '../components/index/cards/onboard'
|
import Onboard from '../components/index/cards/onboard'
|
||||||
import Trail from '../components/index/cards/trail'
|
import Trail from '../components/index/cards/trail'
|
||||||
|
import HighSeas from '../components/index/cards/highseas'
|
||||||
|
import Counterspell from '../components/index/cards/counterspell'
|
||||||
/** @jsxImportSource theme-ui */
|
/** @jsxImportSource theme-ui */
|
||||||
|
|
||||||
function Page({
|
function Page({
|
||||||
|
|
@ -675,6 +676,8 @@ function Page({
|
||||||
and make things together!
|
and make things together!
|
||||||
</Text>
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
|
<HighSeas />
|
||||||
|
<Counterspell />
|
||||||
<Pizza />
|
<Pizza />
|
||||||
<Trail />
|
<Trail />
|
||||||
<Slack slackKey={slackKey} data={slackData} events={events} />
|
<Slack slackKey={slackKey} data={slackData} events={events} />
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue