<!-- @format --> <script lang="ts" setup> import { useUserStore } from '@/stores/modules/user' const { openLoginModal } = useLoginModal() const userStore = useUserStore() const { isLogin } = storeToRefs(userStore) </script> <template> <div> <div class="h-300px bg-#fff pos-relative"> <div class="w-1200-auto pos-absolute left-50% translate-x--50% top-50% h-300px pl-40px pr-80px bg-#D7C4FF b-rd-10px flex items-center justify-between"> <div class="w-580px"> <img src="@/assets/images/footer_contact_icon01.png" class="w-50px h-50px mb-10px" alt=""> <h2 class="text-36px fw-bold lh-60px custom-title-font"> Ready to Start with EJET Spark? </h2> <div class="text-24px mt-10px fw-500 custom-title-font"> Sign in to download exclusive catalogs! </div> <div v-if="!isLogin" class="py-8px mt-30px text-14px fw-500 flex justify-center items-center w-150px text-center text-#fff b-rd-200px bg-#0F0820 hover:bg-#9B6CFF hover:text-#fff cursor-pointer" @click="openLoginModal" > <span> Sign In </span> <img src="@/assets/images/footer_contact_icon02.png" class="w-24px h-24px ml-10px" alt=""> </div> <div v-else class="py-8px mt-30px text-14px fw-500 flex justify-center items-center w-150px text-center text-#fff b-rd-200px bg-#0F0820 hover:bg-#9B6CFF hover:text-#fff cursor-pointer" > <nuxt-link to="/categories"> view catalogs </nuxt-link> <img src="@/assets/images/footer_contact_icon02.png" class="w-24px h-24px ml-10px" alt=""> </div> </div> <img src="@/assets/images/footer_contact_bg.png" class="w-500px object-cover h-360px pos-absolute bottom--0 right-20px" alt=""> </div> </div> <div class="flex bg-#0F0820 pt-236px pb-50px"> <div class="w-1200-auto "> <div class="flex mb-80px"> <div class="w-25% text-#fff text-16px"> <h4 class="!mb-30px fw-500 text-24px custom-title-font"> Company </h4> <div class="mb-30px"> <NuxtLink to="/about-us" class="hover:text-#9B6CFF"> About Us </NuxtLink> </div> <div class="mb-30px"> <NuxtLink to="https://www.ejetselection.com/" target="_blank" class="hover:text-#9B6CFF"> EJET Selection </NuxtLink> </div> <div class="mb-30px"> <NuxtLink to="https://www.ejetprocurement.com/" target="_blank" class="hover:text-#9B6CFF"> EJET Procurement </NuxtLink> </div> <div class="mb-30px"> <NuxtLink to="/contact" class="hover:text-#9B6CFF"> Contact Us </NuxtLink> </div> <!-- <div> <NuxtLink to="/" class="hover:text-#9B6CFF" > Become a Partner </NuxtLink> </div> --> </div> <div class="w-25% text-#fff text-16px"> <h4 class="!mb-30px fw-500 text-24px custom-title-font"> Product </h4> <div class="mb-30px"> <NuxtLink to="/solutions" class="hover:text-#9B6CFF"> Solutions </NuxtLink> </div> <div class="mb-30px"> <NuxtLink to="/categories" class="hover:text-#9B6CFF"> Catalogs by Category </NuxtLink> </div> <div class="mb-30px"> <NuxtLink to="/trends" class="hover:text-#9B6CFF"> Catalogs by Trend </NuxtLink> </div> </div> <div class="w-25% text-#fff text-16px"> <h4 class="!mb-30px fw-500 text-24px custom-title-font"> Resources </h4> <div class="mb-30px"> <NuxtLink to="/blog" class="hover:text-#9B6CFF"> Blog </NuxtLink> </div> <div class="mb-30px"> <!-- <NuxtLink to="/" class="hover:text-#9B6CFF"> EJET Selection </NuxtLink> --> </div> <div class="mb-30px"> <NuxtLink to="/faq" class="hover:text-#9B6CFF"> FAQ </NuxtLink> </div> <div class="mb-30px"> <!-- <NuxtLink to="/contact" class="hover:text-#9B6CFF"> 2025 Trend Forcast </NuxtLink> --> </div> </div> <div class="w-25% text-right flex justify-end"> <img class="w-240px h-148px" src="~/assets/images/catalogs_img01.png" alt="" > </div> </div> <div class=" bg-#575262 h-1px" /> <div class="pt-30px flex justify-between items-center"> <div class="flex items-center"> <svgo-spark-logo class="!w-132px !h-32px text-#fff" /> <div class="flex gap-20px justify-start ml-40px"> <!-- <a href="https://www.facebook.com/profile.php?id=61573209305275" target="_blank"> --> <img src="~/assets/images/footer_guide_facebook.png" alt="" class="w-24px h-24px" srcset="" > <!-- </a> --> <!-- <a href="https://www.instagram.com/ejetselection.official/" target="_blank"> --> <img src="~/assets/images/footer_guide_ins.png" alt="" class="w-24px h-24px" srcset="" > <!-- </a> --> <!-- <a href="https://www.youtube.com/@EJETSelection" target="_blank"> --> <img src="~/assets/images/footer_guide_youtube.png" alt="" class="w-24px h-24px" srcset="" > <!-- </a> --> <!-- <a href="https://www.linkedin.com/company/ejet-selection" target="_blank"> --> <img src="~/assets/images/footer_guide_linkedin.png" alt="" class="w-24px h-24px" srcset="" > <!-- </a> --> </div> </div> <div class="flex text-#fff"> <div> © 2025 EJET Spark. All rights reserved. <!-- <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" class="hover:text-#CC9879" > ICP备案:浙ICP备2021012316号-3 </a> --> </div> <nuxt-link to="/terms-of-service" class="hover:underline ml-10px"> Terms of Service </nuxt-link> <div class="mx-10px"> | </div> <nuxt-link to="/privacy-policy" class="hover:underline"> Privacy Policy </nuxt-link> </div> </div> </div> </div> </div> </template> <style lang="less" scoped> .custom-svg.nuxt-icon--fill { fill: unset !important; } </style>