* wip

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();

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);

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);

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

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);

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

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;
+  }
+
+
 }

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;
+    }
+  }
 }

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
 

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

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

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

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"

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"

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"

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"

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>

web/app/views/shared/_facebook_sdk.html.slim

@@ -0,0 +1 @@
+script src="https://apis.google.com/js/platform.js" async defer

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"
+.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"

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;
 

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

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'

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