feat: 已完成的部分，添加字体库

assets/style/common.less

@@ -1,6 +1,6 @@
 @font-face {
     font-family: 'CustomTitleFont';
-    src: url("~/assets/fonts/BodoniModa.ttf")format('truetype');
+    src: url("~/assets/fonts/Nunito_Sans.ttf")format('truetype');
     font-weight: normal;
     font-style: normal;
 }
@@ -12,20 +12,6 @@
     font-style: normal;
 }
 
-@font-face {
-    font-family: 'CommonBoldFont';
-    src: url("~/assets/fonts/Roboto-Medium.ttf")format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'PageFooterFont';
-    src: url("~/assets/fonts/Georgia Bold.ttf")format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
 .custom-title-font {
     font-family: 'CustomTitleFont';
 }
@@ -34,14 +20,6 @@
     font-family: 'CommonFont';
 }
 
-.common-bold-font {
-    font-family: 'CommonBoldFont';
-}
-
-.footer-font {
-    font-family: 'PageFooterFont';
-}
-
 .nuxt-icon {
     margin-bottom: unset !important;
 }

components/business/categories/block.vue

@@ -27,7 +27,7 @@ const list = [
 <template>
   <div class="bg-#F9FAFB py-120px">
     <div class="w-1200-auto text-center">
-      <h2 class="text-36px fw-800 text-#333 !mb-80px">
+      <h2 class="text-36px fw-800 text-#333 !mb-80px custom-title-font">
         EJET Spark Selects Products <span class="custom-title-bg">With</span>
       </h2>
       <div class="flex gap-40px">

components/business/categories/comp/item.vue

@@ -10,7 +10,7 @@ defineProps({
       <img :src="item.img" alt="" srcset="" class="w-100% h-310px  object-cover">
       <div class="p-30px">
         <h3
-          class="!mb-10px fw-800 text-24px text-#333 line-clamp-2"
+          class="!mb-10px fw-800 text-24px text-#333 line-clamp-2 custom-title-font"
         >
           {{ item.title }}
         </h3>

components/business/categories/comp/temp1.vue

@@ -12,7 +12,7 @@ defineProps({
           <img :src="item.img" alt="" srcset="" class="w-100% h-240px  object-cover">
         </div>
         <h3
-          class="!mb-15px !mt-30px fw-800 text-24px text-#333 line-clamp-2"
+          class="!mb-15px !mt-30px fw-800 text-24px text-#333 line-clamp-2 custom-title-font"
         >
           {{ item.title }}
         </h3>

components/business/categories/comp/temp2.vue

@@ -12,7 +12,7 @@ defineProps({
           <img :src="item.img" alt="" srcset="" class="w-300 h-300px  object-cover">
         </div>
         <h3
-          class="!mb-15px !mt-30px fw-800 text-24px text-#333 line-clamp-2"
+          class="!mb-15px !mt-30px fw-800 text-24px text-#333 line-clamp-2 custom-title-font"
         >
           {{ item.title }}
         </h3>

components/business/categories/list.vue

@@ -79,7 +79,7 @@ const list_column_three = [
 <template>
   <div class="bg-#fff py-120px">
     <div class="w-1200-auto text-center">
-      <h2 class="text-36px fw-800 text-#333 !mb-20px">
+      <h2 class="text-36px fw-800 text-#333 !mb-20px custom-title-font">
         Access Category-Driven <span class="custom-title-bg">Solutions</span>
       </h2>
       <div class="text-#999 text-22px mb-80px">

components/business/home/banner.vue

@@ -54,10 +54,10 @@ onUnmounted(() => {
     <div class="w-1200-auto pos-relative h-800px">
       <div class="text-center pos-absolute top-200px left-50% translate-x--50%">
         <div class="pos-relative">
-          <h1 class="text-58px text-#fff fw-800 ls-2">
+          <h1 class="text-58px text-#fff fw-800 ls-2 custom-title-font">
             Spark The Trend
           </h1>
-          <h1 class="text-58px text-#fff fw-800 ls-2">
+          <h1 class="text-58px text-#fff fw-800 ls-2 custom-title-font">
             Ignite Sales
           </h1>
           <div

components/business/home/solutions.vue

@@ -113,7 +113,7 @@ const solutionList = computed(() => {
     data-section-color="#F3F4FB"
   >
     <div class="w-1200-auto text-center">
-      <h2 class="text-36px fw-800 text-#333 !mb-20px">
+      <h2 class="text-36px fw-800 text-#333 !mb-20px custom-title-font">
         Creative, Trend-Driven <span class="custom-title-bg">Solutions</span>
       </h2>
       <div class="text-#999 text-22px mb-40px">
@@ -161,7 +161,7 @@ const solutionList = computed(() => {
           <div class="grid grid-cols-2 gap-col-80px gap-row-50px">
             <div v-for="(item, index) in solutionList" :key="index">
               <img :src="item.img" class="w-50px h-50px" alt="" srcset="">
-              <h4 class="!mt-20px !mb-10px text-#333 text-18px fw-800">
+              <h4 class="!mt-20px !mb-10px text-#333 text-18px fw-800 custom-title-font">
                 {{ item.title }}
               </h4>
               <div class="text-#666 lh-24px">

components/business/solutions/block_power.vue

@@ -41,7 +41,7 @@ const diff_data: any = computed(() => {
 
 <template>
   <div class="w-1200-auto pb-110px">
-    <h2 class="text-36px fw-800 text-#333 !mb-88px text-center">
+    <h2 class="text-36px fw-800 text-#333 !mb-88px text-center custom-title-font">
       Power Your Retail Success with <span class="custom-title-bg"> EJET Spark </span>
     </h2>
     <div class="flex gap-40px">
@@ -59,7 +59,7 @@ const diff_data: any = computed(() => {
       <div class="flex-1">
         <div class="flex flex-col justify-between">
           <div>
-            <h3 class="text-24px text-#333 fw-800 lh-32px">
+            <h3 class="text-24px text-#333 fw-800 lh-32px custom-title-font">
               {{ diff_data.title }}
             </h3>
             <div class="text-#999 lh-22px mt-20px">

components/business/solutions/block_solve.vue

@@ -108,7 +108,7 @@ const solutionList = computed(() => {
 <template>
   <div class="w-1200-auto ">
     <div class="flex">
-      <div v-for="item in list" :key="item.key" :class="solution === item.key ? '!bg-#9B6CFF !text-#fff' : ''" class="flex-1 bg-#F0F0F0 text-#333 py-20px text-center   hover:text-#9B6CFF transition-all duration-300 cursor-pointer" @click="solution = item.key">
+      <div v-for="item in list" :key="item.key" :class="solution === item.key ? '!bg-#9B6CFF !text-#fff' : ''" class="flex-1 bg-#F0F0F0 text-#333 py-20px text-center  custom-title-font  hover:text-#9B6CFF transition-all duration-300 cursor-pointer" @click="solution = item.key">
         {{ item.title }}
       </div>
     </div>
@@ -131,7 +131,7 @@ const solutionList = computed(() => {
             <div v-for="item in solutionList" :key="item.key" class="flex">
               <img :src="item.img" class="w-40px h-40px mr-20px" alt="">
               <div>
-                <h3 class="text-18px fw-800 text-#333 !mb-10px">
+                <h3 class="text-18px fw-800 text-#333 !mb-10px custom-title-font">
                   {{ item.title }}
                 </h3>
                 <div class="text-#666 lh-24px">

components/business/solutions/block_statistic.vue

@@ -40,10 +40,10 @@ const list = [
           alt=""
           class="w-80px h-80px mx-auto"
         >
-        <div class="text-#fff text-36px fw-900 mt-20px mb-10px ls-2">
+        <div class="text-#fff text-36px fw-900 mt-20px mb-10px ls-2 custom-title-font">
           {{ item.total }}+
         </div>
-        <div class="text-#fff text-20px fw-500">
+        <div class="text-#fff text-20px fw-500 custom-title-font">
           {{ item.title }}
         </div>
       </div>

components/business/solutions/block_steps.vue

@@ -25,16 +25,16 @@ const steps = [
 <template>
   <div class="py-120px bg-#fff">
     <div class="w-1200-auto">
-      <h2 class="text-36px fw-800 text-#333 !mb-20px text-center">
+      <h2 class="text-36px fw-800 text-#333 !mb-20px text-center custom-title-font">
         Partner With Us in 3  <span class="custom-title-bg"> Steps </span>
       </h2>
       <div class="flex gap-112px text-center">
         <div v-for="item, index in steps" :key="index" class="custom-step">
           <img :src="item.img" class="w-200px h-200px mx-auto mb-10px " alt="">
-          <div class="text-24px fw-800 text-#333 mb-10px ls-2">
+          <div class="text-24px fw-800 text-#333 mb-10px ls-2 custom-title-font">
             Step {{ index + 1 }}
           </div>
-          <div class="text-24px fw-800 text-#333 mb-10px">
+          <div class="text-24px fw-800 text-#333 mb-10px custom-title-font">
             {{ item.title }}
           </div>
           <div class="text-16px text-#999 lh-22px">

components/business/trends/index.vue

@@ -37,7 +37,7 @@ const list = ref([
 <template>
   <div class="bg-#fff py-120px">
     <div class="w-1200-auto text-center">
-      <h2 class="text-36px fw-800 text-#333 !mb-20px">
+      <h2 class="text-36px fw-800 text-#333 !mb-20px custom-title-font">
         Download with The Latest <span class="custom-title-bg">Trends</span>
       </h2>
       <div class="text-#999 w-850px text-22px mb-80px mx-auto lh-34px">

components/common/block/blog.vue

@@ -24,7 +24,7 @@ getVideoOrBlogsList()
     data-section-color="#ffffff"
   >
     <div class="w-1200-auto text-center">
-      <h2 class="!text-36px !fw-800 text-#333 !mb-44px">
+      <h2 class="!text-36px !fw-800 text-#333 !mb-44px custom-title-font">
         EJET Spark <span class="custom-title-bg">Blog</span>
       </h2>
       <div class="flex items-center justify-end text-#9B6CFF cursor-pointer text-14px fw-bold mb-20px">

components/common/block/catalogs.vue

@@ -55,7 +55,7 @@ function onViewAll() {
     data-section-color="#0F0820"
   >
     <div class="w-1200-auto text-left pos-relative">
-      <h2 class="text-36px fw-800 text-#fff !mb-40px">
+      <h2 class="text-36px fw-800 text-#fff !mb-40px custom-title-font">
         Download EJET Spark  <span class="custom-title-bg">Catalogs</span>
       </h2>
       <div class="flex gap-20px mb-30px text-center">
@@ -114,7 +114,7 @@ function onViewAll() {
           @swiper="onVerticalSwiper"
         >
           <SwiperSlide v-for="(item, index) in categoryList" :key="index">
-            <common-catalogs-item :item="item" />
+            <common-catalogs-item :item="item" class="catalog-item" />
           </SwiperSlide>
         </Swiper>
       </div>
@@ -142,8 +142,9 @@ function onViewAll() {
   padding-bottom: 8px;
 }
 .swiper-slide{
+    background-color: #F3F4FB;
   &.swiper-slide-prev{
-    background-color: #D7C4FF;
+    background-color: #D7C4FF!important;
     transition: all 0.3s ease-in-out;
   }
 }

components/common/block/exhibited.vue

@@ -33,17 +33,17 @@ const list = [
     class="bg-#0F0820 pt-110px pb-120px  data-section"
     data-section-color="#0F0820"
   >
-    <div class="w-1200-auto text-center flex gap-190px justify-between">
+    <div class="w-1200-auto text-center flex gap-150px justify-between">
       <div v-for="item, index in list" :key="index">
         <img
           :src="item.icon"
           alt=""
           class="w-80px h-80px mx-auto"
         >
-        <div class="text-#fff text-36px fw-900 mt-20px mb-10px ls-2">
+        <div class="text-#fff text-36px fw-900 mt-20px mb-10px ls-2 custom-title-font">
           {{ item.total }}+
         </div>
-        <div class="text-#fff text-20px fw-500">
+        <div class="text-#fff text-20px fw-500 custom-title-font">
           {{ item.title }}
         </div>
       </div>

components/common/block/faq.vue

@@ -16,10 +16,10 @@ const activeName = ref()
         >
           FAQ
         </div>
-        <h2 class="!mb-10px text-#333 text-36px !fw-800">
+        <h2 class="  text-#333 text-36px !fw-800 custom-title-font">
           Frequently
         </h2>
-        <h2 class="!mb-20px text-#333 text-36px !fw-800">
+        <h2 class="!mb-20px text-#333 text-36px !fw-800 custom-title-font">
           Asked <span class="custom-title-bg">Questions</span>
         </h2>
         <div
@@ -38,7 +38,7 @@ const activeName = ref()
                 <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">
+                <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>
@@ -47,7 +47,7 @@ const activeName = ref()
               <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">
+            <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;
@@ -61,7 +61,7 @@ const activeName = ref()
                 <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">
+                <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>
@@ -70,7 +70,7 @@ const activeName = ref()
               <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">
+            <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;
@@ -84,7 +84,7 @@ const activeName = ref()
                 <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">
+                <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>
@@ -93,7 +93,7 @@ const activeName = ref()
               <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">
+            <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;
@@ -107,7 +107,7 @@ const activeName = ref()
                 <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">
+                <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>
@@ -116,7 +116,7 @@ const activeName = ref()
               <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">
+            <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;

components/common/block/partner.vue

@@ -13,7 +13,7 @@ const colorMode = useColorMode()
     data-section-color="#ffffff"
   >
     <div class="w-1200-auto text-center">
-      <h2 class="text-36px fw-800 text-#333 !mb-86px">
+      <h2 class="text-36px fw-800 text-#333 !mb-86px custom-title-font">
         Our Bussiness <span class="custom-title-bg">Partners</span>
       </h2>
       <Vue3Marquee

components/common/blog/item.vue

@@ -14,7 +14,7 @@ defineProps({
         {{ item.category_dictText }}
       </div>
       <h3
-        class="!mb-15px !mt-30px fw-800 text-24px text-#333 line-clamp-2"
+        class="!mb-15px !mt-30px fw-800 text-24px text-#333 line-clamp-2 custom-title-font"
       >
         {{ item.contentTitle }}
       </h3>

components/common/catalogs/item.vue

@@ -12,10 +12,10 @@ defineProps({
   <div class="custom-main mx-auto  overflow-hidden pos-relative">
     <svgo-star class="pos-absolute top-20px right-20px w-20px h-20px" />
     <div class="p-20px pb-30px">
-      <h2 class="!mb-15px w-250px text-24px fw-800 text-#333 line-clamp-2">
+      <h2 class="!mb-15px w-250px text-24px fw-800 text-#333 line-clamp-2 custom-title-font">
         {{ item.brandName }}
       </h2>
-      <div class="text-#666 lh-24px ">
+      <div class="text-#666 lh-24px line-clamp-2">
         {{ item.brandName }}
       </div>
     </div>
@@ -23,7 +23,7 @@ defineProps({
       :src="item.thumbnail || item.masterImage"
       alt=""
       srcset=""
-      class="w-100% b-rd-tl-10px h-100% b-rd-tr-10px object-cover"
+      class="w-100% b-rd-tl-10px  b-rd-tr-10px object-cover"
     >
   </div>
 </template>

components/common/footer/guide.vue

@@ -8,10 +8,10 @@
       <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-540px">
           <img src="@/assets/images/footer_contact_icon01.png" class="w-50px h-50px mb-10px" alt="">
-          <h2 class="text-36px fw-bold lh-60px">
+          <h2 class="text-36px fw-bold lh-60px custom-title-font">
             Ready to Start with EJET Spark?
           </h2>
-          <div class="text-24px mt-10px">
+          <div class="text-24px mt-10px custom-title-font">
             Contact us to get exclusive catalogs!
           </div>
           <div
@@ -28,7 +28,7 @@
       <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">
+            <h4 class="!mb-30px fw-500 text-24px custom-title-font">
               Company
             </h4>
             <div class="mb-30px">
@@ -61,7 +61,7 @@
             </div>
           </div>
           <div class="w-25% text-#fff text-16px">
-            <h4 class="!mb-30px fw-500 text-24px">
+            <h4 class="!mb-30px fw-500 text-24px custom-title-font">
               Product
             </h4>
             <div class="mb-30px">
@@ -81,7 +81,7 @@
             </div>
           </div>
           <div class="w-25% text-#fff text-16px">
-            <h4 class="!mb-30px fw-500 text-24px">
+            <h4 class="!mb-30px fw-500 text-24px custom-title-font">
               Resources
             </h4>
             <div class="mb-30px">

pages/blog/[slug].vue

@@ -49,7 +49,7 @@ getVideoOrBlogsDetail()
             {{ detail.category_dictText }}
           </div>
           <h1
-            class="!mb-20px fw-800 text-40px ls-2 text-#333 line-clamp-2 lh-50px"
+            class="!mb-20px fw-800 text-40px ls-2 text-#333 line-clamp-2 lh-50px custom-title-font"
           >
             <!-- {{ detail.contentTitle }} -->
             EJET Spark Blog Title Trend Report about Catalog

pages/blog/index.vue

@@ -75,7 +75,7 @@ const validateEmail = computed(() => {
 <template>
   <div>
     <div class="pt-184px pb-50px bg-#F3F4FB text-center">
-      <h2 class="text-60px fw-800 ls-2 text-#333 inline-block pos-relative">
+      <h2 class="text-60px fw-800 ls-2 text-#333 inline-block pos-relative custom-title-font">
         EJET Spark  <span class="custom-title-bg">Blog</span>
         <img src="@/assets/images/blog_icon05.png" class="w-90px h-90px pos-absolute top--10px left--120px" alt="" srcset="">
         <img src="@/assets/images/blog_icon06.png" class="w-70px h-70px pos-absolute top--20px right--100px" alt="" srcset="">

pages/categories/[slug].vue

@@ -31,13 +31,13 @@ const list = [
   <div>
     <div class=" bg-#0F0820">
       <div class="header w-1200-auto text-center flex items-center justify-center h-600px  bg-no-repeat bg-center" style="background-image: url('https://picsum.photos/420/420')">
-        <h1 class="text-58px fw-800 text-#fff ls-2">
+        <h1 class="text-58px fw-800 text-#fff ls-2 custom-title-font">
           STATIONARY & OFFICE SUPPLIES
         </h1>
       </div>
     </div>
     <div class="py-120px w-1200-auto text-center">
-      <h2 class="text-36px fw-800 text-#333 !mb-20px">
+      <h2 class="text-36px fw-800 text-#333 !mb-20px custom-title-font">
         Our Latest Product <span class="custom-title-bg">Catalogs</span>
       </h2>
       <div class="text-#999 text-22px mb-40px">

pages/categories/index.vue

@@ -5,10 +5,10 @@
   <div class="bg-#0F0820">
     <div class="header w-1200-auto flex items-center justify-center text-center h-600px  bg-no-repeat bg-center" style="background-image: url('https://picsum.photos/600/600')">
       <div>
-        <h1 class="text-58px fw-800 text-#fff ls-2">
+        <h1 class="text-58px fw-800 text-#fff ls-2 custom-title-font">
           Discover, Download,
         </h1>
-        <h1 class="text-58px fw-800 text-#9B6CFF ls-2 !mt-10px">
+        <h1 class="text-58px fw-800 text-#9B6CFF ls-2 !mt-10px custom-title-font">
           Delight!
         </h1>
         <el-button class="mt-30px !bg-#fff !text-#9B6CFF !w-160px !h-40px !b-0px !b-rd-200px" round>

pages/solutions.vue

@@ -7,10 +7,10 @@
     <div class="bg-#0F0820">
       <div class="header w-1200-auto flex items-center justify-between pt-230px pb-124px">
         <div>
-          <h1 class="text-58px fw-800 text-#fff ls-2">
+          <h1 class="text-58px fw-800 text-#fff ls-2 custom-title-font">
             Full-Category Solution
           </h1>
-          <h1 class="text-58px fw-800 text-#fff ls-2 !mt-10px">
+          <h1 class="text-58px fw-800 text-#fff ls-2 !mt-10px custom-title-font">
             One-Stop Supply
           </h1>
           <el-button class="my-60px !text-#fff !bg-#878490 !w-160px !h-40px !b-#fff !b-rd-400px" round>

pages/trends.vue

@@ -4,16 +4,21 @@
 <template>
   <div class="bg-#0F0820">
     <div class="header w-1200-auto flex items-center  h-600px  bg-no-repeat bg-center" style="background-image: url('https://picsum.photos/600/600')">
-      <div>
-        <h1 class="text-58px fw-800 text-#fff ls-2">
+      <div class="pos-relative">
+        <h1 class="text-58px fw-800 text-#fff ls-2 custom-title-font">
           Stay Ahead with
         </h1>
-        <h1 class="text-58px fw-800 text-#fff ls-2 !mt-10px">
+        <h1 class="text-58px fw-800 text-#fff ls-2  custom-title-font">
           Trendy Products!
         </h1>
         <el-button class="mt-65px !bg-#878490 !text-#fff !bg-#878490 !w-160px !h-40px !b-#fff !b-rd-200px" round>
           Contact US
         </el-button>
+        <div
+          class="pos-absolute top--16px text-center right--60px w-150px py-8px bg-#FFFF66 b-rd-20px transform-rotate-16deg"
+        >
+          #Trendy Product
+        </div>
       </div>
     </div>
     <business-trends />