#front
noscript.banner {{ $t('jsDisabledHeadingFull') }}
br
a(href='http://www.enable-javascript.com/', target='_blank') {{ $t('jsDisabledLink') }}
#intro-signup.purple-1
.container
.row
.col-12.col-sm-6.col-md-6.col-lg-6
img(src='~assets/images/home/home-main@3x.png', width='357px')
h1 {{$t('motivateYourself')}}
p.section-main {{$t('timeToGetThingsDone')}}
.col-12.col-sm-6.col-md-6.col-lg-6
h3.text-center {{$t('singUpForFree')}}
div.text-center
button.social-button(@click='socialAuth("facebook")')
.svg-icon.social-icon(v-html="icons.facebookIcon")
span {{$t('signUpWithSocial', {social: 'Facebook'})}}
button.social-button(@click='socialAuth("google")')
.svg-icon.social-icon(v-html="icons.googleIcon")
span {{$t('signUpWithSocial', {social: 'Google'})}}
.strike
span {{$t('or')}}
.form
input.form-control(type='text', placeholder='Login Name', v-model='username', :class='{"input-valid": username.length > 3}')
input.form-control(type='email', placeholder='Email', v-model='email', :class='{"input-invalid": emailInvalid, "input-valid": emailValid}')
input.form-control(type='password', placeholder='Password', v-model='password', :class='{"input-valid": password.length > 3}')
input.form-control(type='password', placeholder='Confirm Password', v-model='passwordConfirm', :class='{"input-invalid": passwordConfirmInvalid, "input-valid": passwordConfirmValid}')
p.form-text(v-once, v-html="$t('termsAndAgreement')")
button.sign-up(@click='register()') {{$t('signup')}}
.col-12
.spacer.svg-icon(v-html='icons.spacer')
#gamify-life.purple-2
.container-fluid
.pixel-horizontal.svg-icon(v-html='icons.pixelHorizontal')
.container
.row
.col-12.col-sm-6.col-md-6.col-lg-6.offset-3.text-center
h2 {{$t('gamifyYourLife')}}
p.section-main {{$t('aboutHabitica')}}
.row
.col-12.col-sm-4
img.track-habits(src='~assets/images/home/track-habits@3x.png', width='354px', height='228px')
strong {{$t('trackYourGoals')}}
p {{$t('trackYourGoalsDesc')}}
.col-12.col-sm-4
img(src='~assets/images/home/earn-rewards@3x.png', width='316px', height='244px')
strong {{$t('earnRewards')}}
p {{$t('earnRewardsDesc')}}
.col-12.col-sm-4
img(src='~assets/images/home/battle-monsters@3x.png', width='303px', height='244px')
strong {{$t('battleMonsters')}}
p {{$t('battleMonstersDesc')}}
.col-12
.spacer.svg-icon(v-html='icons.spacer')
#use-cases.purple-2
.container.text-center
.row
.col-12
h2 {{$t('playersUseToImprove')}}
.row
.col-12.col-sm-4
img(src='~assets/images/home/health-fitness@3x.png', width='300px', height='300px')
strong {{$t('healthAndFitness')}}
p {{$t('healthAndFitnessDesc')}}
.col-12.col-sm-4
img(src='~assets/images/home/school-work@3x.png', width='300px', height='300px')
strong {{$t('schoolAndWork')}}
p {{$t('schoolAndWorkDesc')}}
.col-12.col-sm-4
img(src='~assets/images/home/much-more@3x.png', width='300px', height='300px')
strong {{$t('muchmuchMore')}}
p {{$t('muchmuchMoreDesc')}}
.col-12
.spacer.svg-icon(v-html='icons.spacer')
.container-fluid
.pixel-horizontal-2.svg-icon(v-html='icons.pixelHorizontal2')
#level-up-anywhere.purple-3
.container
.row
.col-12.col-sm-6.col-md-6.col-lg-6
.iphones
.col-12.col-sm-6.col-md-6.col-lg-6.text-column
h2 {{ $t('levelUpAnywhere') }}
p {{ $t('levelUpAnywhereDesc') }}
a.app.svg-icon(v-html='icons.googlePlay', href='https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica', target='_blank')
a.app.svg-icon(v-html='icons.iosAppStore', href='https://itunes.apple.com/us/app/habitica-gamified-task-manager/id994882113?mt=8', target='_blank')
.container-fluid
.pixel-horizontal-3.svg-icon(v-html='icons.pixelHorizontal3')
#call-to-action.purple-4
.container.featured
.row.text-center
h3.col-12 {{ $t('joinMany') }}
.row
.col-12.text-center
button.btn.btn-primary.join-button(@click='playButtonClick()') {{ $t('joinToday') }}
.row.featured
.col-12.text-center
strong {{ $t('featuredIn') }}
.container-fluid.featured
.row
.col-12.text-center
.lifehacker.svg-icon(v-html='icons.lifehacker')
.thenewyorktimes.svg-icon(v-html='icons.thenewyorktimes')
.makeuseof.svg-icon(v-html='icons.makeuseof')
.forbes.svg-icon(v-html='icons.forbes')
.cnet.svg-icon(v-html='icons.cnet')
.kickstarter.svg-icon(v-html='icons.kickstarter')
.fast-company.svg-icon(v-html='icons.fastCompany')
.discover.svg-icon(v-html='icons.discover')
.container-fluid
.seamless_stars_varied_opacity_repeat