From 745e807ebe8390a7339b94865c1500416591de86 Mon Sep 17 00:00:00 2001
From: Patrick <patrick.wieth@googlemail.com>
Date: Mon, 11 Mar 2024 14:44:11 +0100
Subject: [PATCH] implement annas feedback

---
 src/components/elements/AbilityComponent.vue  |  6 +-
 .../elements/CCButton/BaseCCButton.vue        |  5 +-
 src/components/elements/Dropdown/Dropdown.vue |  2 +-
 src/components/elements/FadeTeaser.vue        |  2 +-
 src/components/partials/PageMenu.vue          | 13 ++--
 src/views/CardCreatorPage.vue                 | 72 +++++++++----------
 src/views/LandingPage.vue                     | 61 ++++++++--------
 src/views/Learn.vue                           |  4 +-
 src/views/NotFound.vue                        |  2 +-
 9 files changed, 87 insertions(+), 80 deletions(-)

diff --git a/src/components/elements/AbilityComponent.vue b/src/components/elements/AbilityComponent.vue
index ff6c3da6..9fd074e8 100644
--- a/src/components/elements/AbilityComponent.vue
+++ b/src/components/elements/AbilityComponent.vue
@@ -8,7 +8,7 @@
         v-for="(entry, index) in ability.interaction"
         id="interaction"
         :key="index"
-        class="text-[24px] flex flex-row justify-start items-center"
+        class="text-[16px] flex flex-row justify-start items-center"
       >
         <div
           id="pre"
@@ -66,7 +66,7 @@
         <div
           v-else
           id="btn.label"
-          class="m-2 py-2 px-4 text-[24px] text-normal uppercase bg-transparent hover:bg-white hover:bg-opacity-70 hover:text-[#D82027] border-2 border-gray-300 hover:cursor-pointer"
+          class="m-2 py-2 px-4 text-[16px] text-normal uppercase bg-transparent hover:bg-white hover:bg-opacity-70 hover:text-[#D82027] border-2 border-gray-300 hover:cursor-pointer"
           @click="showAbilityModal(ability, entry.btn)"
         >
           {{ entry.btn.label }}
@@ -74,7 +74,7 @@
         {{ entry.post }}
       </div>
       <div
-        class="m-2 py-2 px-4 text-[24px] text-center border-2 border-gray-300 bg-transparent cursor-pointer hover:bg-black hover:text-white border-2 border-gray-300"
+        class="m-2 py-2 px-4 text-[16px] text-center border-2 border-gray-300 bg-transparent cursor-pointer hover:bg-black hover:text-white border-2 border-gray-300"
         @click="deleteAbility()"
       >
         X
diff --git a/src/components/elements/CCButton/BaseCCButton.vue b/src/components/elements/CCButton/BaseCCButton.vue
index ee6d15b7..9a63518f 100644
--- a/src/components/elements/CCButton/BaseCCButton.vue
+++ b/src/components/elements/CCButton/BaseCCButton.vue
@@ -2,12 +2,13 @@
   <div>
     <button
       :class="[
-        'w-80',
-        'h-14',
+        'w-72',
+        'h-12',
         'rounded',
         'shadow-xl',
         'shadow-black/25',
         'text-center',
+        'text-base',
         'font-bold',
         'font-[roboto]',
         'uppercase',
diff --git a/src/components/elements/Dropdown/Dropdown.vue b/src/components/elements/Dropdown/Dropdown.vue
index d8ffe604..3ca8f0ba 100644
--- a/src/components/elements/Dropdown/Dropdown.vue
+++ b/src/components/elements/Dropdown/Dropdown.vue
@@ -8,7 +8,7 @@
     ]"
     @click="toggleDropdown"
   >
-    <div class="p-2 flex">
+    <div class="p-1 px-3 flex">
       {{ displayButton() }}
       <img
         class="w-4 pr-1 rotate-180 my-auto"
