play page implement and linked to it on other pages

src/components/modals/AirdropsModal.vue

@@ -96,7 +96,7 @@ export default {
         create: {
           text: "Create a ",
           linkText: "card draft.",
-          linkData: 'New Card'
+          linkData: 'CardCreator'
         },
         vote: {
           text: "Vote for a ",

src/router/index.ts

@@ -2,7 +2,7 @@ import { createRouter, createWebHashHistory } from "vue-router";
 
 const GalleryPage = () => import("@/views/GalleryPage.vue");
 const VotingResultsPage = () => import("@/views/VotingResultsPage.vue");
-const NewCardPage = () => import("@/views/CardCreatorPage.vue");
+const CardCreator = () => import("@/views/CardCreatorPage.vue");
 const AboutPage = () => import("@/views/AboutPage.vue");
 const NotFound = () => import("@/views/NotFound.vue");
 const RoadmapPage = () => import("@/views/RoadmapPage.vue");
@@ -16,6 +16,7 @@ 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 Play = () => import("@/views/Play.vue");
 
 const routes = [
   {
@@ -50,8 +51,8 @@ const routes = [
   },
   {
     path: "/cardCreator",
-    name: "New Card",
-    component: NewCardPage,
+    name: "CardCreator",
+    component: CardCreator,
     meta: { layout: "Default" },
   },
   {
@@ -65,6 +66,11 @@ const routes = [
     name: "Learn",
     component: Learn,
   },
+  {
+    path: "/play",
+    name: "Play",
+    component: Play,
+  },
   {
     path: "/team",
     name: "Team",

src/views/AboutPage.vue

@@ -59,7 +59,7 @@
           Crowd Control gives you full ownership. And we mean it.
           You own the cards which you acquire through play and participation.
           And furthermore you own the card prototypes which you design and create. Go to the
-          <router-link :to="{ name: 'New Card' }">
+          <router-link :to="{ name: 'CardCreator' }">
             Card Creator
           </router-link>
           to start creating.

src/views/LandingPage.vue

@@ -25,7 +25,7 @@
             >
               CREATE CARDS
             </RouterCCButton>
-            <RouterCCButton :type="ButtonType.BLACK" to="/p">
+            <RouterCCButton :type="ButtonType.BLACK" to="/play">
               Play the game
             </RouterCCButton>
           </div>
@@ -75,18 +75,29 @@
           </div>
         </div>
         <div class="flex pt-20 justify-evenly sm:px-32 flex-wrap gap-4">
-          <div v-for="cardBack in cardBacks" class="relative hover:scale-105">
-            <img
-              alt="cardback"
-              :src="cardBack.cardBack"
-              class="h-[20rem] drop-shadow-glowRed"
-            />
+
+          <div 
+            v-for="cardBack in cardBacks" 
+            class="relative hover:scale-105"
+            @click="router.push('/cardCreator')"
+          >
+            <router-link
+              :to="{ name: cardBack.route}"
+            >
+              <img
+                alt="cardback"
+                :src="cardBack.cardBack"
+                class="h-[20rem] drop-shadow-glowRed"
+              />
+            </router-link>
             <div class="absolute top-52 left-0 right-0 text-center">
               <p class="text-3xl font-bold">
                 {{ cardBack.heading }}
               </p>
               <p>{{ cardBack.text }}</p>
             </div>
+
+
           </div>
         </div>
       </div>
@@ -139,8 +150,8 @@ type CardBack = {
 };
 
 const cardBacks: CardBack[] = [
-  { cardBack: cardBack1, heading: "CREATE", text: "Assets, Games, Worlds" },
-  { cardBack: cardBack2, heading: "PLAY", text: "Games, Characters, Stories" },
+  { cardBack: cardBack1, heading: "CREATE", text: "Assets, Games, Worlds", route: "CardCreator" },
+  { cardBack: cardBack2, heading: "PLAY", text: "Games, Characters, Stories", route: "Play" },
   { cardBack: cardBack3, heading: "VOTE", text: "Balance, Decide, Govern" },
   { cardBack: cardBack4, heading: "OWN", text: "Earn, Collect, Trade" },
 ];

src/views/Learn.vue

@@ -14,7 +14,7 @@
             <BaseCCButton
               :type="ButtonType.RED"
             >
-              Open GitBook 
+              Open GitBook
             </BaseCCButton> 
             </a>
         </div>

src/views/Play.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">
+            Play the Game!
+          </p>
+          <p class="py-10 text-xl font-medium font-lg">
+            Our alpha version is currently in development <br>
+            and not publicly released :( <br>
+            We only do closed playtests at the moment. <br>
+            The button below will do nothing.
+          </p>
+            <BaseCCButton
+              :type="ButtonType.RED"
+            >
+              Download Gameclient
+            </BaseCCButton>
+        </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>