Issue BrandonArmand#7 Design Changes for Landing Page and About

src/assets/jss/material-kit-react/components/infoStyle.js

@@ -18,7 +18,8 @@ const infoStyle = {
   iconWrapper: {
     float: "left",
     marginTop: "24px",
-    marginRight: "10px"
+    marginRight: "10px",
+    marginBottom: "-20px"
   },
   primary: {
     color: primaryColor
@@ -54,7 +55,10 @@ const infoStyle = {
     color: grayColor,
     overflow: "hidden",
     marginTop: "0px",
-    fontSize: "14px"
+    fontSize: "14px",
+    textAlign: "center",
+    marginRight: "20px",
+    marginLeft: "20px"
   },
   iconWrapperVertical: {
     float: "none"

src/assets/jss/material-kit-react/views/aboutPage.js

@@ -9,13 +9,20 @@ const aboutPageStyle = {
   title: {
     ...title,
     display: "inline-block",
-    marginTop: "30px",
+    marginTop: "70px",
+    marginBottom: "50px",
     minHeight: "32px",
     color: "#333",
     textDecoration: "none",
     width: '100%'
   },
   subtitle: {
+    marginTop: "-20px",
+    fontSize: "1.313rem",
+    color: '#333'
+  },
+  listTitle: {
+    marginBottom: "50px",
     fontSize: "1.313rem",
     color: '#333'
   },

src/assets/jss/material-kit-react/views/landingPageSections/productStyle.js

@@ -14,6 +14,21 @@ const productStyle = {
   },
   description: {
     color: "#999"
+  },
+  infoSection: {
+    marginTop: "20px",
+    marginBottom: "50px"
+  },
+  videoTitle: {
+    ...title,
+    marginTop: "10px",
+    overflowWrap: "break-word",
+    marginLeft: "20px"
+  },
+  videoDescription: {
+    color: "#999",
+    textAlign: "left",
+    marginLeft: "30px"
   }
 };
 

src/index.js

@@ -15,7 +15,7 @@ import GridItem from "components/Grid/GridItem.js";
 
 import LandingPage from "views/LandingPage/LandingPage.js";
 import Playground from "views/Playground/Playground";
-import About from "views/About/About"
+import About from "views/About/About";
 
 
 var hist = createBrowserHistory();
@@ -46,7 +46,7 @@ function App(){
               <h1 className={classes.title}>Binari</h1>
               <h4>
                 Binary Trees are a gateway towards a deeper understanding of dynamic programming.
-                Through the use of both recurssion and iterative implimentations any developer can be guided
+                Through the use of both recursion and iterative implementations, any developer can be guided
                 towards becoming a more complete programmer.
               </h4>
               <br />

src/views/About/About.js

@@ -36,17 +36,17 @@ export default function About(props) {
         <div className={classes.container}>
           <GridContainer justify="left">
             <GridItem xs={12} sm={12} md={12}>
-              <h1 className={classes.title}>Mission</h1>
+              <h1 className={classes.title}>Mission Statement</h1>
               <h2 className={classes.subtitle}>
-                Binari's mission statement is to provide the best experience for new developers through an easy to use code-editor and data structure visuallization.
-                The problem with learning a new algorithm or data-structure tends to lie with the intial understanding with how the data/code gets organized. 
+                Binari's mission is to provide the best experience for new developers through an easy to use code-editor and data-structure visualizer.
+                The problem with learning a new algorithm or data-structure tends to lie in understanding how the data/code gets organized. 
                 I am here to fix that, and you are welcome to join.
               </h2>
             </GridItem>
           </GridContainer>
           <GridContainer justify="space-evenly">
               <h1 className={classes.title}>Team</h1>
-              <Card 
+              <Card
                 avatar="https://media-exp2.licdn.com/dms/image/C5603AQHDpyHFybEEeg/profile-displayphoto-shrink_200_200/0?e=1585180800&v=beta&t=ZrTlFl6PrO1swAzrq4EYWfyl_ZwcoSSbfGr8yQIUCas" 
                 linkedin="https://www.linkedin.com/in/brandonarmand/" 
                 github="https://github.com/BrandonArmand" 
@@ -90,10 +90,10 @@ export default function About(props) {
             <GridItem xs={12} sm={12} md={12}>
               <h2 className={classes.title}>Want to help?</h2>
               <h2 className={classes.subtitle}>
-                There are a list of issues on Github that you are welcome to work on, 
-                but if you have an idea of your own, we are open to allowing any pull request we believe fits well with Binari's vision.
+                There are a list of issues on Github that you are welcome to work on. 
+                If you have an idea of your own, we are open to allowing any pull requests we believe fit well with Binari's vision.
               </h2>
-              <h3 className={classes.subtitle}>Things you can do:</h3>
+              <h3 className={classes.listTitle}>Things you can do:</h3>
             </GridItem>
             <GridItem xs={6} sm={4} md={4}>
               <ul className={classes.subtitle}>

src/views/LandingPage/Sections/ProductSection.js

@@ -19,15 +19,15 @@ export default function ProductSection() {
         <GridItem xs={12} sm={12} md={8}>
           <h2 className={classes.title}>Let{"'"}s talk code</h2>
           <h5 className={classes.description}>
-            Understanding Data Structures and Algorythms can be hard, i've been there.
+            Understanding Data Structures and Algorithms can be hard, I've been there.
             That is why I built Binari, a one-stop shop for all things Binary Tree.
-            Binari uses an interactive view so that you can fully encompas how Binary Trees operate.
+            Binari uses an interactive view so that you can fully encompass how Binary Trees operate.
           </h5>
         </GridItem>
       </GridContainer>
       <div>
-        <GridContainer>
-          <GridItem xs={12} sm={12} md={4}>
+        <GridContainer className={classes.infoSection}>
+          <GridItem xs={12} sm={12} md={4} className={classes.infoItem}>
             <InfoArea
               title="Completely Free"
               description="This app is, and always will be, completely free. Enjoy it till the day the internet implodes."
@@ -36,16 +36,16 @@ export default function ProductSection() {
               vertical
             />
           </GridItem>
-          <GridItem xs={12} sm={12} md={4}>
+          <GridItem xs={12} sm={12} md={4} className={classes.infoItem}>
             <InfoArea
               title="Interactive"
-              description="Unlike other methods for teaching binary trees, Binari aims to explain through the use of interactive visuals. "
+              description="Unlike other methods, Binari aims to explain binary trees through the use of interactive visuals. "
               icon={Interactive}
               iconColor="info"
               vertical
             />
           </GridItem>
-          <GridItem xs={12} sm={12} md={4}>
+          <GridItem xs={12} sm={12} md={4} className={classes.infoItem}>
             <InfoArea
               title="Open Source"
               description="Explore, break, and learn from my code. The whole service is open to the public, so feel free to dive in."
@@ -67,8 +67,15 @@ export default function ProductSection() {
               allowfullscreen>
               </iframe>
           </GridItem>
-          <GridItem xs={12} sm={12} md={4}>
-            <h2 className={classes.title}>Gayle Laakmann McDowell</h2>
+          <GridItem xs={6} sm={6} md={6}>
+            <h2 className={classes.videoTitle}>Universal Value Tree Problem</h2>
+            <h5 className={classes.videoDescription}>
+              There are many resources on the internet that break down various complex algorithms
+              through interactive and visual understanding. An example is the video featured here.
+              In addition to online resources, Gayle Laakmann Mcdowell, a software engineer and author, is known for a series of career development books. 
+              Her most notable work, Cracking the Coding Interview, offers insight into preparing for technical interviews, as well
+              as methods on how to approach different types of algorithms.
+          </h5>
           </GridItem>
         </GridContainer>
       </div>