Add new home page with test

app/core/Router.coffee

@@ -13,7 +13,13 @@ module.exports = class CocoRouter extends Backbone.Router
     @initializeSocialMediaServices = _.once @initializeSocialMediaServices
 
   routes:
-    '': go('HomeView')
+    '': ->
+      # Testing new home page
+      group = me.getHomepageGroup()
+      return @routeDirectly('HomeView', [], { withTeacherNote: true }) if group is 'home-with-note'
+      return @routeDirectly('NewHomeView', [], { jumbotron: 'student' }) if group is 'new-home-student'
+      return @routeDirectly('NewHomeView', [], { jumbotron: 'characters' }) if group is 'new-home-characters'
+      return @routeDirectly('HomeView', [])
 
     'about': go('AboutView')
 
@@ -93,6 +99,7 @@ module.exports = class CocoRouter extends Backbone.Router
     'github/*path': 'routeToServer'
 
     'hoc': go('courses/HourOfCodeView')
+    'home': go('NewHomeView')
 
     'i18n': go('i18n/I18NHomeView')
     'i18n/thang/:handle': go('i18n/I18NEditThangTypeView')
@@ -137,15 +144,15 @@ module.exports = class CocoRouter extends Backbone.Router
   removeTrailingSlash: (e) ->
     @navigate e, {trigger: true}
 
-  routeDirectly: (path, args) ->
+  routeDirectly: (path, args, options={}) ->
     path = "views/#{path}" if not _.string.startsWith(path, 'views/')
     ViewClass = @tryToLoadModule path
     if not ViewClass and application.moduleLoader.load(path)
       @listenToOnce application.moduleLoader, 'load-complete', ->
-        @routeDirectly(path, args)
+        @routeDirectly(path, args, options)
       return
     return @openView @notFoundView() if not ViewClass
-    view = new ViewClass({}, args...)  # options, then any path fragment args
+    view = new ViewClass(options, args...)  # options, then any path fragment args
     view.render()
     @openView(view)
 

app/models/User.coffee

@@ -124,6 +124,21 @@ module.exports = class User extends CocoModel
     @announcesActionAudioGroup = 'all-audio' if me.isAdmin()
     application.tracker.identify announcesActionAudioGroup: @announcesActionAudioGroup unless me.isAdmin()
     @announcesActionAudioGroup
+    
+  getHomepageGroup: ->
+#    return 'control'
+#    return 'home-with-note'
+#    return 'new-home-student'
+#    return 'new-home-characters'
+    return @homepageGroup if @homepageGroup
+    group = me.get('testGroupNumber') % 4
+    @homepageGroup = switch group
+      when 0 then 'control'
+      when 1 then 'home-with-note'
+      when 2 then 'new-home-student'
+      when 3 then 'new-home-characters'
+    application.tracker.identify newHomepageGroup: group 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.
   # ... and stopped working well until another update on March 10, so maybe March 11+...

app/styles/bootstrap/_bootswatch.scss

@@ -6,6 +6,8 @@
 // TYPOGRAPHY
 // -----------------------------------------------------
 
