Merge pull request #1053 from theaquarium/main

Author: faisalsayed10

components/index/cards/wonderland.js

@@ -0,0 +1,109 @@
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
+
+/** @jsxImportSource theme-ui */
+
+export default function Wonderland() {
+  return (
+    <CardModel
+      color="white"
+      sx={{
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5',
+        border: '2px solid #fbbae4'
+      }}
+      position={[null, 'bottom', 'bottom']}
+      image="/wonderland/banner.webp"
+      highlight={'#fbbae4'}
+      filter="brightness(0.6)"
+    >
+      <Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
+        <Flex
+          sx={{
+            flexDirection: 'column',
+            justifyContent: 'space-between'
+          }}
+        >
+          <Box>
+            <Image
+              src="/wonderland/wonderland.svg"
+              sx={{
+                width: ['300px', '350px', '400px'],
+                mt: ['-10px', '-10px', '-10px'],
+                position: 'relative',
+                zIndex: 2,
+                fontSize: ['36px', 4, 5],
+                color: 'white',
+                filter: 'drop-shadow(0 0 10px #fbbae4 )'
+              }}
+              alt="Wonderland"
+            />
+
+            <Text
+              as="p"
+              variant="subheadline"
+              sx={{
+                ml: '10px',
+                mt: '-10px',
+                mb: '10px',
+                zIndex: 2,
+                color: 'white',
+                fontSize: ['24px !important'],
+
+                textShadow: '0 0 20px #fbbae4'
+              }}
+              //   sx={{
+              //     fontSize: ['30px', '30px', '30px'],
+              //     fontWeight: 'bold'
+              //   }}
+            >
+              Boston, MA
+              <br />
+              February 23-25th
+            </Text>
+          </Box>
+
+          <Buttons
+            icon="flag-fill"
+            href="https://wonderland.hackclub.com/"
+            target="_blank"
+            rel="noopener"
+            primary="#fbbae4"
+            id="43"
+            sx={{ color: '#000' }}
+          >
+            Join Us
+          </Buttons>
+        </Flex>
+        <Box
+          sx={{
+            textShadow: '0 0 20px #fbbae4'
+          }}
+        >
+          <Text
+            as="p"
+            variant="subtitle"
+            sx={{
+              fontSize: ['22px', '20px', '18px']
+            }}
+          >
+            Only when we limit ourselves... do we become truly free.
+          </Text>
+          <Text
+            as="p"
+            variant="subtitle"
+            sx={{
+              fontSize: ['22px', '20px', '18px']
+            }}
+          >
+            How would you and your friends use a 🥕 carrot or a 🧸 stuffed
+            animal in a hackathon project? In Wonderland, you'll explore 🧰
+            chests of random objects and software that you'll incorporate into
+            hackathon projects.
+          </Text>
+        </Box>
+      </Grid>
+    </CardModel>
+  )
+}

lib/carousel.json

@@ -17,6 +17,15 @@
     "img": "https://cloud-eg2ex8nol-hack-club-bot.vercel.app/0favicon-on-light-removebg-preview.png",
     "link": "https://cpu.land"
   },
+  {
+    "background": "linear-gradient(to bottom right, #91C2F4, #FFB6E6, #F3E4C6)",
+    "titleColor": "#000",
+    "descriptionColor": "#000",
+    "title": "Wonderland",
+    "description": "How would you and your friends use a 🥕 carrot or a 🧸 stuffed animal in a hackathon project?",
+    "img": "/wonderland/logo.svg",
+    "link": "https://wonderland.hackclub.com"
+  },
   {
     "background": "#000",
     "titleColor": "green",

pages/index.js

@@ -40,6 +40,7 @@ import Photo from '../components/photo'
 import Comma from '../components/comma'
 import Haxidraw from '../components/index/cards/haxidraw'
 import Onboard from '../components/index/cards/onboard'
+import Wonderland from '../components/index/cards/wonderland'
 
 /** @jsxImportSource theme-ui */
 
@@ -675,6 +676,7 @@ function Page({
                 and make things together!
               </Text>
             </Box>
+            <Wonderland />
             <Pizza />
             <Slack slackKey={slackKey} data={slackData} events={events} />
           </Box>