Feature/add about page

frontend/package.json

@@ -15,7 +15,8 @@
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@mui/material": "^5.0.2",
+    "@mui/icons-material": "^5.0.4",
+    "@mui/material": "^5.0.0",
     "@types/react": "^16.8.6 || ^17.0.0",
     "dotenv": "^10.0.0",
     "parcel-bundler": "^1.12.5",

frontend/src/components/About.js

@@ -1,5 +1,83 @@
 import React from 'react';
+import { makeStyles, Typography, TextField, Box } from '@material-ui/core';
+import { NoEncryption } from '@material-ui/icons';
+import ButtonPrimary from './ButtonPrimary';
+import { Link, NavLink } from 'react-router-dom';
+
+const useStyles = makeStyles((theme) => ({
+  aboutPage: {
+    height: '100vh',
+    // TODO: use the theme to set the background color
+    background: '#ED686F',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  aboutHeader: {
+    color: 'white',
+    width: '40%',
+    textAlign: 'center',
+    fontWeight: '400',
+  },
+  aboutPageHeader: {
+    color: 'white',
+    position: 'relative',
+    marginBottom: '40px',
+  },
+  aboutText: {
+    background: 'white',
+    width: '390px',
+    padding: '60px 40px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  link: {
+    textDecoration: 'none',
+    color: '#fff',
+  },
+}));
 
 export default function App() {
-  return <h1>About</h1>;
+  const classes = useStyles();
+
+  return (
+    <Box className={classes.aboutPage}>
+      <Typography
+        className={classes.aboutHeader}
+        variant="h2"
+        component="h1"
+        gutterBottom
+      >
+        Code For Denver Partner Finder
+      </Typography>
+      <Typography
+        className={classes.aboutPageHeader}
+        variant="h3"
+        component="h2"
+      >
+        About
+      </Typography>
+      <Box className={classes.aboutText}>
+        <Box
+          display="flex"
+          flexDirection="column"
+          justifyContent="center"
+          alignItems="center"
+          marginBottom="20px"
+        >
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
+            efficitur volutpat sem, vel convallis nisl dignissim eget. Quisque
+            molestie fermentum nisl vitae tincidunt.
+          </p>
+          <NavLink to="/home" className={classes.link}>
+            <ButtonPrimary marginTop="40px">Home</ButtonPrimary>
+          </NavLink>
+        </Box>
+      </Box>
+    </Box>
+  );
 }

frontend/src/components/Home.js

@@ -10,6 +10,7 @@ import { API_HOST } from '../config';
 import { LeadModal } from './LeadModal';
 import { DEBOUNCE_TIME_MS } from '../constants';
 import { ContactPhoneSharp, TramOutlined } from '@material-ui/icons';
+import { Link, NavLink } from 'react-router-dom';
 
 export const useStyles = makeStyles((theme) => ({
   // TODO: make custom roundButton component
@@ -177,9 +178,8 @@ export default function Home() {
           onDebounce={(event) => setSearch(event.target.value)}
         />
       </Header>
-      <Box
-        marginX="15px" // TODO: there must be a cleaner way to get the margins
-      >
+      <Box marginX="15px">
+        {/* // TODO: there must be a cleaner way to get the margins */}
         {/* Row containing "Add New" button and pagination controls */}
         <Box
           paddingY="30px"
@@ -203,8 +203,9 @@ export default function Home() {
         </Box>
         <LeadTable leads={leads} />
       </Box>
-
-      <Button className={classes.aboutFooter}>About</Button>
+      <NavLink to="/about" className={classes.link}>
+        <Button className={classes.aboutFooter}>About</Button>
+      </NavLink>
     </div>
   );
 }