switch head image and remove "prelaunch site" from footer of arcade (#1240)

* remove "prelaunch site" from footor of arcade

* switch to newer head image

* hide buy button/quantity dropdown if richness is low

* re-add link to power hour

---------

Co-authored-by: Max Wofford <max@maxwofford.com>

components/arcade/footer.js

@@ -7,7 +7,7 @@ const Description = () => (
       A project by <a href="https://hackclub.com/">Hack Club</a>.
     </Heading>
     <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
-      <Link href="/arcade/power-hour">Prelaunch site.</Link>
+      <Link href="/arcade/power-hour">Previous edition: Power Hour</Link>
     </Text>
     <Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
       Hack Club is a registered 501(c)3 nonprofit organization that supports a

components/arcade/prizes.js

@@ -16,6 +16,7 @@ const Prizes = ({
   quantity,
   onQuantityChange,
   index,
+  hoursBalance,
   ...props
 }) => {
   const parsedFulfillmentDesc = fulfillmentDescription?.replace(
@@ -86,24 +87,30 @@ const Prizes = ({
               variant="caption"
               sx={{ color: '#FFEEC6', mt: 0, mb: 2 }}
             >
-              <em>You can order {quantity} of these</em>
+              <em>You can order up to {quantity} of these</em>
             </Text>
           </Balancer>
           <Flex>
-          <Quantity numOptions={quantity} label={text} onQuantityChange={onQuantityChange} index={index} />
-          <Button
-            sx={{
-              borderRadius: '5px',
-              color: '#FFEEC6',
-              backgroundColor: '#09878b',
-              width: 'fit-content'
-            }}
-            as="a"
-            href={link}
-            className="gaegu"
-          >
-            Buy
-          </Button>
+            {// only show the quantity dropdown if you have enough hours to buy at least 2 of the item
+              hoursBalance / cost < 2 ? (null) : <Quantity numOptions={Math.min(quantity, Math.floor(hoursBalance / cost))} label={text} onQuantityChange={onQuantityChange} index={index} />
+            }
+            {
+              // only show the buy button if you have enough hours to buy at least 1 of the item
+              hoursBalance / cost < 1 ? (null) :
+                <Button
+                  sx={{
+                    borderRadius: '5px',
+                    color: '#FFEEC6',
+                    backgroundColor: '#09878b',
+                    width: 'fit-content'
+                  }}
+                  as="a"
+                  href={link}
+                  className="gaegu"
+                >
+                  Buy
+                </Button>
+            }
           </Flex>
         </Flex>
       )}

components/arcade/shop-component.js

@@ -92,6 +92,7 @@ export default function ShopComponent({
               key={item.id}
               id={item.id}
               onQuantityChange={(id, q) => handleQuantityChange(item.id, q)} // Pass handler to update quantity
+              hoursBalance={hoursBalance}
             />
           ))}
       </Grid>

pages/arcade/[userAirtableID]/shop.js

@@ -52,7 +52,7 @@ export default function Shop({ availableItems, userAirtableID = null, hoursBalan
       </h1>
       </Balancer>
       <Text sx={{ display: 'block', textAlign: 'center', color: '#35290F' }} className='gaegu' variant='subtitle' >Your current balance is {Math.floor(hoursBalance)} 🎟️</Text>
-      <ShopComponent availableItems={availableItems} userAirtableID={userAirtableID} />
+      <ShopComponent availableItems={availableItems} userAirtableID={userAirtableID} hoursBalance={hoursBalance} />
     </>
   )
 }

pages/arcade/index.js

@@ -928,7 +928,7 @@ const Arcade = ({
         as={Head}
         title="Arcade"
         description="The ultimate summer hackathon for high schoolers. Make projects. Track your hours. Redeem for Prizes."
-        image="https://cloud-luaw423i2-hack-club-bot.vercel.app/0frame_33__1_.png"
+        image="https://cloud-249autgay-hack-club-bot.vercel.app/0frame_70.png"
       />
       <Head>
         <meta