feat(新增图片和国际化): 添加企业和个人产品图片及相关翻译

- 新增企业和个人产品的图片文件，提升页面视觉效果。
- 在国际化配置中添加企业和个人产品的标题、描述及查看详情的翻译字段，确保多语言支持的完整性。
- 更新了首页和产品页面的展示逻辑，优化了用户体验。

这些修改旨在增强产品展示的吸引力和信息的清晰度，方便用户快速找到所需的产品信息。

components/LanguageSwitcher.vue

@@ -90,13 +90,24 @@ async function selectLanguage(langCode: string) {
     try {
       // 使用类型断言，确保 langCode 是有效的 LocaleCode
       await setLocale(langCode as LocaleCode);
-      
+
       // 获取当前路径（不包含查询参数）
       const path = window.location.pathname;
-      
+
+      // 获取当前查询参数
+      const query = window.location.search;
+
+      const audiences = query
+        .split("?")[1]
+        .split("&")
+        .find((item) => item.startsWith("audiences="))
+        ?.split("=")[1];
+
       // 构建新URL，不包含任何查询参数
-      const newUrl = `${window.location.origin}${path}`;
-      
+      const newUrl = `${window.location.origin}${path}${
+        audiences ? `?audiences=${audiences}` : ""
+      }`;
+
       // 使用新URL替换当前URL并刷新页面
       window.location.href = newUrl;
     } catch (error) {

components/TheHeader.vue

@@ -66,7 +66,10 @@
                             <div
                               class="px-6 py-4 text-sm font-semibold text-gray-200 bg-gradient-to-br from-slate-800/90 to-slate-900/90 rounded-xl border border-slate-700/30 shadow-2xl backdrop-blur-sm group-hover/card:shadow-blue-500/10 transition-all duration-500"
                             >
-                              <div class="flex items-center gap-4">
+                              <nuxt-link
+                                :to="`${homePath}products?audiences=1`"
+                                class="flex items-center gap-4"
+                              >
                                 <div
                                   class="p-2 rounded-lg bg-gradient-to-br from-blue-500/20 to-indigo-500/20 group-hover/card:from-blue-500/30 group-hover/card:to-indigo-500/30 transition-all duration-500"
                                 >
@@ -77,14 +80,10 @@
                                 <div>
                                   <span
                                     class="block text-lg font-medium tracking-wide text-white"
-                                    >{{ t("common.business") }}</span
-                                  >
-                                  <span
-                                    class="text-xs text-gray-400 mt-0.5 block"
-                                    >{{ t("common.businessDesc") }}</span
+                                    >{{ t("home.business.title") }}</span
                                   >
                                 </div>
-                              </div>
+                              </nuxt-link>
                             </div>
                             <ul class="space-y-2">
                               <li
@@ -124,7 +123,10 @@
                             <div
                               class="px-6 py-4 text-sm font-semibold text-gray-200 bg-gradient-to-br from-slate-800/90 to-slate-900/90 rounded-xl border border-slate-700/30 shadow-2xl backdrop-blur-sm group-hover/card:shadow-cyan-500/10 transition-all duration-500"
                             >
-                              <div class="flex items-center gap-4">
+                              <nuxt-link
+                                :to="`${homePath}products?audiences=0`"
+                                class="flex items-center gap-4"
+                              >
                                 <div
                                   class="p-2 rounded-lg bg-gradient-to-br from-cyan-500/20 to-blue-500/20 group-hover/card:from-cyan-500/30 group-hover/card:to-blue-500/30 transition-all duration-500"
                                 >
@@ -135,14 +137,10 @@
                                 <div>
                                   <span
                                     class="block text-lg font-medium tracking-wide text-white"
-                                    >{{ t("common.personal") }}</span
-                                  >
-                                  <span
-                                    class="text-xs text-gray-400 mt-0.5 block"
-                                    >{{ t("common.personalDesc") }}</span
+                                    >{{ t("home.personal.title") }}</span
                                   >
                                 </div>
-                              </div>
+                              </nuxt-link>
                             </div>
                             <ul class="space-y-2">
                               <li
@@ -402,7 +400,7 @@
             class="p-3 bg-slate-700/50 rounded-lg cursor-pointer hover:bg-slate-700 transition-colors group"
           >
             <nuxt-link
-              :to="`${homePath}products/${result.title}`"
+              :to="`${homePath}products/${result.name}`"
               class="block"
               @click="closeSearch"
             >
@@ -495,8 +493,10 @@ const { data: categoryResponse } = await useAsyncData(
         .map((item: any) => {
           console.log(item);
           return {
-            label: item.title || "",
-            path: `/products?category=${encodeURIComponent(item.title)}&audiences=${item.meta.audiences}`,
+            label: item.title,
+            path: `/products?category=${encodeURIComponent(
+              item.title
+            )}&audiences=${item.meta.audiences}`,
             id: item.meta.id,
             audiences: item.meta.audiences,
           };

composables/useSearch.ts

@@ -19,6 +19,7 @@ interface Product {
 interface SearchResult {
   id: string;
   title: string;
+  name: string;
   description: string;
   summary: string;
   matchedField: string;
@@ -70,6 +71,7 @@ export function useSearch() {
             results.push({
               id: product.id,
               title: product.title,
+              name: product.name,
               description: product.description,
               summary: product.summary,
               matchedField: field.name,

i18n/locales/en.ts

@@ -119,6 +119,16 @@ export default {
     },
     useCategoryTitle: "Hanye Self-Developed and Manufactured",
     useCategoryDescription: "Product Categories",
+    business: {
+      title: "Business",
+      description: "Enterprise storage and memory product information",
+      view_details: "Business Products",
+    },
+    personal: {
+      title: "Personal",
+      description: "Hanye offers a variety of products for individual users.",
+      view_details: "Personal Products",
+    },
   },
   products: {
     title: "Products",

i18n/locales/ja.ts

@@ -68,9 +68,11 @@ export default {
         terms: "利用規約",
       },
       trademark: {
-        statement1: "商標に関する声明：「Hanyetech（ハニーテック）」は、当社が中華人民共和国本土（中国大陸）で専有的に登録・使用する商標です。「Hanye（ハニエ）」は、当社が中国本土以外の地域で専有的に登録・使用する商標です。",
-        statement2: "これらの商標は、関連する法律および国際条約により保護されています。許可されていない地域での無断使用・複製・模倣は禁止されており、当社は必要に応じて法的措置を講じる権利を有します。",
-      }
+        statement1:
+          "商標に関する声明：「Hanyetech（ハニーテック）」は、当社が中華人民共和国本土（中国大陸）で専有的に登録・使用する商標です。「Hanye（ハニエ）」は、当社が中国本土以外の地域で専有的に登録・使用する商標です。",
+        statement2:
+          "これらの商標は、関連する法律および国際条約により保護されています。許可されていない地域での無断使用・複製・模倣は禁止されており、当社は必要に応じて法的措置を講じる権利を有します。",
+      },
     },
     all: "全部",
     personal: "Personal",
@@ -111,6 +113,16 @@ export default {
     },
     useCategoryTitle: "Hanye独自に開発・製造、販売",
     useCategoryDescription: "製品カテゴリー",
+    business: {
+      title: "企業用製品",
+      description: "企業向けストレージおよびメモリ製品情報",
+      view_details: "企業用製品",
+    },
+    personal: {
+      title: "個人用製品",
+      description: "Hanyeはさまざまな個人向け製品を提供しています。",
+      view_details: "個人用製品",
+    },
   },
   products: {
     title: "当社の製品",
@@ -216,6 +228,7 @@ export default {
     submit: "送信",
     submitting: "送信中...",
     submitSuccess: "送信完了しました。近日中にご連絡いたします。",
-    submitError: "送信に失敗しました。後ほど再試行するか、直接お問い合わせください。"
+    submitError:
+      "送信に失敗しました。後ほど再試行するか、直接お問い合わせください。",
   },
 };

i18n/locales/zh.ts

@@ -111,7 +111,17 @@ export default {
       },
     },
     useCategoryTitle: "Hanye 自主开发和制造",
-    useCategoryDescription: "产品分类",
+    useCategoryDescription: "根据分类选择产品。",
+    business: {
+      title: "企业用户产品",
+      description: "企业级存储及内存产品信息",
+      view_details: "企业用户产品",
+    },
+    personal: {
+      title: "个人用户产品",
+      description: "Hanye 提供多种个人用户产品",
+      view_details: "个人用户产品",
+    }
   },
   products: {
     title: "产品",

pages/index.vue

@@ -109,7 +109,6 @@
             <div
               class="w-full h-full flex-col justify-center hidden md:flex absolute top-0 left-0 z-10"
             >
-              
               <div class="justify-center">
                 <span class="text-white text-6xl font-normal leading-[78px]">{{
                   t("home.carousel.three.title")
@@ -162,6 +161,218 @@
       </Swiper>
     </section>
 
+    <!-- 按分类栏目展示 -->
+    <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
+      <div class="max-w-screen-2xl mx-auto relative">
+        <div
+          class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4"
+        >
+          {{ t("home.useCategoryTitle") }}
+        </div>
+        <div
+          class="justify-center text-white font-normal mb-8 md:mb-16 text-xl sm:text-2xl md:text-4xl lg:text-6xl"
+        >
+          {{ t("home.useCategoryDescription") }}
+        </div>
+      </div>
+      <div class="max-w-screen-2xl mx-auto relative">
+        <!-- 企业产品 -->
+        <div
+          class="flex w-full relative mb-10 xl:mb-40 gap-6 flex-col xl:flex-row"
+        >
+          <div
+            class="select-none relative w-full xl:w-[65%] h-[280px] md:h-[320px] xl:h-[520px] animate-gradient-bg [background:linear-gradient(180deg,#444B55_0%,#98A3B4_95%)] from-zinc-900 to-zinc-800"
+          >
+            <img
+              src="@/assets/images/business.webp"
+              alt="business"
+              class="max-h-full pl-0 md:pl-4 pt-0 md:pt-4 relative z-10"
+            />
+            <span
+              class="absolute hidden xl:block z-0 top-[35%] left-[60%] translate-y-[-50%] translate-x-[-50%] opacity-5 text-white text-[160px] font-bold select-none"
+              >Hanye</span
+            >
+
+            <div
+              class="w-full absolute xl:hidden top-0 left-0 right-0 bottom-0 z-10 flex flex-col justify-center items-end p-4 md:p-8"
+            >
+              <div
+                class="opacity-10 text-white text-4xl md:text-7xl font-bold mb-2 select-none"
+              >
+                Business
+              </div>
+              <div class="justify-center text-white text-4xl font-medium mb-4">
+                {{ t("home.business.title") }}
+              </div>
+              <div class="justify-center text-white text-xl font-normal mb-8">
+                {{ t("home.business.description") }}
+              </div>
+              <nuxt-link
+                :to="`${homepagePath}/products?audiences=1`"
+                class="h-14 px-8 py-3.5 bg-white/10 hover:bg-white/15 rounded-[10px] outline outline-1 outline-white/20 backdrop-blur-md inline-flex flex-col justify-start items-start gap-3.5"
+              >
+                <div class="inline-flex justify-start items-center gap-2.5">
+                  {{ t("home.business.view_details") }}
+                  <i class="icon-arrow-right text-xs ml-2"></i>
+                </div>
+              </nuxt-link>
+            </div>
+          </div>
+          <div class="relative hidden xl:flex flex-1 flex-col gap-10">
+            <div class="w-full">
+              <div
+                class="opacity-20 text-white text-7xl font-bold mb-2 select-none"
+              >
+                Business
+              </div>
+              <div class="justify-center text-white text-4xl font-medium mb-4">
+                {{ t("home.business.title") }}
+              </div>
+              <div class="justify-center text-white text-xl font-normal mb-8">
+                {{ t("home.business.description") }}
+              </div>
+              <nuxt-link
+                :to="`${homepagePath}/products?audiences=1`"
+                class="h-14 px-8 py-3.5 bg-white/10 hover:bg-white/15 rounded-[10px] outline outline-1 outline-white/20 backdrop-blur-md inline-flex flex-col justify-start items-start gap-3.5"
+              >
+                <div class="inline-flex justify-start items-center gap-2.5">
+                  {{ t("home.business.view_details") }}
+                  <i class="icon-arrow-right text-xs ml-2"></i>
+                </div>
+              </nuxt-link>
+            </div>
+          </div>
+
+          <div
+            class="bg-zinc-900/60 backdrop-blur-[120px] right-0 bottom-[-20%] static xl:absolute"
+          >
+            <div class="w-full h-full grid grid-cols-2">
+              <nuxt-link
+                v-for="category in categoryList"
+                :key="category.id"
+                class="flex flex-col gap-4 items-center p-4 md:p-12 hover:bg-zinc-900/50 hover:scale-95 transition-all duration-300"
+                v-show="category.audiences === 1"
+                :to="`${homepagePath}${category.link}`"
+              >
+                <img class="w-2/1" :src="category.image" />
+                <div
+                  class="text-center flex justify-center text-white text-base font-bold"
+                >
+                  {{ category.title }}
+                </div>
+                <div
+                  class="text-center flex justify-center text-white/50 text-sm"
+                >
+                  {{ category.description }}
+                </div>
+              </nuxt-link>
+            </div>
+          </div>
+        </div>
+
+        <!-- 个人产品 -->
+        <div
+          class="flex w-full gap-8 relative mb-0 xl:mb-60 flex-col xl:flex-row"
+        >
+          <div
+            class="flex-1 hidden xl:flex flex-col gap-10 relative top-[-80px]"
+          >
+            <div class="w-full">
+              <div
+                class="opacity-20 justify-center text-white text-7xl font-bold mb-2 select-none"
+              >
+                Personal
+              </div>
+              <div class="justify-center text-white text-4xl font-medium mb-4">
+                {{ t("home.personal.title") }}
+              </div>
+              <div class="justify-center text-white text-xl font-normal mb-8">
+                {{ t("home.personal.description") }}
+              </div>
+              <nuxt-link
+                :to="`${homepagePath}/products?audiences=0`"
+                class="h-14 px-8 py-3.5 bg-white/10 hover:bg-white/15 rounded-[10px] outline outline-1 outline-white/20 backdrop-blur-md inline-flex flex-col justify-start items-start gap-3.5"
+              >
+                <div class="inline-flex justify-start items-center gap-2.5">
+                  {{ t("home.personal.view_details") }}
+                  <i class="icon-arrow-right text-xs ml-2"></i>
+                </div>
+              </nuxt-link>
+            </div>
+          </div>
+
+          <div
+            class="w-full xl:w-[75%] h-[280px] md:h-[320px] xl:h-[480px] select-none relative z-0 flex justify-end items-end animate-gradient-bg [background:linear-gradient(180deg,#0086f4_0%,#88d5fa_80%)]"
+          >
+            <img
+              src="@/assets/images/personal.webp"
+              alt="personal"
+              class="pt-0 md:pt-20 max-h-full relative z-10"
+            />
+            <span
+              class="absolute hidden xl:block z-0 top-[25%] left-[35%] translate-y-[-50%] translate-x-[-50%] opacity-5 text-white text-[160px] font-bold select-none"
+              >Hanye</span
+            >
+
+            <div
+              class="flex xl:hidden flex-col gap-10 absolute top-0 left-0 right-0 bottom-0 z-10 justify-center p-4 md:p-8"
+            >
+              <div class="w-full">
+                <div
+                  class="opacity-10 justify-center text-white text-4xl md:text-7xl font-bold mb-2 select-none"
+                >
+                  Personal
+                </div>
+                <div
+                  class="justify-center text-white text-4xl font-medium mb-4"
+                >
+                  {{ t("home.personal.title") }}
+                </div>
+                <div class="justify-center text-white text-xl font-normal mb-8">
+                  {{ t("home.personal.description") }}
+                </div>
+                <nuxt-link
+                  :to="`${homepagePath}/products?audiences=0`"
+                  class="h-14 px-8 py-3.5 bg-white/10 hover:bg-white/15 rounded-[10px] outline outline-1 outline-white/20 backdrop-blur-md inline-flex flex-col justify-start items-start gap-3.5"
+                >
+                  <div class="inline-flex justify-start items-center gap-2.5">
+                    {{ t("home.personal.view_details") }}
+                    <i class="icon-arrow-right text-xs ml-2"></i>
+                  </div>
+                </nuxt-link>
+              </div>
+            </div>
+          </div>
+
+          <div
+            class="bg-zinc-900/60 backdrop-blur-[120px] static left-0 bottom-[-15%] xl:absolute z-2"
+          >
+            <div class="w-full h-full grid grid-cols-2 lg:grid-cols-3">
+              <nuxt-link
+                v-for="category in categoryList"
+                :key="category.id"
+                class="flex flex-col gap-4 items-center py-4 px-4 md:py-12 md:px-6 hover:bg-zinc-900/50 hover:scale-95 transition-all duration-300"
+                v-show="category.audiences === 0"
+                :to="`${homepagePath}${category.link}`"
+              >
+                <img class="w-2/1" :src="category.image" />
+                <div
+                  class="text-center flex justify-center text-white text-base font-bold"
+                >
+                  {{ category.title }}
+                </div>
+                <div
+                  class="text-center flex justify-center text-white/50 text-sm"
+                >
+                  {{ category.description }}
+                </div>
+              </nuxt-link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <!-- 按用途产品展示 -->
     <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
       <div class="max-w-screen-2xl mx-auto relative">
@@ -325,67 +536,6 @@
       </div>
     </section>
 
-    <!-- 按分类栏目展示 -->
-    <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
-      <div class="max-w-screen-2xl mx-auto relative">
-        <div
-          class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4"
-        >
-          {{ t("home.useCategoryTitle") }}
-        </div>
-        <div
-          class="justify-center text-white font-normal mb-8 md:mb-16 text-xl sm:text-2xl md:text-4xl lg:text-6xl"
-        >
-          {{ t("home.useCategoryDescription") }}
-        </div>
-      </div>
-      <div class="max-w-screen-2xl mx-auto">
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <nuxt-link
-            v-for="category in typedCategoryList"
-            :key="category.id"
-            :to="category.link"
-            class="bg-zinc-950/10 backdrop-blur-[50px] border border-white/10 rounded-lg flex gap-8 p-4 sm:p-8 justify-between category-item group hover:border-cyan-400/30 transition-all duration-300"
-          >
-            <div class="col-span-1 flex flex-col gap-4">
-              <div
-                class="flex flex-col gap-2 opacity-80 group-hover:opacity-100 transition-opacity duration-300"
-              >
-                <div
-                  v-for="capacitie in category.capacities"
-                  :key="capacitie"
-                  class="text-white text-sm md:text-base font-normal leading-tight flex gap-2 items-center group-hover:text-cyan-400 transition-colors duration-300"
-                >
-                  <i
-                    class="icon-star text-sm group-hover:scale-110 transition-transform duration-300"
-                  ></i>
-                  <span>{{ capacitie }}</span>
-                </div>
-              </div>
-              <div
-                class="p-2 sm:p-4 mt-auto bg-zinc-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-white/10 backdrop-blur-xl inline-flex justify-center items-center gap-3 overflow-hidden group-hover:bg-cyan-400/10 group-hover:outline-cyan-400/30 transition-all duration-300"
-              >
-                <div
-                  class="justify-start text-neutral-200 text-xs md:text-sm font-medium uppercase leading-relaxed group-hover:text-cyan-400 transition-colors duration-300"
-                >
-                  {{ category.title }}
-                </div>
-              </div>
-            </div>
-            <div
-              class="w-32 h-32 md:w-44 md:h-44 relative overflow-hidden rounded-lg"
-            >
-              <img
-                :src="category.image"
-                :alt="category.title"
-                class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-110"
-              />
-            </div>
-          </nuxt-link>
-        </div>
-      </div>
-    </section>
-
     <!-- 核心展示 -->
     <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
       <div
@@ -603,6 +753,7 @@ interface Product {
   image: string;
   link: string;
   description?: string;
+  name?: string;
 }
 
 interface Usage {
@@ -621,6 +772,7 @@ interface Category {
   sort: number;
   image: string;
   link: string;
+  audiences: number;
 }
 
 // 使用i18n
@@ -704,7 +856,7 @@ const loadUsageData = async () => {
                 id: product.id,
                 title: product.title,
                 image: product.image,
-                link: `${homepagePath.value}/products/${product.id}`,
+                link: `${homepagePath.value}/products/${product.name}`,
                 description: product.summary,
               });
             });
@@ -766,10 +918,11 @@ const loadCategoryData = async () => {
             image: category.image || "",
             link: `${homepagePath.value}/products?category=${encodeURIComponent(
               category.title
-            )}`,
+            )}&audiences=${category.audiences}`,
             capacities: category.capacities || [],
             summary: category.summary || "",
             sort: category.sort || 0,
+            audiences: category.audiences,
           };
         })
         .sort((a: any, b: any) => a.id - b.id);
@@ -894,35 +1047,19 @@ useHead({
 :deep(.swiper-pagination-bullet-active) {
   background-color: var(--color-text); /* Example color */
 }
-.category-item {
-  background-image: url("@/assets/images/home-b-1.webp");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  opacity: 0.8;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
 
-  &:hover {
-    opacity: 1;
-    transform: translateY(-2px);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-
-    &::before {
-      opacity: 1;
-    }
-  }
+.use-business {
+  background-image: url("@/assets/images/business.webp");
+  background-size: auto 548px;
+  background-position: left top;
+  background-repeat: no-repeat;
+}
 
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(45deg, rgba(6, 182, 212, 0.1), transparent);
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    pointer-events: none;
-  }
+.use-personal {
+  background-image: url("@/assets/images/personal.webp");
+  background-size: auto 480px;
+  background-position: right bottom;
+  background-repeat: no-repeat;
 }
 
 // 优化过渡动画
@@ -1036,7 +1173,6 @@ useHead({
   }
 }
 
-
 // 优化图片加载动画
 @keyframes fadeIn {
   from {
@@ -1089,4 +1225,22 @@ useHead({
     transform: translateY(-2px);
   }
 }
+
+// 添加渐变背景动画
+@keyframes gradient-bg {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.animate-gradient-bg {
+  background-size: 200% 200%;
+  animation: gradient-bg 15s ease infinite;
+}
 </style>

pages/products/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="w-full h-[45px] sm:h-[55px] md:h-[65px] lg:h-[72px]"></div>
+    <div class="w-full h-[72px]"></div>
     <ErrorBoundary :error="error">
       <div v-if="isLoading" class="flex justify-center py-8 md:py-12">
         <!-- 加载中 -->
@@ -10,29 +10,68 @@
       </div>
 
       <div v-else>
-        <div class="w-full mb-8 md:mb-12 lg:mb-16 relative">
-          <div class="absolute top-0 left-0 w-full h-full z-10">
+
+        <!-- Business -->
+        <div
+          v-if="route.query.audiences === '1'"
+          class="w-full mb-8 md:mb-12 lg:mb-16 [background:linear-gradient(180deg,#444B55_0%,#98A3B4_95%)] select-none hidden md:block"
+        >
+          <div class="max-w-screen-2xl h-[420px] mx-auto relative">
+            <div
+              class="absolute top-[40%] translate-y-[-50%] left-[70%] translate-x-[-50%] flex flex-col gap-2 md:gap-4 p-4 md:p-6 lg:p-8 z-10"
+            >
+              <div
+                class="text-white text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-6xl font-normal"
+              >
+                {{ t("home.business.title") }}
+              </div>
+              <div
+                class="text-white text-xs sm:text-sm md:text-base lg:text-lg font-normal leading-relaxed md:leading-loose"
+              >
+                {{ t("home.business.description") }}
+              </div>
+            </div>
+            <img
+              src="~assets/images/business.webp"
+              alt="products-banner"
+              class="h-full pt-10 ml-20"
+            />
+          </div>
+        </div>
+
+
+        <!-- Personal -->
+        <div
+          v-if="route.query.audiences === '0'"
+          class="w-full mb-8 md:mb-12 lg:mb-16 [background:linear-gradient(180deg,#0086f4_0%,#88d5fa_80%)] select-none hidden md:block"
+        >
+          <div
+            class="max-w-screen-2xl h-[420px] mx-auto relative flex justify-end"
+          >
             <div
-              class="max-w-screen-2xl mx-auto h-full flex flex-col justify-center gap-2 md:gap-4 p-4 md:p-6 lg:p-8"
+              class="absolute top-[40%] translate-y-[-50%] left-[0] flex flex-col gap-2 md:gap-4 p-4 md:p-6 lg:p-8 z-10"
             >
               <div
                 class="text-white text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-6xl font-normal"
               >
-                {{ t("products.product_list") }}
+                {{ t("home.personal.title") }}
               </div>
               <div
                 class="text-white text-xs sm:text-sm md:text-base lg:text-lg font-normal leading-relaxed md:leading-loose"
               >
-                {{ t("products.product_list_description") }}
+                {{ t("home.personal.description") }}
               </div>
             </div>
+            <img
+              src="~assets/images/personal.webp"
+              alt="products-banner"
+              class="h-full pt-10 mr-20"
+            />
           </div>
-          <img
-            :src="banner"
-            alt="products-banner"
-            class="w-full object-cover h-40 sm:h-48 md:h-56 lg:h-64 xl:h-80"
-          />
         </div>
+
+
+
         <div
           class="max-w-full mb-4 md:mb-6 lg:mb-8 xl:px-8 lg:px-6 md:px-4 px-4"
         >
@@ -46,10 +85,11 @@
               /
             </span>
             <nuxt-link
-              :to="`${homepagePath}/products`"
+              :to="`${homepagePath}/products?audiences=${route.query.audiences}`"
               class="text-white text-sm md:text-base font-normal"
-              >{{ t("products.product_list") }}</nuxt-link
             >
+              {{ route.query.audiences === '1' ? t("home.business.title") : t("home.personal.title") }}
+            </nuxt-link>
           </div>
         </div>
         <div
@@ -65,7 +105,7 @@
                 >
                   <div class="flex justify-between items-center">
                     <div
-                      class="text-white text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl font-medium"
+                      class="text-white text-xl lg:text-2xl xl:text-3xl font-medium"
                     >
                       {{ t("products.product_categories_title") }}
                     </div>
@@ -668,7 +708,8 @@ const categoryTitles = computed(() => {
   if (route.query.audiences) {
     return allCategories.value
       .filter(
-        (c: Category) => c.audiences === parseInt(route.query.audiences as string)
+        (c: Category) =>
+          c.audiences === parseInt(route.query.audiences as string)
       )
       .map((c: Category) => c.title);
   }