+@import url(//fonts.googleapis.com/css?family=Arvo:400,700);
+@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,latin-ext,cyrillic,vietnamese,cyrillic-ext,greek-ext,greek);
 @import url(//fonts.googleapis.com/css?family=Open+Sans+Condensed:700&subset=latin,latin-ext,cyrillic-ext,greek-ext,greek,vietnamese,cyrillic);
 
 // SCAFFOLDING

app/styles/home.sass

@@ -119,6 +119,21 @@
   .alert
     top: 213px
     border: 5px solid darkred
+    
+  .style-flat .bg-navy
+    padding: 20px
+    position: absolute
+    top: 400px
+    width: 380px
+    z-index: 1
+    .btn
+      margin: 10px 0
+    
+    @media screen and ( max-width: 1000px )
+      display: none
+    
+    @media screen and ( max-height: 800px )
+      top: 200px
 
 body[lang='ru'], body[lang^='de'], body[lang^='pt-BR'], body[lang='pl'], body[lang='tr'], body[lang^='nl'], body[lang^='cs'], body[lang^='sv'], body[lang^='el'], body[lang^='hu'], body[lang^='bg']
   #home-view #slogan

app/styles/new-home-view.sass

@@ -0,0 +1,482 @@
+@import "app/styles/bootstrap/variables"
+@import "app/styles/mixins"
+
+// TODO: Move flat style into probably several files and Bootstrap variables
+
+// Variables
+
+$headline-font: 'Arvo', serif
+$body-font: 'Open Sans', sans-serif
+
+$burgandy: #7D0101
+$gold: #F2BE19
+$navy: #0E4C60
+$forest: #20572B
+
+.style-flat
+  background: white
+  
+  // Fonts
+  h1, h2, h3, h4, h5, h6
+    // Unsetting game styles
+    font-variant: normal
+    color: black
+    margin: 0
+  
+  h1
+    font-family: $headline-font
+    font-weight: normal
+    font-size: 46px
+    line-height: 62px
+    
+  h2
+    font-family: $body-font
+    font-weight: lighter
+    font-size: 30px
+    line-height: 42px
+    
+  h3
+    font-family: $headline-font
+    font-weight: normal
+    font-size: 33px
+    line-height: 45px
+    
+  h4
+    font-family: $body-font
+    font-weight: lighter
+    font-size: 22px
+    line-height: 32px
+    
+  h5
+    font-family: $headline-font
+    font-weight: bold
+    font-size: 20px
+    line-height: 31px
+    
+  h6
+    font-family: $body-font
+    font-weight: bold
+    font-size: 14px
+    line-height: 20px
+    
+  p
+    margin: 0 0 14px
+    
+  .small
+    font-weight: normal
+    font-size: 14px
+    line-height: 20px
+
+  font-family: $body-font
+  font-size: 18px
+  line-height: 29px
+  
+  blockquote
+    border: none
+    
+    &:before 
+      font-family: "Monaco"
+      content: "\201C"
+      position: absolute
+      left: 0px
+      top: 20px
+      font-size: 40px
+      opacity: 0.5
+  
+  // Navbar
+
+  .navbar
+    background: white
+    margin-bottom: 0
+
+    a.navbar-brand
+      #logo-img
+        width: 210px
+        height: 65px
+        margin-right: 10px
+
+      .glyphicon-home
+        position: relative
+        top: 4px
+
+      color: $burgandy
+      &:hover
+        color: white
+        background: $burgandy
+        
+    .navbar-toggle
+      color: black
+      margin: 30px 25px 0
+
+    .nav > li > a
+      // TODO: Move this to bootstrap variables for navbars
+      font-weight: bold
+      font-family: $body-font
+      font-size: 16px
+      padding: 38px 15px 37px
+      color: $burgandy
+      text-shadow: 0 0 0
+
+      &:hover
+        background: $burgandy
+        color: white
+
+    #language-dropdown-wrapper
+      display: inline-block
+      padding: 30px 20px
+      .language-dropdown
+        width: 200px
+
+    .language-dropdown
+      width: 250px
+      
+    @media (max-width: $screen-sm-min)
+      .nav > li > a
+        padding: 10px 20px
+      #language-dropdown-wrapper
+        display: inline-block
+        padding: 10px 10px
+        .language-dropdown
+          width: 150px
+      
+  // Buttons
+ 
+  .btn
+    border: none
+    border-radius: 5px
+    font-family: $body-font
+    font-weight: normal
+    background-image: none // overrides legacy buttons
+
+  .btn-primary, .btn-navy
+    background-color: $navy
+    color: white
+  
+  .btn-primary-alt, .btn-navy-alt
+    background-color: white
+    border: 1px solid $navy
+    color: $navy
+    
+  .btn-forest
+    background-color: $forest
+    color: white
+    
+  .btn-forest-alt
+    background-color: white
+    border: 1px solid $forest
+    color: $forest
+    
+  .btn-gold
+    background-color: $gold
+    color: white
+    
+  .btn-gold-alt
+    background-color: white
+    border: 1px solid $gold
+    color: $gold
+  
+  .btn-lg
+    font-size: 18px
+    padding: 13px 35px
+    
+  // Classes
+  
+  .text-navy
+    color: $navy
+    
+  .bg-navy
+    background-color: $navy
+    color: white
+    h1, h2, h3, h4, h5, h6, a
+      color: white
+    a.btn-primary-alt
+      color: $navy
+
+
+#new-home-view
+  
+  #jumbotron-container-fluid
+    background-image: url("/images/pages/home/character_jumbotron.png")
+    background-position: 50% 55%
+    
+    @media (min-width : 1200px)
+      background-size: 100% auto
+      
+    @media (max-width : 1200px)
+      background-size: 1200px auto
+      
+    .container
+      min-height: 750px
+      background-repeat: no-repeat
+      
+      .btn
+        margin: 10px 0
+        
+      h1
+        color: white
+        margin-top: 130px
+        @media (max-width: $screen-md-min)
+          margin-top: 170px
+          font-size: 33px
+          line-height: 45px
+        
+      .well
+        border-radius: 8px
+        background: rgba(255, 255, 255, 0.5)
+        margin-top: 170px
+        #classroom-edition-header
+          margin-top: 40px
+        #learn-to-code-header
+          margin-top: 80px
+
+      #learn-more-row
+        margin-top: 80px
+        h2, h6
+          color: white
+
+        h6
+          margin-top: 10px
+      
+    &.alt-image
+      background-image: url("/images/pages/home/student_jumbotron.png")
+      background-position: 60% 35%
+
+      .container h1
+        margin-top: 420px
+        @media (max-width: $screen-md-min)
+          margin-top: 380px
+        @media (max-width: $screen-sm-min)
+          margin-top: 360px
+  
+  #classroom-in-box-row
+    margin: 40px 0
+    
+  #feature-spread-row
+    .col-sm-4
+      padding: 40px
+      
+    img
+      margin-bottom: 20px
+      
+  .testimonials-rows
+    background: $navy
+    color: white
+    position: relative
+    padding: 60px 0 40px
+    margin: 100px 0
+    
+    h3, h6
+      color: white
+      
+    .testimonials-filler-left
+      position: absolute
+      width: 2000px
+      left: -2000px
+      top: 0px
+      background: $navy
+      height: 100%
+      
+    .testimonials-filler-right
+      position: absolute
+      width: 2000px
+      right: -2000px
+      top: 0px
+      background: $navy
+      height: 100%
+      
+    img
+      margin: 0 auto 10px
+      
+    .row
+      margin: 20px 0
+      
+  #benefit-row-1, #benefit-row-2, #benefit-row-3
+    margin: 50px 0
+    
+  #benefit-graphic-1, #benefit-graphic-2, #benefit-graphic-3
+    padding: 30px 40px
+    position: relative
+    min-height: 250px
+
+    h2
+      color: white
+      width: 50%
+
+
+  #benefit-graphic-1
+    background: $burgandy
+      
+    img
+      position: absolute
+      right: 0
+      bottom: 0
+      
+    #benefit-graphic-1-filler
+      background: $burgandy
+      height: 100%
+      width: 2000px
+      position: absolute
+      left: 100%
+      top: 0
+      
+  #benefit-graphic-2
+    background: $navy
+
+    h2
+      float: right
+
+    img
+      position: absolute
+      left: 0
+      bottom: 0
+
+    #benefit-graphic-2-filler
+      background: $navy
+      height: 100%
+      width: 2000px
+      position: absolute
+      right: 100%
+      top: 0
+      
+  #benefit-graphic-3
+    background: $forest
+
+    img
+      position: absolute
+      right: 0
+      bottom: 0
+
+    #benefit-graphic-3-filler
+      background: $forest
+      height: 100%
+      width: 2000px
+      position: absolute
+      left: 100%
+      top: 0
+
+  #school-level-label
+    margin: 15px 15px 0 0
+    display: inline-block
+
+  #school-level-dropdown
+    display: inline-block
+    width: 250px
+
+  #request-demo-row
+    margin: 100px 0
+
+    .btn
+      margin: 20px 10px
+      
+  #courses-container
+    display: flex
+    flex-wrap: wrap
+    justify-content: space-between
+
+    .media
+      width: 222px
+      margin: 20px 0 0 0
+      border: 1px solid navy
+      border-radius: 8px
+      padding: 50px 15px 0
+      text-align: center
+      position: relative
+      height: 350px
+      color: $navy
+
+      &:first-child
+        border-color: $forest
+        color: $forest
+        h6
+          color: $forest
+
+      &.disabled
+        $disabled-color: rgb(155, 155, 155)
+        border-color: $disabled-color
+        color: $disabled-color
+        h6
+          color: $disabled-color
+        .media-object
+          @include filter(grayscale(100%))
+
+      h6
+        padding: 0 5px
+        color: $navy
+
+      .media-object
+        width: 147px
+        height: 147px
+        border-radius: 74px
+        background-position: -30px -26px
+        background-repeat: no-repeat
+        background-size: 312px auto
+        margin: 15px auto
+        position: absolute
+        left: 38px
+        left: calc((100% - 147px) / 2)
+        bottom: 50px
+
+      .course-duration
+        position: absolute
+        bottom: 25px
+        width: 192px
+        width: calc(100% - 30px)
+        padding: 0
+
+      .free-course
+        background-color: $forest
+        width: 100%
+        height: 33px
+        position: absolute
+        top: 0
+        left: 0px
+        border-top-left-radius: 7px
+        border-top-right-radius: 7px
+
+        h6
+          margin-top: 6px
+          color: white
+          
+    .text-center
+      width: 100%
+      margin-top: 30px
+      img
+        margin-right: 20px
+        
+  #footer
+    background-image: url("/images/pages/home/footer_background.png")
+    height: 229px
+    margin: -22px auto 0
+    color: white
+
+    @media (max-width: $screen-sm-min)
+      background-color: #201a15
+      background-image: none
+      height: auto
+    
+    ul
+      margin: 30px
+      li:first-child
+        border-bottom: 1px solid white
+        margin-bottom: 10px
+    a
+      color: white
+      
+  #final-footer
+    position: absolute
+    left: 0
+    right: 0
+    height: 60px
+    color: white
+    background-color: #463a2c
+    @media (max-width: $screen-sm-min)
+      position: inherit
+      padding: 20px
+      height: auto
+    
+    a
+      color: white
+    
+    img
+      width: 150px
+      margin: 0 10px

app/templates/home-view.jade

@@ -38,3 +38,14 @@ block outer_content
       strong(data-i18n="home.old_browser") Uh oh, your browser is too old to run CodeCombat. Sorry!
       br
       span(data-i18n="home.old_browser_suffix") You can try anyway, but it probably won't work.
+
+  if view.withTeacherNote
+    .style-flat
+      .bg-navy
+        h3 Teachers!
+        h4 Want the most engaging way to teach programming at your school?
+        .text-center
+          a.btn.btn-primary-alt.btn-lg(href="/teachers/quote") Request a Quote
+          h6
+            a.small(href="/home") Learn More
+    

app/templates/new-home-view.jade

@@ -0,0 +1,311 @@
+nav.navbar.navbar-default
+  .container-fluid
+    .navbar-header
+      button.navbar-toggle.collapsed(data-toggle='collapse', data-target='#navbar-collapse' aria-expanded='false')
+        span.sr-only Toggle navigation
+        span.icon-bar
+        span.icon-bar
+        span.icon-bar
+      a.navbar-brand(href="/")
+        img#logo-img(src="/images/pages/base/logo.png")
+        
+    #navbar-collapse.collapse.navbar-collapse
+      ul.nav.navbar-nav
+        li
+          a(href="/about") About
+        li
+          a(href="/courses/teachers") Teachers
+        li
+          a(href="https://discourse.codecombat.com/") Forum
+        li
+          a#create-account-link.signup-button Signup
+        li
+          a#login-link.login-button Login
+        
+      #language-dropdown-wrapper.pull-right.hidden-xs.hidden-sm
+        select.language-dropdown.form-control
+
+.container-fluid#jumbotron-container-fluid(class=view.jumbotron === 'student' ? 'alt-image' : '')
+  .container
+    .row
+      .col-lg-7.col-md-8.col-sm-8.col-xs-6
+        h1 The most engaging game for learning programming.
+        
+      .col-lg-3.col-lg-offset-2.col-md-4.col-sm-4.col-xs-6
+        .well.text-center
+          h6#classroom-edition-header Classroom Edition:
+          div
+            button#teacher-btn.btn.btn-primary.btn-lg.btn-block I'm a Teacher
+          div
+            a.btn.btn-forest.btn-lg.btn-block(href="/courses") I'm a Student
+          
+          h6#learn-to-code-header Learn to code:
+          a.btn.btn-gold.btn-lg.btn-block(href=view.playURL) Play Now
+    .row#learn-more-row
+      .col-xs-12.text-center
+        a#learn-more-link
+          h6 Learn more
+          h2
+            span.glyphicon.glyphicon-chevron-down
+        
+      
+.container#classroom-in-box-container
+  #classroom-in-box-row.row
+    .col-sm-6
+      h2.text-navy A classroom in-a-box for teaching computer science.
+    .col-sm-6
+      p CodeCombat is a platform for students to learn computer science while playing through a real game.
+      p Our courses have been specifically playtested to excel in a classroom setting, even by teachers with little to no prior programming experience.
+    
+  #feature-spread-row.row.text-center
+    h3 Designed with teachers in mind
+    .col-sm-4
+      img.img-circle(src="/images/pages/home/F1_typedcode.png")
+      h4
+        | Real, typed code
+        br
+        | from the first level
+      p.small Getting students to typed code as quickly as possible is critical to learning programming syntax and proper structure.
+      
+    .col-sm-4
+      img.img-circle(src="/images/pages/home/F2_teacherguides.png")
+      h4 
+        | Educator resources
+        br
+        | and course guides
+      p.small Teaching computer science does not require a costly degree, because we provide tools to support educators of all backgrounds.
+      
+    .col-sm-4
+      img.img-circle(src="/images/pages/home/F3_accessible.png")
+      h4
+        | Accessible to
+        br
+        | everyone
+      p.small Democratizing the process of learning coding is at the core of our philosophy. Everyone should be able to learn to code.
+  
+  .testimonials-rows
+    .testimonials-filler-left
+    .testimonials-filler-right
+    .row
+      .col-lg-offset-2.col-lg-7.col-sm-8
+        blockquote
+          h3 I think they actually forgot that they were actually learning something.
+        
+      .col-lg-2.col-sm-3.text-center
+        img.img-circle(src="/images/pages/home/timmaki.png")
+        h6 Tim Maki
+        .small Director of Technology, Tilton School
+      
+    .row
+      .col-lg-2.col-sm-3.col-lg-offset-1.text-center
+        img.img-circle(src="/images/pages/home/dylan.png")
+        h6 Dylan
+        .small 3rd Grader
+          
+      .col-lg-7.col-sm-8
+        blockquote
+          h3 Coding is something I've always wanted to do, and I never thought I would be able to learn it in school.
+          
+  h3.text-center Why is learning through games important?
+  
+  #benefit-row-1.row
+    .col-sm-5
+      p
+        | Gaming is a medium that encourages interaction, discovery, and trial-and-error.
+        | A good game challenges the player to master skills over time,
+        | which is the same critical process students go through as they learn.
+      p
+        | Games excel at rewarding “
+        a(href="http://blog.mindresearch.org/blog/game-based-learning-infographic-strong-math-practices" target="_blank") productive struggle
+        span.spr ” - the kind of struggle that results in learning that’s engaging and
+        a(href="http://www.gamesandlearning.org/2014/06/09/teachers-on-using-games-in-class/" target="_blank") motivating
+        | , not tedious.
+
+    .col-sm-6.col-sm-offset-1#benefit-graphic-1
+      h2 Games reward the productive struggle.
+      img(src="/images/pages/home/G1_reward.png")
+      #benefit-graphic-1-filler
+      
+  #benefit-row-2.row
+    .col-sm-6#benefit-graphic-2
+      h2 Studies suggest gaming is good for children’s brains. (it’s true!)
+      img(src="/images/pages/home/G2_brains.png")
+      #benefit-graphic-2-filler
+        
+    .col-sm-5.col-sm-offset-1
+      p
+        span.spr When game-based learning systems are
+        a(href="http://schoolsweek.co.uk/gaming-is-good-for-childrens-brains-study-suggests/" target="_blank") compared
+        span.spl.spr against conventional assessment methods, the difference is clear: games are better at helping students retain knowledge, concentrate and
+        a(href="http://dev.k-12techdecisions.com/article/game_based_learning_is_where_vygotsky_meets_dweck/P3" target="_blank") perform at a higher level of achievement
+        | .
+      p
+        | Games also provide real-time feedback that allows students to adjust their solution path and understand concepts more holistically, instead of being limited to just “correct” or “incorrect” answers.
+      
+  #benefit-row-3.row
+    .col-sm-5
+      p
+        | A great game is more than just badges and achievements - it’s about a player’s journey, well-designed puzzles, and the ability to tackle challenges with agency and confidence. 
+      p
+        | CodeCombat is a game that gives players that agency and confidence with our robust typed code engine, which helps beginner and advanced students alike write proper, valid code.
+
+    .col-sm-6.col-sm-offset-1#benefit-graphic-3
+      h2 A real game, played with real coding.
+      img(src="/images/pages/home/G3_game.png")
+      #benefit-graphic-3-filler
+        
+  #request-demo-row.text-center
+    h3 Curious? Request a demo and we'll show you the ropes
+    h4 Or create a class and see it for yourself!
+    p
+      a.btn.btn-primary.btn-lg(href="/teachers/freetrial") Request a Demo
+      a.btn.btn-primary-alt.btn-lg(href="/courses/teachers") Create a Class
+    
+  h3.text-center Computer science courses for all ages
+  h4.text-center
+    span#school-level-label Show me lesson time estimates for:
+    select#school-level-dropdown.form-control.text-navy
+      option(value='elementary') Elementary School
+      option(value='middle', selected=true) Middle School
+      option(value='high') High School
+  h4#semester-duration.text-center
+  #courses-container
+    - var conceptsSeen = {};
+    - var lastScreenshot = "";
+    for course, courseIndex in view.courses.models
+      .col-md-3.col-sm-4
+        .media.course-details(data-course-slug=course.get('slug'))
+          if courseIndex === 0
+            .free-course
+              h6 Free for all students
+          .media-body(title=course.get('description'))
+            h6.course-name= course.get('name') + ':'
+            p.small
+              - var pastFirstConcept = false;
+              each concept in course.get('concepts')
+                - if (conceptsSeen[concept]) continue;
+                - conceptsSeen[concept] = true;
+                if pastFirstConcept
+                  span.spr ,
+                - pastFirstConcept = true;
+                span(data-i18n="concepts." + concept)
+          .media-object(style="background-image: url(" + course.get('screenshot') + ")")
+          - lastScreenshot = course.get('screenshot');
+          h6.course-duration
+            span.spr Lesson time:
+            span.course-hours= course.get('duration') || 0
+            span.spl.unit(data-i18n="units.hours")
+    for upcomingCourse in ['Computer Science 6', 'Computer Science 7', 'Computer Science 8']
+      .col-md-3.col-sm-4
+        .media.disabled
+          .media-body
+            h6.course-name= upcomingCourse + ':'
+            p.small Coming soon!
+          img.media-object(src="/images/pages/home/inprogress.png")
+          h6.course-duration
+            span.spr Lesson time:
+            span.course-hours 5
+            span.spl(data-i18n="units.hours")
+
+    .text-center
+      h4
+        img(src="/images/pages/home/course_languages.png")
+        | Courses are available in JavaScript, Python, and Java (coming soon!)
+      
+  .testimonials-rows
+    .testimonials-filler-left
+    .testimonials-filler-right
+    .row
+      .col-lg-offset-2.col-lg-7.col-sm-8
+        blockquote
+          h3 Boasts riddles that are complex enough to fascinate gamers and coders alike.
+
+      .col-lg-2.col-sm-3.text-center
+        img.img-circle(src="/images/pages/home/opensource.png")
+        h6 Open Source
+        .small opensource.com
+
+    .row
+      .col-lg-2.col-sm-3.col-lg-offset-1.text-center
+        img.img-circle(src="/images/pages/home/pcmag.png")
+        h6 PC Mag
+        .small pcmag.com
+
+      .col-lg-7.col-sm-8
+        blockquote
+          h3 A winning combination of RPG gameplay and programming homework that pulls off making kid-friendly education legitimately enjoyable.
+          
+          
+  .request-demo-row.text-center
+    h3 Everything you need to run a computer science class in your school today, no CS background required.
+    p
+      a.btn.btn-primary.btn-lg(href="/teachers/freetrial") Request a Demo
+      a.btn.btn-primary-alt.btn-lg(href="/courses/teachers") Create a Class
+      
+      
+  .text-center
+    img(src="/images/pages/home/character_lineup.png")
+    
+    
+.container-fluid
+  #footer.small
+    .container
+      .row
+        .col-sm-3
+          ul.list-unstyled
+            li
+              strong CodeCombat
+            li
+              a(href="/about") About
+            li
+              a(href="/Careers") Jobs
+            li
+              a(href="http://blog.codecombat.com/", data-i18n="nav.blog")
+            li
+              a(href="/legal") Legal
+            
+        .col-sm-3
+          ul.list-unstyled
+            li
+              strong Schools
+            li
+              a(href="/courses/teachers") Teachers
+            li
+              a(href="https://sites.google.com/a/codecombat.com/teacher-guides/") Educator Wiki
+            li
+              a(href="/courses/quote") Request a Quote
+            
+        .col-sm-3
+          ul.list-unstyled
+            li
+              strong Get Involved
+            li
+              a(href='/community', data-i18n="nav.community")
+            li
+              a(href="/contribute") Contribute
+            li
+              a(href=view.forumLink(), data-i18n="nav.forum")
+            li
+              a(href="/play/ladder") Multiplayer
+            li
+              a(href="https://github.com/codecombat/codecombat") Open source (GitHub)
+        .col-sm-3
+          ul.list-unstyled
+            li
+              strong Support
+            li
+              a(href="https://discourse.codecombat.com/t/faq-check-before-posting/1027") FAQs
+            li
+              a(tabindex=-1, data-toggle="coco-modal", data-target="core/ContactModal", data-i18n="nav.contact")
+            li
+              a(href="https://www.facebook.com/codecombat", data-i18n="nav.facebook")
+            li
+              a(href="https://twitter.com/codecombat", data-i18n="nav.twitter")
+              
+  #final-footer.small.text-center
+    | Copyright ©2016 CodeCombat. All Rights Reserved.
+    img(src="/images/pages/base/logo.png" alt="CodeCombat")
+    span.spr Need help? Email
+    a(href="mailto:team@codecombat.com") team@codecombat.com
+    span.spl and we'll get in touch!
+      

app/views/HomeView.coffee

@@ -8,8 +8,9 @@ module.exports = class HomeView extends RootView
   events:
     'click #play-button': 'onClickPlayButton'
 
-  constructor: ->
+  constructor: (options={}) ->
     super()
+    @withTeacherNote = options.withTeacherNote
     window.tracker?.trackEvent 'Homepage Loaded', category: 'Homepage'
     if @getQueryVariable 'hour_of_code'
       application.router.navigate "/hoc", trigger: true

app/views/NewHomeView.coffee

@@ -0,0 +1,80 @@
+RootView = require 'views/core/RootView'
+template = require 'templates/new-home-view'
+CocoCollection = require 'collections/CocoCollection'
+Course = require 'models/Course'
+
+###
+  TODO:
+  * Get rid of modal wrapper shadow at top of page
+  * auto margin feature paragraphs
+
+###
+
+module.exports = class NewHomeView extends RootView
+  id: 'new-home-view'
+  className: 'style-flat'
+  template: template
+
+  events:
+    'click #play-btn': 'onClickPlayButton'
+    'change #school-level-dropdown': 'onChangeSchoolLevelDropdown'
+    'click #teacher-btn': 'onClickTeacherButton'
+    'click #learn-more-link': 'onClickLearnMoreLink'
+
+  initialize: (options) ->
+    @jumbotron = options.jumbotron or 'student' # or 'characters'
+    @courses = new CocoCollection [], {url: "/db/course", model: Course}
+    @supermodel.loadCollection(@courses, 'courses')
+
+    window.tracker?.trackEvent 'Homepage Loaded', category: 'Homepage'
+    if @getQueryVariable 'hour_of_code'
+      application.router.navigate "/hoc", trigger: true
+
+    isHourOfCodeWeek = false  # Temporary: default to /hoc flow during the main event week
+    if isHourOfCodeWeek and (@isNewPlayer() or (@justPlaysCourses() and me.isAnonymous()))
+      # Go/return straight to playing single-player HoC course on Play click
+      @playURL = '/hoc?go=true'
+      @alternatePlayURL = '/play'
+      @alternatePlayText = 'home.play_campaign_version'
+    else if @justPlaysCourses()
+      # Save players who might be in a classroom from getting into the campaign
+      @playURL = '/courses'
+      @alternatePlayURL = '/play'
+      @alternatePlayText = 'home.play_campaign_version'
+    else
+      @playURL = '/play'
+
+  onClickPlayButton: (e) ->
+    @playSound 'menu-button-click'
+    return if @playURL isnt '/play'
+    window.tracker?.trackEvent 'Click Play', category: 'Homepage'
+
+  afterRender: ->
+    @onChangeSchoolLevelDropdown()
+    super()
+
+  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)'}
+      middle: {'introduction-to-computer-science': '1-3', 'computer-science-5': '7-10', default: '5-8', total: '25-35 hours (about one semester)'}
+      high: {'introduction-to-computer-science': '1', 'computer-science-5': '6-9', default: '5-6', total: '22-28 hours (about one semester)'}
+    level = if e then $(e.target).val() else 'middle'
+    @$el.find('#courses-container .course-details').each ->
+      slug = $(@).data('course-slug')
+      duration = levels[level][slug] or levels[level].default
+      $(@).find('.course-duration .course-hours').text duration
+      $(@).find('.course-duration .unit').text($.i18n.t(if duration is '1' then 'units.hour' else 'units.hours'))
+    @$el.find('#semester-duration').text levels[level].total
+
+  justPlaysCourses: ->
+    # This heuristic could be better, but currently we don't add to me.get('courseInstances') for single-player anonymous intro courses, so they have to beat a level without choosing a hero.
+    return me.get('stats')?.gamesCompleted and not me.get('heroConfig')
+
+  isNewPlayer: ->
+    not me.get('stats')?.gamesCompleted and not me.get('heroConfig')
+
+  onClickLearnMoreLink: ->
+    @scrollToLink('#classroom-in-box-container')
+
+  onClickTeacherButton: ->
+    @scrollToLink('#request-demo-row', 600)

app/views/core/CocoView.coffee

@@ -438,6 +438,11 @@ module.exports = class CocoView extends Backbone.View
     slider.on('slide', changeCallback)
     slider.on('slidechange', changeCallback)
     slider
+    
+  scrollToLink: (link, speed=300) ->
+    $('#page-container').animate({
+      scrollTop: $(link).offset().top
+    }, speed)
 
   toggleFullscreen: (e) ->
     # https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode?redirectlocale=en-US&redirectslug=Web/Guide/DOM/Using_full_screen_mode