Feature/#155111428 - Visitor sees Landing Page (Section A) (#172)

Author: razwanizmi

client/App.js

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

client/components/LandingA/LandingA.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import Button from 'material-ui/Button'
+import styles from './LandingA.scss'
+import logo from '../../images/logo-home.png'
+import neonLike from '../../images/neon-like.png'
+
+const LandingA = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.nav}>
+        <Link to="/">
+          <img src={logo} alt="Call to code logo" />
+        </Link>
+        <div>
+          <Button to="/" component={Link} className={styles.navLink}>
+            PROJECTS
+          </Button>
+          <Button to="/login" component={Link} className={styles.navLink}>
+            LOG IN
+          </Button>
+          <Button to="/signup" component={Link} className={styles.navButton}>
+            SIGN UP
+          </Button>
+        </div>
+      </div>
+      <div className={styles.hero}>
+        <div className={styles.heroLeft}>
+          <h1 className={styles.heroHeader}>
+            Change the world with your code.
+          </h1>
+          <div>
+            <Button to="/" component={Link} className={styles.heroButton}>
+              FIND PROJECTS
+            </Button>
+          </div>
+        </div>
+        <div className={styles.heroRight}>
+          <img src={neonLike} alt="Neon like" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default LandingA

client/components/LandingA/LandingA.scss

@@ -0,0 +1,94 @@
+@import "../../scss/partials/partials";
+
+$black: #000;
+$bottom-red: #ff3e3e;
+$text-red: #ea4c2d;
+$top-red: #e74e2b;
+$white: #fff;
+
+.container {
+  background: linear-gradient($top-red, $bottom-red);
+  height: 100vh;
+  left: 0;
+  padding: 40px 50px;
+  position: absolute;
+  right: 0;
+}
+
+.nav {
+  align-items: center;
+  display: flex;
+  height: 43px;
+  justify-content: space-between;
+}
+
+.navLink {
+  margin: 0 10px;
+
+  span {
+    color: $white;
+    font-size: 14px;
+    letter-spacing: 2.3px;
+  }
+}
+
+a.navButton {
+  background: $white;
+  border-radius: 49.5px;
+  margin: 0 10px;
+  padding: 13px 28px;
+
+  &:active,
+  &:focus,
+  &:hover {
+    background: $white;
+  }
+
+  span {
+    color: $text-red;
+    font-size: 14px;
+    letter-spacing: 2.3px;
+  }
+}
+
+.hero {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin: 131px 55px 0;
+}
+
+.heroLeft {
+  flex-basis: 553px;
+}
+
+.heroRight {
+  flex-basis: 1;
+}
+
+.heroHeader {
+  color: $white;
+  font-size: 64px;
+  font-weight: bold;
+  line-height: 74px;
+  margin-bottom: 40px;
+}
+
+a.heroButton {
+  background: $white;
+  border-radius: 49.5px;
+  padding: 23px 52px;
+
+  &:active,
+  &:hover,
+  &:focus {
+    background: $white;
+  }
+
+  span {
+    color: $black;
+    font-size: 12px;
+    font-weight: bold;
+    letter-spacing: 2.4px;
+  }
+}

client/images/logo-home.png

@@ -90,6 +90,7 @@
     "eslint-plugin-promise": "^3.5.0",
     "eslint-plugin-react": "^7.4.0",
     "eslint-plugin-standard": "^3.0.1",
+    "file-loader": "^1.1.6",
     "geckodriver": "^1.10.0",
     "ignore-styles": "^5.0.1",
     "mongodb-memory-server": "^1.6.3",

client/images/neon-like.png

@@ -3741,6 +3741,13 @@ file-entry-cache@^2.0.0:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
+file-loader@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.6.tgz#7b9a8f2c58f00a77fddf49e940f7ac978a3ea0e8"
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.0"
+
 file-type@^3.8.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/file-type/-/file-type-3.9.0.tgz#257a078384d1db8087bc449d107d52a52672b9e9"