<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>