fashion-ssr-vue3/components/business/contact/more.vue

<script lang="ts" setup>
import { useUserStore } from '@/stores/modules/user'

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

<template>
  <div class="bg-#F3F4FB py-120px data-section" data-section-color="#F3F4FB">
    <div class="w-1200-auto flex justify-between">
      <div>
        <h2 class="text-#333 text-36px !fw-800 custom-title-font">
          Discover more abour EJET Spark
        </h2>
        <div
          class="h-40px lh-40px !mt-20px text-14px w-128px text-center text-#fff b-rd-200px bg-#0F0820 hover:bg-#9B6CFF hover:text-#fff cursor-pointer"
        >
          <span v-if="!isLogin" @click="openLoginModal">
            Get started
          </span>
          <nuxt-link v-else to="/categories">
            view catalogs
          </nuxt-link>
        </div>
      </div>

      <div class="w-680px pos-relative block gap-40px">
        <div
          class="p-30px b-rd-10px block-top bg-#F9FAFB block-shadow flex justify-between items-end"
        >
          <div>
            <img
              src="@/assets/images/email.png"
              class="w-32px h-32px"
              alt=""
            >
            <h3
              class="!mt-20px !mb-10px !text-24px !fw-800 custom-title-font text-#333"
            >
              Download Catalogs
            </h3>
            <div class="text-#999 lh-22px">
              EJET Spark description, spark the trend, ignate sales. EJET
              Spark catalog description,
            </div>
          </div>
          <el-button
            class="!b-0px !bg-#9B6CFF ml-40px !text-#fff !w-160px !h-32px !text-14px !b-rd-410px"
          >
            <nuxt-link to="/categories">
              View Catalogs
            </nuxt-link>
          </el-button>
        </div>
        <div
          class="p-30px b-rd-10px bg-#F9FAFB block-shadow flex justify-between items-end"
        >
          <nuxt-link to="/solutions">
            <img
              src="@/assets/images/email.png"
              class="w-32px h-32px"
              alt=""
            >
            <h3
              class="!mt-20px !mb-10px !text-24px !fw-800 custom-title-font text-#333"
            >
              View Solutions
            </h3>
            <div class="text-#999 lh-22px">
              EJET Spark description, spark the trend, ignate sales. EJET
              Spark catalog description,
            </div>
          </nuxt-link>
        </div>
        <div
          class="p-30px b-rd-10px bg-#F9FAFB block-shadow flex justify-between items-end"
        >
          <nuxt-link to="/blog">
            <img
              src="@/assets/images/email.png"
              class="w-32px h-32px"
              alt=""
            >
            <h3
              class="!mt-20px !mb-10px !text-24px !fw-800 custom-title-font text-#333"
            >
              View Blogs
            </h3>
            <div class="text-#999 lh-22px">
              EJET Spark description, spark the trend, ignate sales. EJET
              Spark catalog description,
            </div>
          </nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.shadow {
  box-shadow:
    0px 4px 6px -4px rgba(0, 0, 0, 0.1),
    0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.block-shadow {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
}
.block {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  .block-top {
    grid-column: 1/-1;
  }
}
</style>