diff --git a/src/components/elements/FadeTeaser.vue b/src/components/elements/FadeTeaser.vue
index 6f55986c..768222a3 100644
--- a/src/components/elements/FadeTeaser.vue
+++ b/src/components/elements/FadeTeaser.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative h-[50rem] xl:h-[80rem] overflow-hidden">
+  <div class="relative h-[55rem] xl:h-[80rem] overflow-hidden">
     <img
       alt="worm bg"
       class="absolute left-[-15rem] md:left-[-10rem] h-[100%]"
diff --git a/src/components/partials/PageMenu.vue b/src/components/partials/PageMenu.vue
index 333e34b8..586a8035 100644
--- a/src/components/partials/PageMenu.vue
+++ b/src/components/partials/PageMenu.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="h-32 bg-black flex space-x-10 px-10">
+  <div class="h-24 bg-black flex space-x-10 px-10">
     <router-link
       class="my-auto"
       to="/"
     >
       <img
-        class="h-16 object-contain"
+        class="h-12 object-contain"
         :src="CCLogo"
         alt="CC logo"
       >
@@ -19,7 +19,9 @@
         Download Gameclient
       </RouterCCButton>
     </div>
-    <LoginComponent />
+    <LoginComponent 
+      class=""
+    />
     <button
       class="my-auto"
       @click="toggleBar"
@@ -38,7 +40,8 @@
       'flex-row',
       'uppercase',
       'text-white',
-      'text-xl',
+      'text-lg',
+      'h-13',
       'font-bold',
       'max-md:flex-col',
       'max-md:' + (state.barShown ? 'visible' : 'hidden'),
@@ -47,7 +50,7 @@
     <router-link
       v-for="elem in elems"
       :to="elem.routeName"
-      class="px-10 py-5 hover:underline"
+      class="px-8 py-4 hover:underline"
       active-class="text-yellow-500"
     >
       {{ elem.display }}
diff --git a/src/views/CardCreatorPage.vue b/src/views/CardCreatorPage.vue
index e87f481c..0e322052 100644
--- a/src/views/CardCreatorPage.vue
+++ b/src/views/CardCreatorPage.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="bg-pink-950 flex flex-col items-center">
+  <div class="h-screen bg-pink-950 flex flex-col items-center">
     <div>
-      <div class="p-4 w-full text-white text-lg">
+      <div class="pt-24 pb-4 w-full text-white text-4xl">
         Card Creator
       </div>
       <div
         class="w-[60rem] p-8 mb-20 text-white text-center text-xl font-['Roboto'] bg-pussy-red bg-opacity-70 shadow"
       >
         <!-- Progress Bar -->
-        <div class="w-11/12 h-12 mx-auto">
+        <div class="w-10/12 pt-10 pb-6 h-12 mx-auto">
           <div
             class="bg-red-600 rounded-full h-1 flex items-center justify-between"
           >
@@ -38,7 +38,7 @@
         </div>
 
         <DefineNavigationButtons>
-          <div class="flex flex-row justify-end space-x-3">
+          <div class="flex flex-row justify-end space-x-3 px-[4.5rem] pb-6">
             <NavigateCCButtons
               class="pr-4 scale-[2]"
               :start="activeStep == 0"
@@ -48,8 +48,8 @@
               "
               @backward="activeStep = Math.max(activeStep - 1, 0)"
             />
-
             <BaseCCButton
+              class=""
               v-if="activeStep < progressBar.length - 1"
               :type="ButtonType.RED"
               @click="
@@ -69,11 +69,11 @@
           <div class="pt-8 p-3 text-s font-bold">
             CLASSES
           </div>
-          <div class="text-s">
+          <div class="text-s pb-4">
             Select one or multiple classes for your card.
           </div>
 
-          <div class="flex justify-between">
+          <div class="flex justify-between px-12">
             <div
               v-for="item in ['Technology', 'Culture', 'Nature', 'Mysticism']"
               class="p-5"
@@ -107,25 +107,24 @@
             Select the type of card you want.
           </div>
 
-          <div class="flex justify-between">
+          <div class="flex justify-between px-20">
             <div
               v-for="item in ['Headquarter', 'Entity', 'Action', 'Place']"
               class="py-10"
               @click="model.type = item"
             >
               <img
-                v-show="item !== model.type"
+                v-show="item == model.type"
                 class="h-32"
                 :src="typeIcons[item].Off"
               >
               <img
