From c51c90ba41d4732e7ef0c25b76559f1732f5c64d Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabe@habitica.com>
Date: Thu, 9 May 2024 09:26:49 -0500
Subject: [PATCH] Squashed commit of the following:

commit 7d6320ee2d6e1dac5ac025c188162cba35ed49bf
Author: Sabe Jones <sabe@habitica.com>
Date:   Mon May 6 16:22:53 2024 -0500

    fix(faq): copy updates

commit 234870a7b2bc3b23ba2a044a1010fdc9b417bc45
Author: Sabe Jones <sabe@habitica.com>
Date:   Fri May 3 16:06:48 2024 -0500

    fix(faq): cleaner layout

commit 06f162cc7a6a2b94b916ae0514b08ede09e7a2dc
Author: Sabe Jones <sabe@habitica.com>
Date:   Tue Apr 30 17:21:50 2024 -0500

    feat(faq): Content Schedule notes
---
 website/client/src/assets/scss/faq.scss       |  52 ++
 .../src/components/shared/faqSidebar.vue      | 376 ++++++++++++++
 .../src/components/static/chatSunsetFaq.vue   | 475 +-----------------
 .../components/static/contentScheduleFaq.vue  | 108 ++++
 website/client/src/components/static/faq.vue  | 466 +----------------
 website/client/src/router/static-routes.js    |   8 +-
 website/common/locales/en/faq.json            |  64 ++-
 7 files changed, 632 insertions(+), 917 deletions(-)
 create mode 100644 website/client/src/assets/scss/faq.scss
 create mode 100644 website/client/src/components/shared/faqSidebar.vue
 create mode 100644 website/client/src/components/static/contentScheduleFaq.vue

