Add feature list and description to home page

* Implement FeatureListItem component
* Add div below login container in <main> element with text, feature list

Author: varunsingh87

.gitignore

@@ -30,3 +30,5 @@ yarn-error.log*
 .env.production.local
 
 .vercel
+
+.vscode

components/FeatureListItem/featureListItem.js

@@ -0,0 +1,20 @@
+import featureListItem from "./featureListItem.module.css";
+import Image from "next/image";
+
+export default function FeatureListItem({
+	heading,
+	description,
+	imgSrc,
+	imgWidth = 32,
+	imgHeight = 32,
+}) {
+	return (
+		<li className={featureListItem.featureListItem}>
+			<div className={featureListItem.firstRow}>
+				<Image layout="fixed" src={imgSrc} height={imgWidth} width={imgHeight} />
+				<h3>{heading}</h3>
+			</div>
+			<p>{description}</p>
+		</li>
+	);
+}

components/FeatureListItem/featureListItem.module.css

@@ -0,0 +1,14 @@
+.featureListItem {
+	flex: 1 1 400px;
+	padding: 0.5em;
+}
+
+.firstRow {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.featureListItem h3 {
+	margin: 10px;
+}

package-lock.json

@@ -15,13 +15,13 @@
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
     "@material/fab": "^8.0.0",
-    "next": "^10.0.4",
+    "next": "^10.0.5",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "showdown": "^1.9.1"
   },
   "devDependencies": {
-    "@types/node": "^14.14.19",
+    "@types/node": "^14.14.20",
     "@types/react": "^17.0.0",
     "typescript": "^4.1.3"
   }

package.json

@@ -1,11 +1,13 @@
 import Link from "next/link";
+import Image from "next/image";
 import login from "./login.module.css";
 import LogoImage from "../../components/logoImage";
 import FormField from "../../components/FormField/formField";
 import ProgressSpinner from "../../components/CircularProgress/circularProgress";
 import { useRef, useState } from "react";
 import { CONTENT_STATE } from "../../libs/view";
 import { submitLogin } from "../../libs/Datastore/requests";
+import FeatureListItem from "../../components/FeatureListItem/featureListItem";
 
 export default function Login({ fade, onFadeInHome, setFade }) {
 	const [email, setEmail] = useState("");
@@ -80,7 +82,7 @@ export default function Login({ fade, onFadeInHome, setFade }) {
 				fade == CONTENT_STATE.INVISIBLE ? fade : `${fade} ${login.main}`
 			}
 		>
-			<div className={login.grid}>
+			<div className={login.login}>
 				<LogoImage />
 				<h1>Login to Borum Jot</h1>
 				<form
@@ -117,6 +119,47 @@ export default function Login({ fade, onFadeInHome, setFade }) {
 					</Link>
 				</div>
 			</div>
+			<div className={login.whyBorumJotContainer}>
+				<h2>Achieve More with Borum Jot</h2>
+				<p>
+					Borum Jot stores your notes and tasks so you can access them
+					on the web or with the Android app
+				</p>
+				<ul className={login.featureList}>
+					<FeatureListItem
+						imgSrc="/images/no-money.png"
+						heading="Modern experience"
+						description="No ads or hidden prices"
+					/>
+					<FeatureListItem
+						imgSrc="/images/cloud-sync.png"
+						heading="Always within reach"
+						description="Accessible on an Android device or the web, syncing automatically"
+					/>
+					<FeatureListItem
+						imgSrc="/images/padlock.png"
+						heading="Privacy"
+						description="Your notes and tasks are securely encrypted"
+					/>
+					<FeatureListItem
+						imgSrc="/images/share.png"
+						imgWidth={35}
+						imgHeight={55}
+						heading="Collaboration"
+						description="Share notes and collaborate with others"
+					/>
+					<FeatureListItem 
+						imgSrc="/images/pin.png"
+						heading="Prioritize"
+						description="Pin your notes and tasks to the top of the lists"
+					/>
+					<FeatureListItem
+						imgSrc="/images/to-do-list.png"
+						heading="Stay organized"
+						description="Make subtasks for your tasks and check them off when finished"
+					/>
+				</ul>
+			</div>
 		</main>
 	);
 }