-                v-show="item == model.type"
+                v-show="item !== model.type"
                 class="h-32"
                 :src="typeIcons[item].On"
               >
               <div
-                :class="{ underline: item == model.type }"
-                class="py-5 text-s font-bold uppercase"
+                class="pt-3 pb-1 text-s font-bold uppercase"
               >
                 {{ item }}
               </div>
@@ -139,7 +138,7 @@
           v-if="activeStep == 2"
           class="flex flex-row justify-center"
         >
-          <div class="px-8">
+          <div class="pl-[4rem] pt-5 pb-4 h-[26.5rem]">
             <CardComponent
               id="card"
               :active-step="activeStep"
@@ -149,7 +148,7 @@
             />
           </div>
           <div class="text-left flex flex-col justify-between">
-            <div class="py-5 justify-center">
+            <div class="pl-12 pr-[4.5rem] py-5 justify-center">
               <div class="py-3 text-s font-bold">
                 NAME
               </div>
@@ -165,7 +164,7 @@
                 >
               </div>
             </div>
-            <div class="pl-10">
+            <div class="pl-20">
               <NavigationButtons />
             </div>
           </div>
@@ -282,7 +281,7 @@
           v-if="activeStep == 4"
           class="flex flex-row justify-center"
         >
-          <div class="px-8">
+          <div class="pl-[4rem] pt-5 pb-4 h-[26.5rem]">
             <CardComponent
               id="card"
               :active-step="activeStep"
@@ -292,7 +291,7 @@
             />
           </div>
           <div class="text-left flex flex-col justify-between">
-            <div class="py-5 justify-center">
+            <div class="pl-12 pr-[4.5rem] py-5 justify-center">
               <div class="py-3 text-s font-bold">
                 FLAVOR
               </div>
@@ -308,7 +307,7 @@
                 >
               </div>
             </div>
-            <div class="pl-10">
+            <div class="pl-20">
               <NavigationButtons />
             </div>
           </div>
@@ -319,7 +318,7 @@
           v-if="activeStep == 5"
           class="flex flex-row justify-center"
         >
-          <div class="px-8">
+          <div class="pl-[4rem] pt-5 pb-4 h-[26.5rem]">
             <CardComponent
               id="card"
               :active-step="activeStep"
@@ -328,9 +327,8 @@
               :model="model"
             />
           </div>
-
           <div class="text-left flex flex-col justify-between">
-            <div class="py-5 justify-center">
+            <div class="pl-12 pr-[4.5rem] py-5 justify-center">
               <div class="py-3 text-s font-bold">
                 COSTS AND POWERS
               </div>
@@ -340,7 +338,7 @@
                   cardRules.Card.children[getRulesType()] &&
                     cardRules.Card.children[getRulesType()].children.CastingCost
                 "
-                class="h-14"
+                class="h-10"
               >
                 Casting Cost
                 <Dropdown
@@ -400,7 +398,7 @@
               <!-- Delay -->
               <div
                 v-if="model.type === 'Headquarter'"
-                class="h-14"
+                class="h-[3rem]"
               >
                 <b>Delay</b> of Activation:
                 <Dropdown
@@ -416,7 +414,7 @@
                   model.type === 'Entity' &&
                     cardRules.Card.children[getRulesType()]
                 "
-                class="h-14"
+                class="h-[3rem]"
               >
                 Attack
                 <Dropdown
@@ -431,7 +429,7 @@
                   model.type !== 'Action' &&
                     cardRules.Card.children[getRulesType()]
                 "
-                class="h-14"
+                class="h-[2.5rem]"
               >
                 Defense
                 <Dropdown
@@ -464,7 +462,7 @@
                 />
               </div>
             </div>
-            <div class="pl-10">
+            <div class="pl-20">
               <NavigationButtons />
             </div>
           </div>
@@ -475,7 +473,7 @@
           v-if="activeStep == 6"
           class="flex flex-row justify-center"
         >
-          <div class="px-8">
+          <div class="pl-[4rem] pt-5 pb-4 h-[26.5rem]">
             <CardComponent
               id="card"
               :active-step="activeStep"
