Skip to content

Commit 1be7041

Browse files
DhaneshShettyDhaneshShetty
committed
UI:Added Benefit section to home page
1 parent ef6b3b2 commit 1be7041

File tree

7 files changed

+167
-0
lines changed

7 files changed

+167
-0
lines changed

‎src/assets/images/benefit_member.png

278 KB
Loading

‎src/assets/images/benefit_mentor.png

330 KB
Loading

‎src/assets/images/benefit_partner.png

312 KB
Loading

‎src/home/Benefits.css

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
@font-face {
2+
font-family: MetaProRegular;
3+
src: url("./../assets/fonts/MetaPro-Font/MetaPro-Normal.otf") format("opentype");
4+
}
5+
6+
.mission{
7+
font-family: MetaProRegular;
8+
font-style: normal;
9+
font-weight: 500;
10+
font-size: 40px;
11+
line-height: 52px;
12+
align-items: center;
13+
text-align: center;
14+
padding: 3rem;
15+
}
16+
17+
.img{
18+
border-radius: 5px;
19+
max-width:100%;
20+
min-width: 50%;
21+
}
22+
23+
.benefitTextContainer{
24+
display: flex;
25+
justify-content: center;
26+
align-items: flex-start;
27+
flex-direction: column;
28+
box-sizing: border-box;
29+
width:50%;
30+
margin: 2rem;
31+
}
32+
33+
.benefitHeading{
34+
font-family: MetaProRegular;
35+
font-style: normal;
36+
font-weight: 500;
37+
font-size: 32px;
38+
line-height: 42px;
39+
color: black;
40+
padding: 1rem 5rem 1rem 5rem;
41+
}
42+
43+
.content{
44+
font-family: MetaProRegular;
45+
font-style: normal;
46+
font-weight: normal;
47+
font-size: 24px;
48+
line-height: 31px;
49+
color: black;
50+
padding: 1rem 5rem 1rem 5rem;
51+
}
52+
53+
.benefitContainer{
54+
width:100%;
55+
padding: 2rem 2rem 2rem 2rem;
56+
display: flex;
57+
flex-direction: row;
58+
align-items: center;
59+
justify-content: center;
60+
}
61+
62+
.benefitContainerReverse{
63+
width:100%;
64+
padding: 2rem 2rem 2rem 2rem;
65+
display: flex;
66+
flex-direction: row-reverse;
67+
align-items: center;
68+
justify-content: center;
69+
}
70+
71+
.buttonBenefit{
72+
border:1px solid #4892C7;
73+
margin: 0rem 5rem 0rem 5rem;
74+
padding:1rem 5rem 1rem 5rem;
75+
color: #4892C7;
76+
background-color: transparent;
77+
font-size: 1.5rem;
78+
align-self: flex-start;
79+
}
80+
81+
@media screen and (max-width: 1033px) {
82+
83+
.benefitContainer{
84+
width:100%;
85+
padding: 1rem 1rem 1rem 1rem;
86+
display: flex;
87+
flex-direction: column;
88+
align-items: center;
89+
justify-content: center;
90+
}
91+
.benefitContainerReverse{
92+
width:100%;
93+
padding: 1rem 1rem 1rem 1rem;
94+
display: flex;
95+
flex-direction: column;
96+
align-items: center;
97+
justify-content: center;
98+
}
99+
.benefitTextContainer{
100+
width:100%;
101+
padding: 1rem;
102+
}
103+
.buttonBenefit{
104+
margin: 0rem 2rem 0rem 2rem;
105+
align-self: center;
106+
}
107+
}

‎src/home/Benefits.jsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import './Benefits.css';
3+
import BenefitsContainer from './BenefitsContainer'
4+
import imgPartner from "../assets/images/benefit_partner.png"
5+
import imgMember from "../assets/images/benefit_member.png"
6+
import imgMentor from "../assets/images/benefit_mentor.png"
7+
8+
export default function Benefits(){
9+
return(
10+
<div>
11+
<div className="mission">
12+
<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>
13+
</div>
14+
<BenefitsContainer img={imgPartner} heading={<span>Become a <span style={{color:"#EF9425"}}>partner</span></span>} itemClass='benefitContainer' buttonText='Become a partner'>
15+
Join our cause by signing up as a partner and help us aquire the resources we need for our members
16+
to succeed in their different career paths. So far
17+
we’ve helped <span style={{color:"#EF9425",fontWeight:400}}>100+ </span>individuals upskill and land their
18+
dream job. We can do more with your help.
19+
</BenefitsContainer>
20+
21+
<BenefitsContainer img={imgMentor} heading={<span>Become a <span style={{color:"#EF9425"}}>mentor</span></span>} itemClass='benefitContainerReverse' buttonText='Become a mentor'>
22+
Research shows that majority of people spend years to
23+
find a career that suits them. Help us reachout to those
24+
who need our help by signing up as a mentor and
25+
guiding our members to the paths that will give
26+
meaning to their lives. So far we have <span style={{color:"#EF9425",fontWeight:400}}>50+ </span>mentors.
27+
</BenefitsContainer>
28+
29+
<BenefitsContainer img={imgMember} heading={<span>Become a <span style={{color:"#EF9425"}}>member</span></span>} itemClass='benefitContainer' buttonText='Become a member'>
30+
Join our growing community of <span style={{color:"#EF9425",fontWeight:400}}>500+ </span>members kick
31+
starting their careers faster enough to adapt as years
32+
go by. We’re providing a platform where you meet and
33+
learn from proffessionals in the industry that have your
34+
best interest at heart.
35+
</BenefitsContainer>
36+
</div>
37+
);
38+
}

‎src/home/BenefitsContainer.jsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import './Benefits.css';
3+
4+
export default function BenefitsContainer(props){
5+
return(
6+
<div className={props.itemClass}>
7+
<img className="img" src={props.img} alt="Benefits"/>
8+
<div className="benefitTextContainer">
9+
<div className="benefitHeading">
10+
<p>{props.heading}</p>
11+
</div>
12+
<div className="content">
13+
{props.children}
14+
</div>
15+
<button className="buttonBenefit">{props.buttonText}</button>
16+
</div>
17+
</div>
18+
)
19+
}

‎src/home/Home.jsx

+3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React from "react";
22
import Footer from "./Footer";
33
import './Home.css';
44
import GetInTouch from '../getInTouch/GetInTouch'
5+
import Benefits from './Benefits'
6+
57
export default function Home() {
68

79
return (
@@ -18,6 +20,7 @@ export default function Home() {
1820
</p>
1921
</div>
2022
</section>
23+
<Benefits/>
2124
<GetInTouch />
2225
<Footer/>
2326
</React.Fragment>

0 commit comments

Comments
 (0)