<script lang='ts' setup>
import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import { useUserStore } from '@/stores/modules/user'

const userStore = useUserStore()
const { isLogin } = storeToRefs(userStore)
</script>

<template>
  <div class="bg-#FAF5F1">
    <div class="w-1400px mx-auto flex justify-between py-60px">
      <div class="w-800px">
        <h1 class="w-650px fw-600 text-48px text-#333 custom-title-font">
          Top Wholesale Marketplace Connecting You to Quality
        </h1>
        <div class="!mt-20px !mb-30px text-24px text-#999999 w-750px lh-36px ">
          Discover high-quality products from selected Chinese manufacturers, Connect with premium brands and elevate your retail business.
        </div>
        <el-button v-if="!isLogin" type="primary" plain class="w-160px !bg-#C58C64 !text-#fff !h-40px !text-16px !fw-500 !b-rd-150px">
          <nuxt-link to="/register">
            Shop on EJET
          </nuxt-link>
        </el-button>
      </div>
      <img src="~/assets/images/home_banner.png" class="w-540px h-353px" alt="EJET Selection wholesale marketplace for home decor brands" srcset="">
    </div>
  </div>
</template>

<style lang='less' scoped>
// .custom-font{
//   font-family: 'CustomFont';
// }
</style>
