Redesign of the newsletter section!

components/index/cards/haunted.js

@@ -0,0 +1,54 @@
+import CardModel from "./card-model";
+import { Box, Flex, Grid, Image, Text, Link } from "theme-ui";
+import Buttons from "./button";
+
+/** @jsxImportSource theme-ui */
+
+export default function Haunted() {
+  return (
+    <CardModel
+      github_link="https://github.com/hackclub/www-hauntedhouse"
+      color="white"
+      sx={{
+        backgroundSize: "cover",
+        backgroundColor: "#95C9E5",
+        border: "2px solid #EB6424",
+      }}
+      position={[null, "bottom", "bottom"]}
+      highlight="#cc5600"
+      image="/haunted/bg.webp"
+      filter="brightness(0.7)"
+    >
+      <Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}>
+        <Image
+          src="/haunted/haunted-text.svg"
+          sx={{
+            width: ["200px", "250px", "300px"],
+            mt: ["-10px", "-20px", "-20px"],
+            position: "relative",
+            zIndex: 2,
+            fontSize: ["36px", 4, 5],
+            color: "white",
+          }}
+          alt="Haunted"
+        />
+        <Box></Box>
+
+        <Text as="p" variant="subtitle" sx={{ color: "white" }}>
+          Haunted House is a Chicago-based event full of sites and frights! Join
+          us from October 28-29 for a weekend of coding pushing the bounds of
+          creativity, where fright meets byte, and check out the website at{" "}
+          <Link href="https://haunted.hackclub.com">haunted.hackclub.com</Link>!
+        </Text>
+        <Flex
+          sx={{
+            flexDirection: "column",
+            mt: [3, 3, 4],
+            alignItems: "end",
+            justifyContent: "flex-end",
+          }}
+        ></Flex>
+      </Grid>
+    </CardModel>
+  );
+}

components/index/cards/hcb.js

@@ -64,7 +64,7 @@ export default function Bank({ data }) {
                   textAlign: 'center',
                   '&:before': {
                     content: '""',
-                    backgroundImage: 'url(/home/hcb-mobile.webp)', // image doesn't exist
+                    backgroundImage: 'url(/home/hcb-mobile.webp)',
                     backgroundSize: '100%',
                     backgroundRepeat: 'no-repeat',
                     width: '100%',

components/index/cards/mailing-list.js

@@ -1,166 +1,199 @@
-import Icon from '@hackclub/icons'
-import { useRef, useState } from 'react'
-import {
-  Box,
-  Label,
-  Input,
-  Button,
-  Text,
-  Alert,
-  Card,
-  Flex,
-  Grid
-} from 'theme-ui'
-import CardModel from './card-model'
-import BGImg from '../../background-image'
-import FooterImgFile from '../../../public/home/footer.png'
+import Icon from "@hackclub/icons";
+import { useRef, useState } from "react";
+import { Box, Input, Button, Text, Card, Flex, Grid, Link } from "theme-ui";
+import MailCard from "../../mail-card";
+import BGImg from "../../background-image";
+
+import background from "../../../public/home/footer.png";
 
 const Loading = () => (
   <Box
     sx={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      width: '100%',
-      border: '2px solid #f3f3f3',
-      borderTop: '2px solid #ec3750',
-      borderRadius: '50%',
-      width: '10px',
-      height: '10px',
-      animation: 'spin 2s linear infinite',
-      '@keyframes spin': {
-        '0%': { transform: 'rotate(0deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      }
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      border: "2px solid #f3f3f3",
+      borderTop: "2px solid #ec3750",
+      borderRadius: "50%",
+      width: "16px",
+      height: "16px",
+      animation: "spin 2s linear infinite",
+      mr: "5px",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     }}
   ></Box>
-)
+);
 
 const MailingList = () => {
-  const [submitting, setSubmitting] = useState(false)
-  const [submitted, setSubmitted] = useState(false)
-  const formRef = useRef(null)
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const formRef = useRef(null);
 
-  const handleSubmit = async e => {
-    e.preventDefault()
-    setSubmitting(true)
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
 
-    let res = await fetch('/api/mailing-list', {
-      method: 'POST',
+    let res = await fetch("/api/mailing-list", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         name: e.target.name.value,
-        email: e.target.email.value
-      })
-    })
+        email: e.target.email.value,
+      }),
+    });
 
-    formRef.current.reset()
+    formRef.current.reset();
 
     if (res.ok) {
-      setSubmitted(true)
+      setSubmitted(true);
     }
