doctype html
html(ng-app='habitrpg', ng-controller='RootCtrl')
  head
    meta(charset='utf-8')
    link(href='//fonts.googleapis.com/css?family=Lato:400,700', rel='stylesheet', type='text/css')
    title Habitica | Your Life the Role Playing Game
    meta(name='description', content='')
    meta(name='keywords', content='')
    meta(name='author', content='')
    meta(name='geo.placename', content='')
    meta(name='viewport', content='width=device-width, maximum-scale=1')
    meta(property='og:url', content='https://habitica.com/static/front')
    meta(property='og:type', content='website')
    meta(property='og:title', content='Habitica: Your Life the Role Playing Game')
    meta(property='og:description', content='Habitica is a free habit building and productivity app that treats your real life like a game. With in-game rewards and punishments to motivate you and a strong social network to inspire you, Habitica can help you achieve your goals to become healthy, hard-working, and happy.')
    meta(property='og:site_name', content='Habitica')
    meta(property='og:image', content='https://s3.amazonaws.com/habitica-assets/assets/gryphon_logo_300x300.png')
    meta(property='fb:app_id', content='128307497299777')
    meta(name='twitter:card' content='summary')
    meta(name='twitter:site' content='@habitica')
    meta(name='twitter:title' content='Habitica: Your Life the Role Playing Game')
    meta(name='twitter:description' content='Habitica is a free habit-building and productivity app that treats your real life like a game! Motivate yourself with in-game rewards and social encouragement.')
    meta(name='twitter:image' content='https://s3.amazonaws.com/habitica-assets/assets/gryphon_logo.png')
    meta(name='apple-itunes-app' content='app-id=994882113')
    meta(name='google-play-app' content='app-id=com.habitrpg.android.habitica')
    link(rel='apple-touch-icon' href='/logo.png')
    link(rel='android-touch-icon' href='/logo.png')
    link(rel='canonical', href='', type='text/html')
    link(rel='shortcut icon', sizes="32x32", href='/favicon.ico')
    link(rel='shortcut icon', sizes="192x192", href='/favicon_192x192.png')
    link(rel='mask-icon', href='/favicon.ico')

    link(rel='stylesheet', type='text/css', href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css')

    script(type='text/javascript').
      window.env = !{JSON.stringify(env._.pick(env, env.clientVars))};

    != env.getManifestFiles("tmp_static_front")

    script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js')
    script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js')
    script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js')

  body(ng-controller='AuthCtrl')
    include ./login-modal
    include ../shared/avatar/index
    include ../shared/mixins
    include ../shared/modals/members

    noscript.banner= env.t('jsDisabledHeadingFull')
      br
      a(href='http://www.enable-javascript.com/', target='_blank')= env.t('jsDisabledLink')

    .mobile-container
      div(ng-init='Analytics.track({"hitType":"pageview","eventCategory":"page","eventAction":"landing page","page":"/static/front"});')
      header#header
        nav.navbar.navbar-default.navbar-static-top
          .container-fluid
            // Brand and toggle get grouped for better mobile display
            .navbar-header
              button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
                span.sr-only Toggle navigation
                span.icon-bar
                span.icon-bar
                span.icon-bar
              a.navbar-brand(href='#')
                img.img-rendering-auto(src='https://d2afqr2xdmyzvu.cloudfront.net/assets/habitica_lockup2_desat.png', alt=env.t('altAttrNavLogo'))
            // Collect the nav links, forms, and other content for toggling
            #bs-example-navbar-collapse-1.collapse.navbar-collapse
              ul.nav.navbar-nav.navbar-right
                li
                  a(href='/static/features')=env.t('companyAbout')
                li
                  a(href='/static/plans')=env.t('groupPlans')
                li
                  a(href='http://blog.habitrpg.com/')=env.t('companyBlog')
                li
                  a(href='/static/press-kit')=env.t('presskit')
                li
                  a(href='/static/contact')=env.t('contactUs')
                li
                  button#header-play-button.btn.btn-primary.navbar-btn.navbar-right(ng-click='playButtonClick()')= env.t('playButtonFull')
      #intro
        h1=env.t('motivate1')
        img.img-rendering-auto.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/intro.png', alt='')
        //- The empty alt attribute isn't a mistake, it's part of the spec for purely decorative images that add no information
        // insert intro images
        .introcall.bg-success
          h4= env.t('joinOthers', {userCount:userCount})
            small
              button#play-btn.btn.btn-primary.btn-lg.gamifybutton(ng-click='playButtonClick()')= env.t('free')
        .presslogos.text-center.img-rendering-auto
          = env.t('featuredIn')
          br
          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/lifehacker.png', alt=env.t('altAttrLifehacker'))
          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/nyt-logo.png', alt=env.t('altAttrNewYorkTimes'))
          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/makeuseof.png', alt=env.t('altAttrMakeUseOf'))
          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/Forbes_logo.png', alt=env.t('altAttrForbes'))
          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/Cnetlogo.png', alt=env.t('altAttrCnet'))
          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/Fast-Company-logo.png', alt=env.t('altAttrFastCompany'))
          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/kickstarter-logo.png', alt=env.t('altAttrKickstarter'))
          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/discover-logo.png', alt=env.t('altAttrDiscover'))
      #intro-text
        .container-fluid
          .row
            .col-md-8.col-md-offset-2
              p.lead.text-center
                = env.t('leadText')
      section#testimonial-carousel.bg-info
        .container-fluid
          .row
            .col-md-3.col-md-offset-1
              h2= env.t('testimonialHeading')
              img.img-say.img-responsive.visible-lg-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/publicSpaces.png', alt='')
            // Testimonials
            .col-md-8.col-sm-10.col-sx-10
              #quote-carousel.carousel.slide(data-interval='10000', data-ride='carousel')
                // Bottom Carousel Indicators
                ol.carousel-indicators
                  li.active(data-target='#quote-carousel', data-slide-to='0')
                    img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Drag0nsilver.png', alt='')
                  li(data-target='#quote-carousel', data-slide-to='1')
                    img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/frabjabulous.png', alt='')
                  li(data-target='#quote-carousel', data-slide-to='2')
                    img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/AndeeLiao.png', alt='')
                  li(data-target='#quote-carousel', data-slide-to='3')
                    img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/AlexandraSo.png', alt='')
                // Carousel Slides / Quotes
                .carousel-inner.text-center
                  // Quote 1
                  .item.active
                    blockquote
                      .row
                        .col-sm-8.col-sm-offset-2
                          p
                          = env.t('dragonsilverQuote')
                          small Drag0nsilver
                  // Quote 2
                  .item
                    blockquote
                      .row
                        .col-sm-8.col-sm-offset-2
                          p
                          = env.t('frabjabulousQuote')
                          small frabjabulous
                  // Quote 3
                  .item
                    blockquote
                      .row
                        .col-sm-8.col-sm-offset-2
                          p
                          = env.t('andeeliaoQuote')
                          small AndeeLiao
                  .item
                    blockquote
                      .row
                        .col-sm-8.col-sm-offset-2
                          p
                          = env.t('alexandraQuote')
                          small _AlexandraSo_
                // Carousel Buttons Next/Prev
                a.left.carousel-control(data-slide='prev', href='#quote-carousel')
                  i.fa.fa-chevron-left
                a.right.carousel-control(data-slide='next', href='#quote-carousel')
                  i.fa.fa-chevron-right
        button.btn.btn-primary.btn-lg.gamifybutton.fixedcta(ng-click='playButtonClick()')= env.t('gamifyButton')
      section#uses
        h2= env.t('examplesHeading')
        .container-fluid
          #myCarousel.carousel.slide(data-interval='10000', data-ride='carousel')
            ul.nav.nav-pills.nav-justified
              li.active(data-target='#myCarousel', data-slide-to='0')
                a(href='#')=env.t('work')
              li(data-target='#myCarousel', data-slide-to='1')
                a(href='#')=env.t('health')
              li(data-target='#myCarousel', data-slide-to='2')
                a(href='#')=env.t('teams')
              li(data-target='#myCarousel', data-slide-to='3')
                a(href='#')=env.t('school')
              li(data-target='#myCarousel', data-slide-to='4')
                a(href='#')=env.t('goals')
              li(data-target='#myCarousel', data-slide-to='5')
                a(href='#')=env.t('chores')
            // Wrapper for slides
            .carousel-inner(style='z-index:0;')
              .item.active.work-use
                h3
                  = env.t('work')
                  br
                  small
                    a(href='/static/plans')= env.t('businessText')
                .carousel-content.row
                  .sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
                    h4= env.t('sampleHabits')
                    div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
                      | &nbsp;
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('businessSample1')
                    br
                    div(style='width:100%; background-color: rgb(201, 218, 248); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(90, 98, 223); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
                      | &nbsp;
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('businessSample2')
                    br
                    div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
                      | &nbsp;
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('businessSample3')
                    br
                    div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
                      | &nbsp;
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('businessSample4')
                    br
                    div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;') -
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('businessSample5')
                  img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/coding.png', alt='')
                  .usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
                    .usetweet-group
                      img(data-toggle='tooltip', data-placement='top', title='frabjabulous', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/frabjabulous.png', alt=env.t('altAttrFrabjabulous'))
                      .usetweet.tweet.popover.right
                        .arrow
                        .popover-content
                          = env.t('frabjabulousQuote')
                    .usetweet-group
                      img(data-toggle='tooltip', data-placement='top', title='_AlexandraSo_', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/AlexandraSo.png', alt=env.t('altAttrAlexandraSo'))
                      .usetweet.tweet.popover.right
                        .arrow
                        .popover-content
                          = env.t('alexandraQuote')
              // End item
              .item.health-use
                h3= env.t('health')
                .carousel-content.row
                  .sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
                    h4= env.t('sampleHabits')
                    div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;') -
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('healthSample1')
                    br
                    div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;') -
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('healthSample2')
                    br
                    div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;') -
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('healthSample3')
                    br
                    div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(255, 207, 66); border-right: 0px none;') -
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('healthSample4')
                    br
                    div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
                      | &nbsp;
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('healthSample5')
                  img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/clipart-rosemonkeyct-meditation.png', alt='')
                  .usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
                    .usetweet-group
                      img(data-toggle='tooltip', data-placement='top', title='EvaGantz', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/EvaGantz.png', alt=env.t('altAttrEvaGantz'))
                      .usetweet.tweet.popover.right
                        .arrow
                        .popover-content
                          = env.t('evagantzQuote')
                    .usetweet-group
                      img(data-toggle='tooltip', data-placement='top', title='supermouse35', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/supermouse35.png', alt=env.t('altAttrSupermouse35'))
                      .usetweet.tweet.popover.right
                        .arrow
                        .popover-content
                          = env.t('supermouse35Quote')
              // End Item
              .item.team-use
                h3= env.t('teams')
                .carousel-content.row
                  .sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
                    h4= env.t('sampleToDo')
                    div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
                      | &nbsp;
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('teamSample1')
                    br
                    div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
                      | &nbsp;
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('teamSample2')
                    br
                    div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);')
                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
                      | &nbsp;
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('teamSample3')
                    br
                  img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/publicSpaces.png', alt='')
                  .usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
                    .usetweet-group
                      img(data-toggle='tooltip', data-placement='top', title='Althaire', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Althaire.png', alt=env.t('altAttrAlthaire'))
                      .usetweet.tweet.popover.right
                        .arrow
                        .popover-content
                          = env.t('althaireQuote')
              // End Item
              .item.school-use
                h3= env.t('school')
                .carousel-content.row
                  .sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
                    h4= env.t('sampleHabits')
                    div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
                      | &nbsp;
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('schoolSample1')
                    br
                    div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
                      | &nbsp;
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('schoolSample2')
                    br
                    div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
                      | &nbsp;
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('schoolSample3')
                    br
                    div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;') -
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('schoolSample4')
                    br
                    div(style='width:100%; background-color: rgb(201, 218, 248); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(90, 98, 223); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(90, 98, 223); border-right: 0px none;') -
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('schoolSample5')
                  img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/reading.png', alt='')
                  .usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
                    .usetweet-group
                      img(data-toggle='tooltip', data-placement='top', title='InfH', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/InfH.png', alt=env.t('altAttrInfH'))
                      .usetweet.tweet.popover.right
                        .arrow
                        .popover-content= env.t('infhQuote')
                    .usetweet-group
                      img(data-toggle='tooltip', data-placement='top', title='Drei-M', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Drei-M.png', alt=env.t('altAttrDreiM'))
                      .usetweet.tweet.popover.right
                        .arrow
                        .popover-content
                          = env.t('dreimQuote')
              // End Item
              .item.improvement-use
                h3= env.t('goals')
                .carousel-content.row
                  .sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
                    h4= env.t('sampleDailies')
                    div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
                      | &nbsp;
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('goalSample1')
                    br
                    div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
                      | &nbsp;
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('goalSample2')
                    br
                    div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);')
                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
                      | &nbsp;
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('goalSample3')
                    br
                  img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/gaining_an_achievement_by_cosmic_caterpillar-d7uyv5z.png', alt='')
                  .usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
                    .usetweet-group
                      img(data-toggle='tooltip', data-placement='top', title='Kazui', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Kazui.png', alt=env.t('altAttrKazui'))
                      .usetweet.tweet.popover.right
                        .arrow
                        .popover-content
                          = env.t('kazuiQuote')
              // End Item
              .item.housework-use
                h3= env.t('chores')
                .carousel-content.row
                  .sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
                    h4= env.t('sampleDailies')
                    div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
                      | &nbsp;
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('choreSample1')
                    br
                    div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
                      | &nbsp;
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('choreSample2')
                    br
                    div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);')
                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
                      | &nbsp;
                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;')= env.t('choreSample3')
                    br
                  img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/dusting_by_leephon.png', alt='')
                  .usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
                    .usetweet-group
                      img(data-toggle='tooltip', data-placement='top', title='autumnesquirrel', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/autumnesquirrel.png', alt=env.t('altAttrAutumnesquirrel'))
                      .usetweet.tweet.popover.right
                        .arrow
                        .popover-content= env.t('autumnesquirrelQuote')
                    .usetweet-group
                      img(data-toggle='tooltip', data-placement='top', title='irishfeet123', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/irishfeet123.png', alt=env.t('altAttrIrishfeet123'))
                      .usetweet.tweet.popover.right
                        .arrow
                        .popover-content
                          = env.t('irishfeet123Quote')
              // End Item
          // End Carousel
        button.btn.btn-primary.btn-lg.gamifybutton.fixedcta(ng-click='playButtonClick()')= env.t('gamifyButton')
      section#rewards.bg-warning.container-fluid
        .row
          .col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
            h2.headline= env.t('rewardHeading')
        .row
          .col-lg-5.col-lg-offset-1.col-md-5.col-sm-12.col-xs-12
            p.sectioninfo
              = env.t('rewardByline1')
              br
              br
              = env.t('rewardByline2')
            .scrolltweet.hidden-xs.hidden-sm
              img.img-rendering-auto.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='Elmi', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Elmi.png', alt=env.t('altAttrElmi'))
              .tweet.popover.right.pull-right
                .arrow
                .popover-content= env.t('elmiQuote')
          .col-lg-4.col-md-4.col-lg-offset-1.col-sm-8.well.col-xs-8.col-xs-offset-2.col-sm-offset-2.well-lg
            .avatarscroll
              h2
                span.glyphicon.glyphicon-check
              h2
                span.glyphicon.glyphicon-arrow-down
              img.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/misc/shop_gold.png', alt='')
              img.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/misc/shop_gold.png', alt='')
              img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/misc/shop_gold.png', alt='')
              h2
                span.glyphicon.glyphicon-arrow-down
              img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/TVreward.png', alt='')
          button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(ng-click='playButtonClick()')= env.t('gamifyButton')
      section#levels.container-fluid
        .row
          .col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
            h2.headline= env.t('unlockHeadline')
        .row
          .col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
            p.sectioninfo
              = env.t('unlockByline1')
              br
              br
              = env.t('unlockByline2')
            .scrolltweet.hidden-xs.hidden-sm
              img.img-rendering-auto.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='16bitFil', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/16bitFil.png', alt=env.t('altAttr16bitFil'))
              .tweet.popover.right.pull-right
                .arrow
                .popover-content
                  = env.t('sixteenBitFilQuote')
          .col-lg-4.col-md-4.col-lg-offset-1.col-sm-8.well.col-xs-8.col-xs-offset-2.col-sm-offset-2
            .avatarscroll
              img.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/avatar/avatarstatic.png', alt='')
              h2
                span.glyphicon.glyphicon-arrow-down
              img.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/SAMPLEadventurers.png', alt='')
          button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(ng-click='playButtonClick()')= env.t('gamifyButton')
      section#health.bg-danger.container-fluid
        .row
          .col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
            h2.headline= env.t('punishHeading1')
        .row
          .col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
            h2= env.t('punishHeading2')
            p.sectioninfo= env.t('punishByline')
            .scrolltweet.hidden-xs.hidden-sm
              img.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='Zelah Meyer', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Zelah_Meyer.png', alt=env.t('altAttrZelahMeyer'))
              .tweet.popover.right.pull-right
                .arrow
                .popover-content
                  = env.t('zelahQuote')
          .col-lg-4.col-md-4.col-lg-offset-1.col-sm-8.well.col-xs-8.col-xs-offset-2.col-sm-offset-2.well-lg
            h2
              span.glyphicon.glyphicon-unchecked
            .health-progress
              .meter-label(tooltip='Health')
                span.glyphicon.glyphicon-heart
              .meter.health
                .bar
                  div(style='width:100%;') &nbsp;
            h2
              span.glyphicon.glyphicon-arrow-down
            .health-progress
              .meter-label(tooltip='Health')
                span.glyphicon.glyphicon-heart
              .meter.health
                .bar
                  div(style='width:50%;') &nbsp;
          button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(ng-click='playButtonClick()')= env.t('gamifyButton')
      section#quest.container-fluid
        .row
          .col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
            h2.headline= env.t('questHeading1')
        .row
          .col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
            h2= env.t('questHeading2')
            p.sectioninfo
              = env.t('questByline1')
              br
              = env.t('questByline2')
            .scrolltweet.hidden-xs.hidden-sm
              img.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='skysailor', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/skysailor.png', alt=env.t('altAttrSkysailor'))
              .tweet.popover.right.pull-right
                .arrow
                .popover-content
                  = env.t('skysailorQuote')
          .col-lg-4.col-md-6.col-md-offset-1.col-lg-offset-1.col-sm-10.well.col-xs-10.col-xs-offset-1.col-sm-offset-1.well-lg
            img.clearfix.img-responsive.center-block(style='padding-bottom:30px;', src="https://d2afqr2xdmyzvu.cloudfront.net/front/images/Quest_dilatory_dragonSmall.png", alt='')
            .row
              .col-lg-5.col-md-5.col-sm-5.col-sm-offset-0.col-xs-5.col-xs-offset-0
                .health-progress
                  .meter-label(tooltip='Health')
                    span.glyphicon.glyphicon-heart
                  .meter.health
                    .bar
                      div(style='width:20%;') &nbsp;
                .quest-friend-img
                  img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/party/AnnaCosplay.png', alt='')
              .col-md-1.col-sm-1.col-xs-1
                h2
                  span.glyphicon.glyphicon-arrow-right
              .col-lg-5.col-md-offset-1.col-md-5.col-sm-5.col-sm-offset-0.col-xs-5.col-xs-offset-0
                .health-progress
                  .meter-label(tooltip='Health')
                    span.glyphicon.glyphicon-heart
                  .meter.health
                    .bar
                      div(style='width:0%;') &nbsp;
                .quest-friend-img
                  img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/party/GrimReaper.png', alt='')
          button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(ng-click='playButtonClick()')= env.t('gamifyButton')
      section#features.bg-info.container-fluid
        .row
          h2= env.t('featuresHeading')
        .row
          .col-md-4.col-md-offset-2.col-sm-6
            .feature-img
              img.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/Mount.png', alt='')
            .featuretext
              h4= env.t('featurePetHeading')
              p
                = env.t('featurePetByline')
          .col-md-4.col-sm-6
            .feature-img.center-block
              img.img-rendering-auto(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/achievement-triadbingo.png', alt='')
              img.img-rendering-auto(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/achievement-perfect.png', alt='')
            .featuretext
              h4= env.t('featureAchievementHeading')
              p= env.t('featureAchievementByline')
        .row
          .col-md-4.col-md-offset-2.col-sm-6
            .feature-img
              img.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/Promo_springclasses2015.png', alt='')
            .featuretext
              h4= env.t('featureEquipHeading')
              p
                = env.t('featureEquipByline')
          .col-md-4.col-sm-6
            .feature-img
              img.img-rendering-auto.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/Party-Header.png', alt='')
            .featuretext
              h4= env.t('featureSocialHeading')
              p
                = env.t('featureSocialByline')
          button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(ng-click='playButtonClick()')= env.t('gamifyButton')
      #footercall
        .container-fluid
          .row
              h3= env.t('joinOthers', {userCount:userCount})
          .row
            .col-md-4.col-md-offset-4
              button.btn.btn-primary.btn-lg.btn-block(ng-click='playButtonClick()')= env.t('free')
      footer.footer
        .container-fluid.shoutout
          h4= env.t('contribUse')
          .row
            .col-lg-2.col-md-2.col-md-offset-1.col-sm-4.col-sm-offset-1.col-xs-6.col-xs-offset-1
              a(href='http://ionicframework.com/')
                img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/ionic-logo-horizontal-transparent.png', alt=env.t('altAttrIonic'))
            .col-lg-2.col-lg-offset-0.col-md-2.col-md-offset-0.col-sm-4.col-sm-offset-1.col-xs-6.col-xs-offset-1
              a(href='https://www.jetbrains.com/webstorm/')
                img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/logo_webstorm.png', alt=env.t('altAttrWebstorm'))
            .col-lg-2.col-lg-offset-0.col-md-2.col-md-offset-0.col-sm-4.col-sm-offset-1.col-xs-6.col-xs-offset-1
              a(href='http://github.com/')
                img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/GitHub_Logo.png', alt=env.t('altAttrGithub'))
            .col-lg-2.col-lg-offset-0.col-md-2.col-md-offset-0.col-sm-4.col-sm-offset-1.col-xs-6.col-xs-offset-1
              a(href='https://trello.com/')
                img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/trello-logo-blue.png', alt=env.t('altAttrTrello'))
            .col-lg-2.col-lg-offset-0.col-md-2.col-md-offset-0.col-sm-4.col-sm-offset-1.col-xs-6.col-xs-offset-1
              a(href='https://slack.com/')
                img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/landing_slack_hash_wordmark_logo.png', alt=env.t('altAttrSlack'))

        .row.footer-content
          include ../shared/footer

    // Footer scripts
    // Use carousel initialize
    script(type='text/javascript').
      $(document).ready( function() {
        var clickEvent = false;
        $('#myCarousel').on('click', '.nav a', function() {
          clickEvent = true;
          $('#myCarousel .nav li').removeClass('active');
          $(this).parent().addClass('active');
        }).on('slid.bs.carousel', function(e) {
        if(!clickEvent) {
          var count = $('#myCarousel .nav').children().length -1;
          var current = $('#myCarousel .nav li.active');
          current.removeClass('active').next().addClass('active');
          var id = parseInt(current.data('slide-to'));
          if(count == id) {
            $('#myCarousel .nav li').first().addClass('active');
          }
        }
        clickEvent = false;
        });
      });
    // Tooltips
    script(type='text/javascript').
      $(function () {
        $('[data-toggle="tooltip"]').tooltip()
        $('[data-toggle="popover"]').popover()
      })
    // Smart App Banner
    script(type='text/javascript').
      new SmartBanner({
          title: 'Habitica: Gamify Your Tasks',
          author: 'HabitRPG, Inc.',
          button: 'GET',
          store: {
              ios: 'On the App Store',
              android: 'In Google Play'
          }
      });
    // Hack fix for carousel (http://stackoverflow.com/a/22182184/362790)
    script.
      angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
      .controller('CarouselController', ['$scope', '$timeout', '$transition', '$q', function ($scope, $timeout, $transition, $q) {
      }]).directive('carousel', [function () {
        return {}
      }]);
