redesign landing page

Author: data-doge

app/assets/img/phone_new.svg

@@ -3,11 +3,15 @@
 
   <div class="landing-page__top-content" layout="row" layout-align="space-around center">
     <div class="landing-page__mobile-preview">
-      <img src="./img/smartphone.svg" class="landing-page__smartphone-img" alt="" />
+      <object class="landing-page__smartphone-img" type="image/svg+xml" data="/img/phone_new.svg"></object>
     </div>
 
     <div class="landing-page__form-container" layout="column" layout-align="center center">
-      <h2 class="landing-page__form-header">Crowdsource and fund projects together</h2>
+      <img class="landing-page__logo" ng-src="/img/color_logo.svg" alt=""/>
+
+      <h2 class="landing-page__form-header">Crowdsource and fund projects</h2>
+
+      <h3 class="landing-page__form-subheader">Activate <span class="landing-page__form-subheader-faded">hidden</span> talent</h3>
 
       <form novalidate name="emailForm" class="landing-page__form" ng-submit="emailForm.$valid && startGroup()">
         <div class="landing-page__input-container">

app/assets/img/smartphone.svg

@@ -30,15 +30,33 @@
 
 // form
 
+.landing-page__logo {
+  max-width: 300px;
+  margin-bottom: 15px;
+}
+
 .landing-page__form-header {
   font-weight: 300;
   font-size: 34px;
   text-align: center;
   margin-top: 0;
+  margin-bottom: 15px;
+}
+
+.landing-page__form-subheader {
+  color: #68696B;
+  font-weight: 400;
+  font-size: 24px;
+  margin: 0;
+  margin-bottom: 15px;
+}
+
+.landing-page__form-subheader-faded {
+  color: #AEB0B3;
 }
 
 .landing-page__form-container {
-  width: 350px;
+  width: 475px;
 }
 
 .landing-page__form {
@@ -64,6 +82,7 @@
   font-weight: 400;
   text-align: center;
   width: 220px;
+  margin-bottom: 5px;
 }
 
 .landing-page__email-field:focus {
@@ -122,10 +141,24 @@
 
 // mobile
 
-@media (max-width: 720px) {
+@media (max-width: 900px) {
   .landing-page__mobile-preview {
     display: none;
   }
+
+  .landing-page-toolbar__logo-link {
+    display: none;
+  }
+
+  .landing-page-toolbar__logo-link-buffer {
+    display: none;
+  }
+}
+
+@media (min-width: 900px) {
+  .landing-page__logo {
+    display: none;
+  }
 }
 
 @media (max-height: 420px) {

app/components/landing-page/landing-page.html

@@ -1,4 +1,10 @@
 <div class="landing-page-toolbar" layout="row" layout-align="end center">
+  <a href="/" class="landing-page-toolbar__logo-link">
+    <img class="landing-page-toolbar__logo" ng-src="/img/color_logo.svg" alt=""/>
+  </a>
+
+  <span class="landing-page-toolbar__logo-link-buffer" flex></span>
+
   <div class="landing-page-toolbar__header-btns">
     <md-button ng-if="false" class="landing-page-toolbar__header-btn" ng-click="redirectToAboutPage()">About</md-button>
     <md-button class="landing-page-toolbar__header-btn" ng-click="redirectToResourcesPage()">Resources</md-button>

app/components/landing-page/landing-page.scss

@@ -8,6 +8,18 @@
   padding-right: 20px;
 }
 
+.landing-page-toolbar__logo {
+  width: 150px;
+  margin-left: 25px;
+  height: 35px;
+}
+
+.landing-page-toolbar__logo-link {
+  &:focus {
+    outline: none;
+  }
+}
+
 .landing-page-toolbar__header-btn {
   font-size: 15px;
   font-weight: 400;