diff --git a/website/client/src/assets/scss/faq.scss b/website/client/src/assets/scss/faq.scss
new file mode 100644
index 0000000000..3fd1252491
--- /dev/null
+++ b/website/client/src/assets/scss/faq.scss
@@ -0,0 +1,52 @@
+@import '~@/assets/scss/colors.scss';
+
+h1 {
+  margin-top: 0px;
+  line-height: 1.33;
+}
+
+li {
+  padding-bottom: 4px;
+
+  li {
+    &:first-of-type {
+      padding-top: 4px;
+    }
+    li li {
+      list-style-type: disc;
+    }
+  }
+}
+
+p {
+  margin-bottom: 21px;
+}
+
+ul {
+  padding-left: 20px;
+}
+
+.top-container {
+  width: 66.67%;
+  margin-top: 80px;
+  display: flex;
+
+  @media (max-width: 1024px) {
+    flex-wrap: wrap;
+  }
+}
+
+.main-text {
+  h3 {
+    font-size: 1.15em;
+    font-weight: 400;
+    line-height: 1.75;
+    color: $purple-200;
+  }
+
+  .body-text {
+    font-size: 1em;
+    color: $gray-10;
+    line-height: 1.71;
+  }
+}
\ No newline at end of file
diff --git a/website/client/src/components/shared/faqSidebar.vue b/website/client/src/components/shared/faqSidebar.vue
new file mode 100644
index 0000000000..df4e1374a8
--- /dev/null
+++ b/website/client/src/components/shared/faqSidebar.vue
@@ -0,0 +1,376 @@
+<template>
+  <div class="sidebar py-4 d-flex flex-column">
+    <!-- staff -->
+    <div class="ml-4">
+      <h2>
+        {{ $t('staff') }}
+      </h2>
+      <div class="d-flex flex-wrap">
+        <div
+          v-for="user in staff"
+          :key="user.uuid"
+          class="staff col-6 p-0"
+        >
+          <div class="d-flex">
+            <router-link
+              class="title"
+              :to="{'name': 'userProfile', 'params': {'userId': user.uuid}}"
+            >
+              {{ user.name }}
+            </router-link>
+            <div
+              v-if="user.type === 'Staff'"
+              class="svg-icon staff-icon ml-1"
+              v-html="icons.tierStaff"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- player tiers -->
+    <div class="ml-4">
+      <h2 class="mt-4 mb-1">
+        {{ $t('playerTiers') }}
+      </h2>
+      <ul class="tier-list">
+        <li
+          v-once
+          class="tier1 d-flex justify-content-center"
+        >
+          {{ $t('tier1') }}
+          <div
+            class="svg-icon ml-1"
+            v-html="icons.tier1"
+          ></div>
+        </li>
+        <li
+          v-once
+          class="tier2 d-flex justify-content-center"
+        >
+          {{ $t('tier2') }}
+          <div
+            class="svg-icon ml-1"
+            v-html="icons.tier2"
+          ></div>
+        </li>
+        <li
+          v-once
+          class="tier3 d-flex justify-content-center"
+        >
+          {{ $t('tier3') }}
+          <div
+            class="svg-icon ml-1"
+            v-html="icons.tier3"
+          ></div>
+        </li>
+        <li
+          v-once
+          class="tier4 d-flex justify-content-center"
+        >
+          {{ $t('tier4') }}
+          <div
+            class="svg-icon ml-1"
+            v-html="icons.tier4"
+          ></div>
+        </li>
+        <li
+          v-once
+          class="tier5 d-flex justify-content-center"
+        >
+          {{ $t('tier5') }}
+          <div
+            class="svg-icon ml-1"
+            v-html="icons.tier5"
+          ></div>
+        </li>
+        <li
+          v-once
+          class="tier6 d-flex justify-content-center"
+        >
+          {{ $t('tier6') }}
+          <div
+            class="svg-icon ml-1"
+            v-html="icons.tier6"
+          ></div>
+        </li>
+        <li
+          v-once
+          class="tier7 d-flex justify-content-center"
+        >
+          {{ $t('tier7') }}
+          <div
+            class="svg-icon ml-1"
+            v-html="icons.tier7"
+          ></div>
+        </li>
+        <li
+          v-once
+          class="moderator d-flex justify-content-center"
+        >
+          {{ $t('tierModerator') }}
+          <div
+            class="svg-icon ml-1"
+            v-html="icons.tierMod"
+          ></div>
+        </li>
+        <li
+          v-once
+          class="staff d-flex justify-content-center"
+        >
+          {{ $t('tierStaff') }}
+          <div
+            class="svg-icon ml-1"
+            v-html="icons.tierStaff"
+          ></div>
+        </li>
+        <li
+          v-once
+          class="npc d-flex justify-content-center"
+        >
+          {{ $t('tierNPC') }}
+        </li>
+      </ul>
+    </div>
+    <!-- Daniel in sweet, sweet retirement with Jorts -->
+    <div>
+      <div class="gradient">
+      </div>
+      <div
+        class="grassy-meadow-backdrop"
+        :style="{'background-image': imageURLs.background}"
+      >
+        <div
+          class="daniel_front"
+          :style="{'background-image': imageURLs.npc}"
+        ></div>
+        <div
+          class="pixel-border"
+          :style="{'background-image': imageURLs.pixel_border}"
+        ></div>
+      </div>
+    </div>
+
+    <!-- email admin -->
+    <div class="d-flex flex-column justify-content-center">
+      <div class="question mx-auto">
+        {{ $t('anotherQuestion') }}
+      </div>
+      <div
+        class="contact mx-auto"
+      >
+        <p v-html="$t('contactAdmin')"></p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .sidebar {
+    height: fit-content;
+    width: 330px;
+    background-color: $gray-700;
+    border-radius: 16px;
+
+    h2 {
+      color: $gray-10;
+      font-family: Roboto;
+      font-size: 14px;
+      font-weight: bold;
+      line-height: 1.71;
+    }
+
+    .staff {
+      .staff-icon {
+        width: 10px;
+        margin-top: 5px;
+      }
+
+      .title {
+        height: 24px;
+        color: $purple-300;
+        font-weight: bold;
+        display: inline-block;
+        margin-bottom: 4px;
+      }
+    }
+
+    .tier-list {
+      list-style-type: none;
+      padding: 0;
+      width: 282px;
+      font-size: 1em !important;
+
+        li {
+          height: 40px;
+          border-radius: 4px;
+          border: solid 1px $gray-500;
+          text-align: center;
+          padding: 8px 0;
+          margin-bottom: 8px;
+          margin-right: 4px;
+          font-weight: bold;
+          line-height: 1.71;
+        }
+
+      .tier1 {
+        color: #c42870;
+        .svg-icon {
+          width: 11px;
+          margin-top: 5px;
+        }
+      }
+
+      .tier2 {
+        color: #b01515;
+        .svg-icon {
+          width: 11px;
+          margin-top: 5px;
+        }
+      }
+
+      .tier3 {
+        color: #d70e14;
+        .svg-icon {
+          width: 13px;
+          margin-top: 4px;
+        }
+      }
+
+      .tier4 {
+        color: #c24d00;
+        .svg-icon {
+          width: 13px;
+          margin-top: 4px;
+        }
+      }
+
+      .tier5 {
+        color: #9e650f;
+        .svg-icon {
+          width: 8px;
+          margin-top: 7px;
+        }
+      }
+
+      .tier6 {
+        color: #2b8363;
+        .svg-icon {
+          width: 8px;
+          margin-top: 7px;
+        }
+      }
+
+      .tier7 {
+        color: #167e87;
+        .svg-icon {
+          width: 12px;
+          margin-top: 4px;
+        }
+      }
+
+      .moderator {
+        color: #277eab;
+        .svg-icon {
+          width: 13px;
+          margin-top: 3px;
+        }
+      }
+
+      .staff {
+        color: #6133b4;
+        .svg-icon {
+          width: 10px;
+          margin-top: 7px;
+        }
+      }
+
+      .npc {
+        color: $black;
+      }
+    }
+
+    .gradient {
+      position: absolute;
+      width: 330px;
+      height: 100px;
+      margin: -1px 0 116px;
+      background-image: linear-gradient(to bottom, $gray-700 0%, rgba(249, 249, 249, 0) 100%);
+    }
+
+    .grassy-meadow-backdrop {
+      background-repeat: repeat-x;
+      width: 330px;
+      height: 246px;
+    }
+
+    .daniel_front {
+      height: 246px;
+      width: 330px;
+      background-repeat: no-repeat;
+      margin: 0 auto;
+    }
+
+    .pixel-border {
+      width: 330px;
+      height: 30px;
+      background-repeat: no-repeat;
+      position: absolute;
+      margin-top: -30px;
+    }
+
+    .question {
+      font-size: 1em;
+      font-weight: bold;
+      line-height: 1.71;
+      color: $gray-10;
+      margin-top: 24px;
+    }
+
+    .contact p {
+      font-size: 1em;
+      margin-bottom: 0px;
+    }
+  }
+</style>
+
+<script>
+import tier1 from '@/assets/svg/tier-1.svg';
+import tier2 from '@/assets/svg/tier-2.svg';
+import tier3 from '@/assets/svg/tier-3.svg';
+import tier4 from '@/assets/svg/tier-4.svg';
+import tier5 from '@/assets/svg/tier-5.svg';
+import tier6 from '@/assets/svg/tier-6.svg';
+import tier7 from '@/assets/svg/tier-7.svg';
+import tierMod from '@/assets/svg/tier-mod.svg';
+import tierNPC from '@/assets/svg/tier-npc.svg';
+import tierStaff from '@/assets/svg/tier-staff.svg';
+import staffList from '../../libs/staffList';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        tier1,
+        tier2,
+        tier3,
+        tier4,
+        tier5,
+        tier6,
+        tier7,
+        tierMod,
+        tierNPC,
+        tierStaff,
+      }),
+      imageURLs: {
+        background: 'url(/static/npc/normal/tavern_background.png)',
+        npc: 'url(/static/npc/normal/tavern_npc.png)',
+        pixel_border: 'url(/static/npc/normal/pixel_border.png)',
+      },
+      staff: staffList,
+    };
+  },
+};
+</script>
diff --git a/website/client/src/components/static/chatSunsetFaq.vue b/website/client/src/components/static/chatSunsetFaq.vue
index c7cd1f6089..9d85a9352d 100644
--- a/website/client/src/components/static/chatSunsetFaq.vue
+++ b/website/client/src/components/static/chatSunsetFaq.vue
@@ -8,7 +8,7 @@
         </h1>
       </div>
       <div class="body-text">
