feat: contact页面完成+合作伙伴素材补充

api/model/common.ts

@@ -12,6 +12,7 @@ enum Api {
   labels = '/client/centerProductTag/listTree',
   BannerData = '/client/category/detail',
   NoticeRemind = '/client/notification/unReadList',
+  consultingService = '/client-s003/guestbook/add',
 }
 
 /**
@@ -94,3 +95,9 @@ export async function getContactUsApi(params: any) {
 export async function getNoticeRemindApi(params: any) {
   return await useMyRequest().get(Api.NoticeRemind, params)
 }
+/**
+ * 获取未读提醒列表
+ */
+export async function consultingServiceApi(params: any) {
+  return await useMyRequest().post(Api.consultingService, params)
+}

components/business/contact/form.vue

@@ -0,0 +1,204 @@
+<!-- @format -->
+
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import { consultingServiceApi, getDictListApi } from '~/api/model/common'
+
+const ruleFormRef = ref<FormInstance>()
+const formInfo = ref<any>({
+  name: '',
+  mail: '',
+  subjects: '',
+  mobile: '',
+  message: '',
+  country: undefined,
+})
+const countryList = ref()
+const rules = ref<FormRules>({
+  name: [
+    {
+      required: false,
+      message: 'FirstName must be filled in',
+      trigger: 'blur',
+    },
+  ],
+  mail: [
+    {
+      required: false,
+      message: 'email must be filled in',
+      trigger: 'blur',
+    },
+  ],
+  subjects: [
+    {
+      required: false,
+      message: 'subjects must be filled in',
+      trigger: 'blur',
+    },
+  ],
+  mobile: [
+    {
+      required: false,
+      message: 'mobile must be filled in',
+      trigger: 'blur',
+    },
+  ],
+  message: [
+    {
+      required: false,
+      message: 'message must be filled in',
+      trigger: 'blur',
+    },
+  ],
+  country: [
+    {
+      required: false,
+      message: 'country must be selected',
+      trigger: 'change',
+    },
+  ],
+})
+async function submitInfo(formEl: FormInstance | undefined) {
+  if (!formEl)
+    return
+  await formEl.validate(async (valid) => {
+    if (valid) {
+      await consultingServiceApi(formInfo.value)
+      ElMessage.success('You have been submitted successfully!')
+      formEl.resetFields()
+    }
+    else { console.log('error submit!') }
+  })
+}
+async function getCountryList() {
+  const list = await getDictListApi('A070')
+  countryList.value = list
+}
+getCountryList()
+</script>
+
+<template>
+  <div class="py-80px bg-#F9FAFB">
+    <div class="w-1200-auto">
+      <h2 class="text-36px text-center fw-800 ls-2 text-#333 custom-title-font">
+        Submit Your Product <span class="custom-title-bg !pb-0">Needs</span>
+      </h2>
+      <div class="text-22px lh-40px text-#999 text-center mt-30px">
+        7th Floor, Tianbo International Building, 55 Jiangdong
+      </div>
+      <div class="text-22px lh-40px text-#999 text-center mb-60px">
+        Middle Road, Yiwu, Zhejiang, China
+      </div>
+      <div class="form w-550px m-auto">
+        <el-form
+          ref="ruleFormRef"
+          class="custom-form-item"
+          :rules="rules"
+          :model="formInfo"
+        >
+          <el-form-item label="Name" prop="name">
+            <el-input
+              v-model="formInfo.name"
+              placeholder="Please enter your name"
+              class="h-40px item-input  !b-rd-10px"
+            />
+          </el-form-item>
+          <el-form-item label="Email" prop="mail">
+            <el-input
+              v-model="formInfo.mail"
+              placeholder="Please enter your email"
+              class="h-40px item-input  !b-rd-10px"
+            />
+          </el-form-item>
+          <el-form-item label="Subjects" prop="subjects">
+            <el-input
+              v-model="formInfo.subjects"
+              placeholder="Please enter your subjects"
+              class="h-40px item-input  !b-rd-10px"
+            />
+          </el-form-item>
+          <el-form-item label="Country" prop="country" class="custom-form-item">
+            <el-select v-model="formInfo.country" placeholder="Please enter your country">
+              <el-option
+                v-for="(item, index) in countryList"
+                :key="index"
+                :value="item.value"
+                :label="`${item.label}`"
+              >
+                {{ item.label }}
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="Phone number" prop="mobile">
+            <el-input
+              v-model="formInfo.mobile"
+              placeholder="Please enter your Phone number"
+              class="h-40px item-input  !b-rd-10px"
+            />
+          </el-form-item>
+          <el-form-item label="Message" prop="message" class="!mb-60px">
+            <el-input
+              v-model="formInfo.message"
+              type="textarea"
+              :rows="4"
+              placeholder="Please enter information"
+              class="!b-rd-10px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              class="!w-full !h-50px !text-16px !fw-500 !b-rd-300px !bg-#9B6CFF !text-#fff"
+              @click="submitInfo(ruleFormRef)"
+            >
+              Submit
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+:deep(.custom-form-item) {
+  .el-form-item__label {
+    margin-bottom: 10px;
+    font-size: 16px !important;
+    font-weight: bold;
+    color: #333 !important;
+  }
+  .el-form-item{
+    display: block !important;
+    margin-bottom: 34px;
+    &:last-child {
+        margin-bottom:  0px!important;
+    }
+    .el-form-item__content {
+      .el-textarea {
+        .el-textarea__inner {
+          height: 100px !important;
+        }
+      }
+      .el-select{
+        .el-select__wrapper{
+            box-shadow: none !important;
+            height: 40px !important;
+            border-radius: 10px !important;
+        }
+      }
+      .item-input{
+        .el-input__wrapper{
+            box-shadow: none !important;
+             border-radius: 10px !important;
+        }
+      }
+      .el-textarea{
+        .el-textarea__inner{
+            box-shadow: none !important;
+            border-radius: 10px !important;
+        }
+      }
+    }
+  }
+}
+</style>

