New homepage variations.

app/core/Router.coffee

@@ -12,10 +12,6 @@ module.exports = class CocoRouter extends Backbone.Router
     '': ->
       if window.serverConfig.picoCTF
         return @routeDirectly 'play/CampaignView', ['picoctf'], {}
-      # Testing new home page
-      # group = me.getHomepageGroup()
-      # return @routeDirectly('NewHomeView', [], { jumbotron: 'student' }) if group is 'new-home-student'
-      # return @routeDirectly('NewHomeView', [], { jumbotron: 'characters' }) if group is 'new-home-characters'
       return @routeDirectly('NewHomeView', [])
 
     'about': go('AboutView')

app/locale/en.coffee

@@ -81,6 +81,24 @@
     boast: "Boasts riddles that are complex enough to fascinate gamers and coders alike."
     winning: "A winning combination of RPG gameplay and programming homework that pulls off making kid-friendly education legitimately enjoyable."
     run_class:"Everything you need to run a computer science class in your school today, no CS background required."
+    teachers: "Teachers!"
+    teachers_and_educators: "Teachers & Educators"
+    class_in_box: "Learn how our classroom-in-a-box platform fits into your curriculum."
+    get_started: "Get Started"
+    students: "Students:"
+    join_class: "Join Class"
+    role: "Your role:"
+    student_count: "Number of students:"
+    start_playing_for_free: "Start Playing for Free!"
+    students_and_players: "Students & Players"
+    goto_classes: "Go to my Classes"
+    educator_wiki: "Educator wiki"
+    view_profile: "View My Profile"
+    login_switch: "Have an account?"
+    check_out_wiki: "Check out our new educator Wiki"
+    want_coco: "Want CodeCombat at your school?"
+    form_select_role: "Select primary role"
+    form_select_range: "Select class size"
 
   nav:
     play: "Levels"  # The top nav bar entry where players choose which levels to play

app/models/User.coffee

@@ -150,13 +150,17 @@ module.exports = class User extends CocoModel
 
   getHomepageGroup: ->
     # Only testing on en-US so localization issues are not a factor
-    return 'new-home-student' unless _.string.startsWith(me.get('preferredLanguage', true) or 'en-US', 'en')
+    return 'home-legacy' unless _.string.startsWith(me.get('preferredLanguage', true) or 'en-US', 'en')
     return @homepageGroup if @homepageGroup
-    group = me.get('testGroupNumber') % 4
+    group = parseInt(util.getQueryVariable('variation'))
+    group ?= me.get('testGroupNumber') % 5
     @homepageGroup = switch group
-      when 0, 1 then 'new-home-characters'
+      when 0 then 'home-legacy'
-      when 2, 3 then 'new-home-student'
+      when 1 then 'home-teachers'
-    application.tracker.identify newHomepageGroup: @homepageGroup unless me.isAdmin()
+      when 2 then 'home-legacy-left'
+      when 3 then 'home-dropdowns'
+      when 4 then 'home-play-for-free'
+    application.tracker.identify homepageGroup: @homepageGroup unless me.isAdmin()
     return @homepageGroup
 
   # Signs and Portents was receiving updates after test started, and also had a big bug on March 4, so just look at test from March 5 on.

app/styles/new-home-view.sass

@@ -38,10 +38,21 @@
         margin-top: 170px
         #classroom-edition-header
           margin-top: 10px
+        #educator-header
+          white-space: nowrap
+        #students-header
+          line-height: 25px
+          margin-top: 40px
+          margin-bottom: -5px
         #learn-to-code-header
           margin-top: 80px
         &#ideal-tickets-well
           margin-top: 20px
+        .form-group
+          text-align: left
+          label
+            line-height: 14px
+            font-size: 12px
         @media (max-width: $screen-md-min)
           margin-top: 320px
 

app/templates/new-home-view.jade

@@ -1,52 +1,141 @@
 extends /templates/base-flat
 