-        <p v-html="$t('sunsetFaqPara1')"></p>  <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara1')"></p>
         <p>{{ $t('sunsetFaqPara2') }}</p>
         <p>{{ $t('sunsetFaqPara3') }}</p>
         <p>{{ $t('sunsetFaqPara4') }}</p>
@@ -66,7 +66,7 @@
         </h3>
       </div>
       <div class="body-text">
-        <p v-html="$t('sunsetFaqPara9')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara9')"></p>
       </div>
 
       <!-- Can I access guild chats? Or banked Gems? -->
@@ -105,14 +105,14 @@
         </h3>
       </div>
       <div class="body-text">
-        <p v-html="$t('sunsetFaqPara12')"></p> <!-- there's html in here -->
-        <p v-html="$t('sunsetFaqPara13')"></p> <!-- there's html in here -->
-        <p v-html="$t('sunsetFaqPara14')"></p> <!-- there's html in here -->
-        <p v-html="$t('sunsetFaqPara15')"></p> <!-- there's html in here -->
-        <p v-html="$t('sunsetFaqPara16')"></p> <!-- there's html in here -->
-        <p v-html="$t('sunsetFaqPara17')"></p> <!-- there's html in here -->
-        <p v-html="$t('sunsetFaqPara18')"></p> <!-- there's html in here -->
-        <p v-html="$t('sunsetFaqPara19')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara12')"></p>
+        <p v-html="$t('sunsetFaqPara13')"></p>
+        <p v-html="$t('sunsetFaqPara14')"></p>
+        <p v-html="$t('sunsetFaqPara15')"></p>
+        <p v-html="$t('sunsetFaqPara16')"></p>
+        <p v-html="$t('sunsetFaqPara17')"></p>
+        <p v-html="$t('sunsetFaqPara18')"></p>
+        <p v-html="$t('sunsetFaqPara19')"></p>
       </div>
 
       <!-- Challenges -->
@@ -138,9 +138,9 @@
       </div>
       <div class="body-text">
         <ul>
-          <li v-html="$t('sunsetFaqList8')"></li> <!-- there's html in here -->
-          <li v-html="$t('sunsetFaqList9')"></li> <!-- there's html in here -->
-          <li v-html="$t('sunsetFaqList10')"></li> <!-- there's html in here -->
+          <li v-html="$t('sunsetFaqList8')"></li>
+          <li v-html="$t('sunsetFaqList9')"></li>
+          <li v-html="$t('sunsetFaqList10')"></li>
         </ul>
       </div>
 
@@ -154,459 +154,24 @@
         <p v-html="$t('sunsetFaqPara20')"></p>
       </div>
     </div>
