fashion-ssr-vue3/pages/about/index.vue

<script lang='ts' setup>
import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import { ConstKeys } from '~/enums/const-enums'
import Team001 from '~/assets/images/about_team_01.png'
import Team002 from '~/assets/images/about_team_02.png'
import Team003 from '~/assets/images/about_team_03.png'
import Team004 from '~/assets/images/about_team_04.png'
import Team005 from '~/assets/images/about_team_05.png'
import Team006 from '~/assets/images/about_team_06.png'

useHead({
  title: 'About Us | EJET Selection',
  meta: [
    {
      name: 'description',
      content:
         `Discover how EJET Selection connects global retailers with trusted Chinese manufacturers. Learn about our mission, values, and commitment to quality and innovation.`,
    },
    {
      property: 'og:title',
      content: 'About Us | EJET Selection',
    },
    {
      property: 'og:description',
      content:
        `Discover how EJET Selection connects global retailers with trusted Chinese manufacturers. Learn about our mission, values, and commitment to quality and innovation.`,
    },
    {
      property: 'og:type',
      content: 'website',
    },
    {
      property: 'twitter:title',
      content: 'About Us | EJET Selection',
    },
    {
      property: 'twitter:description',
      content:
        `Discover how EJET Selection connects global retailers with trusted Chinese manufacturers. Learn about our mission, values, and commitment to quality and innovation.`,
    },
    {
      property: 'twitter:card',
      content: 'summary_large_image',
    },
  ],
  link: [
    {
      rel: 'canonical',
      href: `${ConstKeys.DOMAINPRO}/about`,
    },
  ],
})

const team = [
  {
    avatar: Team001,
    name: 'Jason',
    position: 'Founder & CEO',
  },
  {
    avatar: Team002,
    name: 'Andy Wong',
    position: 'EJET Supply Chain Manager',
  },
  {
    avatar: Team003,
    name: 'Phoebe Mo',
    position: 'EJET Procurement Manager',
  },
  {
    avatar: Team004,
    name: 'Fiona Zhang',
    position: 'EBU-CEO',
  },
  {
    avatar: Team005,
    name: 'Mandy Huang',
    position: 'Sales Manager',
  },
  {
    avatar: Team006,
    name: 'Pony Hu',
    position: 'Guangzhou Branch Manager',
  },
]
const faq = ref([
  {
    question: 'What is EJET Selection?',
    isExpand: false,
    type: 1,
    answer: 'EJET Selection is a premier wholesale marketplace designed to connect international retailers with toptier Chinese manufacturers and brands. We provide a platform for accessing a wide range of unique and high-quality products, ensuring retailers can offer exceptional value to their customers.',
  },
  {
    question: 'How does EJET Selection ensure product quality?',
    isExpand: false,
    type: 1,
    answer: 'We collaborate with trusted wholesale suppliers who undergo a rigorous vetting process. Our commitment to quality includes regular inspections and adherence to strict standards, ensuring that all products meet the highest levels of excellence and reliability.',
  },
  {
    question: 'What are the benefits of buying from EJET Selection?',
    isExpand: false,
    type: 1,
    answer: 'Retailers can access to a wide selection of unique and high-quality products, and connect with reliable brand wholesale suppliers from China. Our platform is designed to enhance your business offerings, supported by comprehensive assistance and seamless delivery, empowering you to succeed in a competitive market.',
  },
  {
    isExpand: false,
    question: 'How do I shop wholesale on EJET Selection？',
    answer: '',
    type: 2,
  },
])
</script>

