feat: [#617] new static page with terms

http://localhost:3000/terms

It also add a link on the footer. Page content is laoded in markdown
format from the API (settings->website).

Author: josecelano

app.vue

@@ -12,7 +12,7 @@
     <div class="flex-grow" />
     <footer class="p-4 footer footer-center text-base-content">
       <div>
-        <p><a target="_blank" href="https://torrust.com" class="link link-hover"> Powered by Torrust </a> ⚡ <a target="_self" href="/license" class="link link-hover">Copyright © 2024</a></p>
+        <p><a target="_blank" href="https://torrust.com" class="link link-hover"> Powered by Torrust </a> ⚡ <a target="_self" href="/license" class="link link-hover">Copyright © 2024</a> &nbsp; <a target="_self" href="/terms" class="link link-hover">Terms</a></p>
       </div>
     </footer>
   </div>

package-lock.json

@@ -48,8 +48,8 @@
     "dompurify": "^3.1.4",
     "marked": "^12.0.2",
     "notiwind-ts": "^2.0.2",
-    "torrust-index-api-lib": "^3.0.0-beta",
-    "torrust-index-types-lib": "^3.0.0-beta",
+    "torrust-index-api-lib": "^3.0.0-beta.2",
+    "torrust-index-types-lib": "^3.0.0-beta.2",
     "uuid": "^9.0.1"
   }
 }

package.json

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <Markdown :source="pageContent" class="px-40 pt-2 pb-5 prose-h1:text-center max-w-none" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useSettings, useSeoMeta } from "#imports";
+
+const settings = useSettings();
+
+const pageTitle = ref("");
+const pageContent = ref("");
+
+watch(
+  () => settings.value,
+  (newSettings) => {
+    if (newSettings?.website?.terms?.page) {
+      pageTitle.value = newSettings.website.terms.page.title;
+      pageContent.value = newSettings.website.terms.page.content;
+    }
+  },
+  { immediate: true }
+);
+
+useSeoMeta({
+  title: () => `${pageTitle.value} - Torrent`
+});
+</script>
+
+<style scoped>
+
+</style>