components/business/contact/method.vue

@@ -0,0 +1,54 @@
+<script lang='ts' setup>
+import Mail from '@/assets/images/email.png'
+import WhatsApp from '@/assets/images/weChat.png'
+import LiveChat from '@/assets/images/live_chat.png'
+
+const list = [
+  {
+    icon: Mail,
+    title: 'Email Us',
+    intro: 'Available 24/7 for your inquiries',
+    contact: 'contact@company.com',
+  },
+  {
+    icon: WhatsApp,
+    title: 'WhatsApp',
+    intro: 'Chat with us on WhatsApp',
+    contact: '+1 (234) 567-890',
+  },
+  {
+    icon: LiveChat,
+    title: 'Live Chat',
+    intro: 'Service hours 8:30AM-5:30PM',
+    contact: 'Contact number 10001',
+  },
+]
+</script>
+
+<template>
+  <div class="h-290px bg-#fff pos-relative w-1200-auto">
+    <div class="grid grid-cols-3 gap-30px pos-absolute top--90px w-full">
+      <div
+        v-for="(item, index) in list"
+        :key="index"
+        class="b-rd-12px bg-#fff text-center shadow p-30px"
+      >
+        <div class="p-20px b-rd-50% bg-#F2E5F2 inline-grid mb-20px">
+          <img :src="item.icon" class="w-24px h-24px" alt="">
+        </div>
+        <div class="fw-800 text-24px custom-title-font">
+          {{ item.title }}
+        </div>
+        <div class="my-12px text-#999">
+          {{ item.intro }}
+        </div>
+        <div class="text-#9B6CFF">
+          {{ item.contact }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+</style>

components/business/contact/more.vue

@@ -0,0 +1,108 @@
+<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"
+        >
+          <!-- <nuxt-link to="/faq"> -->
+          Get started
+          <!-- </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>

components/business/faq/assortment.vue

@@ -0,0 +1,193 @@
+<script lang='ts' setup>
+const activeName = ref()
+</script>
+
+<template>
+  <div class="py-120px w-1200-auto">
+    <div class="w-1200-auto text-center">
+      <h2 class="text-36px fw-800 text-#333 !mb-60px custom-title-font">
+        Product Selection & <span class="custom-title-bg">Assortment</span>
+      </h2>
+      <div class="custom-collapse w-full pos-relative">
+        <el-collapse v-model="activeName" accordion>
+          <el-collapse-item name="1">
+            <template #title>
+              <div class="flex">
+                <div
+                  class="w-36px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px"
+                >
+                  1
+                </div>
+                <h3
+                  class="flex-1 text-24px fw-bold text-#333 text-left lh-34px w-800px custom-title-font"
+                >
+                  What is the suggested strategy to manage creative fatigue?
+                </h3>
+              </div>
+            </template>
+            <template #icon="{ isActive }">
+              <img
+                v-if="!isActive"
+                src="@/assets/images/plus.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+              <img
+                v-else
+                src="@/assets/images/reduce.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+            </template>
+            <div
+              class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font"
+            >
+              Consistent with real life: in line with the process and logic of
+              real life, and comply with languages and habits that the users are
+              used to;
+            </div>
+          </el-collapse-item>
+          <el-collapse-item name="2">
+            <template #title>
+              <div class="flex">
+                <div
+                  class="w-36px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px"
+                >
+                  2
+                </div>
+                <h3
+                  class="flex-1 text-24px fw-bold text-#333 text-left lh-34px  w-800px custom-title-font"
+                >
+                  What is the suggested strategy to manage creative fatigue?
+                </h3>
+              </div>
+            </template>
+            <template #icon="{ isActive }">
+              <img
+                v-if="!isActive"
+                src="@/assets/images/plus.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+              <img
+                v-else
+                src="@/assets/images/reduce.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+            </template>
+            <h3
+              class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font"
+            >
+              Consistent with real life: in line with the process and logic of
+              real life, and comply with languages and habits that the users are
+              used to;
+            </h3>
+          </el-collapse-item>
+          <el-collapse-item name="3">
+            <template #title>
+              <div class="flex">
+                <div
+                  class="w-36px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px"
+                >
+                  3
+                </div>
+                <div
+                  class="flex-1 text-24px fw-bold text-#333 text-left lh-34px w-800px custom-title-font"
+                >
+                  What is the suggested strategy to manage creative fatigue?
+                </div>
+              </div>
+            </template>
+            <template #icon="{ isActive }">
+              <img
+                v-if="!isActive"
+                src="@/assets/images/plus.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+              <img
+                v-else
+                src="@/assets/images/reduce.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+            </template>
+            <h3
+              class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font"
+            >
+              Consistent with real life: in line with the process and logic of
+              real life, and comply with languages and habits that the users are
+              used to;
+            </h3>
+          </el-collapse-item>
+          <el-collapse-item name="4">
+            <template #title>
+              <div class="flex">
+                <div
+                  class="w-36px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px"
+                >
+                  4
+                </div>
+                <div
+                  class="flex-1 text-24px fw-bold text-#333 text-left lh-34px  w-800px custom-title-font"
+                >
+                  What is the suggested strategy to manage creative fatigue?
+                </div>
+              </div>
+            </template>
+            <template #icon="{ isActive }">
+              <img
+                v-if="!isActive"
+                src="@/assets/images/plus.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+              <img
+                v-else
+                src="@/assets/images/reduce.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+            </template>
+            <h3
+              class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font"
+            >
+              Consistent with real life: in line with the process and logic of
+              real life, and comply with languages and habits that the users are
+              used to;
+            </h3>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.custom-collapse {
+  ::v-deep(.el-collapse) {
+    border-top: unset !important;
+    border-bottom: unset !important;
+    .el-collapse-item {
+      margin-bottom: 30px;
+      border-radius: 12px;
+      background-color: #fff;
+      box-sizing: border-box;
+      border: 1px solid #e0e4ea;
+      overflow: hidden;
+      padding: 30px;
+
+      .el-collapse-item__header {
+        border-bottom: unset !important;
+        display: flex;
+        justify-content: space-between;
+        align-items: start;
+        height: unset !important;
+        line-height: unset !important;
+      }
+      &.is-active {
+        .el-collapse-item__wrap {
+          border-bottom: unset !important;
+        }
+      }
+      .el-collapse-item__content {
+        padding: 0px !important;
+        text-align: left;
+      }
+    }
+  }
+}
+</style>

components/business/faq/branding.vue

@@ -0,0 +1,152 @@
+<script lang='ts' setup>
+const activeName = ref()
+</script>
+
+<template>
+  <div class="w-1200-auto">
+    <div class="w-1200-auto text-center">
+      <h2 class="text-36px fw-800 text-#333 !mb-60px custom-title-font">
+        Customization &  <span class="custom-title-bg">Branding</span>
+      </h2>
+      <div class="custom-collapse w-full pos-relative">
+        <el-collapse v-model="activeName" accordion>
+          <el-collapse-item name="2">
+            <template #title>
+              <div class="flex">
+                <div
+                  class="w-36px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px"
+                >
+                  1
+                </div>
+                <h3
+                  class="flex-1 text-24px fw-bold text-#333 text-left lh-34px  w-800px custom-title-font"
+                >
+                  What is the suggested strategy to manage creative fatigue?
+                </h3>
+              </div>
+            </template>
+            <template #icon="{ isActive }">
+              <img
+                v-if="!isActive"
+                src="@/assets/images/plus.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+              <img
+                v-else
+                src="@/assets/images/reduce.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+            </template>
+            <h3
+              class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font"
+            >
+              EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description,
+            </h3>
+          </el-collapse-item>
+          <el-collapse-item name="3">
+            <template #title>
+              <div class="flex">
+                <div
+                  class="w-36px  h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px"
+                >
+                  2
+                </div>
+                <div
+                  class="flex-1 text-24px fw-bold text-#333 text-left lh-34px w-800px custom-title-font"
+                >
+                  What is the suggested strategy to manage creative fatigue?
+                </div>
+              </div>
+            </template>
+            <template #icon="{ isActive }">
+              <img
+                v-if="!isActive"
+                src="@/assets/images/plus.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+              <img
+                v-else
+                src="@/assets/images/reduce.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+            </template>
+            <h3
+              class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font"
+            >
+              EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description,
+            </h3>
+          </el-collapse-item>
+          <el-collapse-item name="4">
+            <template #title>
+              <div class="flex">
+                <div
+                  class="w-36px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px"
+                >
+                  3
+                </div>
+                <div
+                  class="flex-1 text-24px fw-bold text-#333 text-left lh-34px  w-800px custom-title-font"
+                >
+                  What is the suggested strategy to manage creative fatigue?
+                </div>
+              </div>
+            </template>
+            <template #icon="{ isActive }">
+              <img
+                v-if="!isActive"
+                src="@/assets/images/plus.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+              <img
+                v-else
+                src="@/assets/images/reduce.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+            </template>
+            <h3
+              class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font"
+            >
+              EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description,
+            </h3>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.custom-collapse {
+  ::v-deep(.el-collapse) {
+    border-top: unset !important;
+    border-bottom: unset !important;
+    .el-collapse-item {
+      margin-bottom: 30px;
+      border-radius: 12px;
+      background-color: #fff;
+      box-sizing: border-box;
+      border: 1px solid #e0e4ea;
+      overflow: hidden;
+      padding: 30px;
+
+      .el-collapse-item__header {
+        border-bottom: unset !important;
+        display: flex;
+        justify-content: space-between;
+        align-items: start;
+        height: unset !important;
+        line-height: unset !important;
+      }
+      &.is-active {
+        .el-collapse-item__wrap {
+          border-bottom: unset !important;
+        }
+      }
+      .el-collapse-item__content {
+        padding: 0px !important;
+        text-align: left;
+      }
+    }
+  }
+}
+</style>

components/common/block/faq.vue

@@ -5,10 +5,7 @@ const activeName = ref()
 </script>
 
 <template>
-  <div
-    class="bg-#F3F4FB py-120px data-section"
-    data-section-color="#F3F4FB"
-  >
+  <div class="bg-#F3F4FB py-120px data-section" data-section-color="#F3F4FB">
     <div class="w-1200-auto flex justify-between">
       <div>
         <div
@@ -16,7 +13,7 @@ const activeName = ref()
         >
           FAQ
         </div>
-        <h2 class="  text-#333 text-36px !fw-800 custom-title-font">
+        <h2 class="text-#333 text-36px !fw-800 custom-title-font">
           Frequently
         </h2>
         <h2 class="!mb-20px text-#333 text-36px !fw-800 custom-title-font">
@@ -32,100 +29,153 @@ const activeName = ref()
       </div>
       <div class="custom-collapse w-680px pos-relative">
         <el-collapse v-model="activeName" accordion>
-          <el-collapse-item
-            name="1"
-          >
+          <el-collapse-item name="1">
             <template #title>
               <div class="flex">
-                <div class="w-36px mt-6px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px">
+                <div
+                  class="w-36px mt-6px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px"
+                >
                   1
                 </div>
-                <h3 class="flex-1 text-24px fw-bold text-#333 text-left lh-34px w-520px custom-title-font">
+                <h3
+                  class="flex-1 text-24px fw-bold text-#333 text-left lh-34px w-520px custom-title-font"
+                >
                   What is the suggested strategy to manage creative fatigue?
                 </h3>
               </div>
             </template>
             <template #icon="{ isActive }">
-              <img v-if="!isActive" src="@/assets/images/plus.png" class="!w-20px !h-20px mt-12px">
-              <img v-else src="@/assets/images/reduce.png" class="!w-20px !h-20px mt-12px ">
+              <img
+                v-if="!isActive"
+                src="@/assets/images/plus.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+              <img
+                v-else
+                src="@/assets/images/reduce.png"
+                class="!w-20px !h-20px mt-12px"
+              >
             </template>
-            <div class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font">
+            <div
+              class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font"
+            >
               Consistent with real life: in line with the process and logic of
               real life, and comply with languages and habits that the users are
               used to;
             </div>
           </el-collapse-item>
-          <el-collapse-item
-            name="2"
-          >
+          <el-collapse-item name="2">
             <template #title>
               <div class="flex">
-                <div class="w-36px mt-6px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px">
+                <div
+                  class="w-36px mt-6px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px"
+                >
                   2
                 </div>
-                <h3 class="flex-1 text-24px fw-bold text-#333 text-left lh-34px w-520px custom-title-font">
+                <h3
+                  class="flex-1 text-24px fw-bold text-#333 text-left lh-34px w-520px custom-title-font"
+                >
                   What is the suggested strategy to manage creative fatigue?
                 </h3>
               </div>
             </template>
             <template #icon="{ isActive }">
-              <img v-if="!isActive" src="@/assets/images/plus.png" class="!w-20px !h-20px mt-12px">
-              <img v-else src="@/assets/images/reduce.png" class="!w-20px !h-20px mt-12px ">
+              <img
+                v-if="!isActive"
+                src="@/assets/images/plus.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+              <img
+                v-else
+                src="@/assets/images/reduce.png"
+                class="!w-20px !h-20px mt-12px"
+              >
             </template>
-            <h3 class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font">
+            <h3
+              class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font"
+            >
               Consistent with real life: in line with the process and logic of
               real life, and comply with languages and habits that the users are
               used to;
             </h3>
           </el-collapse-item>
-          <el-collapse-item
-            name="3"
-          >
+          <el-collapse-item name="3">
             <template #title>
               <div class="flex">
-                <div class="w-36px mt-6px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px">
+                <div
+                  class="w-36px mt-6px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px"
+                >
                   3
                 </div>
-                <div class="flex-1 text-24px fw-bold text-#333 text-left lh-34px w-520px custom-title-font">
+                <div
+                  class="flex-1 text-24px fw-bold text-#333 text-left lh-34px w-520px custom-title-font"
+                >
                   What is the suggested strategy to manage creative fatigue?
                 </div>
               </div>
             </template>
             <template #icon="{ isActive }">
-              <img v-if="!isActive" src="@/assets/images/plus.png" class="!w-20px !h-20px mt-12px">
-              <img v-else src="@/assets/images/reduce.png" class="!w-20px !h-20px mt-12px ">
+              <img
+                v-if="!isActive"
+                src="@/assets/images/plus.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+              <img
+                v-else
+                src="@/assets/images/reduce.png"
+                class="!w-20px !h-20px mt-12px"
+              >
             </template>
-            <h3 class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font">
+            <h3
+              class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font"
+            >
               Consistent with real life: in line with the process and logic of
               real life, and comply with languages and habits that the users are
               used to;
             </h3>
           </el-collapse-item>
-          <el-collapse-item
-            name="4"
-          >
+          <el-collapse-item name="4">
             <template #title>
               <div class="flex">
-                <div class="w-36px mt-6px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px">
+                <div
+                  class="w-36px mt-6px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px"
+                >
                   4
                 </div>
-                <div class="flex-1 text-24px fw-bold text-#333 text-left lh-34px w-520px custom-title-font">
+                <div
+                  class="flex-1 text-24px fw-bold text-#333 text-left lh-34px w-520px custom-title-font"
+                >
                   What is the suggested strategy to manage creative fatigue?
                 </div>
               </div>
             </template>
             <template #icon="{ isActive }">
-              <img v-if="!isActive" src="@/assets/images/plus.png" class="!w-20px !h-20px mt-12px">
-              <img v-else src="@/assets/images/reduce.png" class="!w-20px !h-20px mt-12px ">
+              <img
+                v-if="!isActive"
+                src="@/assets/images/plus.png"
+                class="!w-20px !h-20px mt-12px"
+              >
+              <img
+                v-else
+                src="@/assets/images/reduce.png"
+                class="!w-20px !h-20px mt-12px"
+              >
             </template>
-            <h3 class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font">
+            <h3
+              class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font"
+            >
               Consistent with real life: in line with the process and logic of
               real life, and comply with languages and habits that the users are
               used to;
             </h3>
           </el-collapse-item>
         </el-collapse>
-        <img src="@/assets/images/icon_face.png" class="w-70px h-70px pos-absolute top--50px right-0px" alt="" srcset="">
+        <img
+          src="@/assets/images/icon_face.png"
+          class="w-70px h-70px pos-absolute top--50px right-0px"
+          alt=""
+          srcset=""
+        >
       </div>
     </div>
   </div>
@@ -144,21 +194,21 @@ const activeName = ref()
       padding: 30px;
 
       .el-collapse-item__header {
+        border-bottom: unset !important;
+        display: flex;
+        justify-content: space-between;
+        align-items: start;
+        height: unset !important;
+        line-height: unset !important;
+      }
+      &.is-active {
+        .el-collapse-item__wrap {
           border-bottom: unset !important;
-          display: flex;
-          justify-content: space-between;
-            align-items: start;
-            height:  unset !important;
-            line-height: unset !important;
-        }
-        &.is-active{
-            .el-collapse-item__wrap{
-                border-bottom: unset !important;
-            }
-        }
-        .el-collapse-item__content{
-            padding: 0px !important;
         }
+      }
+      .el-collapse-item__content {
+        padding: 0px !important;
+      }
     }
   }
 }

