UI:Added Benefit section to home page

src/home/Benefits.css

@@ -0,0 +1,107 @@
+@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;
+}
+
+@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,38 @@
+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,19 @@
+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

@@ -3,6 +3,8 @@ import Footer from "./Footer";
 import './Home.css';
 import ReadAboutUs from './ReadAboutUs'
 import GetInTouch from '../getInTouch/GetInTouch'
+import Benefits from './Benefits'
+
 export default function Home() {
 
     return (
@@ -19,7 +21,11 @@ export default function Home() {
                     </p>
                 </div>
             </section>
+<<<<<<< HEAD
             <ReadAboutUs />
+=======
+            <Benefits/>
+>>>>>>> UI:Added Benefit section to home page
             <GetInTouch />
             <Footer/>
         </React.Fragment>