+mixin box
+  .well.text-center
+    if me.isAnonymous() == true
+      if ['home-legacy','home-legacy-left'].indexOf(view.variation) != -1
+        h6#classroom-edition-header(data-i18n="new_home.classroom_edition")
+        div
+          button.teacher-btn.btn.btn-primary.btn-lg.btn-block(data-i18n="new_home.im_a_teacher")
+        div
+          a.btn.btn-forest.btn-lg.btn-block(href="/courses", data-i18n="new_home.im_a_student")
+        h6#learn-to-code-header(data-i18n="new_home.learn_to_code")
+        a.btn.btn-gold.btn-lg.btn-block.play-btn(href=view.playURL, data-i18n="new_home.play_now")
+      else if ['home-teachers','home-dropdowns'].indexOf(view.variation) != -1
+        h5#educator-header(data-i18n="new_home.teachers")
+        p.small(data-i18n="new_home.class_in_box")
+
+        if view.variation == 'home-dropdowns'
+          div.form-group
+            h6.control-label(data-i18n="new_home.role")
+            select.form-control#request-form-role
+              option(value="", data-i18n="new_home.form_select_role")
+              option(data-i18n="courses.teacher", value="Teacher")
+              option(data-i18n="teachers_quote.tech_coordinator", value="Technology coordinator")
+              option(data-i18n="teachers_quote.advisor", value="Advisor")
+              option(data-i18n="teachers_quote.principal", value="Principal")
+              option(data-i18n="teachers_quote.superintendent", value="Superintendent")
+              option(data-i18n="teachers_quote.parent", value="Parent")
+          div.form-group
+            h6.control-label(data-i18n="new_home.student_count")
+            select.form-control#request-form-range
+              option(value="", data-i18n="new_home.form_select_range")
+              option 1-10
+              option 11-50
+              option 51-100
+              option 101-200
+              option 201-500
+              option 501-1000
+              option 1000+
+          div
+            button.btn.btn-forest.btn-lg.btn-block.request-demo(href="#",data-i18n="new_home.get_started")
+        else
+          div
+            button.teacher-btn.btn.btn-forest.btn-lg.btn-block(data-i18n="new_home.get_started")
+
+        if view.variation == 'home-teachers'
+          h5#students-header(data-i18n="new_home.students")
+          div
+            button.join-class.btn.btn-primary.btn-lg.btn-block(data-i18n="new_home.join_class", href="/courses")
+          div
+            a.btn.btn-default.btn-lg.btn-block.play-btn(href=view.playURL, data-i18n="new_home.play_now")
+        else
+          h6#students-header(data-i18n="new_home.students_and_players")
+          div
+            a.btn.btn-primary.btn-lg.play-btn.btn-block(href=view.playURL, data-i18n="new_home.play_now")
+      else
+        h5#educator-header(data-i18n="new_home.start_playing_for_free")
+        div
+          a.btn.btn-forest.btn-lg.btn-block.play-btn(href=view.playURL, data-i18n="new_home.play_now")
+        div
+          button.join-class.btn.btn-default.btn-lg.btn-block(data-i18n="new_home.join_class", href="/courses")
+
+        
+        h6#classroom-edition-header(style="padding-top: 20px",data-i18n="new_home.teachers_and_educators")
+        p.small(data-i18n="new_home.class_in_box")
+        button.teacher-btn.btn.btn-primary.btn-lg.btn-block(data-i18n="new_home.get_started")
+
+
+      if ['home-teachers','home-dropdowns','home-play-for-free'].indexOf(view.variation) != -1
+        p.small
+          span(data-i18n="new_home.login_switch")
+          span  
+          a.login-button(data-i18n="login.log_in", href="#")
+    else
+      h6#classroom-edition-header(data-i18n="new_home.logged_in_as")
+      p.small #{me.get("email")}
+      if me.isTeacher()
+        div
+          button.teacher-btn.btn.btn-forest.btn-lg.btn-block(data-i18n="new_home.goto_classes")
+        div
+          if false
+            h6(data-i18n="new_home.check_out_wiki")
+            a.btn.btn-primary.btn-lg.btn-block(href="https://sites.google.com/a/codecombat.com/teacher-guides/course-guides", data-i18n="new_home.educator_wiki")
+          else
+            h6(data-i18n="new_home.want_coco")
+            button.teacher-btn.btn.btn-primary.btn-lg.btn-block(data-i18n="new_home.get_started")
+
+      else if view.justPlaysCourses()
+        div
+          button.teacher-btn.btn.btn-forest.btn-lg.btn-block(data-i18n="new_home.goto_classes")
+        div
+          a.btn.btn-primary.btn-lg.btn-block(href="https://sites.google.com/a/codecombat.com/teacher-guides/course-guides", data-i18n="new_home.educator_wiki")
+
+      else
+        div
+          a.btn.btn-forest.btn-lg.btn-block.play-btn(href=view.playURL, data-i18n="courses.continue_playing")
+        div
+          a.btn.btn-primary.btn-lg.btn-block(href="/user/#{me.getSlugOrID()}", data-i18n="new_home.view_profile")
+
+      p.small
+        span(data-i18n="courses.not_you")
+        span  
+        a.logout-btn(data-i18n="login.log_out", href="#")
+
+  if (me.get('preferredLanguage', true) || 'en-US').split('-')[0] == 'nl'
+    .well#ideal-tickets-well.text-center.hidden-xs.hidden-sm
+      h6 Thuis versie:
+      a.btn.btn-purple.btn-lg.btn-block(href="http://codecombat.nl/kopen") Prepaid codes (iDeal)
+        
+
 block content
