Skip to content

Commit

Permalink
Merge pull request #1412 from BrightTheBackpack/main
Browse files Browse the repository at this point in the history 
Add Counterspell and High Seas
  • Loading branch information
@bellesea
bellesea authored Nov 10, 2024
2 parents da275d6 + de0cf4b commit 9781f0f
Show file tree
Hide file tree
Showing 5 changed files with 291 additions and 4 deletions.
7 changes: 5 additions & 2 deletions components/index/cards/button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,17 @@ export default function Buttons({
link,
primary,
overrideColor,
zIndex,
...props
}) {
let fontWeight = primary ? '700' : '400'

return (
<Box
as="button"
sx={{ background: 'transparent', border: 'none', color: 'white' }}
sx={{ background: 'transparent', border: 'none', color: 'white', zIndex: zIndex ||0 }}
py={1}

>
<Button
data-place="right"
Expand All @@ -40,7 +42,8 @@ export default function Buttons({
fontWeight: '400',
fontSize: primary ? ['18px', '20px', '22px'] : [1, '16px', '18px'],
backdropFilter: 'blur(2px)',
fontWeight: fontWeight
fontWeight: fontWeight,
zIndex: 999,
}}
as="a"
href={link || '/'}
Expand Down
3 changes: 2 additions & 1 deletion components/index/cards/card-model.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const CardModel = ({
background,
children,
image,
image_fit,
link,
highlight,
github_link,
Expand Down Expand Up @@ -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%',
Expand Down
161 changes: 161 additions & 0 deletions components/index/cards/counterspell.js
View file
Original file line number Diff line number Diff line change
@@ -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: ['-8px', '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: ['10px !important','10px !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"

rel="noopener"
primary="#24479C"
icon = "door-enter"
id="43"
zIndex={999}
sx = {{zIndex: 9999999, left: ["50%", "50%", "0%"]}}
>

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>
)
}
119 changes: 119 additions & 0 deletions components/index/cards/highseas.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
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={{
display: 'flex',
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 , gridGap: 0}}>
<Flex
sx={{
flexDirection: 'column',
display: 'flex',
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'],
display: 'flex',
position: 'relative',
zIndex: 2,
fontSize: ['36px', 4, 5],
color: 'white'
}}
alt="HighSeas"
/>

<Flex
sx={{
flexDirection: ['column', 'column', 'column'],
justifyContent: 'space-between',
display: 'flex',
}}
>
<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"
sx = {{
mt: [30, 30, 30],
mb:[0,0,15]
}}
primary="#24479C"
id="43"
>

Join Now!
</Buttons>
</Flex>
</Flex>
<Box style={{display: "flex", alignItems: "center" }}>
<Image
src=" https://highseas.hackclub.com/_next/image?url=%2Fchest.png&w=828&q=75"
sx={{
width: ['0', '0', '300px'],
mt: ['0px', '0px', '-5px'],
mb: ['0px', '0px', '30px'],
ml: ['0px', '0px', '50px'],
position: 'relative',
zIndex: 2,
fontSize: ['0px', 4, 5],
color: 'white'
}}
alt="HighSeas"
/>
</Box>
</Grid>
</CardModel>
)
}
5 changes: 4 additions & 1 deletion pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -675,6 +676,8 @@ function Page({
and make things together!
</Text>
</Box>
<HighSeas />
<Counterspell />
<Pizza />
<Trail />
<Slack slackKey={slackKey} data={slackData} events={events} />
Expand Down

0 comments on commit 9781f0f

Please sign in to comment.