codecombat/app/templates/about.jade

extends /templates/base-flat

block content
  .style-flat(data-spy="scroll", data-target="#nav-container")
    .container-fluid#jumbotron
      .container
        .row
          //TODO: Size these correctly
          .col-xs-10
            h1(data-i18n="about.main_title")
        .row
          .col-xs-8
            h2(data-i18n="about.main_description")

    #nav-container
      nav#fixed-nav.nav.navbar
        .container-fluid.text-center
          ul.center-block
            li.active
              a(href="#mission")#mission-link
                small.label(data-i18n="about.mission_link")
            li
              a(href="#team")#team-link
                small.label(data-i18n="about.team_link")
            li
              a(href="#community")#community-link
                small.label(data-i18n="nav.community")
            li
              a(href="#story")#story-link
                small.label(data-i18n="about.story_link")
            li
              a(href="#jobs")#jobs-link
                small.label(data-i18n="nav.careers")
            li
              a(href="#contact")#contact-link
                small.label(data-i18n="about.press_link")

    #about-container.container
      #mission.anchor.row
        .col-sm-6#mission-graphic.responsive-side-margins
          img(src="/images/pages/about/globe_white.png")
          h2(data-i18n="about.mission_title")
          #mission-graphic-filler
        .col-sm-5.col-sm-offset-1
          #mission-text.responsive-side-margins
            p(data-i18n="[html]about.mission_description_1")
            p(data-i18n="[html]about.mission_description_2")

      #team.anchor
        .text-center
          h3(data-i18n="about.team_title")
          h4.responsive-side-margins(data-i18n="about.team_values")
        ul
          // Full time
          li
            a(href="http://www.nickwinter.net" rel="external")
              .profile-pic
                img(src="/images/pages/about/team-avatars/nick-avatar.png").img-thumbnail.avatar
                img(src="/images/pages/about/team-headshots/nick-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name
                a(href="http://www.nickwinter.net" rel="external") Nick Winter
              small(data-i18n="about.nick_title")
              small(data-i18n="about.nick_blurb")

          li
            a(href="http://www.mattlott.com/" rel="external")
              .profile-pic
                img(src="/images/pages/about/team-avatars/matt-avatar.png").img-thumbnail.avatar
                img(src="/images/pages/about/team-headshots/matt-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name
                a(href="http://www.mattlott.com/" rel="external") Matt Lott
              small(data-i18n="about.matt_title")
              br

          li
            a(href="http://cat.zdh.com/" rel="external")
              .profile-pic
                img(src="/images/pages/about/team-avatars/cat-avatar.png").img-thumbnail.avatar
                img(src="/images/pages/about/team-headshots/cat-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name
                a(href="http://cat.zdh.com/" rel="external") Catherine Weresow
              small(data-i18n="about.cat_title")
              small(data-i18n="about.cat_blurb")

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/scott-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/scott-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Scott Erickson
              small(data-i18n="about.scott_title")
              small(data-i18n="about.scott_blurb")

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/maka-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/maka-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Michael 'Maka' Gradin
              small(data-i18n="about.maka_title")
              small(data-i18n="about.maka_blurb")

          li
            a(href="http://basicer.com/" rel="external")
              .profile-pic
                img(src="/images/pages/about/team-avatars/rob-avatar.png").img-thumbnail.avatar
                img(src="/images/pages/about/team-headshots/rob-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name
                a(href="http://basicer.com/" rel="external") Rob Blanckaert
              small(data-i18n="about.rob_title")
              small(data-i18n="about.rob_blurb")

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/josh-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/josh-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Josh Callebaut
              small(data-i18n="about.josh_c_title")
              small(data-i18n="about.josh_c_blurb")

          li
            a(href="http://robinyang.com/" rel="external")
              .profile-pic
                img(src="/images/pages/about/team-avatars/robin-avatar.png").img-thumbnail.avatar
                img(src="/images/pages/about/team-headshots/robin-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name
                a(href="http://robinyang.com/" rel="external") Robin Yang
              small(data-i18n="about.robin_title")
              small(data-i18n="about.robin_blurb")

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/phoenix-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/phoenix-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Phoenix Eliot
              small(data-i18n="about.phoenix_title")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/nolan-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/nolan-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Nolan Kelly
              small(data-i18n="about.nolan_title")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/elliot-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/elliot-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Elliot Okiwelu
              small(data-i18n="about.elliot_title")
              small(data-i18n="about.elliot_blurb")

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/lisa-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/lisa-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Lisa Wu
              small(data-i18n="about.lisa_title")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/sean-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/sean-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Sean McNulty
              small(data-i18n="about.sean_title")
              br
        ul
          // Part time / contract
          li
            a(href="http://floor.is/lava/" rel="external")
              img(src="/images/pages/about/josh_small.png").img-thumbnail
            .team-bio
              h6.label.team-name
                a(href="http://floor.is/lava/" rel="external") Josh Lee
              small(data-i18n="about.josh_title")
              small(data-i18n="about.josh_blurb")

          li
            a(href="https://soundcloud.com/taking-off" rel="external")
              img(src="/images/pages/about/jose_small.png").img-thumbnail
            .team-bio
              h6.label.team-name
                a(href="https://soundcloud.com/taking-off" rel="external") Jose Antonini
              small(data-i18n="about.jose_title")
              small(data-i18n="about.jose_blurb")

          li
            a(href="http://retrostylegames.com/" rel="external")
              img(src="/images/pages/about/pavel_small.png").img-thumbnail
            .team-bio
              h6.label.team-name
                a(href="http://retrostylegames.com/" rel="external") Pavel Konstantinov
              small(data-i18n="about.retrostyle_title")
              small(data-i18n="about.retrostyle_blurb")

          li
            a(href="http://retrostylegames.com/" rel="external")
              img(src="/images/pages/about/oleg_small.png").img-thumbnail
            .team-bio
              h6.label.team-name
                a(href="http://retrostylegames.com/" rel="external") Oleg Ulyanickiy
              small(data-i18n="about.retrostyle_title")
              small(data-i18n="about.retrostyle_blurb")

      #community.anchor
        #community-row-1.row.text-center
          .col-sm-12
          .text-center
            h3(data-i18n="about.community_title")
            h4(data-i18n="about.community_subtitle")
            img(src="/images/pages/about/github_avatars.png")#community-avatars

        #community-row-2.row
          .col-sm-5
            p.responsive-side-margins
              span.spr(data-i18n="about.community_description_3")
              a(href="/community")
                span(data-i18n="about.community_description_link_2")
              span , 
              span.spr(data-i18n="about.community_description_1")
              a(href="/contribute")
                span(data-i18n="about.community_description_link")
              span.spl(data-i18n="about.community_description_2")
          .col-sm-6.col-sm-offset-1#community-graphic.responsive-side-margins
            h2(data-i18n="about.number_contributors")
            img(src="/images/pages/about/github.png")
            #community-graphic-filler

      #story.anchor
        .text-center
          h3(data-i18n="about.story_title")
          h4.responsive-side-margins(data-i18n="about.story_subtitle")
        .row
          #story-graphic-1.col-lg-6
            .media
              .pull-left
                img.media-object#story-image-1(src="/images/pages/about/character_silouhette.png")
              .media-body
                .media-heading.text-h1
                  span(data-i18n="about.story_statistic_1a")
                  br
                  span(data-i18n="about.story_statistic_1b")
                p.text-h5(data-i18n="about.story_statistic_1c")

          .col-lg-5.col-lg-offset-1
            #story-graphic-2
              .media
                p.text-h5(data-i18n="about.story_statistic_2a")
                .pull-right
                  img(src="/images/pages/about/globe_green.png")
                .media-body
                  .media-heading.text-h1(data-i18n="about.story_statistic_2b")

        #story-graphic-3.text-center
          p
            div.text-h5(data-i18n="about.story_statistic_3a")
            #story-bracketed-text
              div#left-bracket
                img(src="/images/pages/about/bracket_left.png")
              div.text-h1(data-i18n="about.story_statistic_3b")
              div#right-bracket
                img(src="/images/pages/about/bracket_right.png")
          #story-languages
            .text-center
              .text-h5(data-i18n="about.story_statistic_3c")
            #language-icons.text-center(title="JavaScript, Python, HTML, CSS, jQuery, Bootstrap")
              img.hidden-xs(src="/images/pages/about/new_languages.png")
              img.hidden-sm.hidden-md.hidden-lg(src="/images/pages/about/new_languages_xs.png")

        #story-graphic-4.text-center
          p
            div.text-h5(data-i18n="about.story_long_way_1")
            figure
              img(src="/images/pages/about/sketch.png")
              figcaption
                small(data-i18n="about.story_sketch_caption")
          p
            .text-h5(data-i18n="about.story_long_way_2")

      #jobs.anchor
        .text-center
          h3(data-i18n="about.jobs_title")
          h4(data-i18n="about.jobs_subtitle")
        #jobs-row.row
          .col-sm-6.col-md-5.col-md-offset-1.col-lg-4.col-lg-offset-0
            #benefits
              h5(data-i18n="about.jobs_benefits")
              ul
                li.small
                  a.benefits-link(href='http://blog.triplebyte.com/fixing-the-inequity-of-startup-equity', data-i18n="about.jobs_benefit_9")
                li.small(data-i18n="about.jobs_benefit_6")
                li.small(data-i18n="about.jobs_benefit_10")
                li.small(data-i18n="about.jobs_benefit_11")
                li.small(data-i18n="about.jobs_benefit_4")
                li.small(data-i18n="about.jobs_benefit_5")
                li.small(data-i18n="about.jobs_benefit_7")
          .col-sm-6.col-md-5.col-md-offset-1.col-lg-4.col-lg-offset-0
            .job-listing
              h5 Curriculum Specialist
              .text-center
                small.label
                  | San Francisco/Remote • Contract
              p.small We're looking for an enthusiastic educator with hands-on experience teaching computer science who can help us expand our curriculum offerings. 
              p.small This contractor will focus on empowering teachers who have little to no prior computer science knowledge with the tools to lead students through CodeCombat’s courses.
              a.job-link.btn.btn-lg.btn-navy(href="https://jobs.lever.co/codecombat/2d157b31-0d79-4878-a1d9-e5cb2d25d656" rel="external")
                span(data-i18n="about.learn_more")
              //- h5 (No Open Roles)
              //- p.small Check back later for updates on new positions at CodeCombat.
          .col-sm-6.col-md-5.col-lg-4
            .job-listing
              h5(data-i18n="about.jobs_custom_title")
              p.small(data-i18n="about.jobs_custom_description")
              p.small
                span.spr(data-i18n="about.jobs_custom_contact_1")
                a(href="mailto:team@codecombat.com")
                  | team@codecombat.com
                span.spl(data-i18n="about.jobs_custom_contact_2")

      #contact.anchor
        .text-center
          h3(data-i18n="about.contact_title")
          h4(data-i18n="about.contact_subtitle")
          a(href="mailto:team@codecombat.com") team@codecombat.com

      #files
        .row
          .col-md-6.col-lg-8
            #screenshots
              span.label(data-i18n="about.screenshots_title")
              .hidden-sm.hidden-md.hidden-lg
                small(data-i18n="about.screenshots_hint")
              #screenshot-grid
                a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='0')
                  img(src="/images/pages/about/screenshot_desert.png")
                a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='1')
                  img(src="/images/pages/about/screenshot_forest.png")
                a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='2')
                  img(src="/images/pages/about/screenshot_dungeon.png")
                a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='3')
                  img(src="/images/pages/about/screenshot_glacier.png")
              .clearfix.hidden-xs
                small(data-i18n="about.screenshots_hint")
          .col-md-6.col-lg-4
            #downloads-container
              #downloads
                .label(data-i18n="about.downloads_title")
                ul
                  li
                    a.small(href="http://files.codecombat.com/presspack/AboutCodeCombat.pdf")
                      span(data-i18n="about.about_codecombat")
                      | (.pdf)
                  li
                    a.small(href="http://files.codecombat.com/presspack/CodeCombat-Logo.ai")
                      span(data-i18n="about.logo")
                      | (.ai)
                  li
                    a.small(href="http://files.codecombat.com/presspack/CodeCombat-Logo.png")
                      span(data-i18n="about.logo")
                      | (.png)
                  li
                    a.small(href="http://files.codecombat.com/presspack/GameImages.zip")
                      span(data-i18n="about.screenshots")
                      | (.zip)
                  li
                    a.small(href="http://files.codecombat.com/presspack/gameimages/CodeCombat_Splash.png")
                      span(data-i18n="about.character_art")
                      | (.png)
                .text-center
                  a.btn.btn-lg.btn-primary-alt#download-button(href="http://files.codecombat.com/presspack/CodeCombat_PressPack.zip")
                    span.glyphicon.glyphicon-download-alt
                    span(data-i18n="about.download_all")

      #screenshot-lightbox.modal.fade(data-show="false")
        .modal-dialog
          .modal-content
            #screenshot-carousel.carousel
              ol.carousel-indicators
                li(data-target=".screenshot-display", data-slide-to="0").active
                li(data-target=".screenshot-display", data-slide-to="1")
                li(data-target=".screenshot-display", data-slide-to="2")
                li(data-target=".screenshot-display", data-slide-to="3")

              .carousel-inner
                .item.active
                  img#screenshot-desert(src="/images/pages/about/desert.png")
                .item
                  img#screenshot-forest(src="/images/pages/about/forest.png")
                .item
                  img#screenshot-dungeon(src="/images/pages/about/dungeon.png")
                .item
                  img#screenshot-glacier(src="/images/pages/about/glacier.png")
              a#carousel-left.left.carousel-control(href="#screenshot-carousel", role="button")
                span.glyphicon.glyphicons-chevron-left.glyphicon-chevron-left(aria-hidden="true")
                span.sr-only(data-i18n="about.previous")
              a#carousel-right.right.carousel-control(href="#screenshot-carousel", role="button")
                span.glyphicon.glyphicons-chevron-right.glyphicon-chevron-right(aria-hidden="true")
                span.sr-only(data-i18n="play.next")

      #location
        .row
          .col-sm-4.col-sm-offset-2
            p
              b CodeCombat Inc.
            p 301 Howard Street
            p Suite No. 830
            p San Francisco, California 94105
            a(href="mailto:team@codecombat.com") team@codecombat.com
          .col-sm-4
            p
              b(data-i18n="about.location_title")
            iframe(width="370", height="280", frameBorder="2", src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAIGQz3OMbv5YWivScUM86-zESjEgJR2Xo&q=301+Howard+St+Suite+830,+San+Francisco,+CA+94105")