fashion-ssr-vue3/components/common/footer/guide.vue

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