-  .container-fluid#jumbotron-container-fluid(class=view.jumbotron === 'student' ? 'alt-image' : '')
+  .container-fluid#jumbotron-container-fluid.alt-image
     .container
-      .row
+      .row.hidden-sm.hidden-xs
+        case view.variation
+          when 'home-legacy-left'
+            .col-lg-3.col-md-4
+              +box
+            .col-lg-7.col-lg-offset-2.col-md-8
+              h1(data-i18n="new_home.slogan")
+          default
+            .col-lg-7.col-md-8
+              h1(data-i18n="new_home.slogan")
+            .col-lg-3.col-lg-offset-2.col-md-4
+              +box
+      .row.hidden-lg.hidden-md
         .col-lg-7.col-md-8
-          h1(data-i18n="new_home.slogan")
+          h1(data-i18n="new_home.slogan",style="margin-top: 200px")
-
+        .col
-        .col-lg-3.col-lg-offset-2.col-md-4
+          div(style="margin: auto; max-width: 300px")
-          .well.text-center.hidden-md.hidden-lg
+            +box
-            .row
-              .col-xs-8
-                h6(data-i18n="new_home.classroom_edition")
-              .col-xs-4
-                h6(data-i18n="new_home.learn_to_code")
-            .row
-              .col-xs-4
-                button#teacher-btn.btn.btn-primary.btn-lg.btn-block(data-i18n="new_home.teacher")
-              .col-xs-4
-                a.btn.btn-forest.btn-lg.btn-block(href="/courses", data-i18n="new_home.student")
-              .col-xs-4
-                a.btn.btn-gold.btn-lg.btn-block(href=view.playURL, data-i18n="new_home.play_now")
-            if (me.get('preferredLanguage', true) || 'en-US').split('-')[0] == 'nl'
-              .row
-                .col-xs-12
-                  a.btn.btn-purple.btn-lg.btn-block(href="http://codecombat.nl/kopen") Koop prepaid codes (iDeal)
-
-          .well.text-center.hidden-xs.hidden-sm
-            h6#classroom-edition-header(data-i18n="new_home.classroom_edition")
-            div
-              button#teacher-btn.btn.btn-primary.btn-lg.btn-block(data-i18n="new_home.im_a_teacher")
-            div
-              a.btn.btn-forest.btn-lg.btn-block(href="/courses", data-i18n="new_home.im_a_student")
-
-            h6#learn-to-code-header(data-i18n="new_home.learn_to_code")
-            a.btn.btn-gold.btn-lg.btn-block(href=view.playURL, data-i18n="new_home.play_now")
-
-          if (me.get('preferredLanguage', true) || 'en-US').split('-')[0] == 'nl'
-            .well#ideal-tickets-well.text-center.hidden-xs.hidden-sm
-              h6 Thuis versie:
-              a.btn.btn-purple.btn-lg.btn-block(href="http://codecombat.nl/kopen") Prepaid codes (iDeal)
 
       .row#learn-more-row
         .col-xs-12.text-center
           a#learn-more-link
             h6(data-i18n="new_home.learn_more")
             h2
-              span.glyphicon.glyphicon-chevron-down
+              span.glyphicon.glyphicon-chevron-down      
 
 
   .container#classroom-in-box-container

app/views/NewHomeView.coffee