@@ -485,7 +483,7 @@
             />
           </div>
           <div class="text-left flex flex-col justify-between">
-            <div class="py-5 justify-center">
+            <div class="pr-[4.5rem] py-5 justify-center">
               <div class="py-3 text-s font-bold">
                 ABILITIES AND EFFECTS
               </div>
@@ -529,7 +527,7 @@
                 class=""
               >
                 <button
-                  class="px-60 bg-white bg-opacity-[15%] hover:bg-pink-950 text-white text-opacity-50 text-7xl font-bold border-4 border-gray-100 border-opacity-50"
+                  class="px-40 bg-white bg-opacity-[15%] hover:bg-pink-950 text-white text-opacity-50 text-7xl font-bold border-4 border-gray-100 border-opacity-50"
                   type="button"
                   @click="showAbilityModal('root')"
                 >
@@ -551,7 +549,7 @@
                 />
               </div>
             </div>
-            <div class="pl-10">
+            <div class="pl-20">
               <NavigationButtons />
             </div>
           </div>
@@ -562,7 +560,7 @@
           v-if="activeStep == 7"
           class="flex flex-row justify-center"
         >
-          <div class="px-8">
+          <div class="pl-[4rem] pt-5 pb-4 h-[26.5rem]">
             <CardComponent
               id="card"
               :active-step="activeStep"
@@ -572,7 +570,7 @@
             />
           </div>
           <div class="text-left flex flex-col justify-between">
-            <div class="py-5 justify-center">
+            <div class="pl-12 pr-[4.5rem] py-5 justify-center">
               <div class="py-3 text-s font-bold">
                 NOTES TO THE COUNCIL
               </div>
@@ -591,7 +589,7 @@
               <!-- this only shows to Jannik and should not be available to ordinary users, design is irrelevant here -->
               <span
                 v-if="
-                  address == 'cc14km80077s0hch3sh38wh2hfk7kxfau4456r3ej' || true
+                  address == 'cc14km80077s0hch3sh38wh2hfk7kxfau4456r3ej'
                 "
                 class=""
               >
@@ -599,14 +597,14 @@
               </span>
               <input
                 v-if="
-                  address == 'cc14km80077s0hch3sh38wh2hfk7kxfau4456r3ej' || true
+                  address == 'cc14km80077s0hch3sh38wh2hfk7kxfau4456r3ej'
                 "
                 v-model="model.balanceAnchor"
                 type="checkbox"
                 class=""
               >
             </div>
-            <div class="pl-10">
+            <div class="pl-20">
               <NavigationButtons />
             </div>
           </div>
@@ -616,7 +614,7 @@
           v-if="activeStep == 8"
           class="flex flex-row justify-center"
         >
-          <div class="px-8">
+          <div class="pl-[4rem] pt-5 pb-4 h-[26.5rem]">
             <CardComponent
               id="card"
               :active-step="activeStep"
@@ -626,7 +624,7 @@
             />
           </div>
           <div class="text-left flex flex-col justify-between">
-            <div class="py-5 justify-center">
+            <div class="pl-12 pr-[4.5rem] py-5 justify-center">
               <div class="py-3 text-s font-bold">
                 SUMMARY
               </div>
diff --git a/src/views/LandingPage.vue b/src/views/LandingPage.vue
index 9499ed6a..b6beb097 100644
--- a/src/views/LandingPage.vue
+++ b/src/views/LandingPage.vue
@@ -4,7 +4,7 @@
       <img
         alt="langing bg image"
         :src="landingBackground"
-        class="w-[100%] object-cover h-[40rem] 2xl:h-[50rem]"
+        class="w-[100%] object-cover h-[40rem] 2xl:h-[44rem]"
       />
       <div class="absolute top-20 m-auto left-0 right-0">
         <div class="flex text-center justify-center z-10">
@@ -44,11 +44,11 @@
       class="bg-center bg-cover bg-[url('@/assets/figma/Car.jpeg')] pt-10 sm:pt-32"
     >
       <div