-
-    <!-- sidebar -->
-    <div class="sidebar py-4 d-flex flex-column">
-      <!-- staff -->
-      <div class="ml-4">
-        <h2>
-          {{ $t('staff') }}
-        </h2>
-        <div class="d-flex flex-wrap">
-          <div
-            v-for="user in staff"
-            :key="user.uuid"
-            class="staff col-6 p-0"
-          >
-            <div class="d-flex">
-              <router-link
-                class="title"
-                :to="{'name': 'userProfile', 'params': {'userId': user.uuid}}"
-              >
-                {{ user.name }}
-              </router-link>
-              <div
-                v-if="user.type === 'Staff'"
-                class="svg-icon staff-icon ml-1"
-                v-html="icons.tierStaff"
-              ></div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- player tiers -->
-      <div class="ml-4">
-        <h2 class="mt-4 mb-1">
-          {{ $t('playerTiers') }}
-        </h2>
-        <ul class="tier-list">
-          <li
-            v-once
-            class="tier1 d-flex justify-content-center"
-          >
-            {{ $t('tier1') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tier1"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="tier2 d-flex justify-content-center"
-          >
-            {{ $t('tier2') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tier2"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="tier3 d-flex justify-content-center"
-          >
-            {{ $t('tier3') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tier3"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="tier4 d-flex justify-content-center"
-          >
-            {{ $t('tier4') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tier4"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="tier5 d-flex justify-content-center"
-          >
-            {{ $t('tier5') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tier5"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="tier6 d-flex justify-content-center"
-          >
-            {{ $t('tier6') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tier6"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="tier7 d-flex justify-content-center"
-          >
-            {{ $t('tier7') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tier7"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="moderator d-flex justify-content-center"
-          >
-            {{ $t('tierModerator') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tierMod"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="staff d-flex justify-content-center"
-          >
-            {{ $t('tierStaff') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tierStaff"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="npc d-flex justify-content-center"
-          >
-            {{ $t('tierNPC') }}
-          </li>
-        </ul>
-      </div>
-      <!-- Daniel in sweet, sweet retirement with Jorts -->
-      <div>
-        <div class="gradient">
-        </div>
-        <div
-          class="grassy-meadow-backdrop"
-          :style="{'background-image': imageURLs.background}"
-        >
-          <div
-            class="daniel_front"
-            :style="{'background-image': imageURLs.npc}"
-          ></div>
-          <div
-            class="pixel-border"
-            :style="{'background-image': imageURLs.pixel_border}"
-          ></div>
-        </div>
-      </div>
-
-      <!-- email admin -->
-      <div class="d-flex flex-column justify-content-center">
-        <div class="question mx-auto">
-          {{ $t('anotherQuestion') }}
-        </div>
-        <div
-          class="contact mx-auto"
-        >
-          <p v-html="$t('contactAdmin')"></p> <!-- there's html in here -->
-        </div>
-      </div>
-    </div>
-
-    <!-- final div! -->
+    <faq-sidebar />
   </div>
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
-
-  h1 {
-    margin-top: 0px;
-    line-height: 1.33;
-  }
-
-  li {
-    padding-bottom: 16px;
-
-    &::marker {
-      size: 0.5em;
-    }
-  }
-
-  p {
-    margin-bottom: 21px;
-  }
-
-  ul {
-    padding-left: 20px;
-  }
-
-  .top-container {
-    width: 66.67%;
-    margin-top: 80px;
-    display: flex;
-
-    @media (max-width: 1024px) {
-      flex-wrap: wrap;
-    }
-  }
-
-  .main-text {
-    .body-text {
-      font-size: 1em;
-      color: $gray-10;
-      line-height: 1.71;
-    }
-
-    .headings {
-      font-size: 1.15em;
-      font-weight: 400;
-      line-height: 1.75;
-      color: $purple-200;
-    }
-  }
-
-  .sidebar {
-    height: fit-content;
-    width: 330px;
-    background-color: $gray-700;
-    border-radius: 16px;
-
-    h2 {
-      color: $gray-10;
-      font-family: Roboto;
-      font-size: 14px;
-      font-weight: bold;
-      line-height: 1.71;
-    }
-
-    .staff {
-      .staff-icon {
-        width: 10px;
-        margin-top: 5px;
-      }
-
-      .title {
-        height: 24px;
-        color: $purple-300;
-        font-weight: bold;
-        display: inline-block;
-        margin-bottom: 4px;
-      }
-    }
-
-    .tier-list {
-      list-style-type: none;
-      padding: 0;
-      width: 282px;
-      font-size: 1em !important;
-
-      li {
-        height: 40px;
-        border-radius: 4px;
-        border: solid 1px $gray-500;
-        text-align: center;
-        padding: 8px 0;
-        margin-bottom: 8px;
-        margin-right: 4px;
-        font-weight: bold;
-        line-height: 1.71;
-      }
-
-      .tier1 {
-        color: #c42870;
-        .svg-icon {
-          width: 11px;
-          margin-top: 5px;
-        }
-      }
-
-      .tier2 {
-        color: #b01515;
-        .svg-icon {
-          width: 11px;
-          margin-top: 5px;
-        }
-      }
-
-      .tier3 {
-        color: #d70e14;
-        .svg-icon {
-          width: 13px;
-          margin-top: 4px;
-        }
-      }
-
-      .tier4 {
-        color: #c24d00;
-        .svg-icon {
-          width: 13px;
-          margin-top: 4px;
-        }
-      }
-
-      .tier5 {
-        color: #9e650f;
-        .svg-icon {
-          width: 8px;
-          margin-top: 7px;
-        }
-      }
-
-      .tier6 {
-        color: #2b8363;
-        .svg-icon {
-          width: 8px;
-          margin-top: 7px;
-        }
-      }
-
-      .tier7 {
-        color: #167e87;
-        .svg-icon {
-          width: 12px;
-          margin-top: 4px;
-        }
-      }
-
-      .moderator {
-        color: #277eab;
-        .svg-icon {
-          width: 13px;
-          margin-top: 3px;
-        }
-      }
-
-      .staff {
-        color: #6133b4;
-        .svg-icon {
-          width: 10px;
-          margin-top: 7px;
-        }
-      }
-
-      .npc {
-        color: $black;
-      }
-    }
-
-    .gradient {
-      position: absolute;
-      width: 330px;
-      height: 100px;
-      margin: -1px 0 116px;
-      background-image: linear-gradient(to bottom, $gray-700 0%, rgba(249, 249, 249, 0) 100%);
-    }
-
-    .grassy-meadow-backdrop {
-      background-repeat: repeat-x;
-      width: 330px;
-      height: 246px;
-    }
-
-    .daniel_front {
-      height: 246px;
-      width: 330px;
-      background-repeat: no-repeat;
-      margin: 0 auto;
-    }
-
-    .pixel-border {
-      width: 330px;
-      height: 30px;
-      background-repeat: no-repeat;
-      position: absolute;
-      margin-top: -30px;
-    }
-
-    .question {
-      font-size: 1em;
-      font-weight: bold;
-      line-height: 1.71;
-      color: $gray-10;
-      margin-top: 24px;
-    }
-
-    .contact p {
-      font-size: 1em;
-      margin-bottom: 0px;
-    }
-  }
+  @import '~@/assets/scss/faq.scss';
 </style>
 
 <script>
-import find from 'lodash/find';
-import { mapState } from '@/libs/store';
-
-import tier1 from '@/assets/svg/tier-1.svg';
-import tier2 from '@/assets/svg/tier-2.svg';
-import tier3 from '@/assets/svg/tier-3.svg';
-import tier4 from '@/assets/svg/tier-4.svg';
-import tier5 from '@/assets/svg/tier-5.svg';
-import tier6 from '@/assets/svg/tier-6.svg';
-import tier7 from '@/assets/svg/tier-7.svg';
-import tierMod from '@/assets/svg/tier-mod.svg';
-import tierNPC from '@/assets/svg/tier-npc.svg';
-import tierStaff from '@/assets/svg/tier-staff.svg';
-import staffList from '../../libs/staffList';
+import FaqSidebar from '@/components/shared/faqSidebar';
 
 export default {
-  data () {
-    return {
-      icons: Object.freeze({
-        tier1,
-        tier2,
-        tier3,
-        tier4,
-        tier5,
-        tier6,
-        tier7,
-        tierMod,
-        tierNPC,
-        tierStaff,
-      }),
-      group: {
-        chat: [],
-      },
-      sections: {
-        worldBoss: true,
-      },
-      staff: staffList,
-    };
+  components: {
+    FaqSidebar,
   },
-
-  computed: {
-    ...mapState({
-      currentEventList: 'worldState.data.currentEventList',
-    }),
-    imageURLs () {
-      const currentEvent = find(this.currentEventList, event => Boolean(event.season));
-      if (!currentEvent) {
-        return {
-          background: 'url(/static/npc/normal/tavern_background.png)',
-          npc: 'url(/static/npc/normal/tavern_npc.png)',
-          pixel_border: 'url(/static/npc/normal/pixel_border.png)',
-        };
-      }
-      return {
-        background: `url(/static/npc/${currentEvent.season}/tavern_background.png)`,
-        npc: `url(/static/npc/${currentEvent.season}/tavern_npc.png)`,
-        pixel_border: 'url(/static/npc/normal/pixel_border.png)',
-      };
-    },
-  },
-
-  async mounted () {
+  mounted () {
     this.$store.dispatch('common:setTitle', {
-      subSection: this.$t('faq/taverns-and-guilds'),
+      section: this.$t('sunsetFaqTitle'),
     });
     document.body.style.background = '#ffffff';
   },
diff --git a/website/client/src/components/static/contentScheduleFaq.vue b/website/client/src/components/static/contentScheduleFaq.vue
new file mode 100644
index 0000000000..cf4d1ea744
--- /dev/null
+++ b/website/client/src/components/static/contentScheduleFaq.vue
@@ -0,0 +1,108 @@
+<template>
+  <div v-once class="top-container mx-auto">
+    <div class="main-text mr-4">
+      <div class="title-details">
+        <h1>{{ $t('contentFaqTitle') }}</h1>
+      </div>
+      <div class="body-text">
+        <p>{{ $t('contentFaqPara0') }}</p>
+        <p>{{ $t('contentFaqPara1') }}</p>
+      </div>
+      <h3>{{ $t('contentQuestion0') }}</h3>
+      <ul>
+        <li>{{ $t('contentAnswer00') }}</li>
+        <li v-html="$t('contentAnswer01')"></li>
+        <li v-html="$t('contentAnswer02')"></li>
+        <li v-html="$t('contentAnswer03')"></li>
+      </ul>
+      <h3>{{ $t('contentQuestion1') }}</h3>
+      <ul>
+        <li>{{ $t('contentAnswer10') }}</li>
+        <li>{{ $t('contentAnswer11') }}</li>
+        <li>{{ $t('contentAnswer12') }}</li>
+      </ul>
+      <h3>{{ $t('contentQuestion2') }}</h3>
+      <ul>
+        <li>{{ $t('contentAnswer20') }}
+          <ul>
+            <li v-html="$t('contentAnswer200')"></li>
+            <li v-html="$t('contentAnswer201')"></li>
+            <li v-html="$t('contentAnswer202')"></li>
+            <li v-html="$t('contentAnswer203')"></li>
+          </ul>
+        </li>
+        <li>{{ $t('contentAnswer21') }}</li>
+        <li>{{ $t('contentAnswer22') }}</li>
+      </ul>
+      <h3>{{ $t('contentQuestion3') }}</h3>
+      <p>{{ $t('contentAnswer30') }}</p>
+      <ul>
+        <li v-html="$t('contentAnswer300')"></li>
+        <li v-html="$t('contentAnswer301')"></li>
+        <li v-html="$t('contentAnswer302')"></li>
+        <li v-html="$t('contentAnswer303')"></li>
+      </ul>
+      <h3>{{ $t('contentQuestion4') }}</h3>
+      <p>{{ $t('contentAnswer40') }}</p>
+      <ul>
+        <li>{{ $t('contentAnswer400') }}</li>
+        <li>{{ $t('contentAnswer401') }}</li>
+        <li>{{ $t('contentAnswer402') }}</li>
+        <li>{{ $t('contentAnswer403') }}</li>
+      </ul>
+      <h3>{{ $t('contentAnswer41') }}</h3>
+      <p>{{ $t('contentAnswer410') }}</p>
+      <h3>{{ $t('contentQuestion5') }}</h3>
+      <ul>
+        <li>{{ $t('contentAnswer50') }}
+          <ul>
+            <li>{{ $t('backgrounds') }}</li>
+            <li>{{ $t('contentAnswer501') }}</li>
+            <li>{{ $t('contentAnswer502') }}</li>
+            <li>{{ $t('shirts') }}</li>
+          </ul>
+        </li>
+        <li>{{ $t('contentAnswer51') }}</li>
+        <li>{{ $t('contentAnswer52') }}</li>
+        <li>{{ $t('contentAnswer53') }}</li>
+      </ul>
+      <h3>{{ $t('contentQuestion6') }}</h3>
+      <p>{{ $t('contentAnswer60') }}</p>
+      <ul>
+        <li>{{ $t('contentAnswer61') }}</li>
+        <li>{{ $t('contentAnswer62') }}</li>
+        <li>{{ $t('contentAnswer63') }}</li>
+      </ul>
+      <h3>{{ $t('contentQuestion7') }}</h3>
+      <ul>
+        <li>{{ $t('contentAnswer70') }}</li>
+        <li>{{ $t('contentAnswer71') }}</li>
+      </ul>
+      <p v-html="$t('contentFaqPara3',
+        { mailto: '<a href=mailto:admin@habitica.com>admin@habitica.com</a>'}
+      )"></p>
+    </div>
+    <faq-sidebar />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/faq.scss';
+</style>
+
+<script>
+import FaqSidebar from '@/components/shared/faqSidebar';
+
+export default {
+  components: {
+    FaqSidebar,
+  },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('faq'),
+      subSection: this.$t('contentReleaseChanges'),
+    });
+    document.body.style.background = '#ffffff';
+  },
+};
+</script>
diff --git a/website/client/src/components/static/faq.vue b/website/client/src/components/static/faq.vue
index 88e9d04a1a..ea4228c834 100644
--- a/website/client/src/components/static/faq.vue
+++ b/website/client/src/components/static/faq.vue
@@ -67,441 +67,22 @@
         </div>
       </div>
     </div>
-
-    <!-- sidebar -->
-    <div class="sidebar py-4 d-flex flex-column">
-      <!-- staff -->
-      <div class="ml-4">
-        <h2>
-          {{ $t('staff') }}
-        </h2>
-        <div class="d-flex flex-wrap">
-          <div
-            v-for="user in staff"
-            :key="user.uuid"
-            class="staff col-6 p-0"
-          >
-            <div class="d-flex">
-              <router-link
-                class="title"
-                :to="{'name': 'userProfile', 'params': {'userId': user.uuid}}"
-              >
-                {{ user.name }}
-              </router-link>
-              <div
-                v-if="user.type === 'Staff'"
-                class="svg-icon staff-icon ml-1"
-                v-html="icons.tierStaff"
-              ></div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- player tiers -->
-      <div class="ml-4">
-        <h2 class="mt-4 mb-1">
-          {{ $t('playerTiers') }}
-        </h2>
-        <ul class="tier-list">
-          <li
-            v-once
-            class="tier1 d-flex justify-content-center"
-          >
-            {{ $t('tier1') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tier1"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="tier2 d-flex justify-content-center"
-          >
-            {{ $t('tier2') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tier2"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="tier3 d-flex justify-content-center"
-          >
-            {{ $t('tier3') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tier3"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="tier4 d-flex justify-content-center"
-          >
-            {{ $t('tier4') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tier4"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="tier5 d-flex justify-content-center"
-          >
-            {{ $t('tier5') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tier5"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="tier6 d-flex justify-content-center"
-          >
-            {{ $t('tier6') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tier6"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="tier7 d-flex justify-content-center"
-          >
-            {{ $t('tier7') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tier7"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="moderator d-flex justify-content-center"
-          >
-            {{ $t('tierModerator') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tierMod"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="staff d-flex justify-content-center"
-          >
-            {{ $t('tierStaff') }}
-            <div
-              class="svg-icon ml-1"
-              v-html="icons.tierStaff"
-            ></div>
-          </li>
-          <li
-            v-once
-            class="npc d-flex justify-content-center"
-          >
-            {{ $t('tierNPC') }}
-          </li>
-        </ul>
-      </div>
-      <!-- Daniel in sweet, sweet retirement with Jorts -->
-      <div>
-        <div class="gradient">
-        </div>
-        <div
-          class="grassy-meadow-backdrop"
-          :style="{'background-image': imageURLs.background}"
-        >
-          <div
-            class="daniel_front"
-            :style="{'background-image': imageURLs.npc}"
-          ></div>
-          <div
-            class="pixel-border"
-            :style="{'background-image': imageURLs.pixel_border}"
-          ></div>
-        </div>
-      </div>
-      <!-- email admin -->
-      <div class="d-flex flex-column justify-content-center">
-        <div class="question mx-auto">
-          {{ $t('anotherQuestion') }}
-        </div>
-        <div
-          class="contact mx-auto"
-        >
-          <p v-html="$t('contactAdmin')"></p> <!-- there's html in here -->
-        </div>
-      </div>
-    </div>
+    <faq-sidebar />
   </div>
 </template>
 
-<style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
-
-  h1 {
-    line-height: 1.33;
-    margin-top: 0px;
-  }
-
-  h2 {
-    color: $gray-10;
-    margin-top: 24px;
-
-  }
-  li {
-    padding-bottom: 16px;
-
-    &::marker {
-      size: 0.5em;
-    }
-  }
-
-  p {
-    margin-bottom: 21px;
-  }
-
-  ul {
-    padding-left: 20px;
-  }
-
-  .top-container {
-    display: flex;
-    margin-top: 80px;
-    width: 66.67%;
-
-    @media (max-width: 1024px) {
-      flex-wrap: wrap;
-    }
-  }
-
-  .main-text {
-    .body-text {
-      color: $gray-10;
-      font-size: 14px;
-      line-height: 1.71;
-    }
-
-    .headings {
-      color: $purple-200;
-      font-size: 16px;
-      font-weight: 400;
-      line-height: 1.75;
-    }
-  }
-
-  .faq-question {
-    a {
-      color: $purple-200;
-      text-decoration: none;
-    }
-
-    h3 {
-      cursor: pointer;
-      font-size: 16px;
-      font-weight: normal;
-      line-height: 1.75;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-
-    .card-body {
-      font-size: 14px;
-      line-height: 1.71;
-      margin-bottom: 16px;
-      padding: 0;
-    }
-  }
-
-  .sidebar {
-    height: fit-content;
-    background-color: $gray-700;
-    border-radius: 16px;
-    width: 330px;
-    margin-bottom: 24px;
-
-    h2 {
-      color: $gray-10;
-      font-family: Roboto;
-      font-size: 14px;
-      font-weight: bold;
-      line-height: 1.71;
-      margin-top: 0px;
-    }
-
-    .staff {
-      .staff-icon {
-        margin-top: 5px;
-        width: 10px;
-      }
-
-      .title {
-        color: $purple-300;
-        display: inline-block;
-        font-weight: bold;
-        height: 24px;
-        margin-bottom: 4px;
-      }
-    }
-
-    .tier-list {
-      font-size: 1em !important;
-      list-style-type: none;
-      padding: 0;
-      width: 282px;
-
-      li {
-        border-radius: 4px;
-        border: solid 1px $gray-500;
-        font-weight: bold;
-        height: 40px;
-        line-height: 1.71;
-        margin-bottom: 8px;
-        margin-right: 4px;
-        padding: 8px 0;
-        text-align: center;
-      }
-
-      .tier1 {
-        color: #c42870;
-        .svg-icon {
-          margin-top: 5px;
-          width: 11px;
-        }
-      }
-
-      .tier2 {
-        color: #b01515;
-        .svg-icon {
-          margin-top: 5px;
-          width: 11px;
-        }
-      }
-
-      .tier3 {
-        color: #d70e14;
-        .svg-icon {
-          margin-top: 4px;
-          width: 13px;
-        }
-      }
-
-      .tier4 {
-        color: #c24d00;
-        .svg-icon {
-          margin-top: 4px;
-          width: 13px;
-        }
-      }
-
-      .tier5 {
-        color: #9e650f;
-        .svg-icon {
-          margin-top: 7px;
-          width: 8px;
-        }
-      }
-
-      .tier6 {
-        color: #2b8363;
-        .svg-icon {
-          margin-top: 7px;
-          width: 8px;
-        }
-      }
-
-      .tier7 {
-        color: #167e87;
-        .svg-icon {
-          margin-top: 4px;
-          width: 12px;
-        }
-      }
-
-      .moderator {
-        color: #277eab;
-        .svg-icon {
-          margin-top: 3px;
-          width: 13px;
-        }
-      }
-
-      .staff {
-        color: #6133b4;
-        .svg-icon {
-          margin-top: 7px;
-          width: 10px;
-        }
-      }
-
-      .npc {
-        color: $black;
-      }
-    }
-
-    .gradient {
-      background-image: linear-gradient(to bottom, $gray-700 0%, rgba(249, 249, 249, 0) 100%);
-      height: 100px;
-      position: absolute;
-      margin: -1px 0 116px;
-      width: 330px;
-    }
-
-    .grassy-meadow-backdrop {
-      background-repeat: repeat-x;
-      height: 246px;
-      width: 330px;
-    }
-
-    .daniel_front {
-      background-repeat: no-repeat;
-      height: 246px;
-      margin: 0 auto;
-      width: 330px;
-    }
-
-    .pixel-border {
-      background-repeat: no-repeat;
-      height: 30px;
-      margin-top: -30px;
-      position: absolute;
-      width: 330px;
-    }
-
-    .question {
-      color: $gray-10;
-      font-size: 1em;
-      font-weight: bold;
-      line-height: 1.71;
-      margin-top: 24px;
-    }
-
-    .contact p {
-      font-size: 1em;
-      margin-bottom: 0px;
-    }
-  }
-
+<style lang="scss" scoped>
+  @import '~@/assets/scss/faq.scss';
 </style>
 
 <script>
-import find from 'lodash/find';
+import FaqSidebar from '@/components/shared/faqSidebar';
 import markdownDirective from '@/directives/markdown';
-import { mapState } from '@/libs/store';
-
-import tier1 from '@/assets/svg/tier-1.svg';
-import tier2 from '@/assets/svg/tier-2.svg';
-import tier3 from '@/assets/svg/tier-3.svg';
-import tier4 from '@/assets/svg/tier-4.svg';
-import tier5 from '@/assets/svg/tier-5.svg';
-import tier6 from '@/assets/svg/tier-6.svg';
-import tier7 from '@/assets/svg/tier-7.svg';
-import tierMod from '@/assets/svg/tier-mod.svg';
-import tierNPC from '@/assets/svg/tier-npc.svg';
-import tierStaff from '@/assets/svg/tier-staff.svg';
-import staffList from '../../libs/staffList';
 
 export default {
+  components: {
+    FaqSidebar,
+  },
   directives: {
     markdown: markdownDirective,
   },
@@ -510,41 +91,8 @@ export default {
       faq: {},
       headings: [],
       stillNeedHelp: '',
-      icons: Object.freeze({
-        tier1,
-        tier2,
-        tier3,
-        tier4,
-        tier5,
-        tier6,
-        tier7,
-        tierMod,
-        tierNPC,
-        tierStaff,
-      }),
-      staff: staffList,
     };
   },
-  computed: {
-    ...mapState({
-      currentEventList: 'worldState.data.currentEventList',
-    }),
-    imageURLs () {
-      const currentEvent = find(this.currentEventList, event => Boolean(event.season));
-      if (!currentEvent) {
-        return {
-          background: 'url(/static/npc/normal/tavern_background.png)',
-          npc: 'url(/static/npc/normal/tavern_npc.png)',
-          pixel_border: 'url(/static/npc/normal/pixel_border.png)',
-        };
-      }
-      return {
-        background: `url(/static/npc/${currentEvent.season}/tavern_background.png)`,
-        npc: `url(/static/npc/${currentEvent.season}/tavern_npc.png)`,
-        pixel_border: 'url(/static/npc/normal/pixel_border.png)',
-      };
-    },
-  },
   async mounted () {
     this.$store.dispatch('common:setTitle', {
       section: this.$t('help'),
diff --git a/website/client/src/router/static-routes.js b/website/client/src/router/static-routes.js
index 805e6bef00..2967ce5842 100644
--- a/website/client/src/router/static-routes.js
+++ b/website/client/src/router/static-routes.js
@@ -10,6 +10,8 @@ const ClearBrowserDataPage = () => import(/* webpackChunkName: "static" */'@/com
 const CommunityGuidelinesPage = () => import(/* webpackChunkName: "static" */'@/components/static/communityGuidelines');
 const ContactPage = () => import(/* webpackChunkName: "static" */'@/components/static/contact');
 const FAQPage = () => import(/* webpackChunkName: "static" */'@/components/static/faq');
+const ChatSunsetFaq = () => import(/* webpackChunkName: "static" */'@/components/static/chatSunsetFaq');
+const ContentScheduleFaq = () => import(/* webpackChunkName: "static" */'@/components/static/contentScheduleFaq');
 const FeaturesPage = () => import(/* webpackChunkName: "static" */'@/components/static/features');
 const GroupPlansPage = () => import(/* webpackChunkName: "static" */'@/components/static/groupPlans');
 // Commenting out merch page see
@@ -19,7 +21,6 @@ const NewsPage = () => import(/* webpackChunkName: "static" */'@/components/stat
 const OverviewPage = () => import(/* webpackChunkName: "static" */'@/components/static/overview');
 const PressKitPage = () => import(/* webpackChunkName: "static" */'@/components/static/pressKit');
 const PrivacyPage = () => import(/* webpackChunkName: "static" */'@/components/static/privacy');
-const ChatSunsetFaq = () => import(/* webpackChunkName: "static" */'@/components/static/chatSunsetFaq');
 const TermsPage = () => import(/* webpackChunkName: "static" */'@/components/static/terms');
 
 export const STATIC_ROUTES = {
@@ -42,7 +43,10 @@ export const STATIC_ROUTES = {
       name: 'faq', path: 'faq', component: FAQPage, meta: { requiresLogin: false },
     },
     {
-      name: 'chatSunsetFaq', path: 'tavern-and-guilds', component: ChatSunsetFaq, meta: { requiresLogin: false },
+      name: 'chatSunsetFaq', path: 'faq/tavern-and-guilds', component: ChatSunsetFaq, meta: { requiresLogin: false },
+    },
+    {
+      name: 'contentScheduleFaq', path: 'faq/content-release-changes', component: ContentScheduleFaq, meta: { requiresLogin: false },
     },
     {
       name: 'features', path: 'features', component: FeaturesPage, meta: { requiresLogin: false },
diff --git a/website/common/locales/en/faq.json b/website/common/locales/en/faq.json
index 93979fde18..bd8737228d 100644
--- a/website/common/locales/en/faq.json
+++ b/website/common/locales/en/faq.json
@@ -195,6 +195,68 @@
   "sunsetFaqPara21": "Gems in the Guild Bank will be refunded to the leader of the Guild on August 8th when Guild Services end.",
 
   "anotherQuestion": "Have another question?",
-  "contactAdmin": "Contact <a href='mailto:admin@habitica.com'>admin@habitica.com</a>"
+  "contactAdmin": "Contact <a href='mailto:admin@habitica.com'>admin@habitica.com</a>",
 
+  "contentReleaseChanges": "Content Release Changes",
+
+  "contentFaqTitle": "Habitica Content Release Change FAQ",
+
+  "contentFaqPara0": "Habitica has so much fun and engaging content to offer, and we want everyone to be able to enjoy it all! Changes are coming to make it easier for new players to get started on their collection as well as for veteran players to complete theirs!",
+  "contentFaqPara1": "Want to know more? Read on below!",
+
+  "contentQuestion0": "What is changing?",
+  "contentAnswer00": "Magic Hatching Potions, re-released Backgrounds, past Subscriber Sets, and Pet Quests will switch out on a predictable monthly schedule.",
+  "contentAnswer01": "<strong>Grand Galas are being extended</strong> to be active throughout the whole season, along with all their Class gear, Avatar Customizations, and other goodies.",
+  "contentAnswer02": "Brand new <strong>Pet Quests, Magic Hatching Potion Quests, and Magic Hatching Potions</strong> will be released to fill out this new schedule!",
+  "contentAnswer03": "Backgrounds, Hair Colors, Hair Styles, Skins, Animal Ears, Animal Tails, and Shirts will now be purchasable from the brand new <strong>Customization Shop!</strong>",
+
+  "contentQuestion1": "Why is Habitica making these changes?",
+  "contentAnswer10": "Habitica has been around since 2013 (wow!) and over time we’ve released thousands of items players can collect. This can be overwhelming, especially for new players. We want to be sure that we showcase everything we have to offer, and that excellent items released earlier in our history aren’t overlooked.",
+  "contentAnswer11": "When new players join between Grand Galas they are often unaware of these events and miss out on the fun. We want to be sure all new players can join in on our seasonal festivities no matter when they choose to start their journeys.",
+  "contentAnswer12": "Players will have an easier time completing their collections with items releasing on a more predictable schedule.",
+
+  "contentQuestion2": "How are Grand Galas changing?",
+  "contentAnswer20": "There will always be a Grand Gala active every day of the year when the schedule changes go into effect.",
+  "contentAnswer200": "<strong>Summer Splash</strong>: June 21 to Sept 20",
+  "contentAnswer201": "<strong>Fall Festival</strong>: Sept 21 to Dec 20",
+  "contentAnswer202": "<strong>Winter Wonderland</strong>: Dec 21 to March 20",
+  "contentAnswer203": "<strong>Spring Fling</strong>: March 21 to June 20",
+  "contentAnswer21": "All Gala goodies (Class gear, Skins and Hair Colors, Transformation Items, Seasonal Quests) will be released at Gala start and will be available for the entire time the Gala is active.",
+  "contentAnswer22": "Magic Hatching Potions will no longer be tied to Galas and will instead be on their own monthly release schedule themed to the ongoing festivities.",
+
+  "contentQuestion3": "How is the content release schedule changing?",
+  "contentAnswer30": "Shops will rotate a selection of their items every month. This will help keep the amount of content in the shops manageable and easy to browse. The new schedule will offer fresh items to check out each month for newer players while creating a predictable schedule for veteran collectors.",
+  "contentAnswer300": "<strong>1st of each month:</strong> New Subscriber set is released. Subscriber sets available in the Time Travelers Shop rotate.",
+  "contentAnswer301": "<strong>7th of each month:</strong> New Enchanted Armoire items and one new Background released. Backgrounds available in the Customization Shop rotate.",
+  "contentAnswer302": "<strong>14th of each month:</strong> Pet Quests, Potion Quests, and Quest Bundles available in the Quest Shop rotate.",
+  "contentAnswer303": "<strong>21st of each month:</strong> Magic Hatching Potions available in the Market rotate.",
+
+  "contentQuestion4": "What brand-new content is coming?",
+  "contentAnswer40": "To fill this new schedule, we’ve been hard at work creating new items in a variety of categories including:",
+  "contentAnswer400": "Pet Quests",
+  "contentAnswer401": "Magic Hatching Potion Quests",
+  "contentAnswer402": "Magic Hatching Potions",
+  "contentAnswer403": "Summer Hair Colors",
+  "contentAnswer41": "What will these new additions be?",
+  "contentAnswer410": "Stick around to find out! Many of the new additions were highly requested and will be released throughout the year.",
+
+  "contentQuestion5": "What is the Customization Shop?",
+  "contentAnswer50": "The Customization Shop is the new home for all purchasable Avatar Customization items including:",
+  "contentAnswer501": "Skins",
+  "contentAnswer502": "Hair Colors and Styles",
+  "contentAnswer51": "Customizations you own (both standard and purchased) will be accessible from the current Avatar Customization interface.",
+  "contentAnswer52": "We hope this change will help players sort through the customizations they own when editing their avatar’s appearance while carrying over the familiar shop experience for other purchasable items.",
+  "contentAnswer53": "The Customization Shop will be found alongside the other shops in the Menu.",
+
+  "contentQuestion6": "What will happen to other seasonal events, like Habitoween, April Fools’ Day, and Birthday?",
+  "contentAnswer60": "All other current events will continue as normal! Everyone will still get their special rewards and themed food as they do now.",
+  "contentAnswer61": "Valentine’s Day and New Year cards will be released on set dates.",
+  "contentAnswer62": "Valentine’s Day Magic Hatching Potions are now worked into the monthly schedule.",
+  "contentAnswer63": "Wacky Pets will remain available throughout most of April.",
+
+  "contentQuestion7": "What about other items available in the Time Travelers Shop besides past Subscriber Sets?",
+  "contentAnswer70": "Backgrounds, Quests, Pets, and Mounts available in the Time Travelers Shop will remain available all year round.",
+  "contentAnswer71": "Stay tuned for further updates on planned improvements to the Time Travelers Shop experience.",
+
+  "contentFaqPara3": "If you have any questions not covered by the answers above, you can always contact our team at <%= mailto %>! We’re excited for this new content release schedule and looking forward to even more projects in the future to help make Habitica better for all players."
 }