Updated new-groups / group-plans static page #8674 (#8729)

* dummy * Renamed internationalized strings to more meaningful names * moved the new group creation state out to its own URL, so it can also be linked to by the static/plans page * Added redirect-through-login functionality from the static/plans page new-group button This includes a static non-modal login page (similar to how other sites have both a login page and login modal) The login body has been abstracted out from its modal-specific view into mixins to accomplish this * deleted bak files added by mistake * deleted scripts added by mistake * changed static/plans Create Group button text * Added form link (https://github.com/HabitRPG/habitica/issues/8674#issuecomment-303518039) Removed changes to non-EN locale files (https://github.com/HabitRPG/habitica/pull/8729#issuecomment-303555211) * reverted key name changes as per https://github.com/HabitRPG/habitica/pull/8729#issuecomment-304515534 * changed $rootScope to $scope https://github.com/HabitRPG/habitica/pull/8729#discussion_r120695874
2025-12-17 14:47:53 +01:00 · 2017-07-07 03:08:02 +06:00
parent 4435862ff2
commit c502b1997b
19 changed files with 251 additions and 217 deletions
--- a/website/client-old/js/app.js
+++ b/website/client-old/js/app.js
@@ -146,6 +146,13 @@ window.habitrpg = angular.module('habitrpg',
          title: env.t('groupPlansTitle')
        })

+        .state('options.social.newGroup', {
+          url: '/new-group',
+          templateUrl: "partials/options.social.newGroup.html",
+          controller: 'NewGroupCtrl',
+          title: env.t('newGroupTitle')
+        })
+
        .state('options.social.guilds', {
          url: '/guilds',
          templateUrl: "partials/options.social.guilds.html",
--- a/website/client-old/js/controllers/groupPlansCtrl.js
+++ b/website/client-old/js/controllers/groupPlansCtrl.js
@@ -9,35 +9,11 @@ angular.module('habitrpg')
    function($scope, $window, Groups, Payments) {
      $scope.PAGES = {
        BENEFITS: 'benefits',
-        CREATE_GROUP: 'create-group',
-        UPGRADE_GROUP: 'upgrade-group',
      };
      $scope.activePage = $scope.PAGES.BENEFITS;
-      $scope.newGroup = {
-        type: 'guild',
-        privacy: 'private',
-      };
-      $scope.PAYMENTS = {
-        AMAZON: 'amazon',
-        STRIPE: 'stripe',
-      };

      $scope.changePage = function (page) {
        $scope.activePage = page;
        $window.scrollTo(0, 0);
      };
-
-      $scope.newGroupIsReady = function () {
-        return !!$scope.newGroup.name;
-      };
-
-      $scope.createGroup = function () {
-        $scope.changePage($scope.PAGES.UPGRADE_GROUP);
-      };
-
-      $scope.upgradeGroup = function (paymentType) {
-        var subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
-        if (paymentType === $scope.PAYMENTS.STRIPE) Payments.showStripe({subscription: subscriptionKey, coupon: null, groupToCreate: $scope.newGroup});
-        if (paymentType === $scope.PAYMENTS.AMAZON) Payments.amazonPayments.init({type: 'subscription', subscription: subscriptionKey, coupon: null, groupToCreate: $scope.newGroup});
-      };
    }]);
