feat(home): add blog and session subscribe buttons

src/pages/index.page.tsx

@@ -9,6 +9,8 @@ import comparingSolutions from "../../public/Comparing-Solutions.png";
 import justifyingAndCritiquingClaims from "../../public/Justifying-And-Critiquing-Claims.png";
 import mappingSolutionsToProblems from "../../public/Mapping-Solutions-To-Problems.png";
 import { Blog } from "../web/common/components/Blog.styles";
+import { Link } from "../web/common/components/Link";
+import { SubscribeForm } from "../web/common/components/SubscribeForm/SubscribeForm";
 import { YoutubeEmbed } from "../web/common/components/YoutubeEmbed/YoutubeEmbed";
 import { StyledBox, StyledCarousel } from "./index.style";
 
@@ -24,36 +26,63 @@ const Home: NextPage = () => {
       </Head>
 
       <Blog>
-        <StyledBox>
-          <Typography variant="h3" color="primary">
-            Ameliorate
-          </Typography>
+        <StyledBox flexDirection="column">
+          <Box display="flex" flexDirection="column">
+            <Typography variant="h3" color="primary">
+              Ameliorate
+            </Typography>
 
-          <Typography variant="h5">
-            Understand ourselves. Understand each other. Grow together.
-          </Typography>
+            <Typography variant="h5">
+              Understand ourselves. Understand each other. Grow together.
+            </Typography>
 
-          <Typography variant="body1">
-            A tool for discussing and mutually understanding tough problems
-          </Typography>
+            <Typography variant="body1">
+              A tool for discussing and mutually understanding tough problems
+            </Typography>
 
-          <Box display="flex" flexWrap="wrap" justifyContent="center" margin="0.75rem" gap={1}>
-            <Button variant="contained" LinkComponent={NextLink} href="/playground">
-              Playground
-            </Button>
-            <Button variant="outlined" LinkComponent={NextLink} href="/examples">
-              Examples
-            </Button>
-            <Button variant="outlined" endIcon={<ArrowDownward />} href="#how-it-works">
-              See how it works
-            </Button>
+            <Box display="flex" flexWrap="wrap" justifyContent="center" margin="0.75rem" gap={1}>
+              <Button variant="contained" LinkComponent={NextLink} href="/playground">
+                Playground
+              </Button>
+              <Button variant="outlined" LinkComponent={NextLink} href="/examples">
+                Examples
+              </Button>
+              <Button variant="outlined" endIcon={<ArrowDownward />} href="#how-it-works">
+                See how it works
+              </Button>
+            </Box>
+          </Box>
+
+          <Divider />
+
+          <Box
+            display="flex"
+            flexDirection="column"
+            border="1px solid rgba(0,0,0,0.12)"
+            borderRadius={1}
+            marginTop={8}
+          >
+            <SubscribeForm
+              header="Get progress updates"
+              headerAnchor={<Link href="https://amelioro.substack.com/">(blog)</Link>}
+              action="https://amelioro.substack.com/api/v1/free"
+              buttonText="Subscribe"
+            />
+
+            <Divider />
+
+            <SubscribeForm
+              header="Get invited to future discourse sessions"
+              action="https://buttondown.email/api/emails/embed-subscribe/ameliorate-discourse"
+              buttonText="Invite me"
+            />
           </Box>
         </StyledBox>
 
         <Divider />
 
         <section id="how-it-works">
-          <StyledBox>
+          <StyledBox flexDirection="column">
             <Typography variant="h4">How it works</Typography>
             <StyledCarousel autoPlay={false} navButtonsAlwaysVisible={true}>
               <YoutubeEmbed embedId="yM8RrwQWeJc" />

src/pages/index.style.tsx

@@ -4,7 +4,7 @@ import Carousel from "react-material-ui-carousel";
 
 export const StyledBox = styled(Box)`
   display: flex;
-  flex-direction: column;
+  justify-content: center;
   align-items: center;
   margin: 5rem 0;
   text-align: center;

src/web/common/components/SubscribeForm/SubscribeForm.tsx

@@ -0,0 +1,62 @@
+import { Check } from "@mui/icons-material";
+import { Box, Button, InputBase, Typography, useTheme } from "@mui/material";
+import { ReactNode, useState } from "react";
+
+interface Props {
+  header: string;
+  headerAnchor?: ReactNode;
+  action: string;
+  buttonText: string;
+}
+
+export const SubscribeForm = ({ header, headerAnchor, action, buttonText }: Props) => {
+  const theme = useTheme();
+  const [submitted, setSubmitted] = useState(false);
+
+  return (
+    <Box display="flex" flexDirection="column" margin={2} marginTop={0}>
+      <Typography variant="body1">
+        {header}
+        {headerAnchor}
+      </Typography>
+
+      <form
+        action={action}
+        method="post"
+        target="_blank"
+        style={{ display: "flex", justifyContent: "center" }}
+        onSubmit={() => setSubmitted(true)}
+      >
+        <Box display="flex" justifyContent="center">
+          <InputBase
+            placeholder="Type your email..."
+            type="email"
+            name="email"
+            required
+            sx={{
+              border: `1px solid ${theme.palette.primary.main}`,
+              borderTopLeftRadius: "4px",
+              borderBottomLeftRadius: "4px",
+              padding: "8px",
+              fontFamily: theme.typography.body1.fontFamily,
+              fontSize: "14px",
+              width: "200px",
+
+              ":focus": { outline: "none" },
+            }}
+          />
+
+          <Button
+            variant="contained"
+            color="primary"
+            type="submit"
+            disabled={submitted}
+            sx={{ boxShadow: "none", borderTopLeftRadius: "0", borderBottomLeftRadius: "0" }}
+          >
+            {submitted ? <Check /> : buttonText}
+          </Button>
+        </Box>
+      </form>
+    </Box>
+  );
+};