Redesign: Static Pages (#8989)

* feat(pages): static Features

* feat(static-pages): add header

* feat(static-pages): Community Guidelines

* fix(strings): tweaks

website/client/assets/scss/static.scss

@@ -0,0 +1,26 @@
+@import '~client/assets/scss/colors.scss';
+
+.container-fluid {
+  margin: 5em 2em 0 2em;
+}
+
+h1, h2 {
+  margin-top: 0.5em;
+  color: $purple-200;
+}
+
+h3, h4 {
+  color: $purple-200;
+}
+
+li, p {
+  font-size: 16px;
+}
+
+.media img {
+  margin: 1em;
+}
+
+.strong {
+  font-weight: bold;
+}

website/client/components/static/clearBrowserData.vue

@@ -1,37 +1,55 @@
 <template lang="pug">
-  .row
-    .col-md-6.offset-3.text-center
-      .page-header
-        h1 {{ $t('clearBrowserData') }}
+  div
+    static-header
+    .container-fluid.text-center
+      .row
+        .col-md-6.offset-3
+          h1 {{ $t('clearBrowserData') }}
 
-      p(v-html="$t('localStorageTryFirst', localStorageTryFirst) ")
-      br
-      p.text-center
-        button.btn.btn-lg.btn-danger(@click='clearLocalStorage()',
-          popover-trigger='mouseover', :popover="$t('localStorageClearExplanation')")
-          | {{ $t('localStorageClear') }}
-      br
-      p(v-html="$t('localStorageTryNext', localStorageTryNext) ")
+          p(v-html="$t('localStorageTryFirst', localStorageTryFirst) ")
+          br
+          p.text-center
+            button.btn.btn-lg.btn-danger(@click='clearLocalStorage()',
+              popover-trigger='mouseover', :popover="$t('localStorageClearExplanation')")
+              | {{ $t('localStorageClear') }}
+          br
+          p(v-html="$t('localStorageTryNext', localStorageTryNext) ")
+    app-footer
 </template>
 
+<style lang='scss' scoped>
+  @import '~client/assets/scss/static.scss';
+
+  .container-fluid {
+    margin-top: 56px;
+  }
+</style>
+
 <script>
-export default {
-  data () {
-    return  {
-      localStorageTryFirst: {
-        linkStart: '<a href="/#/options/settings/settings" target="_blank">',
-        linkEnd: '</a>',
-      },
-      localStorageTryNext: {
-        linkStart: '<a href="https://github.com/HabitRPG/habitica/issues/2760" target="_blank">',
-        linkEnd: '</a>',
-      },
-    };
-  },
-  methods: {
-    clearLocalStorage () {
-      localStorage.removeItem('habit-mobile-settings');
+  import AppFooter from 'client/components/appFooter';
+  import StaticHeader from './header.vue';
+
+  export default {
+    components: {
+      AppFooter,
+      StaticHeader,
     },
-  },
-};
+    data () {
+      return  {
+        localStorageTryFirst: {
+          linkStart: '<a href="/#/options/settings/settings" target="_blank">',
+          linkEnd: '</a>',
+        },
+        localStorageTryNext: {
+          linkStart: '<a href="https://github.com/HabitRPG/habitica/issues/2760" target="_blank">',
+          linkEnd: '</a>',
+        },
+      };
+    },
+    methods: {
+      clearLocalStorage () {
+        localStorage.removeItem('habit-mobile-settings');
+      },
+    },
+  };
 </script>

website/client/components/static/communityGuidelines.vue

@@ -1,114 +1,75 @@
 <template lang="pug">
-.row
-  .col-6.offset-3
-    .page-header
+  div
+    static-header
+    .container-fluid
       h1 {{ $t('communityGuidelines') }}
-    p.pagemeta
-      | {{ $t('lastUpdated') }}
-      | &nbsp;
-      | {{ $t('March') }}
-      | &nbsp;30&comma; 2017
+      hr
+      p {{ $t('lastUpdated') }} March 30, 2017
 
-    h2#welcome {{ $t('commGuideHeadingWelcome') }}
-    .clearfix
-      img.pull-left(src='/community-guidelines-images/intro.png', alt='')
-      p {{ $t('commGuidePara001') }}
-      p {{ $t('commGuidePara002') }}
-      p {{ $t('commGuidePara003') }}
-      p {{ $t('commGuidePara004') }}
+      h2#welcome {{ $t('commGuideHeadingWelcome') }}
+      .media
+        img.align-self-center(src='~assets/images/community-guidelines/intro.png')
+        .media-body.align-self-center
+          p {{ $t('commGuidePara001') }}
+          p {{ $t('commGuidePara002') }}
+          p {{ $t('commGuidePara003') }}
+          p {{ $t('commGuidePara004') }}
 
-    h2#being-habitican {{ $t('commGuideHeadingBeing') }}
-    p {{ $t('commGuidePara005') }}
-    .clearfix
-      img.pull-right(src='/community-guidelines-images/beingHabitican.png', alt='')
-      ul
-        li(v-html="$t('commGuideList01A')")
-        li(v-html="$t('commGuideList01B')")
-        li(v-html="$t('commGuideList01C')")
-        li(v-html="$t('commGuideList01D')")
+      h2#being-habitican {{ $t('commGuideHeadingBeing') }}
+      p {{ $t('commGuidePara005') }}
+      .media
+        .media-body.align-self-center
+          ul
+            li(v-html="$t('commGuideList01A')")
+            li(v-html="$t('commGuideList01B')")
+            li(v-html="$t('commGuideList01C')")
+            li(v-html="$t('commGuideList01D')")
+        img.align-self-center(src='~assets/images/community-guidelines/beingHabitican.png')
 
-    h2#meet-the-mods {{ $t('commGuideHeadingMeet') }}
-    p {{ $t('commGuidePara006') }}
-    p
-      strong {{ $t('commGuidePara007') }}
-    p
-      strong {{ $t('commGuidePara008') }}
-    br
-    p
-      strong {{ $t('commGuidePara009') }}
-    .clearfix
-      img.pull-left(src='/community-guidelines-images/staff.png', alt='')
-      ul.pull-left.list-unstyled
-        li
-          strong {{ $t ('commGuideAKA', {habitName: 'Beffymaroo', realName: 'Beth'}) }}
-        li
-          strong {{ $t('commGuideAKA', {habitName: 'Viirus', realName: 'Phillip'}) }}
-        li
-          strong {{ $t('commGuideAKA', {habitName: 'redphoenix', realName: 'Vicky'}) }}
-            |  (
-            | {{ $t('commGuideOnTrello', {trelloName: 'caffeinatedvee'}) }}
-            | ,&nbsp;
-            | {{ $t('commGuideOnGitHub', {gitHubName: 'veeeeeee'}) }}
-            | )
-        li
-          strong {{ $t('commGuideAKA', {habitName:'Lemoness', realName: 'Leslie'}) }}
-            |  (
-            | {{ $t('commGuideOnTrello', {trelloName: 'lemonesstree'}) }}
-            | )
-        li
-          strong {{ $t('commGuideAKA', {habitName: 'SabreCat', realName: 'Sabe'}) }}
-        li
-          strong {{ $t('commGuideAKA', {habitName: 'paglias', realName: 'Matteo'}) }}
-        li
-          strong {{ $t('commGuideAKA', {habitName: 'TheHollidayInn', realName: 'Keith'}) }}
-    br
-    p {{ $t('commGuidePara010') }}
-    .clearfix
-      img.pull-left(src='/community-guidelines-images/moderators.png', alt='')
-      p
-        strong {{ $t('commGuidePara011') }}
-      br
-      ul.pull-left.list-unstyled
-        li
-          strong Bailey (It's Bailey&nbsp;
-            | {{ $t('commGuidePara011a') }}
-            |)
-        li
-          strong Ryan (deilann&nbsp;
-            | {{ $t('commGuidePara011b') }}
-            |)
-        li
-          strong Alys (LadyAlys&nbsp;
-            | {{ $t('commGuidePara011c') }}
-            |)
-        li
-          strong Cantras
-        li
-          strong Blade (
-            | {{ $t('commGuideOnGitHub', {gitHubName: 'crookedneighbor'}) }}
-            |)
-        li
-          strong Daniel the Bard
-        li
-          strong shanaqui
-        li
-          strong Dewines
-        li
-          strong Megan
-        li
-          strong Breadstrings
-    p(v-html="$t('commGuidePara012', { hrefCommunityManagerEmail })")
-    p {{ $t('commGuidePara013') }}
-    p {{ $t('commGuidePara014') }}
-      |&nbsp;
-      em Slappybag, litenull, Shaner, Bobbyroberts99, wc8
+      h2#meet-the-mods {{ $t('commGuideHeadingMeet') }}
+      p {{ $t('commGuidePara006') }}
+      p.strong {{ $t('commGuidePara007') }}
+      p.strong {{ $t('commGuidePara008') }}
+      p.strong {{ $t('commGuidePara009') }}
+      .media
+        img.align-self-center(src='~assets/images/community-guidelines/staff.png')
+        .media-body.align-self-center
+          ul.list-unstyled
+            li.strong {{ $t('commGuideAKA', {habitName: 'Beffymaroo', realName: 'Beth'}) }}
+            li.strong {{ $t('commGuideAKA', {habitName: 'Viirus', realName: 'Phillip'}) }}
+            li.strong {{ $t('commGuideAKA', {habitName: 'redphoenix', realName: 'Vicky'}) }} ({{ $t('commGuideOnTrello', {trelloName: 'caffeinatedvee'}) }}, {{ $t('commGuideOnGitHub', {gitHubName: 'veeeeeee'}) }})
+            li.strong {{ $t('commGuideAKA', {habitName: 'Lemoness', realName: 'Leslie'}) }} ({{ $t('commGuideOnTrello', {trelloName: 'lemonesstree'}) }})
+            li.strong {{ $t('commGuideAKA', {habitName: 'SabreCat', realName: 'Sabe'}) }}
+            li.strong {{ $t('commGuideAKA', {habitName: 'paglias', realName: 'Matteo'}) }}
+            li.strong {{ $t('commGuideAKA', {habitName: 'TheHollidayInn', realName: 'Keith'}) }}
+      p {{ $t('commGuidePara010') }}
+      .media
+        img.align-self-center(src='~assets/images/community-guidelines/moderators.png')
+        .media-body.align-self-center
+          p.strong {{ $t('commGuidePara011') }}
+          ul.list-unstyled
+            li.strong Bailey (It's Bailey {{ $t('commGuidePara011a') }})
+            li.strong Ryan (deilann {{ $t('commGuidePara011b') }})
+            li.strong Alys (LadyAlys {{ $t('commGuidePara011c') }})
+            li.strong Cantras
+            li.strong Blade ({{ $t('commGuideOnGitHub', {gitHubName: 'crookedneighbor'}) }})
+            li.strong Daniel the Bard
+            li.strong shanaqui
+            li.strong Dewines
+            li.strong Megan
+            li.strong Breadstrings
+      p(v-html="$t('commGuidePara012', { hrefCommunityManagerEmail })")
+      p {{ $t('commGuidePara013') }}
+      p {{ $t('commGuidePara014') }}&nbsp;
+        em Slappybag, litenull, Shaner, Bobbyroberts99, wc8
 
-    h2#public-spaces {{ $t('commGuideHeadingPublicSpaces') }}
-    .clearfix
-      img.pull-right(src='/community-guidelines-images/publicSpaces.png', alt='')
-      p {{ $t('commGuidePara015') }}
-      p {{ $t('commGuidePara016') }}
-      p(v-html="$t('commGuidePara017')")
+      h2#public-spaces {{ $t('commGuideHeadingPublicSpaces') }}
+      .media
+        .media-body.align-self-center
+          p {{ $t('commGuidePara015') }}
+          p {{ $t('commGuidePara016') }}
+          p(v-html="$t('commGuidePara017')")
+        img.align-self-center(src='~assets/images/community-guidelines/publicSpaces.png')
       ul
         li(v-html="$t('commGuideList02A')")
         li(v-html="$t('commGuideList02B')")
@@ -121,77 +82,74 @@
         li(v-html="$t('commGuideList02I')")
         li(v-html="$t('commGuideList02J')")
         li(v-html="$t('commGuideList02K', { hrefCommunityManagerEmail })")
-      br
       p(v-html="$t('commGuidePara019')")
-      br
       p(v-html="$t('commGuidePara020')")
-      br
       p(v-html="$t('commGuidePara020A', { hrefCommunityManagerEmail })")
-      br
       p(v-html="$t('commGuidePara021')")
 
-    h3#tavern {{ $t('commGuideHeadingTavern') }}
-    .clearfix
-      img.pull-left(src='/community-guidelines-images/tavern.png', alt='')
-      p {{ $t('commGuidePara022') }}
-      p
-        strong {{ $t('commGuidePara023') }}
-      p(v-html="$t('commGuidePara024')")
-      p(v-html="$t('commGuidePara027')")
+      h3#tavern {{ $t('commGuideHeadingTavern') }}
+      .media
+        img.align-self-center(src='~assets/images/community-guidelines/tavern.png')
+        .media-body.align-self-center
+          p {{ $t('commGuidePara022') }}
+          p.strong {{ $t('commGuidePara023') }}
+          p(v-html="$t('commGuidePara024')")
+          p(v-html="$t('commGuidePara027')")
 
-    h3#guilds {{ $t('commGuideHeadingPublicGuilds') }}
-    .clearfix
-      img.pull-right(src='/community-guidelines-images/publicGuilds.png', alt='')
-      p(v-html="$t('commGuidePara029')")
-      p(v-html="$t('commGuidePara031')")
+      h3#guilds {{ $t('commGuideHeadingPublicGuilds') }}
+      .media
+        .media-body.align-self-center
+          p(v-html="$t('commGuidePara029')")
+          p(v-html="$t('commGuidePara031')")
+        img.align-self-center(src='~assets/images/community-guidelines/publicGuilds.png')
       p(v-html="$t('commGuidePara033', { hrefCommunityManagerEmail })")
       p(v-html="$t('commGuidePara035')")
-      p
-        strong {{ $t('commGuidePara037') }}
+      p.strong {{ $t('commGuidePara037') }}
 
-    h3#back-corner {{ $t('commGuideHeadingBackCorner') }}
-    .clearfix
-      img.pull-left(src='/community-guidelines-images/backCorner.png', alt='')
-      p(v-html="$t('commGuidePara038')")
-      p(v-html="$t('commGuidePara039')")
+      h3#back-corner {{ $t('commGuideHeadingBackCorner') }}
+      .media
+        img.align-self-center(src='~assets/images/community-guidelines/backCorner.png')
+        .media-body.align-self-center
+          p(v-html="$t('commGuidePara038')")
+          p(v-html="$t('commGuidePara039')")
 
-    h3#trello {{ $t('commGuideHeadingTrello') }}
-    .clearfix
-      img.pull-right(src='/community-guidelines-images/trello.png', alt='')
-      p(v-html="$t('commGuidePara040')")
-      p
-        strong {{ $t('commGuidePara041') }}
-      ul
-        li(v-html="$t('commGuideList03A')")
-        li(v-html="$t('commGuideList03B')")
-        li(v-html="$t('commGuideList03C')")
-        li(v-html="$t('commGuideList03D')")
+      h3#trello {{ $t('commGuideHeadingTrello') }}
+      .media
+        .media-body.align-self-center
+          p(v-html="$t('commGuidePara040')")
+          p.strong {{ $t('commGuidePara041') }}
+          ul
+            li(v-html="$t('commGuideList03A')")
+            li(v-html="$t('commGuideList03B')")
+            li(v-html="$t('commGuideList03C')")
+            li(v-html="$t('commGuideList03D')")
+        img.align-self-center(src='~assets/images/community-guidelines/trello.png')
       p(v-html="$t('commGuidePara042')")
 
-    h3#github {{ $t('commGuideHeadingGitHub') }}
-    .clearfix
-      img.pull-left(src='/community-guidelines-images/github.gif', alt='')
-      p(v-html="$t('commGuidePara043')")
-      p
-        strong(v-html="$t('commGuidePara044')")
-      ul.listColumns2.peopleList
-        li @alys
-        li @crookedneighbor (Blade)
-        li @lemoness
-        li @paglias
-        li @SabreCat
-        li @TheHollidayInn
-        li @veeeeeee (redphoenix)
-        li @vIiRuS
+      h3#github {{ $t('commGuideHeadingGitHub') }}
+      .media
+        img.align-self-center(src='~assets/images/community-guidelines/github.gif')
+        .media-body.align-self-center
+          p(v-html="$t('commGuidePara043')")
+          p.strong(v-html="$t('commGuidePara044')")
+          ul.list-2col.list-unstyled
+            li @alys
+            li @crookedneighbor (Blade)
+            li @lemoness
+            li @paglias
+            li @SabreCat
+            li @TheHollidayInn
+            li @veeeeeee (redphoenix)
+            li @vIiRuS
 
-    h3#wiki {{ $t('commGuideHeadingWiki') }}
-    .clearfix
-      img.pull-right(src='/community-guidelines-images/wiki.png', alt='')
-      p(v-html="$t('commGuidePara021')") {{ $t('commGuidePara045') }}
-      p {{ $t('commGuidePara046') }}
-      p
-        strong {{ $t('commGuidePara047') }}
-      p {{ $t('commGuidePara048') }}
+      h3#wiki {{ $t('commGuideHeadingWiki') }}
+      .media
+        .media-body.align-self-center
+          p(v-html="$t('commGuidePara021')") {{ $t('commGuidePara045') }}
+          p {{ $t('commGuidePara046') }}
+          p.strong {{ $t('commGuidePara047') }}
+          p {{ $t('commGuidePara048') }}
+        img.align-self-center(src='~assets/images/community-guidelines/wiki.png')
       ul
         li {{ $t('commGuideList04A') }}
         li {{ $t('commGuideList04B') }}
@@ -201,29 +159,26 @@
         li(v-html="$t('commGuideList04F')")
         li {{ $t('commGuideList04G') }}
         li {{ $t('commGuideList04H') }}
-      br
       p {{ $t('commGuidePara049') }}
-      ul.peopleList
+      ul.list-unstyled
         li LadyAlys (Alys)
         li Sonnet73
         li Taldin
-      br
       p {{ $t('commGuidePara049A') }}
-      ul.peopleList
+      ul.list-unstyled
         li Beffymaroo
         li Cantras
         li Meganstrickland (Megan)
-      br
-      p {{ $t('commGuidePara018') }}
-        |:&nbsp;
+      p {{ $t('commGuidePara018') }}&nbsp;
         em Bobbyroberts99 (founder and bureaucrat), wc8 (bureaucrat), Lefnire (bureaucrat), JiggerD, LadyKatFrog, Breadstrings (bureaucrat), Deilann
 
-    h2#infractions-consequences-restoration {{ $t('commGuideHeadingInfractionsEtc') }}
-    h3#infractions {{ $t('commGuideHeadingInfractions') }}
-    .clearfix
-      img.pull-left(src='/community-guidelines-images/infractions.png', alt='')
-      p {{ $t('commGuidePara050') }}
-      p(v-html="$t('commGuidePara051')")
+      h2#infractions-consequences-restoration {{ $t('commGuideHeadingInfractionsEtc') }}
+      h3#infractions {{ $t('commGuideHeadingInfractions') }}
+      .media
+        img.align-self-center(src='~assets/images/community-guidelines/infractions.png')
+        .media-body.align-self-center
+          p {{ $t('commGuidePara050') }}
+          p(v-html="$t('commGuidePara051')")
       h4 {{ $t('commGuideHeadingSevereInfractions') }}
       p {{ $t('commGuidePara052') }}
       p {{ $t('commGuidePara053') }}
@@ -249,17 +204,17 @@
         li {{ $t('commGuideList07A') }}
         li {{ $t('commGuideList07B') }}
 
-    h3#consequences {{ $t('commGuideHeadingConsequences') }}
-    .clearfix
-      img.pull-right(src='/community-guidelines-images/consequences.png', alt='')
-      p {{ $t('commGuidePara058') }}
-      p(v-html="$t('commGuidePara059')")
-      p
-        strong {{ $t('commGuidePara060') }}
-      ul
-        li {{ $t('commGuideList08A') }}
-        li {{ $t('commGuideList08B') }}
-        li {{ $t('commGuideList08C') }}
+      h3#consequences {{ $t('commGuideHeadingConsequences') }}
+      .media
+        .media-body.align-self-center
+          p {{ $t('commGuidePara058') }}
+          p(v-html="$t('commGuidePara059')")
+          p.strong {{ $t('commGuidePara060') }}
+          ul
+            li {{ $t('commGuideList08A') }}
+            li {{ $t('commGuideList08B') }}
+            li {{ $t('commGuideList08C') }}
+        img.align-self-center(src='~assets/images/community-guidelines/consequences.png')
       p {{ $t('commGuidePara060A') }}
       p(v-html="$t('commGuidePara060B', { hrefCommunityManagerEmail })")
       h4 {{ $t('commGuideHeadingSevereConsequences') }}
@@ -270,7 +225,7 @@
       h4 {{ $t('commGuideHeadingModerateConsequences') }}
       ul
         li {{ $t('commGuideList10A') }}
-          ul(style='margin-left:2em')
+          ul
             li {{ $t('commGuideList10A1') }}
         li {{ $t('commGuideList10B') }}
         li {{ $t('commGuideList10C') }}
@@ -285,96 +240,107 @@
         li {{ $t('commGuideList11D') }}
         li {{ $t('commGuideList11E') }}
 
-    h3#restoration {{ $t('commGuideHeadingRestoration') }}
-    .clearfix
-      img.pull-left(src='/community-guidelines-images/restoration.png', alt='')
-      p {{ $t('commGuidePara061') }}
-      p {{ $t('commGuidePara062') }}
-      p {{ $t('commGuidePara063') }}
+      h3#restoration {{ $t('commGuideHeadingRestoration') }}
+      .media
+        img.align-self-center(src='~assets/images/community-guidelines/restoration.png')
+        .media-body.align-self-center
+          p(v-html="$t('commGuidePara061')")
+          p(v-html="$t('commGuidePara062')")
+          p(v-html="$t('commGuidePara063')")
 
-    h2#contributing {{ $t('commGuideHeadingContributing') }}
-    .clearfix
-      img.pull-right(src='/community-guidelines-images/contributing.png', alt='')
-      p {{ $t('commGuidePara064') }}
-      ol
-        li {{ $t('commGuideList12A') }}
-        li {{ $t('commGuideList12B') }}
-        li {{ $t('commGuideList12C') }}
-        li {{ $t('commGuideList12D') }}
-        li {{ $t('commGuideList12E') }}
-        li {{ $t('commGuideList12F') }}
-        li {{ $t('commGuideList12G') }}
+      h2#contributing {{ $t('commGuideHeadingContributing') }}
+      .media
+        .media-body.align-self-center
+          p {{ $t('commGuidePara064') }}
+          ol
+            li {{ $t('commGuideList12A') }}
+            li {{ $t('commGuideList12B') }}
+            li {{ $t('commGuideList12C') }}
+            li {{ $t('commGuideList12D') }}
+            li {{ $t('commGuideList12E') }}
+            li {{ $t('commGuideList12F') }}
+            li {{ $t('commGuideList12G') }}
+        img.align-self-center(src='~assets/images/community-guidelines/contributing.png')
       p {{ $t('commGuidePara065') }}
       p {{ $t('commGuidePara066') }}
       ul
-        li {{ $t('commGuideList13A') }}
-        li {{ $t('commGuideList13B') }}
-        li {{ $t('commGuideList13C') }}
-        li {{ $t('commGuideList13D') }}
+        li(v-html="$t('commGuideList13A')")
+        li(v-html="$t('commGuideList13B')")
+        li(v-html="$t('commGuideList13C')")
+        li(v-html="$t('commGuideList13D')")
 
-    h2#final {{ $t('commGuideHeadingFinal') }}
-    p {{ $t('commGuidePara067', { hrefCommunityManagerEmail : '<a href="mailto:' + env.EMAILS.COMMUNITY_MANAGER_EMAIL + '">' + env.EMAILS.COMMUNITY_MANAGER_EMAIL + '</a>' }) }}
-    p {{ $t('commGuidePara068') }}
+      h2#final {{ $t('commGuideHeadingFinal') }}
+      p(v-html="$t('commGuidePara067', { hrefCommunityManagerEmail : `<a href='mailto: ${COMMUNITY_MANAGER_EMAIL}'>${COMMUNITY_MANAGER_EMAIL}</a>`})")
+      p {{ $t('commGuidePara068') }}
 
-    h2#links {{ $t('commGuideHeadingLinks') }}
-    ul
-      li
-        a(href='https://habitica.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank') {{ $t('commGuideLink01') }}
-        | :&nbsp;
-        | {{ $t('commGuideLink01description') }}
-      li
-        a(href='https://habitica.com/#/options/groups/guilds/426c2c1a-eed0-4997-9b73-d30fc1397688' target='_blank') {{ $t('commGuideLink02') }}
-        |:&nbsp;
-        | {{ $t('commGuideLink02description') }}
-      li
-        | {{ $t('commGuideLink03') }}
-        |:&nbsp;
-        | {{ $t('commGuideLink03description') }}
-      li
-        a(href='https://github.com/HabitRPG/habitrpg' target='_blank') {{ $t('commGuideLink04') }}
-        |:&nbsp;
-        | {{ $t('commGuideLink04description') }}
-      li
-        a(href='https://trello.com/b/EpoYEYod/' target='_blank') {{ $t('commGuideLink05') }}
-        |:&nbsp;
-        | {{ $t('commGuideLink05description') }}
-      li
-        a(href='https://trello.com/b/mXK3Eavg/' target='_blank') {{ $t('commGuideLink06') }}
-        |:&nbsp;
-        | {{ $t('commGuideLink06description') }}
-      li
-        a(href='https://trello.com/b/vwuE9fbO/' target='_blank') {{ $t('commGuideLink07') }}
-        |:&nbsp;
-        | {{ $t('commGuideLink07description') }}
-      li
-        a(href='https://trello.com/b/nnv4QIRX/' target='_blank') {{ $t('commGuideLink08') }}
-        |:&nbsp;
-        | {{ $t('commGuideLink08description') }}
-    p
-      strong {{ $t('commGuidePara069') }}
-    br
-    ul.listColumns2.peopleList
-      li Breadstrings
-      li Draayder
-      li Kiwibot
-      li Leephon
-      li Lemoness
-      li Luciferian
-      li Revcleo
-      li Shaner
-      li Starsystemic
-      li UncommonCriminal
+      h2#links {{ $t('commGuideHeadingLinks') }}
+      ul
+        li
+          a(href='https://habitica.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank') {{ $t('commGuideLink01') }}
+          | :&nbsp;{{ $t('commGuideLink01description') }}
+        li
+          a(href='https://habitica.com/#/options/groups/guilds/426c2c1a-eed0-4997-9b73-d30fc1397688' target='_blank') {{ $t('commGuideLink02') }}
+          | :&nbsp;{{ $t('commGuideLink02description') }}
+        li
+          span(v-html="$t('commGuideLink03')")
+          | :&nbsp;{{ $t('commGuideLink03description') }}
+        li
+          a(href='https://github.com/HabitRPG/habitrpg' target='_blank') {{ $t('commGuideLink04') }}
+          | :&nbsp;{{ $t('commGuideLink04description') }}
+        li
+          a(href='https://trello.com/b/EpoYEYod/' target='_blank') {{ $t('commGuideLink05') }}
+          | :&nbsp;{{ $t('commGuideLink05description') }}
+        li
+          a(href='https://trello.com/b/mXK3Eavg/' target='_blank') {{ $t('commGuideLink06') }}
+          | :&nbsp;{{ $t('commGuideLink06description') }}
+        li
+          a(href='https://trello.com/b/vwuE9fbO/' target='_blank') {{ $t('commGuideLink07') }}
+          | :&nbsp;{{ $t('commGuideLink07description') }}
+        li
+          a(href='https://trello.com/b/nnv4QIRX/' target='_blank') {{ $t('commGuideLink08') }}
+          | :&nbsp;{{ $t('commGuideLink08description') }}
+      p.strong {{ $t('commGuidePara069') }}
+      ul.list-2col.list-unstyled
+        li Breadstrings
+        li Draayder
+        li Kiwibot
+        li Leephon
+        li Lemoness
+        li Luciferian
+        li Revcleo
+        li Shaner
+        li Starsystemic
+        li UncommonCriminal
+    app-footer
 </template>
 
-<script>
-// @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
-const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
+<style lang='scss' scoped>
+  @import '~client/assets/scss/static.scss';
 
-export default {
-  data () {
-    return {
-      hrefCommunityManagerEmail: `<a href="mailto:${COMMUNITY_MANAGER_EMAIL}">${COMMUNITY_MANAGER_EMAIL}</a>`,
-    };
-  },
-};
+  .list-2col {
+    width: 50%;
+    columns: 2;
+    -moz-columns: 2;
+    -webkit-columns: 2;
+  }
+</style>
+
+<script>
+  import AppFooter from 'client/components/appFooter';
+  import StaticHeader from './header.vue';
+
+  // @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
+  const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
+
+  export default {
+    components: {
+      AppFooter,
+      StaticHeader,
+    },
+    data () {
+      return {
+        COMMUNITY_MANAGER_EMAIL,
+      };
+    },
+  };
 </script>

website/client/components/static/features.vue

@@ -1,105 +1,115 @@
 <template lang="pug">
-  .row#about-page
-    .col-md-12#aboutPage
-      .marketing
-        h1 {{ $t('marketing1Header') }}
-        .row
-          .col-md-6
-            a.gallery(href='/marketing/screenshot.png', :title="$t('marketing1Header')")
-              img.img-rendering-auto(src='/marketing/screenshot.png')
-            p.lead {{ $t('marketing1Lead1') }}
-          .col-md-6
-
-            a.gallery(href='/marketing/gear.png', :title="$t('marketing1Lead2Title')")
-              img.img-rendering-auto(src='/marketing/gear.png')
-            p.lead(v-html="$t('marketing1Lead2')")
-
-            a.gallery(href='/marketing/drops.png', :title="$t('marketing1Lead3Title')")
-              img.img-rendering-auto(src='/marketing/drops.png',style='max-height:200px')
-            p.lead(v-html="$t('marketing1Lead3')")
-
-            // TODO achievements
-        hr.clearfix
-
-        h1 {{ $t('marketing2Header') }}
-        .row
-          .col-md-6
-            a.gallery(href='/marketing/guild.png', :title="$t('marketing2Header')")
-              img.img-rendering-auto(src='/marketing/guild.png')
-            p.lead {{ $t('marketing2Lead1') }}
-            a.gallery(href='/marketing/vice3.png', :title="$t('marketing2Lead2Title')")
-              img(src='/marketing/vice3.png')
-            p.lead(v-html="$t('marketing2Lead2')")
-          .col-md-6
-            a.gallery(href='/marketing/challenge.png', :title="$t('challenges')")
-              img.img-rendering-auto(src='/marketing/challenge.png')
-            p.lead(v-html="$t('marketing2Lead3')")
-
-        hr.clearfix
-
-        h1 {{ $t('marketing3Header') }}
-        .row
-          .col-md-6
-            a.gallery(href='/marketing/android_iphone.png', :title="$t('marketing3LeadTitle')")
-              img.img-rendering-auto(src='/marketing/android_iphone.png',style='box-shadow:none;')
-            p.lead(v-html="$t('marketing3Lead1')")
-          .col-md-6
-            a.gallery(href='/marketing/integration.png', :title="$t('marketing3LeadTitle')")
-              img.img-rendering-auto(src='/marketing/integration.png')
-            p.lead(v-html="$t('marketing3Lead2')")
-
-        hr.clearfix
-
-        h1 {{ $t('marketing4Header') }}
-        .row
-          .col-md-6
-            h3 {{ $t('marketing4Lead1Title') }}
-            img.pull-left(src='/marketing/education.png')
-            p.lead {{ $t('marketing4Lead1') }}
-          .col-md-6
-            h3 {{ $t('marketing4Lead2Title') }}
-            img.pull-left(src='/marketing/wellness.png')
-            p.lead {{ $t('marketing4Lead2') }}
-        .row
-          .col-md-6.col-md-offset-3
-            h3 {{ $t('marketing4Lead3Title') }}
-            img.img-rendering-auto(src='/marketing/lefnire.png')
-            p.lead
-              | {{ $t('marketing4Lead3-1') }}
-              |&nbsp;
-              button.btn.btn-primary(ng-click='playButtonClick()') {{ $t('playButton') }}
-              |&nbsp;
-              | {{ $t('marketing4Lead3-2') }}
-              |&nbsp;
-              a.btn.btn-primary(href='/static/plans',target='_blank') {{ $t('contactUs') }}
-              |&nbsp;
-              | {{ $t('marketing4Lead3-3') }}
-              |&nbsp;
-              a.btn.btn-primary(href='/static/videos') {{ $t('watchVideos') }}
-
-
-        hr
-        p.lead {{ $t('landingp1') }}
-        h2 {{ $t('landingp2header') }}
-        //images in these parts could be useful, too
-        //if there's a language workaround, image headers? people like pictures!
-        p.lead
-          | {{ $t('landingp2') }}
-          |&nbsp;
-        h2 {{ $t('landingp3header') }}
-        //I'm not sold on "Consquences as the title here. Anyone got a better idea?
-        p.lead
-          | {{ $t('landingp3') }}
-          |&nbsp;
-        h2 {{ $t('landingp4header') }}
-        p.lead {{ $t('landingp4') }}
-        //- TODO
-          h2 {{ $t('landingend') }}
-          p.lead
-             {{ $t('landingend2') }}
-            a(href="FEATURESPAGEHERE") {{ $t('landingfeatureslink') }}
-             {{ $t('landingend3') }}
-            a(href="ENTERPRISEPAGEHERE") {{ $t('landingadminlink') }}
-            |&nbsp;
-             {{ $t('landingend4') }}
+  div
+    static-header
+    .container-fluid.text-center
+      .row
+        .col-md-12
+          h1 {{ $t('marketing1Header') }}
+      .row
+        .col-md-6
+          img(src='~assets/images/marketing/screenshot.png')
+          h2 {{ $t('marketing1Lead1Title') }}
+          p {{ $t('marketing1Lead1') }}
+        .col-md-6
+          img(src='~assets/images/marketing/gear.png')
+          h2 {{ $t('marketing1Lead2Title') }}
+          p {{ $t('marketing1Lead2') }}
+          img(src='~assets/images/marketing/drops.png', style='max-height: 200px;')
+          h2 {{ $t('marketing1Lead3Title') }}
+          p {{ $t('marketing1Lead3') }}
+      hr
+      .row
+        .col-md-12
+          h1 {{ $t('marketing2Header') }}
+      .row
+        .col-md-6
+          img(src='~assets/images/marketing/guild.png')
+          h2 {{ $t('marketing2Lead1Title') }}
+          p {{ $t('marketing2Lead1') }}
+          img(src='~assets/images/marketing/vice3.png')
+          h2 {{ $t('marketing2Lead2Title') }}
+          p(v-markdown='$t("marketing2Lead2")')
+        .col-md-6
+          img(src='~assets/images/marketing/challenge.png')
+          h2 {{ $t('marketing2Lead3Title') }}
+          p {{ $t('marketing2Lead3') }}
+      hr
+      .row
+        .col-md-12
+          h1 {{ $t('marketing3Header') }}
+      .row
+        .col-md-6
+          img(src='~assets/images/marketing/android_iphone.png')
+          h2 {{ $t('footerMobile') }}
+          p(v-markdown='$t("marketing3Lead1")')
+        .col-md-6
+          img(src='~assets/images/marketing/integration.png')
+          h2 {{ $t('marketing3Lead2Title') }}
+          p(v-markdown='$t("marketing3Lead2")')
+      hr
+      .row
+        .col-md-12
+          h1 {{ $t('marketing4Header') }}
+      .row
+        .col-md-6
+          .media
+            img(src='~assets/images/marketing/education.png')
+            .media-body
+              h2 {{ $t('marketing4Lead1Title') }}
+              p {{ $t('marketing4Lead1') }}
+        .col-md-6
+          .media
+            img(src='~assets/images/marketing/wellness.png')
+            .media-body
+              h2 {{ $t('marketing4Lead2Title') }}
+              p {{ $t('marketing4Lead2') }}
+      .row
+        .col-md-6.offset-md-3
+          h2 {{ $t('marketing4Lead3Title') }}
+          img(src='~assets/images/marketing/lefnire.png')
+          p.span
+            span {{ $t('marketing4Lead3-1') }}
+            button.btn.btn-primary(@click='playButtonClick()') {{ $t('playButton') }}
+          p.span
+            span {{ $t('marketing4Lead3-2') }}
+            a.btn.btn-primary(href='/static/plans',target='_blank') {{ $t('contactUs') }}
+          p.span
+            span {{ $t('marketing4Lead3-3') }}
+            a.btn.btn-primary(href='/static/videos') {{ $t('watchVideos') }}
+    app-footer
 </template>
+
+<style lang='scss' scoped>
+  @import '~client/assets/scss/static.scss';
+
+  .btn {
+    margin-left: 1em;
+  }
+
+  img {
+    box-shadow: 0 0 10px 5px #888;
+    margin: 0.5em;
+    max-width: 500px;
+  }
+</style>
+
+<script>
+  import AppFooter from 'client/components/appFooter';
+  import markdownDirective from 'client/directives/markdown';
+  import StaticHeader from './header.vue';
+
+  export default {
+    components: {
+      AppFooter,
+      StaticHeader,
+    },
+    directives: {
+      markdown: markdownDirective,
+    },
+    methods: {
+      playButtonClick () {
+        this.$router.push('/register');
+      },
+    },
+  };
+</script>

website/client/components/static/header.vue

@@ -0,0 +1,110 @@
+<template lang="pug">
+  nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
+    .navbar-header
+      router-link.nav-item(
+        to='/static/front',
+      )
+        .logo.svg-icon(v-html='icons.logo')
+    .collapse.navbar-collapse
+      ul.navbar-nav.mr-auto
+        router-link.nav-item(
+          tag='li',
+          to='/static/features',
+        )
+          a.nav-link(v-once) {{ $t('companyAbout') }}
+        router-link.nav-item(
+          tag='li',
+          to='/static/plans',
+        )
+          a.nav-link(v-once) {{ $t('groupPlans') }}
+        li.nav-item
+          a.nav-link(
+          href='https://habitica.wordpress.com/',
+          target='_blank',
+        ) {{ $t('companyBlog') }}
+        li.nav-item
+          a.nav-link(
+          href='http://blog.habitrpg.com/',
+          target='_blank',
+        ) {{ $t('tumblr') }}
+        router-link.nav-item(
+          tag='li',
+          to='/static/press-kit',
+        )
+          a.nav-link(v-once) {{ $t('presskit') }}
+        router-link.nav-item(
+          tag='li',
+          to='/static/contact',
+        )
+          a.nav-link(v-once) {{ $t('contactUs') }}
+      button.btn.btn-primary.pull-right(@click='playButtonClick()') {{ $t('playButtonFull') }}
+</template>
+
+<style lang='scss' scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  .btn-primary.pull-right {
+    height: 2.5em;
+    margin: auto 0px auto auto;
+  }
+
+  nav.navbar {
+    background: $purple-100 url(~assets/svg/for-css/bits.svg) right no-repeat;
+    padding-left: 25px;
+    padding-right: 12.5px;
+    height: 56px;
+    box-shadow: 0 1px 2px 0 rgba($black, 0.24);
+  }
+
+  .navbar-header {
+    margin-right: 48px;
+
+    .logo {
+      width: 128px;
+      height: 28px;
+    }
+  }
+
+  .nav-item {
+    .nav-link {
+      font-size: 16px;
+      color: $white;
+      font-weight: bold;
+      line-height: 1.5;
+      padding: 16px 24px;
+      transition: none;
+    }
+
+    &:hover {
+      .nav-link {
+        color: $white;
+        background: $purple-200;
+      }
+    }
+
+    &.active:not(:hover) {
+      .nav-link {
+        box-shadow: 0px -4px 0px $purple-300 inset;
+      }
+    }
+  }
+</style>
+
+<script>
+  import logo from 'assets/svg/logo.svg';
+
+  export default {
+    data () {
+      return {
+        icons: Object.freeze({
+          logo,
+        }),
+      };
+    },
+    methods: {
+      playButtonClick () {
+        this.$router.push('/register');
+      },
+    },
+  };
+</script>

website/common/locales/en/communityGuidelines.json

@@ -15,7 +15,7 @@
     "commGuideList01D": "<strong>A Respectful Manner.</strong> We all have different backgrounds, different skill sets, and different opinions. That's part of what makes our community so wonderful! Habiticans respect these differences and celebrate them. Stick around, and soon you will have friends from all walks of life.",
 
     "commGuideHeadingMeet": "Meet the Staff and Mods!",
-    "commGuidePara006": "Habitica has some tireless knight-errants who join forces with the staff members to keep the community calm, contented, and free of trolls. Each has a specific domain, but will sometimes be called to serve in other social spheres. Staff and Mods will often precede official statements with the words \"Mod Talk\" or \"Mod Hat On\".",
+    "commGuidePara006": "Habitica has some tireless knights-errant who join forces with the staff members to keep the community calm, contented, and free of trolls. Each has a specific domain, but will sometimes be called to serve in other social spheres. Staff and Mods will often precede official statements with the words \"Mod Talk\" or \"Mod Hat On\".",
     "commGuidePara007": "Staff have purple tags marked with crowns. Their title is \"Heroic\".",
     "commGuidePara008": "Mods have dark blue tags marked with stars. Their title is \"Guardian\". The only exception is Bailey, who, as an NPC, has a black and green tag marked with a star.",
     "commGuidePara009": "The current Staff Members are (from left to right):",
@@ -97,7 +97,7 @@
     "commGuideList04H": "Ensuring that wiki content is relevant to the whole site of Habitica and not pertaining to a particular guild or party (such information can be moved to the forums)",
     "commGuidePara049": "The following people are the current wiki administrators:",
     "commGuidePara049A": "The following moderators can make emergency edits in situations where a moderator is needed and the above admins are unavailable:",
-    "commGuidePara018": "Wiki Administrators Emeritus are",
+    "commGuidePara018": "Wiki Administrators Emeritus are:",
     "commGuideHeadingInfractionsEtc": "Infractions, Consequences, and Restoration",
     "commGuideHeadingInfractions": "Infractions",
     "commGuidePara050": "Overwhelmingly, Habiticans assist each other, are respectful, and work to make the whole community fun and friendly. However, once in a blue moon, something that a Habitican does may violate one of the above guidelines. When this happens, the Mods will take whatever actions they deem necessary to keep Habitica safe and comfortable for everyone.",
@@ -175,7 +175,7 @@
     "commGuidePara068": "Now go forth, brave adventurer, and slay some Dailies!",
     "commGuideHeadingLinks": "Useful Links",
     "commGuidePara069": "The following talented artists contributed to these illustrations:",
-    "commGuideLink01": "Habitica Help: Ask a Question ",
+    "commGuideLink01": "Habitica Help: Ask a Question",
     "commGuideLink01description": "a guild for any players to ask questions about Habitica!",
     "commGuideLink02": "The Back Corner Guild",
     "commGuideLink02description": "a guild for the discussion of long or sensitive topics.",
@@ -192,5 +192,5 @@
     "commGuideLink08": "The Quest Trello",
     "commGuideLink08description": "for submitting quest writing.",
 
-    "lastUpdated": "Last updated"
+    "lastUpdated": "Last updated:"
 }

website/common/locales/en/front.json

@@ -26,7 +26,7 @@
     "communityForum": "<a target='_blank' href='http://habitica.wikia.com/wiki/Special:Forum'>Forum</a>",
     "communityKickstarter": "Kickstarter",
     "communityReddit": "Reddit",
-    "companyAbout": "How it Works",
+    "companyAbout": "How It Works",
     "companyBlog": "Blog",
     "devBlog": "Developer Blog",
     "companyDonate": "Donate",
@@ -78,12 +78,8 @@
     "irishfeet123Quote": "I've had horrible habits with clearing my place completely after meals and leaving cups all over the place. [Habitica] has cured that!",
     "joinOthers": "Join <%= userCount %> people making it fun to achieve goals!",
     "kazuiQuote": "Before [Habitica], I was stuck with my thesis, as well as dissatisfied with my personal discipline regarding housework and things like learning vocabulary and studying Go theory.  It turns out breaking down these tasks into smaller manageable checklists is quite the thing to keep me motivated and constantly working.",
-    "landingadminlink": "administrative packages",
     "landingend": "Not convinced yet?",
-    "landingend2": "See a more detailed list of",
-    "landingend3": ". Are you looking for a more private approach? Check out our",
-    "landingend4": "which are perfect for families, teachers, support groups, and businesses.",
-    "landingfeatureslink": "our features",
+    "landingend2": "See a more detailed list of [our features](/static/overview). Are you looking for a more private approach? Check out our [administrative packages](/static/plans), which are perfect for families, teachers, support groups, and businesses.",
     "landingp1": "The problem with most productivity apps on the market is that they provide no incentive to continue using them. Habitica fixes this by making habit building fun! By rewarding you for your successes and penalizing you for slip-ups, Habitica provides external motivation for completing your day-to-day activities.",
     "landingp2": "Whenever you reinforce a positive habit, complete a daily task, or take care of an old to-do, Habitica immediately rewards you with experience points and gold. As you gain experience, you can level up, increasing your stats and unlocking more features, like classes and pets. Gold can be spent on in-game items that change your experience or personalized rewards you've created for motivation. When even the smallest successes provide you with an immediate reward, you're less likely to procrastinate.",
     "landingp2header": "Instant Gratification",
@@ -98,19 +94,23 @@
     "loginGoogleAlt": "Sign in with Google",
     "logout": "Log Out",
     "marketing1Header": "Improve Your Habits by Playing a Game",
+    "marketing1Lead1Title": "Your Life, the Role Playing Game",
     "marketing1Lead1": "Habitica is a video game to help you improve real life habits. It \"gamifies\" your life by turning all your tasks (habits, dailies, and to-dos) into little monsters you have to conquer. The better you are at this, the more you progress in the game. If you slip up in life, your character starts backsliding in the game.",
-    "marketing1Lead2": "<strong>Get Sweet Gear</strong>. Improve your habits to build up your avatar. Show off the sweet gear you've earned!",
     "marketing1Lead2Title": "Get Sweet Gear",
-    "marketing1Lead3": "<strong>Find Random Prizes</strong>. For some, it's the gamble that motivates them: a system called \"stochastic rewards.\" Habitica accommodates all reinforcement and punishment styles: positive, negative, predictable, and random.",
+    "marketing1Lead2": "Improve your habits to build up your avatar. Show off the sweet gear you've earned!",
     "marketing1Lead3Title": "Find Random Prizes",
+    "marketing1Lead3": "For some, it's the gamble that motivates them: a system called \"stochastic rewards.\" Habitica accommodates all reinforcement and punishment styles: positive, negative, predictable, and random.",
     "marketing2Header": "Compete With Friends, Join Interest Groups",
+    "marketing2Lead1Title": "Social Productivity",
     "marketing2Lead1": "While you can play Habitica solo, the lights really turn on when you start collaborating, competing, and holding each other accountable. The most effective part of any self-improvement program is social accountability, and what better an environment for accountability and competition than a video game?",
-    "marketing2Lead2": "<strong>Fight Bosses</strong>. What's a Role Playing Game without battles? Fight bosses with your party. Bosses are \"super accountability mode\" - a day you miss the gym is a day the boss hurts <em>everyone</em>.",
-    "marketing2Lead2Title": "Bosses",
-    "marketing2Lead3": "<strong>Challenges</strong> let you compete with friends and strangers. Whoever does the best at the end of a challenge wins special prizes.",
+    "marketing2Lead2Title": "Fight Monsters",
+    "marketing2Lead2": "What's a Role Playing Game without battles? Fight monsters with your party. Monsters are \"super accountability mode\" - a day you miss the gym is a day the monster hurts *everyone!*",
+    "marketing2Lead3Title": "Challenge Each Other",
+    "marketing2Lead3": "Challenges let you compete with friends and strangers. Whoever does the best at the end of a challenge wins special prizes.",
     "marketing3Header": "Apps and Extensions",
-    "marketing3Lead1": "The <strong>iPhone & Android</strong> apps let you take care of business on the go. We realize that logging into the website to click buttons can be a drag.",
-    "marketing3Lead2": " Other <strong>3rd Party Tools</strong> tie Habitica into various aspects of your life. Our API provides easy integration for things like the <a href='https://chrome.google.com/webstore/detail/habitica/pidkmpibnnnhneohdgjclfdjpijggmjj?hl=en-US' target='_blank'>Chrome Extension</a>, for which you lose points when browsing unproductive websites, and gain points when on productive ones. <a href='http://habitica.wikia.com/wiki/Extensions,_Add-Ons,_and_Customizations' target='_blank'>See more here</a>",
+    "marketing3Lead1": "The **iPhone & Android** apps let you take care of business on the go. We realize that logging into the website to click buttons can be a drag.",
+    "marketing3Lead2Title": "Integrations",
+    "marketing3Lead2": "Other **3rd Party Tools** tie Habitica into various aspects of your life. Our API provides easy integration for things like the [Chrome Extension](https://chrome.google.com/webstore/detail/habitica/pidkmpibnnnhneohdgjclfdjpijggmjj?hl=en-US), for which you lose points when browsing unproductive websites, and gain points when on productive ones. [See more here](http://habitica.wikia.com/wiki/Extensions,_Add-Ons,_and_Customizations).",
     "marketing4Header": "Organizational Use",
     "marketing4Lead1": "Education is one of the best sectors for gamification. We all know how glued to phones and games students are these days; harness that power! Pit your students against each other in friendly competition. Reward good behavior with rare prizes. Watch their grades and behavior soar.",
     "marketing4Lead1Title": "Gamification In Education",