<template>
  <div class="w-1400px mx-auto">
    <div class="flex justify-between items-center pt-40px mb-160px">
      <div class="w-1/2">
        <img src="~/assets/images/about_img01.png" class="w-600px h-560px" alt="" srcset="">
      </div>
      <div class="w-1/2">
        <h1 class="fw-600 text-48px text-#333 !mb-40px custom-title-font">
          About EJET Selection
        </h1>
        <p class="!text-#999 mb-20px lh-22px">
          EJET Selection was born from a vision to bridge premium Chinese manufacturing brands withinternational retailers. Founded by an experienced team in the wholesale industry and globalcollaboration, we saw the opportunity to showcase the exceptional craftsmanship and unigueproducts that Chinese brands have to offer.
        </p>
        <p class="!text-#999 lh-22px">
          We created a platform and meticulously curated a selection of suppliers known for their excellenceand reliability, ensuring that every product meets our high standards. We are committed to inspiringand supporting retailers by providing access to unigue brands and products that elevate theibusinesses and delight their customers.
        </p>
        <el-button class="!bg-#C58C64 mt-40px !text-#fff !w-160px !h-40px  !b-rd-148px">
          <a href="/contact">
            Contact Us
          </a>
        </el-button>
      </div>
    </div>
    <div class="flex">
      <div class="w-1/2">
        <h2 class="text-#333333 fw-600 text-40px !mb-42px custom-title-font">
          We Are Committed To
        </h2>
        <div class="flex items-center mb-30px">
          <img src="~/assets/images/about_icon01.png" class="w-36px h-36px mr-20px" alt="" srcset="">
          <div>
            <h3 class="text-#333 fw-600 text-24px !mb-12px custom-title-font">
              Quality
            </h3>
            <p class="text-#999 lh-24px w-450px">
              We are committed to providing exceptional products by partnering with trusted suppliers.
            </p>
          </div>
        </div>
        <div class="flex items-center mb-30px">
          <img src="~/assets/images/about_icon02.png" class="w-36px h-36px mr-20px" alt="" srcset="">
          <div>
            <h3 class="text-#333 fw-600 text-24px !mb-12px custom-title-font">
              Innovation
            </h3>
            <p class="text-#999 lh-24px w-450px">
              We embrace creativity and forward-thinking solutions to continuously improve our platform.
            </p>
          </div>
        </div>
        <div class="flex items-center">
          <img src="~/assets/images/about_icon03.png" class="w-36px h-36px mr-20px" alt="" srcset="">
          <div>
            <h3 class="text-#333 fw-600 text-24px !mb-12px custom-title-font">
              Partnership
            </h3>
            <p class="text-#999 lh-24px w-450px">
              We believe in building strong, collaborative relationships with our suppliers and retailers.
            </p>
          </div>
        </div>
      </div>
      <div class="w-1/2">
        <img src="~/assets/images/about_img02.png" class="w-680px h-640px" alt="" srcset="">
      </div>
    </div>
    <div class="mt-160px text-center mb-160px">
      <h2 class="!mb-20px text-40px fw-600 text-#363C40 custom-title-font">
        Our Team
      </h2>
      <p class="text-#999 mb-60px">
        Meet the experts driving our success and innovation.
      </p>
      <div class="grid grid-cols-3 gap-x-107px gap-y-40px px-66px text-left">
        <div v-for="item, index in team" :key="index">
          <img :src="item.avatar" alt="" srcset="" class="w-352px h-320px b-rd-10px">
          <div class="my-20px text-24px fw-600 text-#363C40 custom-title-font">
            {{ item.name }}
          </div>
          <div class="text-#999">
            {{ item.position }}
          </div>
        </div>
      </div>
    </div>
    <div class="mt-160px text-center mb-160px px-105px">
      <h2 class="!mb-20px text-40px fw-600 text-#363C40 custom-title-font">
        FAQ
      </h2>
      <p class="text-#999 mb-60px">
        Your questions answered: explore our most common inquiries.
      </p>
      <div class="text-left">
        <div v-for="item, index in faq" :key="index" class="mb-50px last:mb-0 pos-relative after:content-[''] after:w-3px after:h-full after:bg-#333 after:pos-absolute after:left--40px after:b-rd-tl-3px after:b-rd-bl-3px after:top-0 after:bottom-0">
          <h3 class="text-24px text-#333  cursor-pointer" @click="item.isExpand = !item.isExpand">
            {{ item.question }}
          </h3>
          <div :class="(item.isExpand) ? item.type === 1 ? 'h-40px mt-20px overflow-unset' : 'h-144px mt-20px overflow-unset' : ''" class="h-0 text-#999 lh-24px transition-all duration-300 overflow-hidden">
            <div v-if="item.answer">
              {{ item.answer }}
            </div>
            <div v-else class="lh-24px">
              <p>1. Sign Up: Create an account to access exclusive wholesale pricing.</p>
              <p>2. Browse Products: Explore our wide range of categories and brands.</p>
              <p>3. Add to Cart: Select products and add them to your cart.</p>
              <p>4. Submit Wish Order: Submit your wish order and a dedicated customer manager will contact you to understand your detailed needs and requirements. </p>
              <p>5. Place Orders: Easily order through our platform with the customer manager's assistance.</p>
              <p>6. Enjoy Benefits: Experience seamless transactions and reliable supplier connections.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <AppFooter />
  </div>
</template>

<style lang='less' scoped>
</style>