Merge branch 'main' into garyhtou/hcb-apply

components/fiscal-sponsorship/first/stats.js

@@ -43,9 +43,6 @@ function formatMoney(amount) {
 }
 
 const Stats = ({ stats }) => {
-  if (stats.transactions_volume === undefined) {
-    return null
-  }
   const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal
 
   useEffect(() => {
@@ -67,6 +64,9 @@ const Stats = ({ stats }) => {
 
     return () => observer.disconnect()
   }, [stats.transactions_volume])
+
+  if (stats.transactions_volume === undefined) return null
+
   return (
     <Box id="parent">
       <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>

components/index/cards/scrapyard.js

@@ -0,0 +1,182 @@
+import CardModel from './card-model'
+import { Box, Flex, Grid, Image, Text, Heading } from 'theme-ui'
+import Buttons from './button'
+import { Global } from '@emotion/react'
+
+/** @jsxImportSource theme-ui */
+
+export default function Scrapyard() {
+  return (
+
+    <CardModel
+      color="white"
+      sx={{
+        backgroundSize: 'cover',
+        backgroundColor: '#90A8E1',
+        fontFamily: "p22stanyan",
+        objectFit: "contain"
+      }}
+      position={[null, 'bottom', 'bottom']}
+
+    >
+        <Global
+        styles={`
+          @font-face {
+            font-family: 'p22stanyan';
+            src: url('https://use.typekit.net/af/444506/00000000000000007735b3cd/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3') format('woff2');
+            font-weight: normal;
+            font-style: normal;
+          }
+          @font-face {
+            font-family: 'moonblossom';
+            src: url('https://use.typekit.net/af/bf03be/00000000000000007735fbe5/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3') format('woff2');
+            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://cloud-4fnsp2wse-hack-club-bot.vercel.app/0scrapyard.png"
+            sx={{
+              width: ['400px', '450px', '500px'],
+              mt: ['30px', '40px', '45px'],
+              mb: ['30px', '30px', '30px'],
+              position: 'relative',
+              zIndex: 3,
+              ml: '0px',
+              mr: '0px',
+              fontSize: ['48px', 4, 5],
+              color: 'white',
+            //   mx: 'auto'
+            }}
+            alt="Scrapyard"
+          />
+           
+
+          <Flex
+            sx={{
+              flexDirection: ['row', 'row', 'column'],
+              justifyContent: 'space-between'
+              
+            }}
+          >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center'
+          }}
+        >
+          <Box
+            sx={{
+              background: "url('https://scrapyard.hackclub.com/elements/ripped-paper.png')",
+              backgroundSize: 'cover',
+              display: 'block',
+              width: 'min(500px, calc(100vw - 30px))',
+              filter: 'drop-shadow(5px 5px 5px #000000AA)',
+              position: 'relative',
+              zIndex: 20
+            }}
+          >
+            <Heading
+              as="h2"
+              sx={{
+                fontFamily: 'moonblossom',
+                textAlign: 'center',
+                margin: '8%',
+                fontSize: '22px',
+                color: '#1f2d3d'
+              }}
+            >
+              Build stupid stuff, get stupid prizes.
+            </Heading>
+          </Box>
+          <Box
+            sx={{
+              zIndex: 1,
+              width: 'max-content',
+              backgroundImage: "url('https://scrapyard.hackclub.com/elements/yellow-strip@stretch.svg')",
+              backgroundRepeat: 'no-repeat',
+              backgroundSize: '100% 100%',
+              width: '75%',
+              position: 'relative',
+              zIndex: 30,
+              top: '-15%',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              // pt: '3%',
+              filter: 'drop-shadow(5px 5px 5px #00000099)'
+            }}
+          >
+            <Heading
+              as="h2"
+              sx={{
+                fontFamily: 'p22stanyan',
+                mx: '8%',
+                my: '3%',
+                p: 0,
+                wordBreak: 'keep-all',
+                whiteSpace: 'nowrap',
+                width: 'min-content',
+                fontSize: ['1.2em', '1.4em'],
+                color: '#1f2d3d'
+              }}
+            >
+              100+&nbsp;Cities&nbsp;worldwide&nbsp;–&nbsp;March&nbsp;15-16
+            </Heading>
+          </Box>
+        </Box>
+
+  
+          </Flex>
+        </Flex>
+   
+            <Buttons
+              href="https://scrapyard.hackclub.com/"
+              target="_blank"
+             
+              rel="noopener"
+              primary="#fde778"
+              icon = "door-enter"
+              id="43"
+              zIndex={999}
+              sx = {{zIndex: 9999999, left: ["50%", "50%", "0%"], color: '#1f2d3d'}}
+            >
+                
+              Learn More
+            </Buttons>
+        
+    
+      </Grid>
+      <Image
+            src="https://cloud-hqnbfdg3v-hack-club-bot.vercel.app/0image__14_.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',
+              objectFit: 'cover',
+              height: '100%',
+              mx: 0
+            }}
+            alt=""
+          />
+    </CardModel>
+  )
+}

pages/index.js

@@ -40,8 +40,7 @@ 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 Scrapyard from '../components/index/cards/scrapyard'
-import Counterspell from '../components/index/cards/counterspell'
 /** @jsxImportSource theme-ui */
 
 function Page({
@@ -669,8 +668,7 @@ function Page({
                 and make things together!
               </Text>
             </Box>
-            <HighSeas />
+            <Scrapyard />
-            <Counterspell />
             <Trail />
             <Slack slackKey={slackKey} data={slackData} events={events} />
           </Box>