landing page cosmetics

mitraman · Sep 2, 2017 · 774724c · 774724c
1 parent 24d4552
commit 774724c
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 36 deletions.
diff --git a/src/css/app.scss b/src/css/app.scss
@@ -13,3 +13,28 @@
   border-radius: 255px 15px 225px 13px/15px 225px 15px 255px;
   border:solid 2px #41403E;
 }
+
+.landing-buttonbar {
+  padding-left: 1.0em;
+}
+
+.registration-section {
+  background-color: #62757f;
+  color: white;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  padding-right: 1.0em;
+  margin-top: 2.0em;
+}
+
+.banner {
+  padding-left: 1.0em;
+  padding-bottom: 1.5em;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.copy {
+  padding-left: 1.0em;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 1.5em;
+}
diff --git a/src/img/API-Academy-Black-300ppi.png b/src/img/API-Academy-Black-300ppi.png
diff --git a/src/api-academy-logo.gif → src/img/api-academy-logo.gif b/src/api-academy-logo.gif → src/img/api-academy-logo.gif
diff --git a/src/js/Export.jsx b/src/js/Export.jsx
diff --git a/src/js/modules/Landing.jsx b/src/js/modules/Landing.jsx
@@ -63,16 +63,22 @@ export default class extends React.Component{
 
     return(
       <div id="landing">
-        {githubBadge}
         <Header/>
+        <div className="container-fluid">
         <div className="row">
           <AlertContainer ref={(a) => this.msg = a} {...this.alertOptions} />
-          <div className="col-md-4">
-            <h3>Sketch your way to a great API.</h3>
+          <div className="col-md-8">
+            <div className="banner"><h2>Discover your best API design faster.</h2></div>
+            <div className="copy">
+              <p>Rapido is an <a href="www.apiacademy.co">API Academy tool</a> that lets your rapidly <i>sketch</i> an API design.</p>
           </div>
-          <div className="col-md-3 registration-section">
-              <RegistrationForm alertBox={this.state.alertBox} registrationSuceeded={registered} />
           </div>
+          <div className="col-md-4 registration-section">
+            <RegistrationForm alertBox={this.state.alertBox} registrationSuceeded={registered} />
+          </div>
+        </div>
+        <div className="row">
+        </div>
         </div>
       </div>
     )

diff --git a/src/js/modules/header/Header.jsx b/src/js/modules/header/Header.jsx
@@ -2,7 +2,8 @@ import React from 'react'
 import { Link, Redirect } from 'react-router-dom'
 import LoginForm from '../login/LoginForm.jsx'
 import Modal from '../Modal.jsx'
-import '../../../css/header.scss'
+import '../../../css/header.scss';
+import APIAcademyLogo from '../../../img/api-academy-logo.gif';
 import 'bootstrap/dist/js/bootstrap';
 
 export default class extends React.Component{
@@ -21,34 +22,32 @@ export default class extends React.Component{
 
   render() {
     let authenticated = this.props.authenticated;
-
-    let headerSection, loginSection, loginButton;
-
-    headerSection = <div className="row">
-      <div className="col-md-1">
-        <h1 id="logo" className="app-title"><Link to="/home" id="logo" >Rápido</Link></h1>
-      </div>
-      <div className="col-md-9 pull-left">
-        <h1>
-          <button type="button" className="btn btn-default btn-lg" id="login" data-toggle="modal" data-target="#loginModal">Log In</button>
-        </h1>
-      </div>
-      <div className="col-md-2 pull-left">API Academy Logo</div>
-    </div>
-
     let loginBody = <LoginForm loginSucceeded={ () => { this.loginSucceeded();} }  />
 
-
     if(this.state.loggedIn) {
       return (
         <Redirect push to="/projects"/>
       );
     }
 
     return (
-      <div className="">
+      <div id="guestHeader" >
         <Modal id="loginModal" title="Sign in" body={loginBody}/>
-        {headerSection}
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-md-1">
+              <h1 id="logo" className="app-title"><Link to="/home" id="logo" >Rápido</Link></h1>
+            </div>
+            <div className="col-md-10">
+              <h1 className="landing-buttonbar">
+                <button type="button" className="btn btn-default btn-lg" id="login" data-toggle="modal" data-target="#loginModal">Log In</button>
+              </h1>
+            </div>
+            <div className="col-md-1">
+              <a className="navbar-brand" href="http://apiacademy.co"><img height="50px" src={APIAcademyLogo}/></a>
+            </div>
+          </div>
+        </div>
       </div>
     )
   }

diff --git a/src/js/modules/register/RegistrationForm.jsx b/src/js/modules/register/RegistrationForm.jsx
@@ -167,10 +167,10 @@ export default class extends React.Component{
   render() {
     let creationLabel;
     if (!this.props.fromDashboard) {
-      creationLabel = <h3>Create an account</h3>
+      creationLabel = <h3>Create an account and start sketching</h3>
     }
     return(
-      <div className="col-md-12">
+      <div>
         <form id="registration" className="col-md-12 create-account-form" >
           {creationLabel}
           <div id="fullName" className={this.state.inputClassList.fullName}>