UI:Added Benefit section to home page

src/home/Benefits.css

@@ -0,0 +1,111 @@
+@font-face {
+    font-family: MetaProRegular;
+    src: url("./../assets/fonts/MetaPro-Font/MetaPro-Normal.otf") format("opentype");
+  }
+
+.mission{
+    font-family: MetaProRegular;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 40px;
+    line-height: 52px;    
+    align-items: center;
+    text-align: center;
+    padding: 3rem;
+}
+
+.img{
+    border-radius: 5px;  
+    max-width:100%;
+    min-width: 50%;
+}
+
+.benefitTextContainer{    
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    box-sizing: border-box;
+    width:50%;
+    margin: 2rem; 
+}
+
+.benefitHeading{
+    font-family: MetaProRegular;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 32px;
+    line-height: 42px;     
+    color: black; 
+    padding: 1rem 5rem 1rem 5rem;
+}
+
+.content{
+    font-family: MetaProRegular;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 24px;
+    line-height: 31px;    
+    color: black;
+    padding: 1rem 5rem 1rem 5rem;
+}
+
+.benefitContainer{
+    width:100%;
+    padding: 2rem 2rem 2rem 2rem;   
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.benefitContainerReverse{
+    width:100%;
+    padding: 2rem 2rem 2rem 2rem;   
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    justify-content: center;
+}
+
+.buttonBenefit{
+    border:1px solid #4892C7;
+    margin: 0rem 5rem 0rem 5rem;
+    padding:1rem 5rem 1rem 5rem;
+    color: #4892C7;
+    background-color: transparent;
+    font-size: 1.5rem;
+    align-self: flex-start;
+}
+.buttonBenefit:hover{
+    color: #FFFFFF;
+    background-color: #4892C7;
+}
+
+@media screen and (max-width: 1033px) {
+
+    .benefitContainer{
+        width:100%;
+        padding: 1rem 1rem 1rem 1rem;   
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    .benefitContainerReverse{
+        width:100%;
+        padding: 1rem 1rem 1rem 1rem;   
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    .benefitTextContainer{
+        width:100%;
+        padding: 1rem; 
+    }
+    .buttonBenefit{
+        margin: 0rem 2rem 0rem 2rem;
+        align-self: center;
+    }    
+}

src/home/Benefits.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import './Benefits.css';
+import BenefitsContainer from './BenefitsContainer'
+import imgPartner from "../assets/images/benefit_partner.png"
+import imgMember from "../assets/images/benefit_member.png"
+import imgMentor from "../assets/images/benefit_mentor.png"
+
+export default function Benefits(){
+    return(
+        <div>
+            <div className="mission">
+                <span style={{color:"#EF9425"}}>Our mission </span> is to provide a platform where <br/>everyone can reach their full potential - 
+                <span style={{fontWeight:250,fontStyle:"italic"}}>starting with you</span> 
+            </div>
+            <BenefitsContainer img={imgPartner} heading={<span>Become a <span style={{color:"#EF9425"}}>partner</span></span>} itemClass='benefitContainer' buttonText='Become a partner'>
+                Join our cause by signing up as a partner and help us aquire the resources we need for our members 
+                to succeed in their different career paths. So far we’ve helped
+                <span style={{color:"#EF9425",fontWeight:400}}> 100+ </span>
+                individuals upskill and land their dream job. We can do more with your help.
+            </BenefitsContainer>
+            <BenefitsContainer img={imgMentor} heading={<span>Become a <span style={{color:"#EF9425"}}>mentor</span></span>} itemClass='benefitContainerReverse' buttonText='Become a mentor'>
+                Research shows that majority of people spend years to find a career that suits them.
+                Help us reachout to those who need our help by signing up as a mentor and 
+                guiding our members to the paths that will give meaning to their lives. So far we have
+                <span style={{color:"#EF9425",fontWeight:400}}> 50+ </span>mentors.
+            </BenefitsContainer>
+            <BenefitsContainer img={imgMember} heading={<span>Become a <span style={{color:"#EF9425"}}>member</span></span>} itemClass='benefitContainer' buttonText='Become a member'>
+                Join our growing community of
+                <span style={{color:"#EF9425",fontWeight:400}}> 500+ </span>
+                members kick starting their careers faster enough to adapt as years 
+                go by. We’re providing a platform where you meet and learn from proffessionals
+                in the industry that have your best interest at heart.
+            </BenefitsContainer>            
+        </div>
+    );
+}

src/home/BenefitsContainer.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import './Benefits.css';
+
+export default function BenefitsContainer(props){
+    return(
+        <div className={props.itemClass}>
+            <img className="img" src={props.img} alt="Benefits"/>
+            <div className="benefitTextContainer">
+                <div className="benefitHeading">
+                    <p>{props.heading}</p>
+                </div>
+                <div className="content">{props.children}</div>
+                <button className="buttonBenefit">{props.buttonText}</button>
+            </div>
+        </div>
+    )
+}

src/home/Home.jsx

@@ -2,11 +2,12 @@ import React from "react";
 import Footer from "./Footer";
 import './Home.css';
 import ReadAboutUs from './ReadAboutUs'
+import Benefits from './Benefits'
 import GetInTouch from './GetInTouch'
 import FAQ from "./FAQ";
 import VideoSection from "./VideoSection";
-export default function Home() {
 
+export default function Home() {
     return (
         <React.Fragment>
             <section id="home">
@@ -20,8 +21,9 @@ export default function Home() {
                     environment for these mentor/mentee to work in.
                     </p>
                 </div>
-            </section>
+            </section>          
             <VideoSection />
+            <Benefits/>
             <ReadAboutUs />
             <FAQ />
             <GetInTouch />