From 27510456f2145ad98d7e003da127543135a40934 Mon Sep 17 00:00:00 2001
From: BrightTheBackpack <78445409+BrightTheBackpack@users.noreply.github.com>
Date: Sun, 3 Nov 2024 21:21:20 +0000
Subject: [PATCH] add Counterspell and High Seas

---
 components/index/cards/card-model.js   |   3 +-
 components/index/cards/counterspell.js | 161 +++++++++++++++++++++++++
 components/index/cards/highseas.js     | 110 +++++++++++++++++
 pages/index.js                         |   5 +-
 4 files changed, 277 insertions(+), 2 deletions(-)
 create mode 100644 components/index/cards/counterspell.js
 create mode 100644 components/index/cards/highseas.js

diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js
index f3c0cb7e..a0834c87 100644
--- a/components/index/cards/card-model.js
+++ b/components/index/cards/card-model.js
@@ -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%',
diff --git a/components/index/cards/counterspell.js b/components/index/cards/counterspell.js
new file mode 100644
index 00000000..662db2c1
--- /dev/null
+++ b/components/index/cards/counterspell.js
@@ -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>
+  )
+}
diff --git a/components/index/cards/highseas.js b/components/index/cards/highseas.js
new file mode 100644
index 00000000..15bc7d66
--- /dev/null
+++ b/components/index/cards/highseas.js
@@ -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>
+  )
+}
diff --git a/pages/index.js b/pages/index.js
index f459c0e4..5573d97e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -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} />