-    setSubmitting(false)
-  }
+    setSubmitting(false);
+  };
 
   return (
-    <Box sx={{ position: 'relative', py: 6, background: 'darker' }}>
+    <Box sx={{ position: "relative", py: 6, background: "darker" }}>
       <Card
         sx={{
-          maxWidth: 'narrowPlus',
-          mx: 'auto',
+          maxWidth: "1050px",
+          mx: "auto",
           // mt: [3, 4],
-          background: 'rgb(255,255,255, 0.45)',
-          position: 'relative',
+          background: "rgb(255,255,255, 0.45)",
+          position: "relative",
           zIndex: 2,
-          backdropFilter: 'blur(8px)'
+          backdropFilter: "blur(8px)",
         }}
       >
-        <Flex
-          sx={{
-            justifyContent: 'space-between',
-            alignItems: ['left', 'left', 'center'],
-            flexDirection: ['column', 'column', 'column'],
-            gap: '10px',
-            textAlign: 'center'
-          }}
-        >
-          <Box>
-            <Text
-              variant="title"
-              sx={{ fontSize: [4, '36px', '42px', 6], zIndex: 2 }}
-            >
-              Stay in Touch
-            </Text>
-            <Text sx={{ color: 'darkless', mt: 2, fontSize: 3 }} as="p">
-              We’ll send you an email no more than once a month, when we work on
-              something cool for you.
-            </Text>
-          </Box>
-          <Grid
-            as="form"
-            ref={formRef}
-            onSubmit={handleSubmit}
-            gap={[2, 3]}
+        <Flex sx={{ flexDirection: ["column", "row"], gridGap: [0, 5] }}>
+          <Flex
             sx={{
-              textAlign: 'center',
-              alignItems: 'end',
-              input: { bg: 'sunken' },
-              width: '100%'
+              placeItems: "center",
+              justifyContent: "center",
+              alignItems: ["left", "left", "center"],
+              flexDirection: "column",
+              gap: "10px",
+              width: ["100%", "75%"],
             }}
           >
-            <Box sx={{ width: '100%' }}>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="text"
-                name="name"
-                id="name"
-                placeholder="Your Name"
-                required
-                sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
-              />
+            <Box>
+              <Text
+                variant="title"
+                sx={{
+                  fontSize: [4, "36px", "42px", 6],
+                  zIndex: 2,
+                  textAlign: "left",
+                }}
+              >
+                Join the newsletter
+              </Text>
+              <Text
+                sx={{
+                  color: "darkless",
+                  mt: 2,
+                  fontSize: 3,
+                  textAlign: "left",
+                }}
+                as="p"
+              >
+                We’ll send you an email no more than once a month, when we work
+                on something cool for you. Check out our{" "}
+                <Link href="/leader-newsletters/">previous issues</Link>.
+              </Text>
             </Box>
-            <div>
-              <Input
-                autofillBackgroundColor="highlight"
-                type="email"
-                name="email"
-                id="email"
-                placeholder="Your Email"
-                required
-                sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
-              />
-            </div>
-            <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
-              {submitting ? (
-                <>
-                  <Loading />
-                  &nbsp;Subscribe
-                </>
-              ) : (
-                'Subscribe'
-              )}
-            </Button>
-          </Grid>
+            <Grid
+              as="form"
+              ref={formRef}
+              onSubmit={handleSubmit}
+              gap={[2, 3]}
+              sx={{
+                textAlign: "center",
+                alignItems: "end",
+                input: { bg: "sunken" },
+                width: "100%",
+              }}
+            >
+              <Box sx={{ width: "100%" }}>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="text"
+                  name="name"
+                  id="name"
+                  placeholder="Your Name"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </Box>
+              <div>
+                <Input
+                  autofillBackgroundColor="highlight"
+                  type="email"
+                  name="email"
+                  id="email"
+                  placeholder="Your Email"
+                  required
+                  sx={{
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 2,
+                  }}
+                />
+              </div>
+              <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
+                {submitting ? (
+                  <>
+                    <Loading /> Subscribe
+                  </>
+                ) : submitted ? (
+                  <>
+                    <Icon glyph="send" /> You're on the list!
+                  </>
+                ) : (
+                  "Subscribe"
+                )}
+              </Button>
+            </Grid>
+          </Flex>
+          <Box
+            sx={{
+              display: "grid",
+              gridGap: 4,
+              mt: [4, 0],
+              width: "100%",
+            }}
+          >
+            <MailCard
+              date="August 2023"
+              issue={18}
+              body="Bring your club on an epic adventure in code this semester! Jams are 18 brand new coding workshops created by Hack Clubbers ESPECIALLY for you to use in your meetings, complete with pre-made slide decks and even some videos!"
+              link="/leader-newsletters/2023-08-18"
+            />
+            <MailCard
+              date="September 2023"
+              issue={20}
+              body="📆📣 Leader meeting tomorrow! Join club leaders Sahiti, Zayn and Ronnit tomorrow 8:00am PST/11:00am EST/8:30pm IST. Bring questions and advice to share about maintaining your club after the first meeting!!"
+              link="/leader-newsletters/2023-09-29"
+            />
+          </Box>
         </Flex>
-
-        {submitted && (
-          <Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
-            <Icon glyph="send" />
-            <Text sx={{ ml: 2 }}>You're on the list!</Text>
-          </Alert>
-        )}
       </Card>
       <BGImg
+        width={2544}
+        height={2048}
         gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-        src={FooterImgFile}
+        src={background}
         placeholder="blur"
         alt="Globe with hundreds of Hack Clubs"
       />
     </Box>
-  )
-}
+  );
+};
 
-export default MailingList
+export default MailingList;