codecombat/app/templates/new-home-view.jade

extends /templates/base-flat

block content
  .container-fluid#jumbotron-container-fluid(class=view.jumbotron === 'student' ? 'alt-image' : '')
    .container
      .row
        .col-lg-7.col-md-8
          h1(data-i18n="new_home.slogan")

        .col-lg-3.col-lg-offset-2.col-md-4
          .well.text-center.hidden-md.hidden-lg
            .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")

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


  .container#classroom-in-box-container
    #classroom-in-box-row.row
      .col-sm-6
        h2.text-navy(data-i18n="new_home.classroom_in_a_box")
      .col-sm-6
        p(data-i18n="new_home.codecombat_is")
        p(data-i18n="new_home.our_courses")

    #feature-spread-row.row.text-center
      h3(data-i18n="new_home.designed_with")
      .col-sm-4
        img.img-circle(src="/images/pages/home/F1_typedcode.png")
        h4
          span(data-i18n="new_home.real_code")
          br
          span(data-i18n="new_home.from_the_first_level")
        p.small(data-i18n="new_home.getting_students")

      .col-sm-4
        img.img-circle(src="/images/pages/home/F2_teacherguides.png")
        h4
          span(data-i18n="new_home.educator_resources")
          br
          span(data-i18n="new_home.course_guides")
        p.small(data-i18n="new_home.teaching_computer_science")

      .col-sm-4
        img.img-circle(src="/images/pages/home/F3_accessible.png")
        h4
          span(data-i18n="new_home.accessible_to")
          br
          span(data-i18n="new_home.everyone")
        p.small(data-i18n="new_home.democratizing")

    .testimonials-rows
      .testimonials-filler-left
      .testimonials-filler-right
      .row
        .col-lg-offset-2.col-lg-7.col-sm-8
          blockquote
            h3(data-i18n="new_home.forgot_learning")

        .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-7.col-sm-8.col-sm-push-4.col-lg-push-3
          blockquote
            h3(data-i18n="new_home.wanted_to_do")

        .col-lg-2.col-sm-3.col-lg-offset-1.text-center.col-sm-pull-8.col-lg-pull-7
          img.img-circle(src="/images/pages/home/dylan.png")
          h6 Dylan
          .small 3rd Grader


    h3.text-center(data-i18n="new_home.why_games")

    #benefit-row-1.row
      #benefit-graphic-1.col-sm-6.col-sm-offset-1.col-sm-push-6
        h2(data-i18n="new_home.games_reward")
        img(src="/images/pages/home/G1_reward.png")
        #benefit-graphic-1-filler

      .col-sm-5.col-sm-pull-6
        p(data-i18n="new_home.encourage")

        p
          span.spr(data-i18n="new_home.excel")
          span “
          a(href="http://blog.mindresearch.org/blog/game-based-learning-infographic-strong-math-practices" target="_blank", data-i18n="new_home.struggle")
          span ” -
          span.spl.spr(data-i18n="new_home.kind_of_struggle")
          a(href="http://www.gamesandlearning.org/2014/06/09/teachers-on-using-games-in-class/" target="_blank", data-i18n="new_home.motivating")
          span ,
          span.spl(data-i18n="new_home.not_tedious")



    #benefit-row-2.row
      #benefit-graphic-2.col-sm-6
        h2(data-i18n="new_home.gaming_is_good")
        img(src="/images/pages/home/G2_brains.png")
        #benefit-graphic-2-filler

      .col-sm-5.col-sm-offset-1
        p
          span.spr(data-i18n="new_home.game_based")
          a(href="http://schoolsweek.co.uk/gaming-is-good-for-childrens-brains-study-suggests/" target="_blank", data-i18n="new_home.compared")
          span.spl.spr(data-i18n="new_home.conventional")
          a(href="http://dev.k-12techdecisions.com/article/game_based_learning_is_where_vygotsky_meets_dweck/P3" target="_blank", data-i18n="new_home.perform_at_higher_level")
          span .
        p
          span(data-i18n="new_home.feedback")

    #benefit-row-3.row
      #benefit-graphic-3.col-sm-6.col-sm-offset-1.col-sm-push-6
        h2(data-i18n="new_home.real_game")
        img(src="/images/pages/home/G3_game.png")
        #benefit-graphic-3-filler

      .col-sm-5.col-sm-pull-6
        p
          span(data-i18n="new_home.great_game")
        p
          span(data-i18n="new_home.agency")


    .request-demo-row.text-center
      h3(data-i18n="new_home.curious")
      h4(data-i18n="new_home.create_class")
      div
        a.btn.btn-primary.btn-lg(href="/teachers/freetrial", data-i18n="new_home.request_demo")
        a.btn.btn-primary-alt.btn-lg(href="/courses/teachers", data-i18n="new_home.create_a_class")
      div
        if me.isAnonymous()
          span.spr(data-i18n="new_home.have_an_account")
          a.login-button Login
        else
            span.spr(data-i18n="new_home.logged_in_as")
            span= me.broadName()
            span.spr .
            a(href="/courses/teachers", data-i18n="new_home.view_my_classes")
            span.spr.spl(data-i18n="general.or")
            a#logout-button logout

    h3.text-center(data-i18n="new_home.computer_science")
    h4.text-center
      span#school-level-label(data-i18n="new_home.show_me_lesson_time")
      select#school-level-dropdown.form-control.text-navy
        option(value='elementary', data-i18n="teachers_quote.elementary_school")
        option(value='middle', selected=true, data-i18n="teachers_quote.middle_school")
        option(value='high', data-i18n="teachers_quote.high_school")
    h5.text-center#total-hours-header
      span.spr(data-i18n="new_home.curriculum")
      span#semester-duration
    #courses-row.row
      - 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(data-i18n="new_home.ffa")
            .media-body(title=course.get('description'))
              h6.course-name= course.get('name') + ':'
              p.small
                - var total = 0;
                each concept in course.get('concepts')
                  - if (conceptsSeen[concept]) continue;
                  - conceptsSeen[concept] = true;
                  if total === 3
                    - total += 1;
                    span ...
                    - continue;
                  else if total > 3
                    - continue;
                  else if total > 0
                    span.spr ,
                  - total += 1;
                  span(data-i18n="concepts." + concept)
            img.media-object(src="/images/pages/home/course"+(courseIndex+1)+".png")
            - lastScreenshot = course.get('screenshot');
            h6.course-duration
              span.spr(data-i18n="new_home.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(data-i18n="new_home.coming_soon")
            img.media-object(src="/images/pages/home/inprogress.png")

      .clearfix
      .text-center
        h4
          img(src="/images/pages/home/course_languages.png")
          div(data-i18n="new_home.courses_available_in")

    .testimonials-rows
      .testimonials-filler-left
      .testimonials-filler-right
      .row
        .col-lg-offset-2.col-lg-7.col-sm-8
          blockquote
            h3(data-i18n="new_home.boast")

        .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-7.col-sm-8.col-sm-push-4.col-lg-push-3
          blockquote
            h3(data-i18n="new_home.winning")

        .col-lg-2.col-sm-3.col-lg-offset-1.text-center.col-sm-pull-8.col-lg-pull-7
          img.img-circle(src="/images/pages/home/pcmag.png")
          h6 PC Mag
          .small pcmag.com


    .request-demo-row.text-center
      h3(data-i18n="new_home.run_class")
      p
        a.btn.btn-primary.btn-lg(href="/teachers/freetrial", data-i18n="new_home.request_demo")
        a.btn.btn-primary-alt.btn-lg(href="/courses/teachers", data-i18n="new_home.create_a_class")