components/common/block/partner.vue

@@ -1,10 +1,24 @@
 <script lang='ts' setup>
 import partner_01 from '@/assets/images/partners/partner_01.png'
+import partner_02 from '@/assets/images/partners/partner_02.png'
+import partner_03 from '@/assets/images/partners/partner_03.png'
+import partner_04 from '@/assets/images/partners/partner_04.png'
+import partner_05 from '@/assets/images/partners/partner_05.png'
+import partner_06 from '@/assets/images/partners/partner_06.png'
+import partner_07 from '@/assets/images/partners/partner_07.png'
+import partner_08 from '@/assets/images/partners/partner_08.png'
+import partner_09 from '@/assets/images/partners/partner_09.png'
+import partner_10 from '@/assets/images/partners/partner_10.png'
+import partner_11 from '@/assets/images/partners/partner_11.png'
+import partner_12 from '@/assets/images/partners/partner_12.png'
+import partner_13 from '@/assets/images/partners/partner_13.png'
+import partner_14 from '@/assets/images/partners/partner_14.png'
+import partner_15 from '@/assets/images/partners/partner_15.png'
 
 const avatarArray = [
-  [partner_01, partner_01, partner_01, partner_01, partner_01],
-  [partner_01, partner_01, partner_01, partner_01, partner_01],
-  [partner_01, partner_01, partner_01, partner_01, partner_01],
+  [partner_01, partner_02, partner_03, partner_04, partner_05],
+  [partner_06, partner_07, partner_08, partner_09, partner_10],
+  [partner_11, partner_12, partner_13, partner_14, partner_15],
 ]
 const colorMode = useColorMode()
 </script>
