Merge pull request #280 from DecentralCardGame/feat/275-create-about-…

…page

Feat/275 create about page

.fleet/settings.json

@@ -1,4 +1,6 @@
 {
     "backend.maxHeapSizeMb": 1568,
-    "editor.formatOnSave": true
+    "editor.formatOnSave": true,
+    "nodejs.editor.formatOnSave.stylelint.mode": "Auto",
+    "nodejs.editor.formatOnSave.eslint.glob": "{**/*,*}.{js,ts,jsx,tsx,vue}"
 }

src/components/elements/AboutProgressbar.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    class="bg-cc-red flex flex-row justify-center uppercase text-white text-xl max-md:flex-col"
+  >
+    <router-link
+      v-for="elem in elems"
+      :to="elem.routeName"
+      class="px-10 py-7 hover:underline"
+      active-class="font-bold"
+    >
+      {{ elem.display }}
+    </router-link>
+  </div>
+</template>
+<script lang="ts" setup>
+type NavigationElement = {
+  routeName: string;
+  display: string;
+};
+
+const elems: NavigationElement[] = [
+  { routeName: "/about/community", display: "Community" },
+  { routeName: "/about/roadmap", display: "Roadmap" },
+  { routeName: "/about/team", display: "Team" },
+  { routeName: "/about/tokens", display: "CC Tokens" },
+  { routeName: "/about/whitepaper", display: "Card Creator" },
+];
+</script>