refactor: update CreateLanding component styles to Tailwind CSS

- Replaced SCSS classes with Tailwind CSS utility classes for improved consistency and maintainability.
- Enhanced layout properties for better responsiveness, including adjustments to flex direction and spacing.
- Removed unused SCSS styles, streamlining the codebase and enhancing overall performance.
- Improved accessibility with updated class names and text handling.

These changes aim to simplify the styling approach and enhance the user experience of the CreateLanding component.

components/create/CreateLanding.vue

@@ -1,24 +1,24 @@
 <template>
-  <div class="container flex items-center justify-center flex-col">
+  <div class="h-[calc(100vh-5.25rem)] m-0 max-w-full flex items-center justify-center flex-col bg-k-primary-light max-lg:h-screen max-sm:px-8">
     <div>
-      <h1 class="title text-[2.5rem] mb-7">
+      <h1 class="text-[2.5rem] mb-7 max-sm:text-2xl font-bold">
         {{ $t('mint.landing.heading') }}
       </h1>
 
       <div
         v-if="route.query?.select !== 'nft'"
-        class="pack"
+        class="flex gap-6"
       >
         <div
-          class="pack-box"
+          class="cursor-pointer px-8 py-16 bg-background-color border border-card-border-color text-text-color hover:border-text-color hover:text-text-color max-sm:p-8"
           @click="gotoPathAfterLogin('/create/collection')"
         >
-          <div class="pack-content">
+          <div class="text-center w-56 max-sm:flex max-sm:gap-8 max-sm:text-left max-sm:w-full">
             <NeoIcon
               icon="image-polaroid"
               custom-size="fa-3x"
             />
-            <div class="pack-content-text">
+            <div class="mt-8 max-sm:mt-0">
               <p class="text-2xl font-bold">
                 Collection
               </p>
@@ -27,16 +27,16 @@
           </div>
         </div>
         <button
-          class="pack-box"
+          class="cursor-pointer px-8 py-16 bg-background-color border border-card-border-color text-text-color hover:border-text-color hover:text-text-color max-sm:p-8"
           data-testid="create-landing-nft-button"
           @click="router.push({ query: { select: 'nft' } })"
         >
-          <div class="pack-content">
+          <div class="text-center w-56 max-sm:flex max-sm:gap-8 max-sm:text-left max-sm:w-full">
             <NeoIcon
               icon="gem"
               custom-size="fa-3x"
             />
-            <div class="pack-content-text">
+            <div class="mt-8 max-sm:mt-0">
               <p class="text-2xl font-bold">
                 NFT
               </p>
@@ -48,19 +48,19 @@
 
       <div
         v-else
-        class="pack"
+        class="flex gap-6 max-sm:flex-col"
       >
         <div
-          class="pack-box"
+          class="cursor-pointer px-8 py-16 bg-background-color border border-card-border-color text-text-color hover:border-text-color hover:text-text-color max-sm:p-8"
           data-testid="create-landing-single-nft-button"
           @click="gotoPathAfterLogin('/create/nft')"
         >
-          <div class="pack-content">
+          <div class="text-center w-56 max-sm:flex max-sm:gap-8 max-sm:text-left max-sm:w-full">
             <NeoIcon
               icon="image"
               custom-size="fa-3x"
             />
-            <div class="pack-content-text">
+            <div class="mt-8 max-sm:mt-0">
               <p class="text-2xl font-bold">
                 {{ $t('mint.landing.singleNft') }}
               </p>
@@ -69,16 +69,16 @@
           </div>
         </div>
         <div
-          class="pack-box"
+          class="cursor-pointer px-8 py-16 bg-background-color border border-card-border-color text-text-color hover:border-text-color hover:text-text-color max-sm:p-8"
           data-testid="create-landing-multiple-nft-button"
           @click="gotoPathAfterLogin(`/${urlPrefix}/massmint`)"
         >
-          <div class="pack-content">
+          <div class="text-center w-56 max-sm:flex max-sm:gap-8 max-sm:text-left max-sm:w-full">
             <NeoIcon
               icon="photo-film"
               custom-size="fa-3x"
             />
-            <div class="pack-content-text">
+            <div class="mt-8 max-sm:mt-0">
               <p class="text-2xl font-bold">
                 {{ $t('mint.landing.massNft') }}
               </p>
@@ -93,106 +93,17 @@
 
 <script setup lang="ts">
 import { NeoIcon } from '@kodadot1/brick'
-import type { RawLocation } from 'vue-router/types/router'
 
 const { doAfterLogin } = useDoAfterlogin()
 const { urlPrefix } = usePrefix()
 const route = useRoute()
 const router = useRouter()
 
-const gotoPathAfterLogin = (path: RawLocation) => {
+const gotoPathAfterLogin = (path) => {
   doAfterLogin({
     onLoginSuccess: () => {
       navigateTo({ path, query: { collectionId: route.query.collectionId } })
     },
   })
 }
 </script>
-
-<style scoped lang="scss">
-@import '@/assets/styles/abstracts/variables';
-
-.container {
-  height: calc(100vh - 5.25rem); // 5.25rem = header height
-  margin: 0;
-  max-width: 100% !important;
-
-  @include ktheme() {
-    background-color: theme('k-primaryLight');
-  }
-
-  @include touch() {
-    height: 100vh;
-  }
-
-  @include mobile() {
-    padding: 0 2rem;
-
-    .title {
-      font-size: 2rem !important;
-    }
-  }
-}
-
-.pack {
-  display: flex;
-  gap: 1.5rem;
-
-  &-box {
-    @apply cursor-pointer text-[unset] px-8 py-16;
-
-    @include ktheme() {
-      background-color: theme('background-color');
-      border: 1px solid theme('card-border-color');
-      color: theme('text-color');
-
-      &:hover {
-        color: theme('text-color');
-        border-color: theme('text-color');
-      }
-    }
-  }
-
-  &-content {
-    @apply text-center w-56;
-
-    &-text {
-      margin-top: 2rem;
-    }
-  }
-
-  &-box-waifu {
-    width: 17rem;
-
-    .time-limit {
-      @include ktheme() {
-        border: 1px solid theme('k-grey');
-        background-color: theme('background-color');
-      }
-    }
-  }
-
-  &-content-waifu {
-    &-text {
-      margin-top: 2rem;
-    }
-  }
-
-  @include mobile() {
-    flex-direction: column;
-    width: 100%;
-
-    &-box {
-      padding: 2rem;
-    }
-
-    &-content {
-      @apply flex gap-8 text-left w-full;
-
-      &-text {
-        margin-top: 0;
-      }
-    }
-  }
-}
-</style>