VRFS-1047 Implement the new landing page.

Setup core layout.

web/app/assets/stylesheets/web/main.css.scss

@@ -14,6 +14,25 @@ body.web {
   overflow: visible  !important;
   width:auto !important;
 
+  div.wrapper {
+    width:1100px;
+    margin:0 auto;
+    white-space:nowrap;
+    position:relative;
+
+    .home-questions {
+      font-size: 20px;
+      color: #ed3718;
+      padding-top:30px;
+      padding-bottom:40px;
+      text-align:center;
+    }
+  }
+
+  #profile.userinfo {
+    margin-top:30px;
+  }
+
   .logo-home {
     width: 298px;
     margin-top: 30px;
@@ -22,14 +41,22 @@ body.web {
 
   .landing-tag {
     display:inline-block;
-    margin-left:70px;
-    width:400px;
+    width:360px;
+
+    h1 {
+      margin:40px 0;
+      color:#ed3718;
+      font-size:30px;
+      font-weight:300;
+    }
   }
 
-  .landing-tag h1 {
-    color:#ed3718;
-    font-size:26px;
-    font-weight:300;
+  .login-wrapper {
+    #signin {
+      margin-top:8px;
+      width:348px;
+      text-align:center;
+    }
   }
 
   .landing-content {
@@ -39,13 +66,12 @@ body.web {
     min-height: 366px;
     position:relative;
     padding-bottom:30px;
-  }
 
-  div.wrapper {
-    width:1100px;
-    margin:0 auto;
-    white-space:nowrap;
-    position:relative;
+    h2 {
+      font-size:24px;
+      color:#ccc;
+      font-weight:200;
+    }
   }
 
   .landing-sidebar {
@@ -91,14 +117,14 @@ body.web {
     -moz-border-radius:57px;
     border-radius:57px;
     margin-bottom:10px;
-  }
 
-  .landing-avatar img {
-    width:110px;
-    height:110px;
-    -webkit-border-radius:55px;
-    -moz-border-radius:55px;
-    border-radius:55px;
+    img {
+      width:110px;
+      height:110px;
+      -webkit-border-radius:55px;
+      -moz-border-radius:55px;
+      border-radius:55px;
+    }
   }
 
   .landing-details {
@@ -107,32 +133,26 @@ body.web {
     font-size:14px;
     font-weight:400;
     color:#666;
-  }
 
-  .landing-details a {
-    text-decoration:none;
-    color:#ccc;
-  }
+    a {
+      text-decoration:none;
+      color:#ccc;
 
-  .landing-details a:hover {
-    color:#fff;
-  }
-
-  .landing-content h2 {
-    font-size:24px;
-    color:#ccc;
-    font-weight:200;
+      &:hover {
+        color:#fff;
+      }
+    }
   }
 
   .landing-comments {
     margin-left:140px;
     width:515px;
-  }
-
-  .landing-comments a {
-    text-decoration:none;
-    font-weight:bold;
-    color:#ED3618;
+    
+    a {
+      text-decoration:none;
+      font-weight:bold;
+      color:#ED3618;
+    }
   }
 
   .landing-comment-scroller {
@@ -154,14 +174,14 @@ body.web {
     -webkit-border-radius:18px;
     -moz-border-radius:18px;
     border-radius:18px;
-  }
 
-  .avatar-small img {
-    width: 36px;
-    height: 36px;
-    -webkit-border-radius:18px;
-    -moz-border-radius:18px;
-    border-radius:18px;
+    img {
+      width: 36px;
+      height: 36px;
+      -webkit-border-radius:18px;
+      -moz-border-radius:18px;
+      border-radius:18px;
+    }
   }
 
   .cta {
@@ -192,6 +212,11 @@ body.web {
     padding: 0;
   }
 
+  #footer-container {
+    top:initial;
+    height:initial;
+    padding-bottom:40px;
+  }
 
   // all custom CSS for the register page goes here
   .register-page {
@@ -339,10 +364,10 @@ strong {
 .message-wrapper {
   margin: 0 auto;
   width: 480px;
-}
-.message-wrapper .left {
-  display: block;
-  overflow: visible;
+  .left {
+    display: block;
+    overflow: visible;
+  }
 }
 .message {
   display: block;
@@ -350,18 +375,17 @@ strong {
   margin-left: 20px;
   overflow: visible;
   width: 320px;
-}
 
-.message h2 {
-  border-bottom: 1px solid #FFFFFF;
-  color: #FFFFFF;
-  display: block;
-  font-weight: 200;
-  margin-bottom: 10px;
-  font-size:21px;
+  h2 {
+    border-bottom: 1px solid #FFFFFF;
+    color: #FFFFFF;
+    display: block;
+    font-weight: 200;
+    margin-bottom: 10px;
+    font-size:21px;
+  }
 }
 
-
 .spinner-large {
   vertical-align:middle;
   text-align: center;

web/app/assets/stylesheets/web/web.css

@@ -11,5 +11,6 @@
 *= require web/main
 *= require web/footer
 *= require web/recordings
+*= require web/welcome
 #= require web/sessions
 */

web/app/controllers/users_controller.rb

@@ -120,6 +120,14 @@ class UsersController < ApplicationController
     render :layout => "web"
   end
 
+  def welcome
+    if current_user
+
+    end
+    @hide_user_dropdown = true
+    render :layout => "web"
+  end
+
   def signup_confirm
     signup_token = params[:signup_token]
 

web/app/views/clients/_footer.html.erb

@@ -6,10 +6,11 @@
 
   <!-- footer links -->
   <div id="footer-links">
-    <%= link_to "about", corp_about_path , :rel=>"external" %>&nbsp;&nbsp;|&nbsp;&nbsp;<%= link_to "news", corp_news_path , :rel=>"external" %>&nbsp;&nbsp;|&nbsp;&nbsp;<%= link_to "media", corp_media_center_path , :rel=>"external" %>&nbsp;&nbsp;|&nbsp;&nbsp;<%= link_to "contact", corp_contact_path , :rel=>"external" %>&nbsp;&nbsp;|&nbsp;&nbsp;<%= link_to "privacy", corp_privacy_path, :rel=>"external" %>&nbsp;&nbsp;|&nbsp;&nbsp;<%= link_to "terms of service", corp_terms_path , :rel=>"external" %>&nbsp;&nbsp;|&nbsp;<%= link_to "help", corp_help_path , :rel=>"external" %>
+    <%= link_to "about", corp_about_path , :rel=>"external" %>&nbsp;&nbsp;|&nbsp;&nbsp;<%= link_to "news", corp_news_path , :rel=>"external" %>&nbsp;&nbsp;|&nbsp;&nbsp;<%= link_to "media", corp_media_center_path , :rel=>"external" %>&nbsp;&nbsp;|&nbsp;&nbsp;<%= link_to "contact", corp_contact_path , :rel=>"external" %>&nbsp;&nbsp;|&nbsp;&nbsp;<%= link_to "privacy", corp_privacy_path, :rel=>"external" %>&nbsp;&nbsp;|&nbsp;&nbsp;<%= link_to "terms of service", corp_terms_path , :rel=>"external" %>&nbsp;&nbsp;|&nbsp;&nbsp;<%= link_to "help", corp_help_path , :rel=>"external" %>
   </div>
 
   <%= render "clients/recordingManager" %>
 
+  <div class="clearall"></div>
 </div>
 <!-- end footer -->

web/app/views/layouts/web.erb

@@ -27,18 +27,15 @@
         <% end %>
       </div>
 
-      <div class="landing-tag">
-        <h1>Play music together over the Internet as if in the same room</h1>
-      </div>
-
-      <%= render "users/user_dropdown" %>
+      <% unless @hide_user_dropdown %>
+          <%= render "users/user_dropdown" %>
+      <% end %>
 
       <br clear="all" /><br /><br />
     </div>
 
     <div class="landing-content">
       <div class="wrapper">
-        <br /><br />
         <%= yield %>
       </div>
     </div>

web/app/views/users/welcome.html.erb

@@ -0,0 +1,16 @@
+<%= content_tag(:div, :class => "landing-tag") do -%>
+  <%= content_tag(:h1, "Play music together over the Internet as if in the same room") %>
+<% end %>
+<div class="clearall"></div>
+<div class="login-wrapper">
+  <%= link_to image_tag("/assets/web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup" %>
+  <div class="clearall"></div>
+  <%= link_to "Already have an account?", signin_path, class: "signin", id: "signin" %>
+</div>
+
+<% content_for :after_black_bar do %>
+    <%= content_tag(:div, :class => "home-questions") do -%>
+        Have questions about how JamKazam works?
+        <a href="#" id="faq-open">Here are some answers</a>.
+    <% end %>
+<% end %>

web/config/routes.rb

@@ -9,7 +9,8 @@ SampleApp::Application.routes.draw do
   resources :sessions, only: [:new, :create, :destroy]
 
   #root to: 'static_pages#home'
-  root to: 'clients#index'
+  #root to: 'clients#index'
+  root to: 'users#welcome'
 
   # This page is still here, and is under test. Keep a route to it.
   match '/oldhome', to: 'static_pages#home'