diff --git a/src/pages/index.page.tsx b/src/pages/index.page.tsx index e809a773..1f0a34fe 100644 --- a/src/pages/index.page.tsx +++ b/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 = () => { - - - Ameliorate - + + + + Ameliorate + - - Understand ourselves. Understand each other. Grow together. - + + Understand ourselves. Understand each other. Grow together. + - - A tool for discussing and mutually understanding tough problems - + + A tool for discussing and mutually understanding tough problems + - - - - + + + + + + + + + + + (blog)} + action="https://amelioro.substack.com/api/v1/free" + buttonText="Subscribe" + /> + + + +
- + How it works diff --git a/src/pages/index.style.tsx b/src/pages/index.style.tsx index 86f14e75..c4453244 100644 --- a/src/pages/index.style.tsx +++ b/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; diff --git a/src/web/common/components/SubscribeForm/SubscribeForm.tsx b/src/web/common/components/SubscribeForm/SubscribeForm.tsx new file mode 100644 index 00000000..66f481ff --- /dev/null +++ b/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 ( + + + {header} + {headerAnchor} + + +
setSubmitted(true)} + > + + + + + +
+
+ ); +};