AA: Update landing page style

src/main/webapp/static/app/index.html

@@ -20,43 +20,36 @@
       <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
     <![endif]-->
 
-    <nav class="navbar navbar-default navbar-static-top">
-      <div class="container-fluid">
-        <!-- Brand and toggle get grouped for better mobile display -->
-        <div class="navbar-header pull-left">
-          <a class="navbar-brand" href="/dashboard.html">
-            <img alt="Pet Clinic Brand" height="27" width="auto" src="images/logo.png">
-          </a>
-        </div>
-
-        <ul class="nav navbar-links pull-right">
-          <li>
-            <a href="#appointment" class="js-scroll-nav">Get started</a>
-          </li>
-          <li>
-            <a href="#">Login</a>
-          </li>
-        </ul>
-        </div>
-      </div><!-- /.container-fluid -->
-    </nav>
-
     <!-- Main jumbotron for a primary marketing message or call to action -->
-    <div class="jumbotron">
+    <div class="jumbotron jumbotron-welcome">
       <div class="container">
+        <header>
+          <a class="navbar-brand pull-left" href="/">
+            <img alt="Pet Clinic Brand" height="27" width="auto" src="images/logo_brand.png">
+          </a>
+          <a class="btn btn-default btn-inverse pull-right" href="#">Sign In</a>
+        </header>
         <div class="jumbotron-headline">
           <div class="jumbotron-headline-cell">
             <h1>Pet care for the People who love them</h1>
             <p>PetClinic is here to enhance people's relationships with their pets</p>
-            <p><a class="btn btn-primary btn-lg js-scroll-nav" href="#veterianarians" role="button">Learn more</a></p>
+            <p>
+              <a class="btn btn-cta js-scroll-nav" href="#appointment" role="button">Make an Appointment</a>
+              <a class="btn btn-cta btn-inverse js-scroll-nav" href="#services" role="button">Learn More</a>
+            </p>
+            <a href="#services" class="scroll-down">Scroll Down</a>
           </div>
         </div>
       </div>
       <video loop="loop" preload="auto" class="jumbotron-video" autoplay muted>
-        <source src="videos/hero-bird.mp4" type="video/mp4">
+        <source src="videos/hero.mp4" type="video/mp4">
       </video>
     </div>
 
+    <!-- Clients -->
+    <section class="sections">
+    </section>
+
     <!-- Featured veterinarians -->
     <section class="sections">
       <div class="container">
@@ -275,7 +268,7 @@
                 <label class="sr-only" for="clientNumber">Contact Number</label>
                 <input type="text" class="form-control input-lg" id="clientNumber" placeholder="Your contact number">
               </div>
-              <button type="submit" class="btn btn-primary btn-lg">Get an Appointment</button>
+              <button type="submit" class="btn btn-cta">Get an Appointment</button>
             </form>
           </div>
         </div>

src/main/webapp/static/app/styles/main.scss

@@ -5,16 +5,17 @@ $text-color-inverse: #fff;
 $headings-color: #252a35;
 $sections-bg: #f9fafb;
 $sections-border: #dee4e8;
-$jumbotron-bg: #42494d;
+$btn-default-color: #747c83;
+$btn-default-border: #D4D5D7;
+$btn-cta: #2e3532;
+$jumbotron-bg: $brand-primary;
 $navbar-default-bg: #23a04d;
 $navbar-default-border: #23a04d;
 $navbar-default-link-color: #b3dcc3;
 $navbar-default-link-hover-color: #fff;
 $navbar-default-link-active-color: #fff;
-$navbar-dropdown-menu: #2e3532;
+$navbar-dropdown-menu: $btn-cta;
 $thumbnail-border: #e6e9ed;
-$btn-default-color: #747c83;
-$btn-default-border: #D4D5D7;
 $input-bg: #D9DCDF;
 $gray-lighter: #e3e5e6;
 
@@ -189,8 +190,11 @@ input::-moz-focus-inner {
   }
 
   .form-control {
-    height: 54px;
-    border: 1px solid $text-color-inverse;
+    background-color: $text-color-inverse;
+    font-size: 16px;
+    font-weight: 400;
+    height: 47px;
+    border: 0;
     border-radius: 3px;
     box-shadow: none;
   }
@@ -227,16 +231,16 @@ input::-moz-focus-inner {
 
 .jumbotron-video {
   position: absolute;
-  opacity: .85;
+  opacity: .15;
   left: 0;
-  top: 0px;
+  right: 0;
+  bottom: 0px;
   z-index: 1;
-  height: auto;
   width: 100%;
 }
 
 .jumbotron-welcome {
-  background-color: $text-color-inverse;
+  height: 700px;
 }
 
 @media (max-width: $screen-md-min) {
@@ -633,6 +637,49 @@ input::-moz-focus-inner {
   }
 }
 
+.btn-inverse {
+  background-color: rgba($text-color-inverse, 0.1);
+  border: 1px solid rgba($text-color-inverse, 0.5);
+  color: $text-color-inverse;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: rgba($text-color-inverse, 0.2);
+    border: 1px solid $text-color-inverse;
+    color: $text-color-inverse;
+  }
+}
+
+.btn-cta {
+  background-color: $btn-cta;
+  border-radius: 4px;
+  color: $text-color-inverse !important;
+  padding: 12px 20px;
+  font-size: 16px;
+  font-weight: 600 !important;
+  text-transform: capitalize;
+
+  &.btn-inverse {
+    @extend .btn-inverse;
+  }
+
+  @media (max-width: $screen-md-min) {
+    display: block;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+}
+
+.btn-cta + .btn-cta {
+  margin-left: 3px;
+  margin-right: 3px;
+
+  @media (max-width: $screen-md-min) {
+    margin: 0;
+  }
+}
+
 .form-group {
   .btn-link {
     color: $text-color;
@@ -985,4 +1032,18 @@ label {
       border: 0;
     }
   }
+}
+
+.scroll-down {
+  background: image-url("images/arrow_down.png") no-repeat center center;
+  display: inline-block;
+  height: 16px;
+  text-indent: -9999px;
+  width: 33px;
+  z-index: 230;
+  position: absolute;
+  bottom: -20px;
+  opacity: .3;
+  left: 50%;
+  margin-left: -16px;
 }