From 4c85740597057b9777550fb2b021d32a480d86bf Mon Sep 17 00:00:00 2001
From: Seth Call <sethcall@gmail.com>
Date: Wed, 13 Aug 2014 11:09:52 -0500
Subject: [PATCH 1/4] * wip

---
 ruby/lib/jam_ruby/models/connection.rb        |   2 +-
 web/Gemfile                                   |   1 +
 .../stylesheets/client/content-orig.css.scss  |   2 +-
 .../stylesheets/client/content.css.scss       |   2 +-
 .../landings/landing_page.css.scss            | 110 ++++++++++++++++++
 web/app/assets/stylesheets/web/main.css.scss  |   8 +-
 web/app/assets/stylesheets/web/web.css        |   1 +
 .../assets/stylesheets/web/welcome.css.scss   |   2 +-
 web/app/controllers/landings_controller.rb    |  23 ++++
 web/app/views/landings/watch_bands.html.slim  |  17 +++
 web/app/views/users/_buzz.html.erb            |   2 +-
 web/config/routes.rb                          |   3 +
 12 files changed, 164 insertions(+), 9 deletions(-)
 create mode 100644 web/app/assets/stylesheets/landings/landing_page.css.scss
 create mode 100644 web/app/controllers/landings_controller.rb
 create mode 100644 web/app/views/landings/watch_bands.html.slim

diff --git a/ruby/lib/jam_ruby/models/connection.rb b/ruby/lib/jam_ruby/models/connection.rb
index 186635bce..027a9d945 100644
--- a/ruby/lib/jam_ruby/models/connection.rb
+++ b/ruby/lib/jam_ruby/models/connection.rb
@@ -153,7 +153,7 @@ module JamRuby
       true
     end
 
-    def join_the_session(music_session, as_musician, tracks, user, audio_latency)
+      def join_the_session(music_session, as_musician, tracks, user, audio_latency)
       self.music_session_id = music_session.id
       self.as_musician = as_musician
       self.joining_session = true
diff --git a/web/Gemfile b/web/Gemfile
index 288fe86b4..14a1de9c0 100644
--- a/web/Gemfile
+++ b/web/Gemfile
@@ -87,6 +87,7 @@ group :development, :test do
   gem 'execjs', '1.4.0'
   gem 'factory_girl_rails', '4.1.0' # in dev because in use by rake task
   gem 'database_cleaner', '1.3.0' #in dev because in use by rake task
+  gem 'slim'
 end
 group :unix do
   gem 'therubyracer' #, '0.11.0beta8'
