fixing some funkiness

components/slack/arrows.js

@@ -16,7 +16,8 @@ export function LeftArrow() {
         cursor: 'pointer',
         placeItems: 'center',
         display: 'flex',
-        mr: 2
+        mr: 2,
+        ml: 'calc(50vw - 35rem)'
       }}
     >
       <Icon glyph="view-back" size={32} color="white" />

components/slack/catchall.js

@@ -9,7 +9,7 @@ export default function Join() {
         mt: '2rem',
         borderRadius: 12,
         overflowX: 'hidden',
-        height: ['', '40rem'],
+        height: ['', '30rem'],
         paddingTop: ['2rem', 0],
         display: ['grid', 'flex']
       }}
@@ -29,7 +29,7 @@ export default function Join() {
             variant="title"
             sx={{ mb: 3, fontSize: ['36px', '48px', '56px'] }}
           >
-            There's a whole new world for you to discover.
+            Discover the Hack Club Slack
           </Text>
           <Link
             href="#"
@@ -51,7 +51,7 @@ export default function Join() {
         src="https://cloud-j0p07nviw-hack-club-bot.vercel.app/0image.png"
         sx={{
           width: ['100%', '50%'],
-          height: ['100%', '40rem'],
+          height: ['100%', '30rem'],
           objectFit: 'cover',
           position: 'relative',
           top: 0

components/slack/quote.js

@@ -15,7 +15,7 @@ export default function Quote({ text, person, age, location, img }) {
       </Text>
       <Flex sx={{ gap: '8px' }}>
         <Image src={img} sx={{ height: 24, width: 24, borderRadius: 100 }} />
-        <Text as="p" variant="paragraph">
+        <Text as="h3" sx={{ fontWeight: 400 }}>
           {person}, {age} from {location}
         </Text>
       </Flex>