Skip to content

Commit e4c661f

Browse files
sexta13bbmoz
sexta13
authored and
bbmoz
committed
landing-page section b (#192)
1 parent c728530 commit e4c661f

File tree

8 files changed

+171
-4
lines changed

8 files changed

+171
-4
lines changed

‎client/App.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import Version from './components/Version/Version'
1717
import LandingA from './components/LandingA/LandingA'
1818
import LandingC from './components/LandingC/LandingC'
1919
import Footer from './components/LandingF/LandingF'
20+
import LandingB from './components/LandingB/LandingB'
2021

2122
// set up components for lazy loading
2223
const ProfileRestrictedLoadable = restricted(Loadable({
@@ -55,6 +56,7 @@ class App extends Component {
5556
<Route path='/landing-a' component={LandingA} />
5657
<Route path='/landing-c' component={LandingC} />
5758
<Route path='/landing-f' component={Footer} />
59+
<Route path='/landing-b' component={LandingB} />
5860
<Route path='/show-applications' component={ApplicationsRestrictedLoadable} />
5961
</Switch>
6062
</div>

‎client/components/LandingB/LandingB.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React, { Fragment } from 'react'
2+
import styles from './LandingB.scss'
3+
import createProfileIcon from '../../images/createProfileIcon.svg'
4+
import searchProjectsIcon from '../../images/searchProjectsIcon.svg'
5+
import applyForProjectsIcon from '../../images/applyForProjectsIcon.svg'
6+
7+
const LandingB = () => {
8+
return (
9+
<Fragment>
10+
<div className={styles.globalNetwork}>
11+
Global network for social good
12+
</div>
13+
<div className={styles.volunteerOrgButtons}>
14+
<div className={styles.volunteers}>Volunteers</div>
15+
<div className={styles.organizations}>Organizations</div>
16+
</div>
17+
<div className={styles.wrapper}>
18+
<div className={styles.createProfile}>
19+
20+
<img src={createProfileIcon} className={styles.icon} />
21+
22+
<div className={styles.subtitle}>Create profile</div>
23+
<div className={styles.description}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus pretium purus. Phasellus dignissim, justo nec efficitur fringilla,</div>
24+
</div>
25+
<div className={styles.searchProjects}>
26+
27+
<img src={searchProjectsIcon} className={styles.icon} />
28+
29+
<div className={styles.subtitle}>Search Projects</div>
30+
<div className={styles.description}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus pretium purus. Phasellus dignissim, justo nec efficitur fringilla,</div>
31+
</div>
32+
<div className={styles.applyForProjects}>
33+
34+
<img src={applyForProjectsIcon} className={styles.icon} />
35+
36+
<div className={styles.subtitle}>Apply for projects</div>
37+
<div className={styles.description}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus pretium purus. Phasellus dignissim, justo nec efficitur fringilla,</div>
38+
</div>
39+
</div>
40+
</Fragment>
41+
)
42+
}
43+
44+
export default LandingB

‎client/components/LandingB/LandingB.scss

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@import "../../scss/partials/partials";
2+
3+
.globalNetwork{
4+
text-align: center;
5+
font-size: 46px;
6+
}
7+
8+
.volunteerOrgButtons{
9+
height: 60px;
10+
text-align: center;
11+
display:flex;
12+
justify-content: center;
13+
align-items: center;
14+
margin-top: 47px;
15+
text-transform: uppercase;
16+
17+
}
18+
19+
.volunteers{
20+
display: flex;
21+
align-items: center;
22+
justify-content: center;
23+
background-color: $black;
24+
height: 100%;
25+
width: 235px;
26+
border-radius: 200px 0 0 200px;
27+
color: $white;
28+
font-size: 13.8px;
29+
font-weight: bold;
30+
letter-spacing: 2.8px;
31+
cursor: pointer;
32+
}
33+
34+
.organizations{
35+
display: flex;
36+
align-items: center;
37+
justify-content: center;
38+
background-color: $grayDE;
39+
height: 100%;
40+
width: 235px;
41+
border-radius: 0 200px 200px 0;
42+
color: $black;
43+
font-size: 13.8px;
44+
font-weight: bold;
45+
letter-spacing: 2.8px;
46+
cursor: pointer;
47+
}
48+
49+
.wrapper{
50+
margin-top: 70px;
51+
display: grid;
52+
grid-template-columns: repeat(3, 1fr);
53+
}
54+
.createProfile{
55+
grid-column: 1;
56+
}
57+
58+
.searchProjects{
59+
grid-column: 2;
60+
}
61+
.applyForProjects{
62+
grid-column: 3;
63+
}
64+
65+
.createProfile,
66+
.searchProjects,
67+
.applyForProjects{
68+
display: flex;
69+
flex-direction: column;
70+
align-items: center;
71+
}
72+
73+
.icon{
74+
width: 81px;
75+
height: 60px;
76+
object-fit: contain;
77+
}
78+
79+
.subtitle{
80+
margin-top: 22px;
81+
height: 12px;
82+
font-family: Gotham;
83+
font-size: 12px;
84+
font-weight: bold;
85+
letter-spacing: 2.4px;
86+
text-align: center;
87+
color: #212121;
88+
text-transform: uppercase;
89+
}
90+
.description{
91+
margin-top: 15px;
92+
width: 206px;
93+
opacity: 0.67;
94+
font-family: Gotham;
95+
font-size: 14px;
96+
line-height: 1.71;
97+
letter-spacing: 0.5px;
98+
text-align: center;
99+
color: #262626;
100+
}

‎client/images/applyForProjectsIcon.svg

Lines changed: 6 additions & 0 deletions
Loading

‎client/images/createProfileIcon.svg

Lines changed: 6 additions & 0 deletions
Loading

‎client/images/searchProjectsIcon.svg

Lines changed: 6 additions & 0 deletions
Loading

‎client/scss/partials/_variables.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,6 @@ $inputsBorderColor: #C6CBD4;
1212
$text-red: #EA4C2D;
1313
$backgound-orange: #ED4B2F;
1414
$background-gray: #FBFBFB;
15+
$black: black;
16+
$white: white;
17+
$grayDE: #dedede;

‎webpack.config.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
55
const CopyPlugin = require('copy-webpack-plugin')
66
const HardSourcePlugin = require('hard-source-webpack-plugin')
77
// allow us to visualise our bundles and optimise
8-
const Visualizer = require('webpack-visualizer-plugin');
8+
const Visualizer = require('webpack-visualizer-plugin')
99
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
1010
//
1111

@@ -59,15 +59,15 @@ const config = {
5959
test: /\.scss$/,
6060
use: ExtractTextPlugin.extract({
6161
fallback: 'style-loader?sourceMap',
62-
//resolve-url-loader may be chained before sass-loader if necessary
62+
// resolve-url-loader may be chained before sass-loader if necessary
6363
use: [
6464
'css-loader?modules&importLoaders=1&localIdentName="[local]__[hash:base64:5]"',
6565
'sass-loader?sourceMap'
6666
]
6767
})
6868
},
6969
{
70-
test: /\.(png|jpg|gif)$/,
70+
test: /\.(png|jpg|gif|svg)$/,
7171
use: {
7272
loader: 'url-loader',
7373
options: {
@@ -118,7 +118,7 @@ const config = {
118118
/*,
119119
new BundleAnalyzerPlugin()
120120
*/
121-
/*
121+
/*
122122
turn on to create an interactive treemap visualization of the contents of all our bundles
123123
will open automatically after running yarn build
124124

0 commit comments

Comments
 (0)