--- a/website/client-old/js/controllers/newGroupCtrl.js
+++ b/website/client-old/js/controllers/newGroupCtrl.js
@@ -0,0 +1,53 @@
+"use strict";
+
+/*
+ A controller to manage the New Group page
+ */
+
+angular.module('habitrpg')
+  .controller("NewGroupCtrl", ['$scope', '$window', 'Groups', 'Payments',
+    function ($scope, $window, Groups, Payments) {
+      $scope.PAGES = {
+        CREATE_GROUP: 'create-group',
+        UPGRADE_GROUP: 'upgrade-group',
+      };
+      $scope.activePage = $scope.PAGES.CREATE_GROUP;
+      $scope.changePage = function (page) {
+        $scope.activePage = page;
+        $window.scrollTo(0, 0);
+      };
+
+      $scope.newGroup = {
+        type: 'guild',
+        privacy: 'private',
+      };
+      $scope.PAYMENTS = {
+        AMAZON: 'amazon',
+        STRIPE: 'stripe',
+      };
+
+      $scope.newGroupIsReady = function () {
+        return !!$scope.newGroup.name;
+      };
+
+      $scope.createGroup = function () {
+        $scope.changePage($scope.PAGES.UPGRADE_GROUP);
+      };
+
+      $scope.upgradeGroup = function (paymentType) {
+        var subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
+        if (paymentType === $scope.PAYMENTS.STRIPE) Payments.showStripe({
+          subscription: subscriptionKey,
+          coupon: null,
+          groupToCreate: $scope.newGroup
+        });
+        if (paymentType === $scope.PAYMENTS.AMAZON) Payments.amazonPayments.init({
+          type: 'subscription',
+          subscription: subscriptionKey,
+          coupon: null,
+          groupToCreate: $scope.newGroup
+        });
+      };
+    }]);
+
+
--- a/website/client-old/js/static.js
+++ b/website/client-old/js/static.js
@@ -26,11 +26,20 @@ window.habitrpg = angular.module('habitrpg', ['chieffancypants.loadingBar', 'ui.
    $http.defaults.headers.common['x-client'] = 'habitica-web';
  }])