-        class="flex gap-4 justify-between flex-wrap px-4 sm:px-16 lg:px-32 py-4 sm:py-10 lg:py-20 bg-cc-yellow/75 mx-2 sm:mx-20 lg:mx-40 b-10 sm:mb-32 xl:w-[70%] xl:mx-auto"
+        class="max-w-[70rem] flex flex-row flex-wrap justify-evenly px-8 py-10 bg-cc-yellow/75 b-10 mb-32 xl:mx-auto mx-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>
+        <div class="place-self-center pr-4">
+          <p class="text-5xl font-bold pb-6">New Sets and Boosters</p>
+          <p class="text-2xl pb-6">Promoted Sets and Boosters</p>
           <RouterCCButton class="pb-4" to="/b" :type="ButtonType.BLACK">
             Buy Boosters
           </RouterCCButton>
@@ -58,8 +58,8 @@
         </div>
         <div>
           <img
+            class="h-[20rem] pl-4 py-8 object-scale-down"
             alt="multiple cards"
-            class="h-[20rem] object-scale-down"
             :src="multiCards"
           />
         </div>
@@ -67,8 +67,8 @@
       <div class="bg-black/90 py-40">
         <div class="flex justify-center">
           <div class="text-center">
-            <p class="text-6xl text-red-500 font-bold">Get started now</p>
-            <div class="text-white text-3xl pt-4">
+            <p class="text-5xl text-red-500 font-bold">Get started now</p>
+            <div class="text-white text-2xl pt-4">
               <p>CrowdControl is built on Cosmos Blockchain and</p>
               <p>let’s <b>YOU</b> be part of every step of the game.</p>
             </div>
@@ -94,34 +94,39 @@
               <p class="text-3xl font-bold">
                 {{ cardBack.heading }}
               </p>
-              <p>{{ cardBack.text }}</p>
+              <p class="text-sm">
+                {{ cardBack.text }}
+              </p>
             </div>
 
-            
           </div>
         </div>
       </div>
     </div>
-    <FadeTeaser>
-      <div class="absolute top-20 xl:py-20 left-0 right-0">
-        <div class="flex flex-col text-center">
-          <p class="text-6xl text-teal-500 font-bold">Be part of the game</p>
-          <div class="text-black text-3xl pt-4">
-            <p>Crowd Control is a growing community based on open source and</p>
-            <p>collaboration. Learn the game and give us your review.</p>
+    <div class="h-[55rem] xl:h-[60rem] overflow-clip">
+      <FadeTeaser>
+        <div class="absolute top-20 left-0 right-0">
+          <div class="flex flex-col text-center">
+            <p class="text-5xl text-teal-500 font-bold">Be part of the game</p>
+            <div class="text-black text-2xl pt-4 px-16">
+              <p>Crowd Control is a growing community based on open source and</p>
+              <p>collaboration. Learn the game and give us your review.</p>
+            </div>
+            <br />
+            <LinkCCButton
+              class="pt-6"
+             :type="ButtonType.TEAL" to="https://discord.gg/ZKKbhUs">
+              Join Us
+            </LinkCCButton>
+            <img
+              class="object-contain w-[90%] md:w-[50%] drop-shadow-glowTeal mx-auto pt-20"
+              alt="gameboard"
+              :src="gameBoard"
+            />
           </div>
-          <br />
-          <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"
-            :src="gameBoard"
-          />
         </div>
-      </div>
-    </FadeTeaser>
+      </FadeTeaser>
+    </div>
   </div>
 </template>
 
diff --git a/src/views/Learn.vue b/src/views/Learn.vue
index 3f40e5eb..c7e075ad 100644
--- a/src/views/Learn.vue
+++ b/src/views/Learn.vue
@@ -1,12 +1,12 @@
 <template>
   <div >
     <FadeTeaser>
-      <div class="px-0 py-40 flex text-center justify-center">
+      <div class="px-0 py-24 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">
+          <p class="py-10 text-2xl font-lg">
             Here are the basics to get start playing. <br>
             Visit our GitBook for advanced information!
           </p>
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index 48838dea..4b1d6467 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="bg-black flex text-center justify-center h-[80vh]">
-    <div class="my-auto">
+    <div class="mt-24 my-auto">
       <p class="text-5xl text-[#FEC560] font-bold">
         Stay Tuned
       </p>