ui(help): add subscription expiration help page

Author: gustavotoyota

apps/client/src/pages/home/Help/Help.vue

@@ -57,6 +57,12 @@
             What is the refund policy on DeepNotes?
           </router-link>
         </li>
+
+        <li>
+          <router-link :to="{ name: 'help/subscription-expiration' }">
+            What happens when my subscription expires?
+          </router-link>
+        </li>
       </ul>
 
       <Gap style="height: 80px" />

apps/client/src/pages/home/Help/Pages/SubscriptionExpiration.vue

@@ -0,0 +1,19 @@
+<template>
+  <div style="font-size: 28px; font-weight: bold">{{ title }}</div>
+
+  <Gap style="height: 36px" />
+
+  <div style="max-width: 500px">
+    When your subscription expires, all pages created during your subscription
+    becomes read-only. You will not be able to edit them, but you will still be
+    able to view them.
+  </div>
+</template>
+
+<script setup lang="ts">
+const title = 'What happens when my subscription expires?';
+
+useMeta(() => ({
+  title: `${title} - Help - DeepNotes`,
+}));
+</script>

apps/client/src/router/routes.ts

@@ -188,6 +188,18 @@ const routes: RouteRecordRaw[] = [
           },
         ],
       },
+      {
+        path: 'subscription-expiration',
+        component: () => import('src/pages/home/Help/HelpLayout.vue'),
+        children: [
+          {
+            path: '',
+            name: 'help/subscription-expiration',
+            component: () =>
+              import('src/pages/home/Help/Pages/SubscriptionExpiration.vue'),
+          },
+        ],
+      },
     ],
   },