Skip to content

Commit 56c86d7

Browse files
goodgoofgoodgoof
authored
Merge pull request #216 from CodeForSocialGood/Feature/#155492507
Combine six landing page sections into a single Lander component and …
2 parents f70a14d + e7f9a1d commit 56c86d7

File tree

11 files changed

+98
-56
lines changed

11 files changed

+98
-56
lines changed

‎client/App.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ class App extends Component {
4444

4545
renderAppLoaded () {
4646
return (
47-
<div>
47+
<div style={{'width': '100%'}}>
4848
<Header />
4949
<Version />
5050
<Switch>

‎client/components/Home/Home.js

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,17 @@ import React, { Component } from 'react'
22
import PropTypes from 'prop-types'
33
import { connect } from 'react-redux'
44
import Checkbox from 'material-ui/Checkbox'
5-
import { FormGroup, FormLabel, FormControlLabel } from 'material-ui/Form'
5+
import { FormControlLabel } from 'material-ui/Form'
66

77
import ProjectActionCreator from '../../actions/project'
8-
import ListOfProjects from '../ListOfProjects/ListOfProjects'
98
import styles from './Home.scss'
10-
import { causes, technologies } from '../shared/constants'
9+
10+
import LandingA from '../LandingA/LandingA'
11+
import LandingB from '../LandingB/LandingB'
12+
import LandingC from '../LandingC/LandingC'
13+
import LandingD from '../LandingD/LandingD'
14+
import LandingE from '../LandingE/LandingE'
15+
import LandingF from '../LandingF/LandingF'
1116

1217
class Home extends Component {
1318
constructor (props) {
@@ -69,26 +74,16 @@ class Home extends Component {
6974

7075
render () {
7176
return (
72-
<div className={styles.homeContainer}>
73-
<div className={styles.homeGrid}>
74-
<h1 className={styles.title}>Find Projects</h1>
75-
<section className={styles.filterSection}>
76-
<span className={styles.filterTitle}><h1>{'Filters'}</h1></span>
77-
<FormLabel className={styles.causeTitle}>Causes</FormLabel>
78-
<FormGroup className={styles.causesList}>
79-
{ this.renderList(causes, 'causes') }
80-
</FormGroup>
81-
<FormLabel className={styles.techTitle}>Tech</FormLabel>
82-
<FormGroup className={styles.techList}>
83-
{ this.renderList(technologies, 'technologies') }
84-
</FormGroup>
85-
</section>
86-
87-
<ListOfProjects
88-
title={'Find Projects'}
89-
projects={this.state.filteredProjects}
90-
className={styles.projectList}
91-
/>
77+
<div style={{'width': '100%'}}>
78+
<LandingA/>
79+
<div style={{'marginTop': '100vh', 'width': '100%'}}>
80+
<LandingB/>
81+
<LandingC/>
82+
<LandingD/>
83+
</div>
84+
<div style={{'position': 'absolute', 'left': 0, 'right': 0}}>
85+
<LandingE/>
86+
<LandingF/>
9287
</div>
9388
</div>
9489
)

‎client/components/Home/Home.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,3 +97,22 @@
9797
.checkBoxes {
9898
margin-top: -2px;
9999
}
100+
101+
.landingA {
102+
height: 900px;
103+
}
104+
105+
.landingB {
106+
}
107+
108+
.landingC {
109+
}
110+
111+
.landingD {
112+
}
113+
114+
.landingE {
115+
}
116+
117+
.landingF {
118+
}

‎client/components/LandingA/LandingA.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ $white: #fff;
1212
padding: 40px 50px;
1313
position: absolute;
1414
right: 0;
15+
top: 0;
1516
}
1617

1718
.nav {

‎client/components/LandingB/LandingB.scss

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.globalNetwork{
44
text-align: center;
5-
font-size: 46px;
5+
font-size: 46px;
66
}
77

88
.volunteerOrgButtons{
@@ -13,21 +13,21 @@
1313
align-items: center;
1414
margin-top: 47px;
1515
text-transform: uppercase;
16-
16+
1717
}
1818

19-
.volunteers{
19+
.volunteers{
2020
display: flex;
21-
align-items: center;
21+
align-items: center;
2222
justify-content: center;
23-
background-color: $black;
23+
background-color: $black;
2424
height: 100%;
2525
width: 235px;
2626
border-radius: 200px 0 0 200px;
27-
color: $white;
27+
color: $white;
2828
font-size: 13.8px;
2929
font-weight: bold;
30-
letter-spacing: 2.8px;
30+
letter-spacing: 2.8px;
3131
cursor: pointer;
3232
}
3333

@@ -41,15 +41,15 @@
4141
border-radius: 0 200px 200px 0;
4242
color: $black;
4343
font-size: 13.8px;
44-
font-weight: bold;
45-
letter-spacing: 2.8px;
44+
font-weight: bold;
45+
letter-spacing: 2.8px;
4646
cursor: pointer;
4747
}
4848

4949
.wrapper{
5050
margin-top: 70px;
5151
display: grid;
52-
grid-template-columns: repeat(3, 1fr);
52+
grid-template-columns: repeat(3, 1fr);
5353
}
5454
.createProfile{
5555
grid-column: 1;
@@ -66,7 +66,7 @@
6666
.searchProjects,
6767
.applyForProjects{
6868
display: flex;
69-
flex-direction: column;
69+
flex-direction: column;
7070
align-items: center;
7171
}
7272

@@ -77,24 +77,24 @@
7777
}
7878

7979
.subtitle{
80-
margin-top: 22px;
81-
height: 12px;
80+
margin-top: 22px;
81+
height: 12px;
8282
font-family: Gotham;
8383
font-size: 12px;
84-
font-weight: bold;
84+
font-weight: bold;
8585
letter-spacing: 2.4px;
8686
text-align: center;
8787
color: #212121;
8888
text-transform: uppercase;
8989
}
90-
.description{
91-
margin-top: 15px;
92-
width: 206px;
90+
.description{
91+
margin-top: 15px;
92+
width: 206px;
9393
opacity: 0.67;
9494
font-family: Gotham;
95-
font-size: 14px;
95+
font-size: 14px;
9696
line-height: 1.71;
9797
letter-spacing: 0.5px;
9898
text-align: center;
99-
color: #262626;
100-
}
99+
color: #262626;
100+
}

‎client/components/LandingC/LandingC.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
.container {
44
left: 0;
55
padding: 20px 20px;
6-
position: absolute;
76
right: 0;
87
}
98

@@ -13,6 +12,7 @@
1312
line-height: 2.33;
1413
letter-spacing: normal;
1514
font-size: 30px;
15+
color: #212121;
1616
}
1717

1818
.map {

‎client/components/LandingD/LandingD.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ $coolgrey: #9fa3a7;
1313
left: 0;
1414
right: 0;
1515
padding: 20px 20px;
16-
position: absolute;
1716
}
1817

1918
.subcontainer {
@@ -97,11 +96,12 @@ a.learnMore {
9796

9897
.viewAllContainer {
9998
position: relative;
99+
height: 200px;
100100
}
101101

102102
a.viewAll {
103103
@include centerer;
104-
margin-top: 100px;
104+
margin-bottom: 50px;
105105
border-radius: 1.2px;
106106
background: $top-red;
107107
padding: 23px 52px;

‎client/components/LandingE/LandingE.scss

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,8 @@ $white: #fff;
88
.container {
99
background: linear-gradient(to bottom, #e74e2b, #ff3e3e);
1010
height: 423px;
11-
left: 0;
12-
right: 0;
11+
width: 100%;
1312
display: grid;
14-
position: absolute;
15-
margin: 0 auto;
1613
justify-items: center;
1714
}
1815

‎client/components/LandingF/LandingF.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ class Footer extends React.Component {
2020

2121
<div className={styles.column3}>
2222
<ul className={styles.list}>
23-
<li className={styles.about}><a href="#" className={styles.link}>About</a></li>
23+
<li className={styles.about}><a href="/about" className={styles.link}>About</a></li>
2424
</ul>
2525
</div>
2626

‎client/components/LandingF/LandingF.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,6 @@ $white: #ffffff;
1414
grid-template-columns: 1fr .6fr .6fr 1fr;
1515
grid-template-rows: auto;
1616
grid-column-gap: 5px;
17-
left: 0;
18-
right: 0;
19-
position: absolute;
2017
}
2118

2219
.projects, .about {

0 commit comments

Comments
 (0)