@@ -22,28 +36,28 @@ const colorMode = useColorMode()
         :pause-on-hover="true"
         :gradient="true"
         :gradient-color="colorMode !== 'light' ? [255, 255, 255] : [0, 0, 0]"
-        gradient-length="10%"
+        gradient-length="5%"
       >
         <div v-for="avatar, i in avatarArray[0]" :key="i">
-          <img :src="avatar" class="w-220px h-70px mr-30px mb-40px b-rd-6px">
+          <img :src="avatar" class="w-220px h-70px mr-30px mb-40px b-rd-6px bg-#fff img-shadow">
         </div>
       </Vue3Marquee>
       <Vue3Marquee
         :pause-on-hover="true"
         :gradient="true"
-        gradient-length="10%"
+        gradient-length="5%"
       >
         <div v-for="avatar, i in avatarArray[1]" :key="i">
-          <img :src="avatar" class="w-220px h-70px mr-30px mb-40px b-rd-6px">
+          <img :src="avatar" class="w-220px h-70px mr-30px mb-40px b-rd-6px bg-#fff img-shadow">
         </div>
       </Vue3Marquee>
       <Vue3Marquee
         :pause-on-hover="true"
         :gradient="true"
-        gradient-length="10%"
+        gradient-length="5%"
       >
         <div v-for="avatar, i in avatarArray[2]" :key="i">
