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="about.community_link")
            li
              a(href="#story")#story-link
                small.label(data-i18n="about.story_link")
            li
              a(href="#jobs")#jobs-link
                small.label(data-i18n="about.careers_link")
            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")
              img(src="/images/pages/about/nick_small.png").img-thumbnail
            .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")
              img(src="/images/pages/about/matt_small.png").img-thumbnail
            .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")
              img(src="/images/pages/about/cat_small.png").img-thumbnail
            .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
            img(src="/images/pages/about/scott_small.png").img-thumbnail
            .team-bio
              h6.label.team-name Scott Erickson
              small(data-i18n="about.scott_title")
              small(data-i18n="about.scott_blurb")

          li
            img(src="/images/pages/about/maka_small.png").img-thumbnail
            .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")
              img(src="/images/pages/about/rob_small.png").img-thumbnail
            .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
            img(src="/images/pages/about/josh_c_small.png").img-thumbnail
            .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")
              img(src="/images/pages/about/robin_small.png").img-thumbnail
            .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")


          // 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_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="Clojure, CoffeeScript, JavaScript, Python, Java, Lua")
              img.hidden-xs(src="/images/pages/about/languages.png")
              img.hidden-sm.hidden-md.hidden-lg(src="/images/pages/about/languages_group1.png")
              img.hidden-sm.hidden-md.hidden-lg(src="/images/pages/about/languages_group2.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(data-i18n="about.jobs_benefit_1")
                li.small(data-i18n="about.jobs_benefit_2")
                li.small(data-i18n="about.jobs_benefit_4")
                li.small(data-i18n="about.jobs_benefit_5")
                li.small(data-i18n="about.jobs_benefit_6")
          .col-sm-6.col-md-5.col-lg-4
            .job-listing
              h5 Head of Sales
              .text-center
                small.label
                  | San Francisco • Fulltime
              p.small School districts are scrambling to offer computer science classes to all their students as a core subject. They have had no solution, because they can't afford to hire enough programming teachers – until now.
              a.job-link.btn.btn-lg.btn-navy(href="https://jobs.lever.co/codecombat/2d0194ed-7c69-4aab-b1f9-363ca4b9f04b" rel="external")
                span(data-i18n="about.learn_more")
          .col-sm-6.col-md-5.col-md-offset-1.col-lg-4.col-lg-offset-0
            .job-listing
              h5 Sales Representative
              .text-center
                small.label
                  | San Francisco • Fulltime
              p.small School districts are scrambling to offer computer science classes to all their students as a core subject. They have had no solution, because they can't afford to hire enough programming teachers – until now.
              a.job-link.btn.btn-lg.btn-navy(href="https://jobs.lever.co/codecombat/3f6ff123-16ce-4ecb-aba3-dcf4e8927c47" rel="external")
                span(data-i18n="about.learn_more")
          .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="about.next")

      #location
        .row
          .col-sm-4.col-sm-offset-2
            p
              b CodeCombat Inc.
            p 360 3rd St.
            p Suite 700 (Livefyre)
            p San Francisco, CA 94107
            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=360+3rd+St+Suite+700,+San+Francisco,+CA+94107")