From fbbdf80a9d8d7b2cd021a80c5a26a874d7712886 Mon Sep 17 00:00:00 2001
From: Sam Poder <39828164+sampoder@users.noreply.github.com>
Date: Sat, 20 Aug 2022 07:47:21 +0800
Subject: [PATCH] Sprig Section Redesign on `/donate` (#512)

* Small changes to grid

* Responsive + Regrid

* Slightly more spacing

* Even more spacing
---
 components/donate/sprigForm.js | 23 +++++++++---
 pages/donate.js                | 68 ++++++++++++++++++++++++----------
 2 files changed, 66 insertions(+), 25 deletions(-)

diff --git a/components/donate/sprigForm.js b/components/donate/sprigForm.js
index 980e576e..58ba3a4b 100644
--- a/components/donate/sprigForm.js
+++ b/components/donate/sprigForm.js
@@ -17,7 +17,16 @@ const SprigForm = () => {
   }
   return (
     <>
-    <Text sx={{ fontSize: ['27px !important', 3], position: 'relative', justifySelf: 'center', alignSelf: 'center', paddingBottom: ['1em', '1em', 0]}} style={{ userSelect: 'none' }}>
+      <Text
+        sx={{
+          fontSize: ['27px !important', 3],
+          position: 'relative',
+          justifySelf: 'center',
+          alignSelf: 'center',
+          paddingBottom: ['1em', '1em', 0]
+        }}
+        style={{ userSelect: 'none' }}
+      >
         I'm donating{' '}
         <Text
           sx={{
@@ -31,7 +40,11 @@ const SprigForm = () => {
           }}
         >
           <ButtonIncrease count={count} setCount={setCount} />
-          <ButtonDecrease count={count} setCount={setCount} sx={{position: 'relative'}} />
+          <ButtonDecrease
+            count={count}
+            setCount={setCount}
+            sx={{ position: 'relative' }}
+          />
           <Text>{count}</Text>
         </Text>
         Sprig kit{count === 1 ? '' : 's'} to teens
@@ -39,7 +52,7 @@ const SprigForm = () => {
       <Button
         variant="outlineLg"
         as="a"
-        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3]}}
+        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3] }}
         href={url()}
       >
         Donate ${count * pricePerSprig}
@@ -60,7 +73,7 @@ function ButtonDecrease({ count, setCount }) {
         position: 'absolute',
         top: '1.2em',
         left: '50%',
-        transform: 'translateX(-50%)',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
@@ -79,7 +92,7 @@ function ButtonIncrease({ count, setCount }) {
         position: 'absolute',
         bottom: '1.2em',
         left: '50%',
-        transform: 'translateX(-50%)',
+        transform: 'translateX(-50%)'
       }}
       onClick={handleClick}
     >
diff --git a/pages/donate.js b/pages/donate.js
index f30e4e1f..a802bff9 100644
--- a/pages/donate.js
+++ b/pages/donate.js
@@ -209,7 +209,7 @@ const DonorListing = ({ name, url }) => {
 
 export default function Donate({ sprig }) {
   useEffect(() => {
-    if(sprig){
+    if (sprig) {
       window.document.getElementById('sprig-donation').scrollIntoView()
     }
   }, [])
@@ -324,14 +324,32 @@ export default function Donate({ sprig }) {
       <Container mb={5} id="sprig-donation"></Container>
       {sprig && <SprigMeta />}
       <Container variant="copy">
-        <Grid
-          columns={[null, null, 2, '3fr 2fr']}
-          gap={[0, 2, 4]}
-          pt={[0, 3]}
-          mb={[2, 4]}
-        >
-          <Heading mt={3} variant="ultratitle" sx={{}}>
-            Hack Club Sprig Consoles
+        <Box pt={[0, 3]} mb={[2, 4]}>
+          <Heading
+            sx={{
+              textAlign: 'center',
+              fontSize: 4,
+              textTransform: 'uppercase',
+              fontWeight: [400, 800],
+              mb: [0,0]
+            }}
+          >
+            Now introducing...
+          </Heading>
+          <Heading
+            mt={2}
+            sx={{
+              textAlign: 'center',
+              textTransform: 'uppercase',
+              fontSize: [5, 7],
+              lineHeight: [0.8, 1],
+              mb: 0,
+              marginBlockEnd: 0,
+              marginBlockStart: 0,
+              my: [2, 0]
+            }}
+          >
+            Sprig Consoles
           </Heading>
           <Box
             sx={{
@@ -340,28 +358,40 @@ export default function Donate({ sprig }) {
               justifyContent: 'space-around'
             }}
           >
-            <Heading variant="subtitle" pb={[3, 2, 0]}>
-              Inspiring teens to both make and code.
+            <Heading
+              variant="subtitle"
+              pb={[3, 2, 2]}
+              sx={{
+                textAlign: 'center',
+                color: 'blue',
+                textTransform: 'uppercase',
+                mt: [2, 0],
+                fontWeight: 800
+              }}
+            >
+              Inspiring teenagers to both make and code.
             </Heading>
-            <Text>
-              Your donation will send a teenager a Hack Club Sprig Console Kit:
-              containing a custom Hack Club PCB, buttons, a screen, a
+            <Text sx={{ textAlign: 'center', fontSize: 2 }}>
+              A donation to the Sprig fund will send a teenager a Hack Club
+              Sprig Console Kit: containing a custom PCB, buttons, a screen, a
               microprocessor, and more (all open source, of course), so that
               they can build and then play their own games.
             </Text>
           </Box>
-        </Grid>
+        </Box>
         <Grid
           columns={[null, '2fr 3fr']}
           gap={[2, 3, 4]}
-          pt={[0, 3]}
+          pt={[0, 0]}
           mb={[2, 4]}
         >
           <Box
             as="video"
             style={{
               width: '100%',
-              borderRadius: '1em'
+              borderRadius: '1em',
+              height: '100%',
+              objectFit: 'cover'
             }}
             autoPlay
             muted
@@ -378,9 +408,7 @@ export default function Donate({ sprig }) {
             width={3000}
             height={2550}
             showAlt
-            sx={{
-              mb: [3]
-            }}
+            sx={{height: '100%'}}
           />
         </Grid>
         <Sheet