155111450 - add landing page, section C (#177)

* 155111450 - add landing page, section C

* 155111450 - Modify comment

Author: ckshobha

client/App.js

@@ -14,6 +14,7 @@ import restricted from './components/Restricted/Restricted'
 import SignupForm from './components/SignupForm/SignupForm'
 import Version from './components/Version/Version'
 import LandingA from './components/LandingA/LandingA'
+import LandingC from './components/LandingC/LandingC'
 
 // set up components for lazy loading
 const ProfileRestrictedLoadable = restricted(Loadable({
@@ -44,6 +45,7 @@ class App extends Component {
           <Route path='/profile' component={ProfileRestrictedLoadable}/>
           <Route path='/signup' component={SignupForm}/>
           <Route path='/landing-a' component={LandingA} />
+          <Route path='/landing-c' component={LandingC} />
         </Switch>
       </div>
     )

client/components/LandingA/LandingA.scss

@@ -2,7 +2,6 @@
 
 $black: #000;
 $bottom-red: #ff3e3e;
-$text-red: #ea4c2d;
 $top-red: #e74e2b;
 $white: #fff;
 

client/components/LandingC/LandingC.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react'
+import styles from './LandingC.scss'
+import map from '../../images/map.png'
+import { callToCodeEfforts } from '../shared/constants'
+
+/**
+ * TODO: callToCodeEfforts constants should be removed once the API to
+ * get the efforts are implemented
+ */
+class LandingC extends Component {
+  constructor (props) {
+    super(props)
+    this.getLinkStyles = this.getLinkStyles.bind(this)
+  }
+
+  getLinkStyles (itemType) {
+    return itemType === 'number'
+      ? `${styles.number} ${styles.effortItem}`
+      : `${styles.label} ${styles.effortItem}`
+  }
+
+  renderList (items, type) {
+    return items.map((item, index) => {
+      return (
+        <div key={index} className={this.getLinkStyles(type)}>
+          {item}
+        </div>
+      )
+    })
+  }
+
+  render () {
+    return (
+      <div className={styles.container}>
+        <h1 className={styles.landingPageHeading}>
+          {'A truly international effort'}
+        </h1>
+        <div className={styles.map}>
+          <img src={map} alt="Call to code presence international" />
+        </div>
+        <div className={styles.effortsSection}>
+          { this.renderList(Object.values(callToCodeEfforts), 'number') }
+          { this.renderList(Object.keys(callToCodeEfforts), 'label') }
+        </div>
+      </div>
+    )
+  }
+}
+
+export default LandingC

client/components/LandingC/LandingC.scss

@@ -0,0 +1,52 @@
+@import "../../scss/partials/partials";
+
+.container {
+  left: 0;
+  padding: 20px 20px;
+  position: absolute;
+  right: 0;
+}
+
+.landingPageHeading {
+  text-align: center;
+  padding-bottom: 30px;
+  line-height: 2.33;
+  letter-spacing: normal;
+  font-size: 30px;
+}
+
+.map {
+  width: 929px;
+  height: 488px;
+  object-fit: contain;
+  margin:0px auto;
+  display: block;
+  margin-bottom: 30px;
+}
+
+.effortsSection {
+  margin: auto;
+  width: 60%;
+  padding: 10px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-column-gap: 10px;
+  grid-template-rows: auto;
+  grid-gap: 15px;
+  justify-items: center;
+  align-items: center;
+}
+
+.effortItem {
+  text-align: center;
+}
+
+.number {
+  font-size: 350%;
+  color: $text-red
+}
+
+.label {
+  font-size: 20px;
+  font-weight: 300;
+}

client/components/shared/constants/callToCodeEfforts.js

@@ -0,0 +1,11 @@
+export const VOLUNTEERS = 1254
+export const PROJECTS = 73
+export const ORGANIZATIONS = 52
+export const COUNTRIES = 72
+
+export default {
+  Volunteers: VOLUNTEERS,
+  Projects: PROJECTS,
+  Organizations: ORGANIZATIONS,
+  Countries: COUNTRIES
+}

client/components/shared/constants/index.js

@@ -1,2 +1,3 @@
 export { default as causes } from './causes'
 export { default as technologies } from './technologies'
+export { default as callToCodeEfforts } from './callToCodeEfforts'

client/images/map.png

@@ -9,3 +9,4 @@ $listColor: darkgray;
 $errorColor: red;
 $validInputColor: #3E9B2A;
 $inputsBorderColor: #C6CBD4;
+$text-red: #EA4C2D;