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

<!-- @format -->

<script lang="ts" setup></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">
            Contact us to get exclusive catalogs!
          </div>
          <div
            class="py-8px mt-30px text-14px fw-500 w-128px text-center text-#fff b-rd-200px  bg-#0F0820 hover:bg-#9B6CFF hover:text-#fff cursor-pointer"
          >
            <nuxt-link to="/contact" class="flex justify-center items-center">
              Contact Us
              <img src="@/assets/images/footer_contact_icon02.png" class="w-24px h-24px ml-6px" alt="">
            </nuxt-link>
          </div>
        </div>
        <img src="@/assets/images/footer_contact_bg.png" class="w-420px h-100%" 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="/" class="hover:text-#9B6CFF">
                EJET Selection
              </NuxtLink>
            </div>
            <div class="mb-30px">
              <NuxtLink to="/" 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="/" class="hover:text-#9B6CFF">
                Catalogs by Category
              </NuxtLink>
            </div>
            <div class="mb-30px">
              <NuxtLink to="/" 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>
            <a href="/service" class="hover:underline ml-10px"><div>Terms of Service</div></a>
            <div class="mx-10px">
              |
            </div>
            <a href="/policy" class="hover:underline"><div>Privacy Policy</div></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.custom-svg.nuxt-icon--fill {
  fill: unset !important;
}
</style>