integrated constructionpage

DecentralCardGame · Jan 25, 2024 · 6a950d5 · 6a950d5
1 parent 652bb5d
commit 6a950d5
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 22 deletions.
diff --git a/src/components/elements/CCButton/LinkCCButton.vue b/src/components/elements/CCButton/LinkCCButton.vue
@@ -1,9 +1,11 @@
 <template>
-  <a :href="props.to" class="mx-auto">
-    <BaseCCButton :type="props.type">
-      <slot></slot>
-    </BaseCCButton>
-  </a>
+  <div>
+    <a :href="props.to" class="mx-auto">
+      <BaseCCButton :type="props.type">
+        <slot></slot>
+      </BaseCCButton>
+    </a>
+  </div>
 </template>
 
 <script setup lang="ts">

diff --git a/src/components/elements/CCButton/RouterCCButton.vue b/src/components/elements/CCButton/RouterCCButton.vue
@@ -1,9 +1,11 @@
 <template>
-  <router-link :to="props.to" class="mx-auto">
-    <BaseCCButton :type="props.type">
-      <slot></slot>
-    </BaseCCButton>
-  </router-link>
+  <div>
+    <router-link :to="props.to" class="mx-auto">
+      <BaseCCButton :type="props.type">
+        <slot></slot>
+      </BaseCCButton>
+    </router-link>
+  </div>
 </template>
 
 <script setup lang="ts">

diff --git a/src/components/partials/PageMenu.vue b/src/components/partials/PageMenu.vue
@@ -5,7 +5,7 @@
     /></router-link>
     <a class="grow" />
     <div class="my-auto max-md:hidden">
-      <RouterCCButton :type="ButtonType.RED"
+      <RouterCCButton :type="ButtonType.RED" to="/d"
         >Download Gameclient</RouterCCButton
       >
     </div>
@@ -55,9 +55,9 @@ type NavigationElement = {
 };
 
 const elems: NavigationElement[] = [
-  { routeName: "/", display: "Abc", highlighted: false },
-  { routeName: "def", display: "Def", highlighted: true },
-  { routeName: "ghi", display: "Ghi", highlighted: false },
+  { routeName: "/g", display: "Gallery", highlighted: false },
+  { routeName: "/s", display: "Sets and Boosters", highlighted: true },
+  { routeName: "/l", display: "Learn", highlighted: false },
 ];
 
 const state = reactive({

diff --git a/src/views/LandingPage.vue b/src/views/LandingPage.vue
@@ -9,15 +9,21 @@
       <div class="absolute top-20 m-auto left-0 right-0">
         <div class="flex text-center justify-center z-10">
           <div class="w-5/6 md:w-3/6">
-            <img :src="logoBig" alt="big cc logo" class="w-[100%] drop-shadow-header" />
+            <img
+              :src="logoBig"
+              alt="big cc logo"
+              class="w-[100%] drop-shadow-header"
+            />
             <p class="text-4xl text-white font-bold py-6">
               A trading card game made by players.
             </p>
             <br />
-            <BaseCCButton class="pb-4" :type="ButtonType.YELLOW"
+            <RouterCCButton class="pb-4" to="/c" :type="ButtonType.YELLOW"
               >CREATE CARDS
-            </BaseCCButton>
-            <BaseCCButton :type="ButtonType.WHITE">Play the game</BaseCCButton>
+            </RouterCCButton>
+            <RouterCCButton :type="ButtonType.WHITE" to="/b"
+              >Play the game</RouterCCButton
+            >
           </div>
         </div>
       </div>
@@ -39,10 +45,10 @@
         <div class="justify-self-center">
           <p class="text-6xl font-bold pb-6">New Sets and Boosters</p>
           <p class="text-3xl pb-6">Promoted Sets and Boosters</p>
-          <BaseCCButton class="pb-4" :type="ButtonType.BLACK"
+          <RouterCCButton class="pb-4" to="/b" :type="ButtonType.BLACK"
             >Buy Boosters
-          </BaseCCButton>
-          <BaseCCButton :type="ButtonType.BLACK">Visit Gallery</BaseCCButton>
+          </RouterCCButton>
+          <RouterCCButton to="/g" :type="ButtonType.BLACK">Visit Gallery</RouterCCButton>
         </div>
         <div>
           <img
@@ -86,7 +92,9 @@
             <p>collaboration. Learn the game and give us your review.</p>
           </div>
           <br />
-          <LinkCCButton :type="ButtonType.TEAL" to="https://discord.gg/ZKKbhUs">Join Us</LinkCCButton>
+          <LinkCCButton :type="ButtonType.TEAL" to="https://discord.gg/ZKKbhUs"
+            >Join Us</LinkCCButton
+          >
           <img
             alt="gameboard"
             class="object-contain w-[90%] md:w-[50%] drop-shadow-glowTeal mx-auto pt-20"
@@ -115,6 +123,7 @@ import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
 import { ButtonType } from "@/components/elements/CCButton/ButtonType";
 import FadeTeaser from "@/components/elements/FadeTeaser.vue";
 import LinkCCButton from "@/components/elements/CCButton/LinkCCButton.vue";
+import RouterCCButton from "@/components/elements/CCButton/RouterCCButton.vue";
 
 type CardBack = {
   cardBack: string;