diff --git a/web/app/assets/stylesheets/client/content-orig.css.scss b/web/app/assets/stylesheets/client/content-orig.css.scss
index 0d176ded4..e653f3f50 100644
--- a/web/app/assets/stylesheets/client/content-orig.css.scss
+++ b/web/app/assets/stylesheets/client/content-orig.css.scss
@@ -342,7 +342,7 @@ ul.shortcuts {
 .tagline {
   font-size:30px;
   margin-top:35px;
-  color:#ed3718;
+  color:#ed3618;
   font-weight:300;
   width:345px;
   clear:left;
diff --git a/web/app/assets/stylesheets/client/content.css.scss b/web/app/assets/stylesheets/client/content.css.scss
index d5e335f43..aba873c49 100644
--- a/web/app/assets/stylesheets/client/content.css.scss
+++ b/web/app/assets/stylesheets/client/content.css.scss
@@ -516,7 +516,7 @@ ul.shortcuts {
 .tagline {
   font-size:30px;
   margin-top:35px;
-  color:#ed3718;
+  color:#ed3618;
   font-weight:300;
   width:345px;
   clear:left;
diff --git a/web/app/assets/stylesheets/landings/landing_page.css.scss b/web/app/assets/stylesheets/landings/landing_page.css.scss
new file mode 100644
index 000000000..bd3986770
--- /dev/null
+++ b/web/app/assets/stylesheets/landings/landing_page.css.scss
@@ -0,0 +1,110 @@
+@import "client/common.css.scss";
+// landing_page is a a/b testing landing page
+
+// #ed3618   - orange
+$headerText: white;
+
+body.web.landing_page {
+  #profile {
+    display:none;
+  }
+
+  .landing-content {
+
+    h1 {
+      color: $headerText !important;
+      font-size:20px;
+      font-weight:normal;
+    }
+    .column {
+      float:left;
+      @include border_box_sizing;
+
+      &:nth-child(1) {
+        width:60%;
+      }
+
+      &:nth-child(2) {
+        width:40%;
+      }
+    }
+
+    .buzz {
+      margin-top:55px;
+      height:268px;
+      overflow:hidden;
+      border-color: $color2;
+      border-style:solid;
+      border-width:1px;
+      background-color:$ColorUIBackground;
+      padding:10px;
+
+      h2 {
+        color: $ColorScreenPrimary !important;
+        font-size:20px;
+      }
+    }
+
+    .video-container {
+      width:75%;
+      margin:20px 0 30px 0;
+      position: relative;
+      padding-bottom: 40.00%;
+      padding-top: 30px; height: 0; overflow: hidden;
+    }
+
+    .video-container iframe,
+    .video-container object,
+    .video-container embed {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    #signup {
+      margin:10px 0 0 0;
+    }
+
+    .cta-container {
+      margin-left:11%;
+
+      h2 {
+        margin-left:45px;
+      }
+    }
+
+    .more-container {
+      margin-top:35px;
+
+      a {
+        margin-top:40px;
+      }
+    }
+  }
+
+
+  &.full {
+
+  }
+
+  &.tight {
+
+  }
+
+
+  .landing-tag {
+
+    font-size:14px;
+    position: absolute;
+    left: 60%;
+    top: 25px;
+    margin: 0;
+
+    h1 {
+      color: $ColorScreenPrimary !important;
+    }
+  }
+
+}
diff --git a/web/app/assets/stylesheets/web/main.css.scss b/web/app/assets/stylesheets/web/main.css.scss
index ab7a08f43..bd5bc2fc5 100644
--- a/web/app/assets/stylesheets/web/main.css.scss
+++ b/web/app/assets/stylesheets/web/main.css.scss
@@ -26,7 +26,7 @@ body.web {
 
     .home-questions {
       font-size: 20px;
-      color: #ed3718;
+      color: #ed3618;
       padding-top:30px;
       padding-bottom:40px;
       text-align:center;
@@ -49,7 +49,7 @@ body.web {
     width:400px;
 
     h1 {
-      color:#ed3718;
+      color:#ed3618;
       font-size:26px;
       font-weight:300;
       line-height:30px;
@@ -83,7 +83,7 @@ body.web {
     .wrapper h1 {
       position:relative;
       padding-top:15px;
-      color:#ed3718 !important;
+      color:#ed3618 !important;
       font-weight:normal;
       font-size:40px;
     }
@@ -120,7 +120,7 @@ body.web {
   .landing-sidebar {
     width:350px;
     background:#353535;
-    border:solid 1px #ed3718;
+    border:solid 1px #ed3618;
     position:absolute;
     top:30px;
     right:0px;
diff --git a/web/app/assets/stylesheets/web/web.css b/web/app/assets/stylesheets/web/web.css
index 0018729bd..37e75c4ac 100644
--- a/web/app/assets/stylesheets/web/web.css
+++ b/web/app/assets/stylesheets/web/web.css
@@ -19,4 +19,5 @@
 *= require web/events
 *= require users/signinCommon
 *= require dialogs/dialog
+*= require landings/landing_page
 */
\ No newline at end of file
diff --git a/web/app/assets/stylesheets/web/welcome.css.scss b/web/app/assets/stylesheets/web/welcome.css.scss
index 1541cc151..4b48ce171 100644
--- a/web/app/assets/stylesheets/web/welcome.css.scss
+++ b/web/app/assets/stylesheets/web/welcome.css.scss
@@ -50,7 +50,7 @@ body.web {
       top:5px; // XXX remove post release
       width:100%;
       height:400px;
-      border: solid 1px #ed3718;
+      border: solid 1px #ed3618;
       background-color:#353535;
       float:left;
       overflow:hidden;
diff --git a/web/app/controllers/landings_controller.rb b/web/app/controllers/landings_controller.rb
new file mode 100644
index 000000000..26a238403
--- /dev/null
+++ b/web/app/controllers/landings_controller.rb
@@ -0,0 +1,23 @@
+class LandingsController < ApplicationController
+
+  respond_to :html
+
+  def watch_bands
+
+    @promo_buzz = PromoBuzz.active
+
+    if Rails.application.config.use_promos_on_homepage
+      @promo_latest = PromoLatest.active
+    else
+      @promo_latest, start = Feed.index(nil, limit: 10)
+    end
+
+    page = params['p']
+    page = 0 unless p
+
+    if page == 0
+      render 'watch_bands', layout: 'web'
+    end
+  end
+end
+
diff --git a/web/app/views/landings/watch_bands.html.slim b/web/app/views/landings/watch_bands.html.slim
new file mode 100644
index 000000000..531e62e00
--- /dev/null
+++ b/web/app/views/landings/watch_bands.html.slim
@@ -0,0 +1,17 @@
+- provide(:page_name, 'landing_page')
+
+.column
+  h1 Watch 6 Bands Play Together from Different Locations
+  .video-wrapper
+    .video-container
+      iframe src="//www.youtube.com/embed/I2reeNKtRjg" frameborder="0" allowfullscreen
+    .cta-container
+      h2 It's FREE! Ready to Go?
+      = link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
+.column
+  = render :partial => "users/buzz", locals: {header: 'From Our Community'}
+  .more-container
+    h2 Need to Know More?
+    = link_to 'Watch a Video to See How JamKazam Works', landing_wb_path, class: 'landing_wb'
+
+br clear="all"
\ No newline at end of file
diff --git a/web/app/views/users/_buzz.html.erb b/web/app/views/users/_buzz.html.erb
index 07b08aa61..bd5a68d53 100644
--- a/web/app/views/users/_buzz.html.erb
+++ b/web/app/views/users/_buzz.html.erb
@@ -5,7 +5,7 @@
     <br>
     <!-- BEGIN ITEMS -->
     <%= content_tag(:div, :class => "buzz-items") do %>
-        <%= render :partial => "buzz_item", :collection => @promo_buzz %>
+        <%= render :partial => "users/buzz_item", :collection => @promo_buzz %>
     <% end %>
 
     <!-- END ITEMS -->
diff --git a/web/config/routes.rb b/web/config/routes.rb
index ce6248ea6..3045283a4 100644
--- a/web/config/routes.rb
+++ b/web/config/routes.rb
@@ -21,6 +21,9 @@ SampleApp::Application.routes.draw do
   match '/signin',  to: 'sessions#create', via: :post
   match '/signout', to: 'sessions#destroy', via: :delete
 
+  # landing pages
+  match '/landing/wb', to: 'landings#watch_bands', via: :get, as: 'landing_wb'
+
   # oauth
   match '/auth/:provider/callback', :to => 'sessions#oauth_callback'
   match '/auth/failure', :to => 'sessions#failure'

From 1688bdb5cf7d91fc176d3e7d40703679fffc90df Mon Sep 17 00:00:00 2001
From: Seth Call <sethcall@gmail.com>
Date: Wed, 13 Aug 2014 15:26:34 -0500
Subject: [PATCH 2/4] * landing page wip

---
 web/app/assets/javascripts/facebook_helper.js   |  4 ++--
 .../stylesheets/landings/landing_page.css.scss  |  7 +++++++
 web/app/controllers/landings_controller.rb      | 11 +++++++----
 ..._bands.html.slim => watch_bands_1.html.slim} |  4 ++--
 web/app/views/landings/watch_bands_2.html.slim  | 17 +++++++++++++++++
 web/app/views/landings/watch_bands_3.html.slim  | 17 +++++++++++++++++
 web/app/views/users/_buzz.html.erb              |  3 ++-
 web/app/views/users/_follow_links.html.slim     |  1 +
 web/app/views/users/_share_links.html.slim      |  4 ++++
 web/app/views/users/welcome.html.haml           |  5 +----
 10 files changed, 60 insertions(+), 13 deletions(-)
 rename web/app/views/landings/{watch_bands.html.slim => watch_bands_1.html.slim} (86%)
 create mode 100644 web/app/views/landings/watch_bands_2.html.slim
 create mode 100644 web/app/views/landings/watch_bands_3.html.slim
 create mode 100644 web/app/views/users/_follow_links.html.slim
 create mode 100644 web/app/views/users/_share_links.html.slim

diff --git a/web/app/assets/javascripts/facebook_helper.js b/web/app/assets/javascripts/facebook_helper.js
index 8bd8b6f9a..5846824ef 100644
--- a/web/app/assets/javascripts/facebook_helper.js
+++ b/web/app/assets/javascripts/facebook_helper.js
@@ -49,13 +49,13 @@
         function initialize(fbAppID) {
             loginStatusDeferred = $.Deferred();
             var fbAppID_ = fbAppID;
-            window.fbAsyncInit = function() {
+              window.fbAsyncInit = function() {
                 FB.init({
                     appId      : fbAppID_,
                     // channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html',
                     status     : true, // check the login status upon init?
                     cookie     : true, // set sessions cookies to allow server to access the session?
-                    xfbml      : false,  // parse XFBML tags on this page?
+                    xfbml      : true,  // parse XFBML tags on this page?
                     oauth      : true // enable OAuth 2.0
                 });
 
diff --git a/web/app/assets/stylesheets/landings/landing_page.css.scss b/web/app/assets/stylesheets/landings/landing_page.css.scss
index bd3986770..8498e9f20 100644
--- a/web/app/assets/stylesheets/landings/landing_page.css.scss
+++ b/web/app/assets/stylesheets/landings/landing_page.css.scss
@@ -9,6 +9,13 @@ body.web.landing_page {
     display:none;
   }
 
+  &.wb_2 {
+    .landing-content {
+      h1 {
+        margin-left:120px;
+      }
+    }
+  }
   .landing-content {
 
     h1 {
diff --git a/web/app/controllers/landings_controller.rb b/web/app/controllers/landings_controller.rb
index 26a238403..65d72cec7 100644
--- a/web/app/controllers/landings_controller.rb
+++ b/web/app/controllers/landings_controller.rb
@@ -12,11 +12,14 @@ class LandingsController < ApplicationController
       @promo_latest, start = Feed.index(nil, limit: 10)
     end
 
-    page = params['p']
-    page = 0 unless p
+    page = params['p'].to_i
 
-    if page == 0
-      render 'watch_bands', layout: 'web'
+    if page == 2
+      render 'watch_bands_2', layout: 'web'
+    elsif page == 3
+      render 'watch_bands_3', layout: 'web'
+    else
+      render 'watch_bands_1', layout: 'web'
     end
   end
 end
diff --git a/web/app/views/landings/watch_bands.html.slim b/web/app/views/landings/watch_bands_1.html.slim
similarity index 86%
rename from web/app/views/landings/watch_bands.html.slim
rename to web/app/views/landings/watch_bands_1.html.slim
index 531e62e00..219b9f8fe 100644
--- a/web/app/views/landings/watch_bands.html.slim
+++ b/web/app/views/landings/watch_bands_1.html.slim
@@ -1,4 +1,4 @@
-- provide(:page_name, 'landing_page')
+- provide(:page_name, 'landing_page wb_1')
 
 .column
   h1 Watch 6 Bands Play Together from Different Locations
@@ -12,6 +12,6 @@
   = render :partial => "users/buzz", locals: {header: 'From Our Community'}
   .more-container
     h2 Need to Know More?
-    = link_to 'Watch a Video to See How JamKazam Works', landing_wb_path, class: 'landing_wb'
+    = link_to 'Watch a Video to See How JamKazam Works', landing_wb_path(p: 2), class: 'landing_wb'
 
 br clear="all"
\ No newline at end of file
diff --git a/web/app/views/landings/watch_bands_2.html.slim b/web/app/views/landings/watch_bands_2.html.slim
new file mode 100644
index 000000000..328b9c9fc
--- /dev/null
+++ b/web/app/views/landings/watch_bands_2.html.slim
@@ -0,0 +1,17 @@
+- provide(:page_name, 'landing_page wb_2')
+
+.column
+  h1 See How JamKazam Works
+  .video-wrapper
+    .video-container
+      iframe src="//www.youtube.com/embed/ylYcvTY9CVo" frameborder="0" allowfullscreen
+    .cta-container
+      h2 It's FREE! Ready to Go?
+      = link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
+.column
+  = render :partial => "users/buzz", locals: {header: 'From Our Community'}
+  .more-container
+    h2 Still Need More Info?
+    = link_to 'Watch a Video to See How to Get Started', landing_wb_path(p: 3), class: 'landing_wb'
+
+br clear="all"
\ No newline at end of file
diff --git a/web/app/views/landings/watch_bands_3.html.slim b/web/app/views/landings/watch_bands_3.html.slim
new file mode 100644
index 000000000..66b876a1a
--- /dev/null
+++ b/web/app/views/landings/watch_bands_3.html.slim
@@ -0,0 +1,17 @@
+- provide(:page_name, 'landing_page wb_3')
+
+.column
+  h1 See How to Get Started
+  .video-wrapper
+    .video-container
+      iframe src="//www.youtube.com/embed/DBo--aj_P1w" frameborder="0" allowfullscreen
+    .cta-container
+      h2 It's FREE! Ready to Go?
+      = link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
+.column
+  = render :partial => "users/buzz", locals: {header: 'From Our Community'}
+  .more-container
+    h2 Not a Good Time to Sign Up?
+    = render :partial => 'users/follow_links'
+
+br clear="all"
\ No newline at end of file
diff --git a/web/app/views/users/_buzz.html.erb b/web/app/views/users/_buzz.html.erb
index bd5a68d53..d227f782a 100644
--- a/web/app/views/users/_buzz.html.erb
+++ b/web/app/views/users/_buzz.html.erb
@@ -1,7 +1,8 @@
+<% header ||= local_assigns[:header] = local_assigns.fetch(:header, 'JamKazam Buzz...') %>
 
 <!-- BEGIN BUZZ -->
 <%= content_tag(:div, :class => "buzz") do %>
-    <%= content_tag(:h2, "JamKazam Buzz...") %>
+    <%= content_tag(:h2, header) %>
     <br>
     <!-- BEGIN ITEMS -->
     <%= content_tag(:div, :class => "buzz-items") do %>
diff --git a/web/app/views/users/_follow_links.html.slim b/web/app/views/users/_follow_links.html.slim
new file mode 100644
index 000000000..825990714
--- /dev/null
+++ b/web/app/views/users/_follow_links.html.slim
@@ -0,0 +1 @@
+.fb-like data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like"
\ No newline at end of file
diff --git a/web/app/views/users/_share_links.html.slim b/web/app/views/users/_share_links.html.slim
new file mode 100644
index 000000000..b651c2a2c
--- /dev/null
+++ b/web/app/views/users/_share_links.html.slim
@@ -0,0 +1,4 @@
+.share_links
+  - [:twitter, :facebook, :google].each do |site|
+    = link_to(image_tag("content/icon_#{site}.png", :style => "vertical-align:top"), "javascript:void(0)", {'data-site' => site, :class => 'like-link'})
+    = ' '
\ No newline at end of file
diff --git a/web/app/views/users/welcome.html.haml b/web/app/views/users/welcome.html.haml
index 554684ce2..46b03d70e 100644
--- a/web/app/views/users/welcome.html.haml
+++ b/web/app/views/users/welcome.html.haml
@@ -7,10 +7,7 @@
     = link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
     .clearleft
     = link_to "Already have an account?", signin_path, class: "signin", id: "signin"
-.share_links
-  - [:twitter, :facebook, :google].each do |site|
-    = link_to(image_tag("content/icon_#{site}.png", :style => "vertical-align:top"), "javascript:void(0)", {'data-site' => site, :class => 'like-link'}) 
-    = ' '
+= render :partial => 'users/share_links'
 
 - content_for :after_black_bar do
   - if @jamfest_2014

From 322cdad87d0bccfee11b3e79aec9f4b46ed4a1ef Mon Sep 17 00:00:00 2001
From: Seth Call <sethcall@gmail.com>
Date: Thu, 14 Aug 2014 10:09:33 -0500
Subject: [PATCH 3/4] * wip

---
 .../javascripts/everywhere/everywhere.js      |   9 +-
 web/app/assets/javascripts/facebook_helper.js |  12 +-
 web/app/assets/javascripts/google_helper.js   |  23 ++++
 web/app/assets/javascripts/landing/landing.js |   2 +
 web/app/assets/javascripts/twitter_helper.js  |  45 +++++++
 web/app/assets/javascripts/web/web.js         |   2 +
 .../stylesheets/client/jamkazam.css.scss      |  20 +++
 .../landings/landing_page.css.scss            | 120 +++++++++++++-----
 web/app/controllers/landings_controller.rb    |  29 ++++-
 .../views/landings/watch_bands_1.html.slim    |   2 +-
 .../views/landings/watch_bands_2.html.slim    |   2 +-
 .../views/landings/watch_bands_3.html.slim    |   2 +-
 .../landings/watch_bands_tight.html.slim      |  16 +++
 .../views/landings/watch_overview_1.html.slim |  17 +++
 .../views/landings/watch_overview_2.html.slim |  17 +++
 .../views/landings/watch_overview_3.html.slim |  17 +++
 web/app/views/layouts/web.html.erb            |   4 +-
 web/app/views/shared/_facebook_sdk.html.slim  |   1 +
 web/app/views/shared/_twttr.html.slim         |   0
 web/app/views/users/_follow_links.html.slim   |  11 +-
 web/config/application.rb                     |   1 +
 web/config/initializers/gon.rb                |   1 +
 web/config/routes.rb                          |   5 +-
 web/spec/features/alt_landing_spec.rb         |  33 +++++
 24 files changed, 347 insertions(+), 44 deletions(-)
 create mode 100644 web/app/assets/javascripts/google_helper.js
 create mode 100644 web/app/assets/javascripts/twitter_helper.js
 create mode 100644 web/app/views/landings/watch_bands_tight.html.slim
 create mode 100644 web/app/views/landings/watch_overview_1.html.slim
 create mode 100644 web/app/views/landings/watch_overview_2.html.slim
 create mode 100644 web/app/views/landings/watch_overview_3.html.slim
 create mode 100644 web/app/views/shared/_facebook_sdk.html.slim
 create mode 100644 web/app/views/shared/_twttr.html.slim
 create mode 100644 web/spec/features/alt_landing_spec.rb

diff --git a/web/app/assets/javascripts/everywhere/everywhere.js b/web/app/assets/javascripts/everywhere/everywhere.js
index d0bf3e405..847a691ee 100644
--- a/web/app/assets/javascripts/everywhere/everywhere.js
+++ b/web/app/assets/javascripts/everywhere/everywhere.js
@@ -23,6 +23,14 @@
     var shutdownDialog = new JK.ShutdownDialog(app);
     shutdownDialog.initialize();
 
+    var googleHelper = new JK.GoogleHelper(app);
+    JK.GoogleHelperInstance = googleHelper;
+    googleHelper.initialize();
+
+    var twitterHelper = new JK.TwitterHelper(app);
+    JK.TwitterHelperInstance = twitterHelper;
+    twitterHelper.initialize(gon.global.twitter_public_account);
+
     var facebookHelper = new JK.FacebookHelper(app);
     JK.FacebookHelperInstance = facebookHelper;
     facebookHelper.initialize(gon.global.facebook_app_id);
@@ -35,7 +43,6 @@
     JK.TextMessageDialogInstance = textMessageDialog;
     textMessageDialog.initialize();
 
-
     var friendSelectorDialog = new JK.FriendSelectorDialog(app);
     JK.FriendSelectorDialogInstance = friendSelectorDialog;
     friendSelectorDialog.initialize();
diff --git a/web/app/assets/javascripts/facebook_helper.js b/web/app/assets/javascripts/facebook_helper.js
index 5846824ef..67839c5bc 100644
--- a/web/app/assets/javascripts/facebook_helper.js
+++ b/web/app/assets/javascripts/facebook_helper.js
@@ -72,13 +72,19 @@
                 js.src = "//connect.facebook.net/en_US/all.js";
                 d.getElementsByTagName('head')[0].appendChild(js);
             }(document));
+
+          deferredLoginStatus()
+            .done(function() {
+              FB.Event.subscribe('edge.create', function(response) {
+                JK.GA.trackJKSocial(JK.GA.Categories.jkFollow, JK.GA.JKSocialTargets.facebook, JK.clientType());
+              });
+            });
+
         }
 
         this.initialize = initialize;
         this.promptLogin = promptLogin;
         this.deferredLoginStatus = deferredLoginStatus;
+        this.ready = deferredLoginStatus; // shorter alias for deferredLoginStatus
     };
-
-
-
 })(window, jQuery);
\ No newline at end of file
diff --git a/web/app/assets/javascripts/google_helper.js b/web/app/assets/javascripts/google_helper.js
new file mode 100644
index 000000000..e3239de75
--- /dev/null
+++ b/web/app/assets/javascripts/google_helper.js
@@ -0,0 +1,23 @@
+(function(context,$) {
+  "use strict";
+
+  context.JK = context.JK || {};
+  context.JK.GoogleHelper = function(app) {
+    var logger = context.JK.logger;
+    var googleReadyDeferred = null;
+    var $self = $(this);
+    var connected = false;
+
+    function ready() {
+      return googleReadyDeferred;
+    }
+
+    function initialize(_twitterPublicAccountName) {
+      googleReadyDeferred = $.Deferred();
+      return this;
+    }
+
+    this.initialize = initialize;
+    this.ready = ready;
+  };
+})(window, jQuery);
\ No newline at end of file
diff --git a/web/app/assets/javascripts/landing/landing.js b/web/app/assets/javascripts/landing/landing.js
index 117c9bac9..caf518ddb 100644
--- a/web/app/assets/javascripts/landing/landing.js
+++ b/web/app/assets/javascripts/landing/landing.js
@@ -22,6 +22,8 @@
 //= require globals
 //= require AAB_message_factory
 //= require facebook_helper
+//= require twitter_helper
+//= require google_helper
 //= require layout
 //= require user_dropdown
 //= require jamkazam
diff --git a/web/app/assets/javascripts/twitter_helper.js b/web/app/assets/javascripts/twitter_helper.js
new file mode 100644
index 000000000..849f09714
--- /dev/null
+++ b/web/app/assets/javascripts/twitter_helper.js
@@ -0,0 +1,45 @@
+(function(context,$) {
+  "use strict";
+
+  context.JK = context.JK || {};
+  context.JK.TwitterHelper = function(app) {
+    var logger = context.JK.logger;
+    var twitterReadyDeferred = null;
+    var $self = $(this);
+    var connected = false;
+
+    function ready() {
+      return twitterReadyDeferred;
+    }
+
+    function initialize(_twitterPublicAccountName) {
+      twitterReadyDeferred = $.Deferred();
+
+      context.twttr = (function (d,s,id) {
+        var t, js, fjs = d.getElementsByTagName(s)[0];
+        if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
+        js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
+        return context.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
+      }(document, "script", "twitter-wjs"));
+
+      context.twttr.ready(function (twttr) {
+        // bind events here
+        twitterReadyDeferred.resolve();
+      });
+
+      ready()
+        .done(function() {
+          context.twttr.events.bind('follow', function (event) {
+            var followedUserId = event.data.user_id;
+            var followedScreenName = event.data.screen_name;
+            JK.GA.trackJKSocial(JK.GA.Categories.jkFollow, JK.GA.JKSocialTargets.twitter, JK.clientType());
+          });
+        })
+
+      return this;
+    }
+
+    this.initialize = initialize;
+    this.ready = ready;
+  };
+})(window, jQuery);
\ No newline at end of file
diff --git a/web/app/assets/javascripts/web/web.js b/web/app/assets/javascripts/web/web.js
index dc132c5e5..86f8d3bf3 100644
--- a/web/app/assets/javascripts/web/web.js
+++ b/web/app/assets/javascripts/web/web.js
@@ -22,6 +22,8 @@
 //= require globals
 //= require AAB_message_factory
 //= require facebook_helper
+//= require twitter_helper
+//= require google_helper
 //= require web/signup_helper
 //= require web/signin_helper
 //= require extras
diff --git a/web/app/assets/stylesheets/client/jamkazam.css.scss b/web/app/assets/stylesheets/client/jamkazam.css.scss
index 1a173dd70..8810ede99 100644
--- a/web/app/assets/stylesheets/client/jamkazam.css.scss
+++ b/web/app/assets/stylesheets/client/jamkazam.css.scss
@@ -573,4 +573,24 @@ hr {
 body.jam .icheckbox_minimal {
   display:inline-block;
   position:relative;
+}
+
+.follow-links {
+
+  .facebook-follow-btn {
+    margin-right:5px;
+    margin-top:-2px;
+    display:inline-block;
+  }
+
+  .twitter-follow-btn {
+    margin-right:5px;
+    display:inline-block;
+  }
+
+  .g-follow-btn {
+    display:inline-block;
+  }
+
+
 }
\ No newline at end of file
diff --git a/web/app/assets/stylesheets/landings/landing_page.css.scss b/web/app/assets/stylesheets/landings/landing_page.css.scss
index 8498e9f20..e30c5ef3a 100644
--- a/web/app/assets/stylesheets/landings/landing_page.css.scss
+++ b/web/app/assets/stylesheets/landings/landing_page.css.scss
@@ -9,13 +9,39 @@ body.web.landing_page {
     display:none;
   }
 
-  &.wb_2 {
-    .landing-content {
-      h1 {
-        margin-left:120px;
-      }
+  &.wo_1 {
+    .landing-content h1 {
+      margin-left:45px;
     }
   }
+  &.wo_3 {
+    .landing-content h1 {
+      margin-left:55px;
+    }
+  }
+  &.wb_2 {
+    .landing-content h1 {
+      margin-left:120px;
+    }
+  }
+  &.wb_3 {
+    .landing-content h1 {
+      margin-left:130px;
+    }
+  }
+
+  .landing-tag {
+    font-size:14px;
+    position: absolute;
+    left: 60%;
+    top: 25px;
+    margin: 0;
+
+    h1 {
+      color: $ColorScreenPrimary !important;
+    }
+  }
+
   .landing-content {
 
     h1 {
@@ -23,18 +49,6 @@ body.web.landing_page {
       font-size:20px;
       font-weight:normal;
     }
-    .column {
-      float:left;
-      @include border_box_sizing;
-
-      &:nth-child(1) {
-        width:60%;
-      }
-
-      &:nth-child(2) {
-        width:40%;
-      }
-    }
 
     .buzz {
       margin-top:55px;
@@ -88,30 +102,70 @@ body.web.landing_page {
       a {
         margin-top:40px;
       }
+
+      .follow-links {
+        margin-top:40px;
+        line-height: 10px; // centers all 3 buttons vertically on the same line
+        margin-left:28px;
+      }
     }
   }
 
 
   &.full {
+    .column {
+      float:left;
+      @include border_box_sizing;
 
-  }
+      &:nth-child(1) {
+        width:60%;
+      }
 
-  &.tight {
-
-  }
-
-
-  .landing-tag {
-
-    font-size:14px;
-    position: absolute;
-    left: 60%;
-    top: 25px;
-    margin: 0;
-
-    h1 {
-      color: $ColorScreenPrimary !important;
+      &:nth-child(2) {
+        width:40%;
+      }
     }
   }
 
+  &.tight {
+    .video-wrapper {
+      margin:auto;
+    }
+
+    .landing-content h1 {
+      text-align:center;
+      margin:0;
+    }
+
+    .landing-tag {
+      left:68%;
+    }
+
+    .video-container {
+      width:55%;
+      margin:20px auto 30px;
+      position: relative;
+      padding-bottom: 25.00%;
+      padding-top: 30px; height: 0; overflow: hidden;
+    }
+
+    .column {
+      float:left;
+      @include border_box_sizing;
+
+      &:nth-child(1) {
+        width:50%;
+        padding-left:13%;
+      }
+
+      &:nth-child(2) {
+        width:50%;
+        padding-left:4%;
+      }
+    }
+
+    .more-container {
+      margin-top:0;
+    }
+  }
 }
diff --git a/web/app/controllers/landings_controller.rb b/web/app/controllers/landings_controller.rb
index 65d72cec7..0249897d7 100644
--- a/web/app/controllers/landings_controller.rb
+++ b/web/app/controllers/landings_controller.rb
@@ -3,7 +3,6 @@ class LandingsController < ApplicationController
   respond_to :html
 
   def watch_bands
-
     @promo_buzz = PromoBuzz.active
 
     if Rails.application.config.use_promos_on_homepage
@@ -22,5 +21,33 @@ class LandingsController < ApplicationController
       render 'watch_bands_1', layout: 'web'
     end
   end
+
+  def watch_overview
+    @promo_buzz = PromoBuzz.active
+
+    if Rails.application.config.use_promos_on_homepage
+      @promo_latest = PromoLatest.active
+    else
+      @promo_latest, start = Feed.index(nil, limit: 10)
+    end
+
+    page = params['p'].to_i
+
+    if page == 2
+      render 'watch_overview_2', layout: 'web'
+    elsif page == 3
+      render 'watch_overview_3', layout: 'web'
+    else
+      render 'watch_overview_1', layout: 'web'
+    end
+  end
+
+  def watch_bands_tight
+    render 'watch_bands_tight', layout: 'web'
+  end
+
+  def watch_overview_tight
+    render 'watch_overview_tight', layout: 'web'
+  end
 end
 
diff --git a/web/app/views/landings/watch_bands_1.html.slim b/web/app/views/landings/watch_bands_1.html.slim
index 219b9f8fe..0815eeefd 100644
--- a/web/app/views/landings/watch_bands_1.html.slim
+++ b/web/app/views/landings/watch_bands_1.html.slim
@@ -1,4 +1,4 @@
-- provide(:page_name, 'landing_page wb_1')
+- provide(:page_name, 'landing_page full wb_1')
 
 .column
   h1 Watch 6 Bands Play Together from Different Locations
diff --git a/web/app/views/landings/watch_bands_2.html.slim b/web/app/views/landings/watch_bands_2.html.slim
index 328b9c9fc..c3470c000 100644
--- a/web/app/views/landings/watch_bands_2.html.slim
+++ b/web/app/views/landings/watch_bands_2.html.slim
@@ -1,4 +1,4 @@
-- provide(:page_name, 'landing_page wb_2')
+- provide(:page_name, 'landing_page full wb_2')
 
 .column
   h1 See How JamKazam Works
diff --git a/web/app/views/landings/watch_bands_3.html.slim b/web/app/views/landings/watch_bands_3.html.slim
index 66b876a1a..7c2668f7c 100644
--- a/web/app/views/landings/watch_bands_3.html.slim
+++ b/web/app/views/landings/watch_bands_3.html.slim
@@ -1,4 +1,4 @@
-- provide(:page_name, 'landing_page wb_3')
+- provide(:page_name, 'landing_page full wb_3')
 
 .column
   h1 See How to Get Started
diff --git a/web/app/views/landings/watch_bands_tight.html.slim b/web/app/views/landings/watch_bands_tight.html.slim
new file mode 100644
index 000000000..8a1b204d7
--- /dev/null
+++ b/web/app/views/landings/watch_bands_tight.html.slim
@@ -0,0 +1,16 @@
+- provide(:page_name, 'landing_page tight wbt_1')
+
+h1 Watch 6 Bands Play Together from Different Locations
+.video-wrapper
+  .video-container
+    iframe src="//www.youtube.com/embed/I2reeNKtRjg" frameborder="0" allowfullscreen
+.row
+  .column
+    .cta-container
+      h2 It's FREE! Ready to Go?
+      = link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
+  .column
+    .more-container
+      h2 Not a Good Time to Sign Up?
+      = render :partial => 'users/follow_links'
+  br clear="all"
\ No newline at end of file
diff --git a/web/app/views/landings/watch_overview_1.html.slim b/web/app/views/landings/watch_overview_1.html.slim
new file mode 100644
index 000000000..6895a6028
--- /dev/null
+++ b/web/app/views/landings/watch_overview_1.html.slim
@@ -0,0 +1,17 @@
+- provide(:page_name, 'landing_page full wo_1')
+
+.column
+  h1 Watch Video to See How JamKazam Works
+  .video-wrapper
+    .video-container
+      iframe src="//www.youtube.com/embed/ylYcvTY9CVo" frameborder="0" allowfullscreen
+    .cta-container
+      h2 It's FREE! Ready to Go?
+      = link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
+.column
+  = render :partial => "users/buzz", locals: {header: 'From Our Community'}
+  .more-container
+    h2 Need to Know More?
+    = link_to 'Watch 6 Bands Play Using JamKazam', landing_wo_path(p: 2), class: 'landing_wb'
+
+br clear="all"
\ No newline at end of file
diff --git a/web/app/views/landings/watch_overview_2.html.slim b/web/app/views/landings/watch_overview_2.html.slim
new file mode 100644
index 000000000..56503906b
--- /dev/null
+++ b/web/app/views/landings/watch_overview_2.html.slim
@@ -0,0 +1,17 @@
+- provide(:page_name, 'landing_page full wo_2')
+
+.column
+  h1 Watch 6 Bands Play Together from Different Locations
+  .video-wrapper
+    .video-container
+      iframe src="//www.youtube.com/embed/I2reeNKtRjg" frameborder="0" allowfullscreen
+    .cta-container
+      h2 It's FREE! Ready to Go?
+      = link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
+.column
+  = render :partial => "users/buzz", locals: {header: 'From Our Community'}
+  .more-container
+    h2 Still Need More Info?
+    = link_to 'See How to Get Started Using JamKazam', landing_wo_path(p: 3), class: 'landing_wb'
+
+br clear="all"
\ No newline at end of file
diff --git a/web/app/views/landings/watch_overview_3.html.slim b/web/app/views/landings/watch_overview_3.html.slim
new file mode 100644
index 000000000..09130db84
--- /dev/null
+++ b/web/app/views/landings/watch_overview_3.html.slim
@@ -0,0 +1,17 @@
+- provide(:page_name, 'landing_page full wo_3')
+
+.column
+  h1 See How to Get Started Using JamKazam
+  .video-wrapper
+    .video-container
+      iframe src="//www.youtube.com/embed/DBo--aj_P1w" frameborder="0" allowfullscreen
+    .cta-container
+      h2 It's FREE! Ready to Go?
+      = link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
+.column
+  = render :partial => "users/buzz", locals: {header: 'From Our Community'}
+  .more-container
+    h2 Not a Good Time to Sign Up?
+    = render :partial => 'users/follow_links'
+
+br clear="all"
\ No newline at end of file
diff --git a/web/app/views/layouts/web.html.erb b/web/app/views/layouts/web.html.erb
index d3c81fbad..ae0afc893 100644
--- a/web/app/views/layouts/web.html.erb
+++ b/web/app/views/layouts/web.html.erb
@@ -127,6 +127,8 @@
 
 
     <%= render "shared/ga" %>
-    <!-- version info: <%= version %> -->
+    <%= render "shared/twttr" %>
+    <%= render "shared/facebook_sdk" %>
+    <!-- version: <%= version %> -->
   </body>
 </html>
diff --git a/web/app/views/shared/_facebook_sdk.html.slim b/web/app/views/shared/_facebook_sdk.html.slim
new file mode 100644
index 000000000..f1ba82ae2
--- /dev/null
+++ b/web/app/views/shared/_facebook_sdk.html.slim
@@ -0,0 +1 @@
+script src="https://apis.google.com/js/platform.js" async defer
\ No newline at end of file
diff --git a/web/app/views/shared/_twttr.html.slim b/web/app/views/shared/_twttr.html.slim
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/app/views/users/_follow_links.html.slim b/web/app/views/users/_follow_links.html.slim
index 825990714..2f0880da0 100644
--- a/web/app/views/users/_follow_links.html.slim
+++ b/web/app/views/users/_follow_links.html.slim
@@ -1 +1,10 @@
-.fb-like data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like"
\ No newline at end of file
+.follow-links
+  .facebook-follow-btn
+    .fb-like data-href="https://www.facebook.com/JamKazam" data-layout="button" data-action="like"
+
+  .twitter-follow-btn
+    a href="https://twitter.com/#{Gon.global.twitter_public_account}" class="twitter-follow-button" data-show-count="false"
+      = "Follow @#{Gon.global.twitter_public_account}"
+
+  .g-follow-btn
+    .g-follow data-annotation="none" data-height="20" data-href="https://plus.google.com/106619885929396862606" data-rel="publisher"
diff --git a/web/config/application.rb b/web/config/application.rb
index 6ad4d576e..802416f62 100644
--- a/web/config/application.rb
+++ b/web/config/application.rb
@@ -204,6 +204,7 @@ if defined?(Bundler)
 
     config.twitter_app_id       = ENV['TWITTER_APP_ID'] || 'nQj2oEeoJZxECC33tiTuIg'
     config.twitter_app_secret   = ENV['TWITTER_APP_SECRET'] || 'Azcy3QqfzYzn2fsojFPYXcn72yfwa0vG6wWDrZ3KT8'
+    config.twitter_public_account = 'jamkazam'
 
     config.autocheck_create_session_agreement = false;
 
diff --git a/web/config/initializers/gon.rb b/web/config/initializers/gon.rb
index bd840b32f..14f3b65bb 100644
--- a/web/config/initializers/gon.rb
+++ b/web/config/initializers/gon.rb
@@ -1,3 +1,4 @@
 Gon.global.facebook_app_id = Rails.application.config.facebook_app_id
 Gon.global.ftue_network_test_packet_size = Rails.application.config.ftue_network_test_packet_size
+Gon.global.twitter_public_account = Rails.application.config.twitter_public_account
 Gon.global.env = Rails.env
diff --git a/web/config/routes.rb b/web/config/routes.rb
index 3045283a4..8e2802ae5 100644
--- a/web/config/routes.rb
+++ b/web/config/routes.rb
@@ -22,7 +22,10 @@ SampleApp::Application.routes.draw do
   match '/signout', to: 'sessions#destroy', via: :delete
 
   # landing pages
-  match '/landing/wb', to: 'landings#watch_bands', via: :get, as: 'landing_wb'
+  match '/landing/wb',  to: 'landings#watch_bands',           via: :get, as: 'landing_wb'
+  match '/landing/wo',  to: 'landings#watch_overview',        via: :get, as: 'landing_wo'
+  match '/landing/wbt', to: 'landings#watch_bands_tight',     via: :get, as: 'landing_wbt'
+  match '/landing/wot', to: 'landings#watch_overview_tight',  via: :get, as: 'landing_wot'
 
   # oauth
   match '/auth/:provider/callback', :to => 'sessions#oauth_callback'
diff --git a/web/spec/features/alt_landing_spec.rb b/web/spec/features/alt_landing_spec.rb
new file mode 100644
index 000000000..867f546ea
--- /dev/null
+++ b/web/spec/features/alt_landing_spec.rb
@@ -0,0 +1,33 @@
+require 'spec_helper'
+
+describe "Alternate Landing Pages", :js => true, :type => :feature, :capybara_feature => true do
+
+  subject { page }
+
+  it "landing-page watch-bands" do
+    visit landing_wb_path
+    find('h1', text: 'Watch 6 Bands Play Together from Different Locations')
+    find('a.landing_wb', text: 'Watch a Video to See How JamKazam Works').trigger(:click)
+    find('h1', text: 'See How JamKazam Works')
+    find('a.landing_wb', text: 'Watch a Video to See How to Get Started').trigger(:click)
+    find('h1', text: 'See How to Get Started')
+    find('div.fb-like')
+    find('iframe.twitter-follow-button')
+    find('.g-follow-btn iframe')
+  end
+
+  it "landing-page watch-overview" do
+    visit landing_wo_path
+    find('h1', text: 'Watch Video to See How JamKazam Works')
+    find('a.landing_wb', text: 'Watch 6 Bands Play Using JamKazam').trigger(:click)
+    find('h1', text: 'Watch 6 Bands Play Together from Different Locations')
+    find('a.landing_wb', text: 'See How to Get Started Using JamKazam').trigger(:click)
+    find('h1', text: 'See How to Get Started Using JamKazam')
+    find('div.fb-like')
+    find('iframe.twitter-follow-button')
+    find('.g-follow-btn iframe')
+  end
+
+
+
+end

From 90f1c253dda56eb1d442680c0adb6ca45ce3ee5d Mon Sep 17 00:00:00 2001
From: Seth Call <sethcall@gmail.com>
Date: Thu, 14 Aug 2014 22:21:34 -0500
Subject: [PATCH 4/4] * VRFS-2037 - landing pages done

---
 .../landings/landing_page.css.scss            | 34 +++++++++++++++++--
 .../landings/watch_overview_tight.html.slim   | 16 +++++++++
 web/app/views/users/_follow_links.html.slim   |  6 ++--
 web/spec/features/alt_landing_spec.rb         | 19 +++++++++++
 4 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 web/app/views/landings/watch_overview_tight.html.slim

diff --git a/web/app/assets/stylesheets/landings/landing_page.css.scss b/web/app/assets/stylesheets/landings/landing_page.css.scss
index e30c5ef3a..51491d12a 100644
--- a/web/app/assets/stylesheets/landings/landing_page.css.scss
+++ b/web/app/assets/stylesheets/landings/landing_page.css.scss
@@ -128,6 +128,11 @@ body.web.landing_page {
   }
 
   &.tight {
+
+    .wrapper {
+      text-align:center;
+    }
+
     .video-wrapper {
       margin:auto;
     }
@@ -139,6 +144,7 @@ body.web.landing_page {
 
     .landing-tag {
       left:68%;
+      display:none;
     }
 
     .video-container {
@@ -149,23 +155,45 @@ body.web.landing_page {
       padding-top: 30px; height: 0; overflow: hidden;
     }
 
+    .cta-container {
+
+      h2 {
+        margin-left:0;
+      }
+    }
+
     .column {
       float:left;
       @include border_box_sizing;
 
       &:nth-child(1) {
         width:50%;
-        padding-left:13%;
+        padding-left:19%;
       }
 
       &:nth-child(2) {
-        width:50%;
-        padding-left:4%;
+        width:28%;
+        padding-left:9%;
       }
     }
 
     .more-container {
       margin-top:0;
+
+      h2 {
+        text-align:center;
+      }
+
+      .follow-links {
+        margin-top:10px;
+        text-align:center;
+        margin-left:0;
+
+        .social-follow-btn {
+          display:block;
+          margin-top:5px;
+        }
+      }
     }
   }
 }
diff --git a/web/app/views/landings/watch_overview_tight.html.slim b/web/app/views/landings/watch_overview_tight.html.slim
new file mode 100644
index 000000000..8efaffe63
--- /dev/null
+++ b/web/app/views/landings/watch_overview_tight.html.slim
@@ -0,0 +1,16 @@
+- provide(:page_name, 'landing_page tight wot_1')
+
+h1 Watch Overview Video to See How JamKazam Works
+.video-wrapper
+  .video-container
+    iframe src="//www.youtube.com/embed/ylYcvTY9CVo" frameborder="0" allowfullscreen
+.row
+  .column
+    .cta-container
+      h2 It's FREE! Ready to Go?
+      = link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
+  .column
+    .more-container
+      h2 Not a Good Time to Sign Up?
+      = render :partial => 'users/follow_links'
+  br clear="all"
\ No newline at end of file
diff --git a/web/app/views/users/_follow_links.html.slim b/web/app/views/users/_follow_links.html.slim
index 2f0880da0..63bdd49f1 100644
--- a/web/app/views/users/_follow_links.html.slim
+++ b/web/app/views/users/_follow_links.html.slim
@@ -1,10 +1,10 @@
 .follow-links
-  .facebook-follow-btn
+  .facebook-follow-btn.social-follow-btn
     .fb-like data-href="https://www.facebook.com/JamKazam" data-layout="button" data-action="like"
 
-  .twitter-follow-btn
+  .twitter-follow-btn.social-follow-btn
     a href="https://twitter.com/#{Gon.global.twitter_public_account}" class="twitter-follow-button" data-show-count="false"
       = "Follow @#{Gon.global.twitter_public_account}"
 
-  .g-follow-btn
+  .g-follow-btn.social-follow-btn
     .g-follow data-annotation="none" data-height="20" data-href="https://plus.google.com/106619885929396862606" data-rel="publisher"
diff --git a/web/spec/features/alt_landing_spec.rb b/web/spec/features/alt_landing_spec.rb
index 867f546ea..813975ebb 100644
--- a/web/spec/features/alt_landing_spec.rb
+++ b/web/spec/features/alt_landing_spec.rb
@@ -28,6 +28,25 @@ describe "Alternate Landing Pages", :js => true, :type => :feature, :capybara_fe
     find('.g-follow-btn iframe')
   end
 
+  it "landing-page-tight watch-bands" do
+    visit landing_wbt_path
+    find('h1', text: 'Watch 6 Bands Play Together from Different Locations')
+    find('h2', text: "It's FREE! Ready to Go?")
+    find('h2', text: 'Not a Good Time to Sign Up?')
+    find('div.fb-like')
+    find('iframe.twitter-follow-button')
+    find('.g-follow-btn iframe')
+  end
+
+  it "landing-page-tight watch-overview" do
+    visit landing_wot_path
+    find('h1', text: 'Watch Overview Video to See How JamKazam Works')
+    find('h2', text: "It's FREE! Ready to Go?")
+    find('h2', text: 'Not a Good Time to Sign Up?')
+    find('div.fb-like')
+    find('iframe.twitter-follow-button')
+    find('.g-follow-btn iframe')
+  end
 
 
 end