-          <img :src="avatar" class="w-220px h-70px mr-30px b-rd-6px">
+          <img :src="avatar" class="w-220px h-70px mr-30px b-rd-6px bg-#fff img-shadow">
         </div>
       </Vue3Marquee>
     </div>
@@ -51,4 +65,7 @@ const colorMode = useColorMode()
 </template>
 
 <style lang='less' scoped>
+.img-shadow{
+  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.05);
+}
 </style>

pages/contact.vue

@@ -1,11 +1,41 @@
-<script lang='ts' setup>
+<!-- @format -->
+
+<script lang="ts" setup>
+
 </script>
 
 <template>
   <div>
-    solutions
+    <div class="pt-160px pb-200px bg-#EAE5FA text-center">
+      <h2
+        class="text-60px fw-800 ls-2 text-#333 inline-block pos-relative custom-title-font"
+      >
+        Contact <span class="custom-title-bg03 !pb-0"> Us</span>
+        <img
+          src="@/assets/images/blog_icon05.png"
+          class="w-90px h-90px pos-absolute top--10px left--140px"
+          alt=""
+          srcset=""
+        >
+        <img
+          src="@/assets/images/blog_icon06.png"
+          class="w-70px h-70px pos-absolute top--0px right--120px"
+          alt=""
+          srcset=""
+        >
+      </h2>
+    </div>
+    <business-contact-method />
+    <business-contact-form />
+    <business-contact-more />
+    <AppFooter />
   </div>
 </template>
 
-<style lang='less' scoped>
+<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);
+}
 </style>

pages/faq.vue

@@ -1,9 +1,15 @@
-<script lang='ts' setup>
-</script>
-
 <template>
   <div>
-    solutions
+    <div class="pt-184px pb-180px bg-#F3F4FB text-center">
+      <h2 class="text-60px fw-800 ls-2 text-#333 inline-block pos-relative custom-title-font">
+        Frequently Asked <span class="custom-title-bg">Questions</span>
+        <img src="@/assets/images/blog_icon05.png" class="w-90px h-90px pos-absolute top--10px left--140px" alt="" srcset="">
+        <img src="@/assets/images/blog_icon06.png" class="w-70px h-70px pos-absolute top--0px right--120px" alt="" srcset="">
+      </h2>
+    </div>
+    <business-faq-assortment />
+    <business-faq-branding />
+    <AppFooter />
   </div>
 </template>