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

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!