@@ -3,6 +3,8 @@ template = require 'templates/new-home-view'
 CocoCollection = require 'collections/CocoCollection'
 Course = require 'models/Course'
 utils = require 'core/utils'
+storage = require 'core/storage'
+{logoutUser, me} = require('core/auth')
 
 #  TODO: auto margin feature paragraphs
 
@@ -12,13 +14,16 @@ module.exports = class NewHomeView extends RootView
   template: template
 
   events:
-    'click #play-btn': 'onClickPlayButton'
+    'click .play-btn': 'onClickPlayButton'
     'change #school-level-dropdown': 'onChangeSchoolLevelDropdown'
-    'click #teacher-btn': 'onClickTeacherButton'
+    'click .teacher-btn': 'onClickTeacherButton'
     'click #learn-more-link': 'onClickLearnMoreLink'
     'click .screen-thumbnail': 'onClickScreenThumbnail'
     'click #carousel-left': 'onLeftPressed'
     'click #carousel-right': 'onRightPressed'
+    'click .request-demo': 'onClickRequestDemo'
+    'click .join-class': 'onClickJoinClass'
+    'click .logout-btn': 'logoutAccount'
 
   shortcuts:
     'right': 'onRightPressed'
@@ -26,9 +31,9 @@ module.exports = class NewHomeView extends RootView
     'esc': 'onEscapePressed'
 
   initialize: (options) ->
-    @jumbotron = options.jumbotron or utils.getQueryVariable('jumbotron') or 'student'
     @courses = new CocoCollection [], {url: "/db/course", model: Course}
     @supermodel.loadCollection(@courses, 'courses')
+    @variation ?= me.getHomepageGroup()
 
     window.tracker?.trackEvent 'Homepage Loaded', category: 'Homepage'
     if @getQueryVariable 'hour_of_code'
@@ -50,8 +55,30 @@ module.exports = class NewHomeView extends RootView
 
   onClickPlayButton: (e) ->
     @playSound 'menu-button-click'
-    return if @playURL isnt '/play'
+    e.preventDefault()
-    window.tracker?.trackEvent 'Click Play', category: 'Homepage'
+    e.stopImmediatePropagation()
+    window.tracker?.trackEvent 'Homepage Click Play', category: 'Homepage'
+    application.router.navigate @playURL, trigger: true
+    #window.open @playURL, '_blank'
+
+  onClickRequestDemo: (e) ->
+    @playSound 'menu-button-click'
+    e.preventDefault()
+    e.stopImmediatePropagation()
+    window.tracker?.trackEvent 'Homepage Submit Jumbo Form', category: 'Homepage'
+    obj = storage.load('request-quote-form')
+    obj ?= {}
+    obj.role =  @$('#request-form-role').val()
+    obj.numStudents = @$('#request-form-range').val()
+    storage.save('request-quote-form', obj)
+    application.router.navigate "/teachers/demo", trigger: true
+
+  onClickJoinClass: (e) ->
+    @playSound 'menu-button-click'
+    e.preventDefault()
+    e.stopImmediatePropagation()
+    window.tracker?.trackEvent 'Homepage Click Join Class', category: 'Homepage'
+    application.router.navigate "/courses", trigger: true
 
   afterRender: ->
     @onChangeSchoolLevelDropdown()
@@ -62,6 +89,10 @@ module.exports = class NewHomeView extends RootView
     })
     super()
 
+  logoutAccount: ->
+    Backbone.Mediator.publish("auth:logging-out", {})
+    logoutUser()
+
   onChangeSchoolLevelDropdown: (e) ->
     levels =
       elementary: {'introduction-to-computer-science': '2-4', 'computer-science-5': '15-20', default: '10-15', total: '50-70 hours (about one year)'}
@@ -83,9 +114,11 @@ module.exports = class NewHomeView extends RootView
     not me.get('stats')?.gamesCompleted and not me.get('heroConfig')
 
   onClickLearnMoreLink: ->
+    window.tracker?.trackEvent 'Homepage Click Learn More', category: 'Homepage'
     @scrollToLink('#classroom-in-box-container')
 
   onClickTeacherButton: ->
+    window.tracker?.trackEvent 'Homepage Click Teacher Button', category: 'Homepage'
     @scrollToLink('.request-demo-row', 600)
 
   onRightPressed: (event) ->