-.controller("PlansCtrl", ['$rootScope','Analytics',
-  function($rootScope,Analytics) {
+.controller("PlansCtrl", ['$rootScope','Analytics','$location','User','$scope',
+  function($rootScope,Analytics,$location,User,$scope) {
    $rootScope.clickContact = function(){
      Analytics.track({'hitType':'event','eventCategory':'button','eventAction':'click','eventLabel':'Contact Us (Plans)'})
-    }
+    };
+    $scope.goToNewGroupPage = function () {
+      if (User.authenticated()) {
+        window.location.href="/#/options/groups/new-group";
+      } else {
+        // There is no authenticated user, so redirect to the login page,
+        // taking the hash with it to effectively redirect after login.
+        window.location.href = "/static/login#/options/groups/new-group";
+      }
+    };
  }
 ])

--- a/website/client-old/manifest.json
+++ b/website/client-old/manifest.json
@@ -111,6 +111,7 @@
            "js/controllers/tasksCtrl.js",
            "js/controllers/userCtrl.js",
            "js/controllers/groupPlansCtrl.js",
+            "js/controllers/newGroupCtrl.js",

            "js/components/groupTasks/groupTasksController.js",
            "js/components/groupTasks/groupTasksDirective.js",
--- a/website/common/locales/en/generic.json
+++ b/website/common/locales/en/generic.json
@@ -54,6 +54,7 @@
    "user": "User",
    "market": "Market",
    "groupPlansTitle": "Group Plans",
+    "newGroupTitle": "New Group",
    "subscriberItem": "Mystery Item",
    "newSubscriberItem": "New Mystery Item",
    "subscriberItemText": "Each month, subscribers will receive a mystery item. This is usually released about one week before the end of the month. See the wiki's 'Mystery Item' page for more information.",
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -251,7 +251,18 @@
  "groupBenefitSevenTitle": "Get a brand-new exclusive Jackalope Mount",
  "groupBenefitEightTitle": "Add Group Managers to help manage tasks",
  "groupBenefitEightDescription": "Want to share your group's responsibilities? Promote people to Group Managers to help the Leader add, assign, and approve tasks!",
+  "groupBenefitMessageLimitTitle": "Increase message limit",
+  "groupBenefitMessageLimitDescription": "Your message limit is doubled to house up to 400 messages at a time!",
+  "teamBasedTasks": "Team-based Tasks",
+  "specializedCommunication": "Specialized Communication",
+  "funExtras": "Fun Extras",
+  "enterprisePlansButton": "Ask about Enterprise Plans",
+  "enterprisePlansDescription": "Looking for a larger install with custom needs? See if our enterprise plans are right for you.",
+  "enterprisePlansEmailSubject": "Question regarding Enterprise Plans",
+  "familyPlansButton": "Sign Up for Family Plan Mailing List",
+  "familyPlansDescription": "Want a cozier solution to manage your household? Family Plans are coming soon!",
  "createAGroup": "Create a Group",
+  "getAGroupPlanToday": "Get a Group Plan Today",
  "assignFieldPlaceholder": "Type a group member's profile name",
  "cannotDeleteActiveGroup": "You cannot remove a group with an active subscription",
  "groupTasksTitle": "Group Tasks List",
--- a/website/common/locales/en/subscriber.json
+++ b/website/common/locales/en/subscriber.json
@@ -23,7 +23,7 @@
    "giftSubscriptionText4": "Thanks for supporting Habitica!",
    "monthUSD": "USD / Month",
    "organization": "Organization",
-    "groupPlans": "Corporate Plans",
+    "groupPlans": "Group Plans",
    "indivPlan1": "For individuals, Habitica is free to play. Even for small interest groups, free (or cheap)",
    "indivPlan2": "can be used to motivate participants in behavioral modification. Think writing groups, art challenges, and more.",
    "groupText1": "But some group leaders will want more control, privacy, security, and support. Examples of such groups are families, health and wellness groups, employee groups, and more. These plans provide private instances of Habitica for your group or organization, secure and independent of",
--- a/website/server/controllers/top-level/pages.js
+++ b/website/server/controllers/top-level/pages.js
@@ -28,7 +28,7 @@ api.getFrontPage = {
  },
 };

-let staticPages = ['front', 'privacy', 'terms', 'features',
+let staticPages = ['front', 'privacy', 'terms', 'features', 'login',
                   'videos', 'contact', 'plans', 'new-stuff', 'community-guidelines',
                   'old-news', 'press-kit', 'faq', 'overview', 'apps',
                   'clear-browser-data', 'merch', 'maintenance-info'];
--- a/website/views/options/social/group.jade
+++ b/website/views/options/social/group.jade
@@ -1,5 +1,4 @@
 include ./groups/group-subscription
-include ./groups/group-plans-benefits

 a.pull-right.gem-wallet(ng-if='group.type!="party"', popover-trigger='mouseenter', popover-title=env.t('guildBankPop1'), popover=env.t('guildBankPop2'), popover-placement='left')
  // <span class="task-action-btn tile flush bright add-gems-btn">＋</span>
--- a/website/views/options/social/groups/group-plans.jade
+++ b/website/views/options/social/groups/group-plans.jade
@@ -1,4 +1,3 @@
-include ./create-group

 script(type='text/ng-template', id='partials/options.social.groupPlans.html')
  div(ng-show='activePage === PAGES.BENEFITS')
@@ -8,38 +7,10 @@ script(type='text/ng-template', id='partials/options.social.groupPlans.html')
    br
    .row
      .col-sm-6.col-sm-offset-3
-        a.btn.btn-primary.btn-lg.btn-block(ng-click="changePage(PAGES.CREATE_GROUP)")=env.t('createAGroup')
+        a.btn.btn-primary.btn-lg.btn-block(ui-sref="options.social.newGroup")=env.t('createAGroup')

    .row
      .col-md-6.col-md-offset-3
        br
        .text-center=env.t('groupSubscriptionPrice')

-  div(ng-show='activePage === PAGES.CREATE_GROUP')
-    h2.text-center=env.t('createAGroup')
-    
-    .col-xs-12
-      +groupCreateForm
-    
-    br
-    br
-    .row
-      .col-sm-6.col-sm-offset-3
-        a.btn.btn-primary.btn-lg.btn-block(ng-click="createGroup()", ng-disabled="!newGroupIsReady()")=env.t('create')
-
-  div(ng-show='activePage === PAGES.UPGRADE_GROUP')
-    h2.text-center=env.t('upgradeTitle')
-    
-    .row.text-center
-      .col-md-6.col-md-offset-3
-        a.purchase.btn.btn-primary(ng-click='upgradeGroup(PAYMENTS.STRIPE)')=env.t('card')
-        a.purchase(ng-click='upgradeGroup(PAYMENTS.AMAZON)')
-          img(src='https://payments.amazon.com/gp/cba/button', alt=env.t('amazonPayments'))
-     //-  .col-xs-4
-     //-    a.purchase(href='/paypal/subscribe?_id={{user._id}}&apiToken={{User.settings.auth.apiToken}}&sub={{_subscription.key}}{{_subscription.coupon ? "&coupon="+_subscription.coupon : ""}}&groupId={{group.id}}', ng-disabled='!_subscription.key')
-     //-      img(src='https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-small.png',alt=env.t('paypal'))
-
-    .row
-      .col-md-6.col-md-offset-3
-        br
-        .text-center=env.t('groupSubscriptionPrice')
--- a/website/views/options/social/groups/new-group.jade
+++ b/website/views/options/social/groups/new-group.jade
@@ -0,0 +1,31 @@
+include ./create-group
+
+script(type='text/ng-template', id='partials/options.social.newGroup.html')
+  div(ng-show='activePage === PAGES.CREATE_GROUP')
+    h2.text-center=env.t('createAGroup')
+
+    .col-xs-12
+      +groupCreateForm
+
+    br
+    br
+    .row
+      .col-sm-6.col-sm-offset-3
+        a.btn.btn-primary.btn-lg.btn-block(ng-click="createGroup()", ng-disabled="!newGroupIsReady()")=env.t('create')
+
+  div(ng-show='activePage === PAGES.UPGRADE_GROUP')
+    h2.text-center=env.t('upgradeTitle')
+
+    .row.text-center
+      .col-md-6.col-md-offset-3
+        a.purchase.btn.btn-primary(ng-click='upgradeGroup(PAYMENTS.STRIPE)')=env.t('card')
+        a.purchase(ng-click='upgradeGroup(PAYMENTS.AMAZON)')
+          img(src='https://payments.amazon.com/gp/cba/button', alt=env.t('amazonPayments'))
+     //-  .col-xs-4
+     //-    a.purchase(href='/paypal/subscribe?_id={{user._id}}&apiToken={{User.settings.auth.apiToken}}&sub={{_subscription.key}}{{_subscription.coupon ? "&coupon="+_subscription.coupon : ""}}&groupId={{group.id}}', ng-disabled='!_subscription.key')
+     //-      img(src='https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-small.png',alt=env.t('paypal'))
+
+    .row
+      .col-md-6.col-md-offset-3
+        br
+        .text-center=env.t('groupSubscriptionPrice')
--- a/website/views/options/social/index.jade
+++ b/website/views/options/social/index.jade
@@ -9,6 +9,7 @@ include ./party
 include ./groups/group-tasks
 include ./groups/group-plans
 include ./groups/create-group
+include ./groups/new-group

 script(type='text/ng-template', id='partials/options.social.inbox.html')
  .options-blurbmenu
--- a/website/views/options/social/groups/group-plans-benefits.jade
+++ b/website/views/options/social/groups/group-plans-benefits.jade
@@ -1,45 +1,64 @@
 mixin groupPlansBenefits()
  h2.text-center=env.t('groupBenefitsTitle')
  .row(style="font-size: 2rem;")
-    .col-md-6.col-md-offset-3=env.t('groupBenefitsDescription')
-  .row
-    .col-md-5.col-md-offset-4
+    .col-md-6.col-md-offset-3.text-center=env.t('groupBenefitsDescription')
+  .row.row-margin
+    .col-md-4
+      h2=env.t('teamBasedTasks')
      div
+        // shared tasks
        h3
          span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
          =env.t('groupBenefitOneTitle')
        span=env.t('groupBenefitOneDescription')
      div
+        // assign tasks
        h3
          span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
          =env.t('groupBenefitTwoTitle')
        span=env.t('groupBenefitTwoDescription')
      div
+        // claim tasks
        h3
          span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
          =env.t('groupBenefitThreeTitle')
        span=env.t('groupBenefitThreeDescription')
      div
+        // mark tasks
        h3
          span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
          =env.t('groupBenefitFourTitle')
        span=env.t('groupBenefitFourDescription')
      div
+        // group managers
        h3
          span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
          =env.t('groupBenefitEightTitle')
        span=env.t('groupBenefitEightDescription')
+
+    .col-md-4
+      h2=env.t('specializedCommunication')
      div
+        // chat privately
        h3
          span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
          =env.t('groupBenefitFiveTitle')
        span=env.t('groupBenefitFiveDescription')
      div
+        h3
+          span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
+          =env.t('groupBenefitMessageLimitTitle')
+        span=env.t('groupBenefitMessageLimitDescription')
+    .col-md-4
+      h2=env.t('funExtras')
+      div
+        // free subscription
        h3
          span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
          =env.t('groupBenefitSixTitle')
        span=env.t('groupBenefitSixDescription')
      div
+        // exclusive mount
        h3
          span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
          =env.t('groupBenefitSevenTitle')
--- a/website/views/shared/mixins.jade
+++ b/website/views/shared/mixins.jade
@@ -1,3 +1,5 @@
+include ./group-plans-benefits
+
 mixin gemButton(isGemsModal)
  a.pull-right.gem-wallet(ng-click=( isGemsModal ? '' : 'openModal("buyGems",{track:"Gems > Wallet"})'), popover-trigger='mouseenter', popover-title=env.t('gemsPopoverTitle'), popover=env.t('gemsWhatFor'), popover-placement='bottom')
    if !isGemsModal
--- a/website/views/static/login-mixins.jade
+++ b/website/views/static/login-mixins.jade
@@ -0,0 +1,61 @@
+mixin registrationForm
+  form#registrationForm(ng-submit='register()', name='registrationForm')
+    .form-group
+      input.form-control(type='text', ng-model='registerVals.username', placeholder=env.t('username'), spellcheck='false', required)
+    .form-group
+      input.form-control(type='email', ng-model='registerVals.email', placeholder=env.t('email'), required)
+    .form-group
+      input.form-control(type='password', ng-model='registerVals.password', placeholder=env.t('password'), required)
+    .form-group
+      input.form-control(type='password', ng-model='registerVals.confirmPassword', placeholder=env.t('passConfirm'), required)
+    .form-group
+      small
+        =env.t('accept1Terms')
+        |&nbsp;
+        a(href='/static/terms' target='_blank')=env.t('terms')
+        |&nbsp;
+        =env.t('accept2Terms')
+        |&nbsp;
+        a(href='/static/privacy' target='_blank')=env.t('privacy')
+        | .
+    .form-group
+      input.btn.btn-block.btn-lg.btn-success(type='submit', ng-disabled='registrationForm.$invalid || registrationInProgress', value=env.t('getStartedNow'))
+
+
+mixin loginBody
+  ul.list-inline
+    li
+      a.zocial.facebook(alt=env.t('loginFacebookAlt'), ng-click='socialLogin("facebook")')=env.t('loginFacebookAlt')
+    li
+      a.zocial.google(alt="Google", ng-click='socialLogin("google")')=env.t('loginGoogleAlt')
+  hr
+  tabset(justified='true')
+    tab(heading=env.t('login'))
+      form#loginForm(ng-submit='auth()', method='POST', name='loginForm')
+        .form-group
+          input.form-control(type='text', ng-model='loginUsername', placeholder=env.t('usernameOrEmail'), name='username', spellcheck='false', required)
+        .form-group
+          input.form-control(type='password', ng-model='loginPassword', placeholder=env.t('password'), name='password', required)
+        .form-group
+          input.btn.btn-block.btn-lg.btn-primary(type='submit', ng-disabled='loginForm.$invalid', value=env.t('login'))
+
+        small=env.t('passMan')
+        br
+        br
+
+      .panel-group#forgot-password
+        .panel.panel-default
+          .panel-heading
+            h3.panel-title
+              a(data-toggle="collapse" data-parent="#forgot-password" href="#forgot-password-panel")=env.t('forgotPass')
+
+          .panel-body.collapse#forgot-password-panel
+            form(name='passwordResetForm', ng-submit='passwordReset(passwordResetEmail)', novalidate)
+              h3=env.t('emailNewPass')
+              .form-group
+                input.form-control(type='email', name='email', placeholder=env.t('email') , ng-model='passwordResetEmail')
+              .form-group
+                input.btn.btn-default(type='submit', value=env.t('submit'))
+
+    tab(heading=env.t('register'))
+      +registrationForm
--- a/website/views/static/login-modal.jade
+++ b/website/views/static/login-modal.jade
@@ -1,68 +1,8 @@
-mixin registrationForm
-  form#registrationForm(ng-submit='register()', name='registrationForm')
-    .form-group
-      input.form-control(type='text', ng-model='registerVals.username', placeholder=env.t('username'), spellcheck='false', required)
-    .form-group
-      input.form-control(type='email', ng-model='registerVals.email', placeholder=env.t('email'), required)
-    .form-group
-      input.form-control(type='password', ng-model='registerVals.password', placeholder=env.t('password'), required)
-    .form-group
-      input.form-control(type='password', ng-model='registerVals.confirmPassword', placeholder=env.t('passConfirm'), required)
-    .form-group
-      small
-        =env.t('accept1Terms')
-        |&nbsp;
-        a(href='/static/terms' target='_blank')=env.t('terms')
-        |&nbsp;
-        =env.t('accept2Terms')
-        |&nbsp;
-        a(href='/static/privacy' target='_blank')=env.t('privacy')
-        | .
-    .form-group
-      input.btn.btn-block.btn-lg.btn-success(type='submit', ng-disabled='registrationForm.$invalid || registrationInProgress', value=env.t('getStartedNow'))
+include ./login-mixins

 script(id='modals/login.html', type='text/ng-template')
  .modal-header
    button.close(type='button', ng-click='$close()') ×
    h4.modal-title=env.t('loginAndReg')
  .modal-body(ng-controller='AuthCtrl')
-    ul.list-inline
-      li
-        a.zocial.facebook(alt=env.t('loginFacebookAlt'), ng-click='socialLogin("facebook")')=env.t('loginFacebookAlt')
-      li
-        a.zocial.google(alt="Google", ng-click='socialLogin("google")')=env.t('loginGoogleAlt')
-    hr
-    tabset(justified='true')
-      tab(heading=env.t('login'))
-        form#loginForm(ng-submit='auth()', method='POST', name='loginForm')
-          .form-group
-            input.form-control(type='text', ng-model='loginUsername', placeholder=env.t('usernameOrEmail'), name='username', spellcheck='false', required)
-          .form-group
-            input.form-control(type='password', ng-model='loginPassword', placeholder=env.t('password'), name='password', required)
-          .form-group
-            input.btn.btn-block.btn-lg.btn-primary(type='submit', ng-disabled='loginForm.$invalid', value=env.t('login'))
-
-          small=env.t('passMan')
-          br
-          br
-
-        // good god accordions have html ceremony
-        .panel-group#forgot-password
-          .panel.panel-default
-            .panel-heading
-              h3.panel-title
-                a(data-toggle="collapse" data-parent="#forgot-password" href="#forgot-password-panel")=env.t('forgotPass')
-
-            .panel-body.collapse#forgot-password-panel
-              form(name='passwordResetForm', ng-submit='passwordReset(passwordResetEmail)', novalidate)
-                //.alert.alert-success {.success.passwordReset}
-                //.control-group.{#if..errors.passwordReset}error{/}
-                h3=env.t('emailNewPass')
-                .form-group
-                  input.form-control(type='email', name='email', placeholder=env.t('email') , ng-model='passwordResetEmail')
-                  //span.help-inline {.errors.passwordReset}
-                .form-group
-                  input.btn.btn-default(type='submit', value=env.t('submit'))
-
-      tab(heading=env.t('register'))
-        +registrationForm
+    +loginBody
--- a/website/views/static/login.jade
+++ b/website/views/static/login.jade
@@ -0,0 +1,17 @@
+include ./login-mixins
+
+extends ./layout
+
+block vars
+  - var layoutEnv = env
+
+block title
+  title=env.t('loginAndReg')
+
+block content
+  .row
+    .col-sm-6.col-sm-offset-3
+      .header
+        h4=env.t('loginAndReg')
+      .body(ng-controller='AuthCtrl')
+        +loginBody
--- a/website/views/static/plans.jade
+++ b/website/views/static/plans.jade
@@ -8,96 +8,31 @@ block title
  title=env.t('groupPlans')

 block content
-  .row(ng-controller='PlansCtrl')
-    .col-md-12
-      h2=env.t('groupPlans')
+  div(ng-controller='PlansCtrl')
+    +groupPlansBenefits

-      p
-        =env.t('indivPlan1')
-        |&nbsp;
-        !=env.t('guildsLink')
-        = ' ' + env.t('and') + ' '
-        !=env.t('challengesLink')
-        |&nbsp;
-        =env.t('indivPlan2')
-      p
-        =env.t('groupText1')
-        |&nbsp;
-        !=env.t('habiticaLink')
-        |.&nbsp;
-        =env.t('groupText2')
+    br
+    br
+    .row
+      .col-sm-6.col-sm-offset-3
+        a.btn.btn-primary.btn-lg.btn-block(ng-click="goToNewGroupPage()")=env.t('getAGroupPlanToday')

-      .subscription-features
-        table.table.table-striped
-          thead
-            tr
-              th.feature-name
-              th.feature-name.muted=env.t('planFamily')
-              th.feature-name.muted=env.t('planGroup')
-              th.feature-name=env.t('organization')
-          tbody
-            tr
-              th
-                span.dashed-underline(popover=env.t('organizationSubText'),popover-trigger='mouseenter',popover-placement='right')=env.t('organizationSub')
-              td.muted
-                span.glyphicon.glyphicon-ok
-              td.muted
-                span.glyphicon.glyphicon-ok
-              td
-                span.glyphicon.glyphicon-ok
-            tr
-              th
-                span.dashed-underline(popover=env.t('dedicatedHostText'),popover-trigger='mouseenter',popover-placement='right')=env.t('dedicatedHost')
-              td
-              td
-              td
-                span.glyphicon.glyphicon-ok
-            tr
-              th
-                span.dashed-underline(popover=env.t('customDomainText'),popover-trigger='mouseenter',popover-placement='right')=env.t('customDomain')
-              td
-              td
-              td
-                span.glyphicon.glyphicon-ok
-            tr
-              th
-                span.dashed-underline(popover=env.t('maxPlayersText'),popover-trigger='mouseenter',popover-placement='right')=env.t('maxPlayers')
-              td.muted 10
-              td.muted 75
-              td=env.t('unlimited')
-            tr
-              th
-                span.dashed-underline(popover=env.t('priSupportText'),popover-trigger='mouseenter',popover-placement='right')=env.t('priSupport')
-              td
-              td
-              td
-                span.glyphicon.glyphicon-ok
-            tr
-              th
-                span.dashed-underline(popover=env.t('timeSupportText'),popover-trigger='mouseenter',popover-placement='right')=env.t('timeSupport')
-              td.muted -
-              td.muted 5
-              td 10
-            tr
-              th
-                h5=env.t('gameFeatures') + ':'
-                ul
-                  li
-                    span.dashed-underline(popover=env.t('gold2GemText'),popover-trigger='mouseenter',popover-placement='right')=env.t('gold2Gem')
-                  li
-                    span.dashed-underline(popover=env.t('infiniteGemText'),popover-trigger='mouseenter',popover-placement='right')=env.t('infiniteGem')
-              td.muted
-                span.glyphicon.glyphicon-ok
-              td.muted
-                span.glyphicon.glyphicon-ok
-              td
-                span.glyphicon.glyphicon-ok
-            tr
-              th
-                //| Price
-              td
-                a.btn.btn-default.muted(ng-click='clickContact()', href='https://docs.google.com/forms/d/17torT7OlxgtbHAPdBDRQNG2lTdIQyrGXk4O2YXvUMig/viewform',popover=env.t('notYetPlan'),popover-placement='right',popover-trigger='mouseenter')=env.t('contactUs')
-              td
-                a.btn.btn-default.muted(ng-click='clickContact()', href='https://docs.google.com/forms/d/17torT7OlxgtbHAPdBDRQNG2lTdIQyrGXk4O2YXvUMig/viewform',popover=env.t('notYetPlan'),popover-placement='right',popover-trigger='mouseenter')=env.t('contactUs')
-              td
-                a.btn.btn-primary(ng-click='clickContact()', href='https://docs.google.com/forms/d/12Jqj_8f3oQS0B3ZUHewHbK61uLjBdzBeB0zyEqB9lxM/viewform')=env.t('contactUs')
+    .row
+      .col-md-6.col-md-offset-3
+        br
+        .text-center=env.t('groupSubscriptionPrice')
+
+    hr
+
+    .col-md-6.col-md-offset-3.text-center
+      .row.row-margin(style="font-size: 2rem;")
+        span=env.t('enterprisePlansDescription')
+      .row.row-margin
+        a.btn.btn-primary.btn-lg.btn-block(href="mailto:vicky@habitica.com?subject="+env.t('enterprisePlansEmailSubject'))=env.t('enterprisePlansButton')
+
+      br
+
+      .row.row-margin(style="font-size: 2rem;")
+        span=env.t('familyPlansDescription')
+      .row.row-margin
+        a.btn.btn-primary.btn-lg.btn-block(href="https://docs.google.com/forms/d/e/1FAIpQLSerMKkaCg3UcgpcMvBJtlNgnF9DNY8sxCebpAT-GHeDAQASPQ/viewform?usp=sf_link")=env.t('familyPlansButton')