Add Back Updated Pizza Grant

components/footer.js

@@ -113,6 +113,7 @@ const Footer = ({
           <Heading as="h2" variant="subheadline" mb={3}>
             Resources
           </Heading>
+          <Link href="https://hackclub.com/pizza">Clubs Pizza Grant</Link>
           <Link href="https://events.hackclub.com/">Community Events</Link>
           <Link href="https://jams.hackclub.com/">Jams</Link>
           <Link href="https://toolbox.hackclub.com/">Toolbox</Link>

components/index/cards/pizza.js

@@ -0,0 +1,97 @@
+import CardModel from './card-model'
+import { Box, Button, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
+
+/** @jsxImportSource theme-ui */
+
+export default function Pizza() {
+  return (
+    <CardModel
+      color="white"
+      sx={{
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5',
+        border: '1px solid #EC3750' // Corrected the color value here
+      }}
+      position={[null, 'bottom', 'bottom']}
+      highlight="#271932"
+      image="https://cloud-4f5ohtb3u-hack-club-bot.vercel.app/0subtlegrain.png"
+    >
+      <Grid
+        columns={[1, 2]}
+        sx={{ position: 'relative', alignItems: 'center', zIndex: 2 }}
+      >
+        <Box>
+          <Text
+            as="h3"
+            variant="title"
+            sx={{
+              fontSize: ['36px', 4, 5],
+              zIndex: 2,
+              color: '#000',
+              mb: '8px'
+            }}
+          >
+            Start A Hack Club <br /> Get{' '}
+            <Text
+              sx={{
+                background: [
+                  'linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)'
+                ],
+                WebkitBackgroundClip: 'text',
+                WebkitTextStroke: 'currentColor',
+                WebkitTextFillColor: 'transparent'
+              }}
+            >
+              {' '}
+              Pizza for Every Project
+            </Text>
+          </Text>
+
+          <Text as="p" variant="subtitle" sx={{ color: '#000', mb: 3 }}>
+            GitHub is providing pizza grants to every teen who starts a
+            Hack Club at their school.
+          </Text>
+
+          <Buttons id="14" link="/pizza" icon="welcome" primary="primary">
+            Get Your Pizza Grant
+          </Buttons>
+        </Box>
+        <Box>
+          <Flex
+            sx={{
+              flexDirection: 'column',
+              alignItems: 'end',
+              justifyContent: 'flex-end',
+              position: 'relative'
+            }}
+          >
+            <Image
+              alt="Group of teenage hackers enjoying GitHub Hack Club Pizza Grant"
+              sx={{
+                borderRadius: '16px',
+                border: '1px solid #EC3750',
+                aspectRatio: '16/9',
+                objectFit: 'cover'
+              }}
+              src="https://cloud-8tc8qa1ew-hack-club-bot.vercel.app/0img_8975.jpg"
+            />
+            <Text
+              sx={{
+                color: '#000',
+                backgroundColor: '#fff',
+                left: '16px',
+                bottom: '16px',
+                padding: '6px 8px',
+                borderRadius: '16px',
+                position: 'absolute'
+              }}
+            >
+              Newton South HS Hack Club in Boston
+            </Text>
+          </Flex>
+        </Box>
+      </Grid>
+    </CardModel>
+  )
+}

pages/index.js

@@ -19,6 +19,7 @@ import ForceTheme from '../components/force-theme'
 import Footer from '../components/footer'
 import Stage from '../components/stage'
 import Carousel from '../components/index/carousel'
+import Pizza from '../components/index/cards/pizza'
 import Sprig from '../components/index/cards/sprig'
 import Sinerider from '../components/index/cards/sinerider'
 import SprigConsole from '../components/index/cards/sprig-console'
@@ -669,6 +670,7 @@ function Page({
               </Text>
             </Box>
             <Scrapyard />
+            <Pizza />
             <Trail />
             <Slack slackKey={slackKey} data={slackData} events={events} />
           </Box>