implement learn page

src/components/partials/PageMenu.vue

@@ -72,7 +72,7 @@ type NavigationElement = {
 const elems: NavigationElement[] = [
   { routeName: "/gallery", display: "Gallery", highlighted: false },
   { routeName: "/s", display: "Sets and Boosters", highlighted: true },
-  { routeName: "/l", display: "Learn", highlighted: false },
+  { routeName: "/learn", display: "Learn", highlighted: false },
   { routeName: "/cardCreator", display: "Card Creator", highlighted: false },
 ];
 

src/router/index.ts

@@ -15,6 +15,7 @@ const CardView = () => import("@/views/AdvancedCardViewPage.vue");
 const GameclientAuthz = () => import("@/views/GameClientAuthzPage.vue");
 const Demo = () => import("@/views/Demo.vue");
 const Login = () => import("@/views/LoginPage.vue");
+const Learn = () => import("@/views/Learn.vue");
 
 const routes = [
   {
@@ -59,6 +60,11 @@ const routes = [
     meta: { layout: "Landing" },
     component: LandingPage,
   },
+  {
+    path: "/learn",
+    name: "Learn",
+    component: Learn,
+  },
   {
     path: "/team",
     name: "Team",

src/views/Learn.vue

@@ -0,0 +1,30 @@
+<template>
+  <div >
+    <FadeTeaser>
+      <div class="px-0 py-40 flex text-center justify-center">
+        <div>
+          <p class="text-5xl font-black text-red-600 font-lg">
+            How To Play
+          </p>
+          <p class="py-10 text-xl font-medium font-lg">
+            Here are the basics to get start playing. <br>
+            Visit our GitBook for advanced information!
+          </p>
+          <a href="https://crowdcontrol-network.gitbook.io/">  
+            <BaseCCButton
+              :type="ButtonType.RED"
+            >
+              Open GitBook 
+            </BaseCCButton> 
+            </a>
+        </div>
+      </div>
+    </FadeTeaser>
+  </div>
+</template>
+
+<script setup lang="ts">
+import FadeTeaser from "@/components/elements/FadeTeaser.vue";
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
+import { ButtonType } from "@/components/elements/CCButton/ButtonType";
+</script>