diff --git a/src/components/customEcharts/size1440/index.vue b/src/components/customEcharts/size1440/index.vue
index d286a8b..f7510a5 100644
--- a/src/components/customEcharts/size1440/index.vue
+++ b/src/components/customEcharts/size1440/index.vue
@@ -6,23 +6,23 @@
         <div class="title-section">
           <div class="title-decoration"></div>
           <div class="stock-title">
-            <span>FiEE, Inc. Stock Price History</span>
+            <span>{{ t("historic_stock.echarts.title") }}</span>
           </div>
         </div>
         <div class="echarts-search-area">
           <div class="echarts-search-byRange">
             <text style="font-size: 0.9rem; font-weight: 400; color: #666666">
-              Range
+              {{ t("historic_stock.echarts.range") }}
             </text>
             <div class="search-range-list">
               <div
                 class="search-range-list-each"
-                v-for="(item, index) in state.searchRange"
+                v-for="(item, index) in searchRangeOptions"
                 :key="index"
-                :class="{ activeRange: state.activeRange === item }"
-                @click="changeSearchRange(item)"
+                :class="{ activeRange: state.activeRange === item.key }"
+                @click="changeSearchRange(item.key)"
               >
-                <span>{{ item }}</span>
+                <span>{{ item.label }}</span>
               </div>
             </div>
           </div>
@@ -42,17 +42,30 @@
   </div>
 </template>
 <script setup>
-import { onMounted, watch, reactive } from "vue";
+import { onMounted, onBeforeUnmount, watch, reactive, computed } from "vue";
+import { useI18n } from "vue-i18n";
 import * as echarts from "echarts";
 import { NDatePicker, NIcon } from "naive-ui";
 import { ArrowForwardOutline } from "@vicons/ionicons5";
 import axios from "axios";
+
+const { t, locale } = useI18n();
 const state = reactive({
   searchRange: ["1m", "3m", "YTD", "1Y", "5Y", "10Y", "Max"],
   dateRange: [new Date("2009-10-07").getTime(), new Date().getTime()],
   activeRange: "",
 });
 
+const searchRangeOptions = computed(() => [
+  { label: t("historic_stock.echarts.1m"), key: "1m" },
+  { label: t("historic_stock.echarts.3m"), key: "3m" },
+  { label: t("historic_stock.echarts.ytd_short"), key: "YTD" },
+  { label: t("historic_stock.echarts.1y"), key: "1Y" },
+  { label: t("historic_stock.echarts.5y"), key: "5Y" },
+  { label: t("historic_stock.echarts.10y"), key: "10Y" },
+  { label: t("historic_stock.echarts.max"), key: "Max" },
+]);
+
 let myCharts = null;
 let historicData = [];
 let xAxisData = [];
@@ -96,7 +109,11 @@ const initEcharts = (data) => {
       },
       formatter: function (params) {
         const p = params[0];
-        return `<span style="font-size: 1.1rem; font-weight: 600;">${p.axisValue}</span><br/><span style="font-size: 0.9rem; font-weight: 400;">Price: ${p.data}</span>`;
+        return `<span style="font-size: 1.1rem; font-weight: 600;">${
+          p.axisValue
+        }</span><br/><span style="font-size: 0.9rem; font-weight: 400;">${t(
+          "historic_stock.echarts.price"
+        )}: ${p.data}</span>`;
       },
       triggerOn: "mousemove",
       confine: true,
@@ -293,8 +310,44 @@ const initEcharts = (data) => {
   });
 };
 
+// 防抖函数
+const debounce = (func, wait) => {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+// 处理窗口大小变化
+const handleResize = () => {
+  if (myCharts) {
+    myCharts.resize();
+  }
+};
+
+// 创建防抖后的 resize 处理函数
+const debouncedResize = debounce(handleResize, 300);
+
 onMounted(() => {
   getHistoricalData();
+  // 添加窗口 resize 监听
+  window.addEventListener("resize", debouncedResize);
+});
+
+// 组件卸载时清理
+onBeforeUnmount(() => {
+  // 移除 resize 监听
+  window.removeEventListener("resize", debouncedResize);
+  // 销毁 echarts 实例
+  if (myCharts) {
+    myCharts.dispose();
+    myCharts = null;
+  }
 });
 
 //获取历史数据
@@ -576,6 +629,7 @@ const handleDateRangeChange = (range) => {
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
+      flex-wrap: wrap;
       gap: 10px;
 
       .echarts-search-byRange {
diff --git a/src/components/customEcharts/size1920/index.vue b/src/components/customEcharts/size1920/index.vue
index 602ba32..100522a 100644
--- a/src/components/customEcharts/size1920/index.vue
+++ b/src/components/customEcharts/size1920/index.vue
@@ -42,7 +42,7 @@
   </div>
 </template>
 <script setup>
-import { onMounted, watch, reactive, computed } from "vue";
+import { onMounted, onBeforeUnmount, watch, reactive, computed } from "vue";
 import * as echarts from "echarts";
 import { NDatePicker, NIcon } from "naive-ui";
 import { ArrowForwardOutline } from "@vicons/ionicons5";
@@ -309,8 +309,44 @@ const initEcharts = (data) => {
   });
 };
 
+// 防抖函数
+const debounce = (func, wait) => {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+// 处理窗口大小变化
+const handleResize = () => {
+  if (myCharts) {
+    myCharts.resize();
+  }
+};
+
+// 创建防抖后的 resize 处理函数
+const debouncedResize = debounce(handleResize, 300);
+
 onMounted(() => {
   getHistoricalData();
+  // 添加窗口 resize 监听
+  window.addEventListener("resize", debouncedResize);
+});
+
+// 组件卸载时清理
+onBeforeUnmount(() => {
+  // 移除 resize 监听
+  window.removeEventListener("resize", debouncedResize);
+  // 销毁 echarts 实例
+  if (myCharts) {
+    myCharts.dispose();
+    myCharts = null;
+  }
 });
 
 //获取历史数据
@@ -592,6 +628,8 @@ const handleDateRangeChange = (range) => {
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 10px;
 
       .echarts-search-byRange {
         display: flex;
diff --git a/src/components/customEcharts/size375/index.vue b/src/components/customEcharts/size375/index.vue
index 200dec6..ba2190e 100644
--- a/src/components/customEcharts/size375/index.vue
+++ b/src/components/customEcharts/size375/index.vue
@@ -6,27 +6,31 @@
         <div class="title-section">
           <div class="title-decoration"></div>
           <div class="title-text">
-            <span>FiEE, Inc. Stock Price History</span>
+            <span>{{ t("historic_stock.echarts.title") }}</span>
           </div>
         </div>
         <div class="echarts-search-area">
           <div class="echarts-search-byRange">
-            <span class="range-label">Range</span>
+            <span class="range-label">{{
+              t("historic_stock.echarts.range")
+            }}</span>
             <div class="search-range-list">
               <div
                 class="search-range-list-each"
-                v-for="(item, index) in state.searchRange"
+                v-for="(item, index) in searchRangeOptions"
                 :key="index"
-                :class="{ activeRange: state.activeRange === item }"
-                @click="changeSearchRange(item)"
+                :class="{ activeRange: state.activeRange === item.key }"
+                @click="changeSearchRange(item.key)"
               >
-                <span>{{ item }}</span>
+                <span>{{ item.label }}</span>
               </div>
             </div>
           </div>
           <div class="echarts-search-byDate">
             <div class="date-row" @click="openPicker('start')">
-              <span class="date-label">Start Time</span>
+              <span class="date-label">{{
+                t("historic_stock.echarts.start_time")
+              }}</span>
               <div class="date-value">
                 <span>{{ formatYMD(state.dateRange[0]) }}</span>
                 <svg
@@ -46,7 +50,9 @@
               </div>
             </div>
             <div class="date-row" @click="openPicker('end')">
-              <span class="date-label">End Time</span>
+              <span class="date-label">{{
+                t("historic_stock.echarts.end_time")
+              }}</span>
               <div class="date-value">
                 <span>{{ formatYMD(state.dateRange[1]) }}</span>
                 <svg
@@ -92,12 +98,15 @@
   </div>
 </template>
 <script setup>
-import { onMounted, watch, reactive } from "vue";
+import { onMounted, onBeforeUnmount, watch, reactive, computed } from "vue";
+import { useI18n } from "vue-i18n";
 import * as echarts from "echarts";
 import { NDatePicker, NIcon } from "naive-ui";
 import { ArrowForwardOutline } from "@vicons/ionicons5";
 import axios from "axios";
 import DateWheelPicker from "../../DateWheelPicker.vue";
+
+const { t, locale } = useI18n();
 const state = reactive({
   searchRange: ["1m", "3m", "YTD", "1Y", "5Y", "10Y", "Max"],
   dateRange: [new Date("2009-10-07").getTime(), new Date().getTime()],
@@ -109,6 +118,16 @@ const state = reactive({
   pickerDay: new Date().getDate(),
 });
 
+const searchRangeOptions = computed(() => [
+  { label: t("historic_stock.echarts.1m"), key: "1m" },
+  { label: t("historic_stock.echarts.3m"), key: "3m" },
+  { label: t("historic_stock.echarts.ytd_short"), key: "YTD" },
+  { label: t("historic_stock.echarts.1y"), key: "1Y" },
+  { label: t("historic_stock.echarts.5y"), key: "5Y" },
+  { label: t("historic_stock.echarts.10y"), key: "10Y" },
+  { label: t("historic_stock.echarts.max"), key: "Max" },
+]);
+
 // 已封装为子组件，不再需要本地列配置
 
 let myCharts = null;
@@ -154,7 +173,11 @@ const initEcharts = (data) => {
       },
       formatter: function (params) {
         const p = params[0];
-        return `<span style="font-size: 1.1rem; font-weight: 600;">${p.axisValue}</span><br/><span style="font-size: 0.9rem; font-weight: 400;">Price: ${p.data}</span>`;
+        return `<span style="font-size: 1.1rem; font-weight: 600;">${
+          p.axisValue
+        }</span><br/><span style="font-size: 0.9rem; font-weight: 400;">${t(
+          "historic_stock.echarts.price"
+        )}: ${p.data}</span>`;
       },
       triggerOn: "mousemove",
       confine: true,
@@ -351,8 +374,44 @@ const initEcharts = (data) => {
   });
 };
 
+// 防抖函数
+const debounce = (func, wait) => {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+// 处理窗口大小变化
+const handleResize = () => {
+  if (myCharts) {
+    myCharts.resize();
+  }
+};
+
+// 创建防抖后的 resize 处理函数
+const debouncedResize = debounce(handleResize, 300);
+
 onMounted(() => {
   getHistoricalData();
+  // 添加窗口 resize 监听
+  window.addEventListener("resize", debouncedResize);
+});
+
+// 组件卸载时清理
+onBeforeUnmount(() => {
+  // 移除 resize 监听
+  window.removeEventListener("resize", debouncedResize);
+  // 销毁 echarts 实例
+  if (myCharts) {
+    myCharts.dispose();
+    myCharts = null;
+  }
 });
 
 //获取历史数据
@@ -706,6 +765,7 @@ watch(
       flex-direction: column;
       justify-content: center;
       gap: 10 * 5.12px;
+      flex-wrap: wrap;
 
       .echarts-search-byRange {
         width: 100%;
diff --git a/src/components/customEcharts/size768/index.vue b/src/components/customEcharts/size768/index.vue
index 422c7d2..b46b5b9 100644
--- a/src/components/customEcharts/size768/index.vue
+++ b/src/components/customEcharts/size768/index.vue
@@ -6,23 +6,23 @@
         <div class="title-section">
           <div class="title-decoration"></div>
           <div class="title-text">
-            <span>FiEE, Inc. Stock Price History</span>
+            <span>{{ t("historic_stock.echarts.title") }}</span>
           </div>
         </div>
         <div class="echarts-search-area">
           <div class="echarts-search-byRange">
             <text style="font-size: 0.9rem; font-weight: 400; color: #666666">
-              Range
+              {{ t("historic_stock.echarts.range") }}
             </text>
             <div class="search-range-list">
               <div
                 class="search-range-list-each"
-                v-for="(item, index) in state.searchRange"
+                v-for="(item, index) in searchRangeOptions"
                 :key="index"
-                :class="{ activeRange: state.activeRange === item }"
-                @click="changeSearchRange(item)"
+                :class="{ activeRange: state.activeRange === item.key }"
+                @click="changeSearchRange(item.key)"
               >
-                <span>{{ item }}</span>
+                <span>{{ item.label }}</span>
               </div>
             </div>
           </div>
@@ -42,17 +42,30 @@
   </div>
 </template>
 <script setup>
-import { onMounted, watch, reactive } from "vue";
+import { onMounted, onBeforeUnmount, watch, reactive, computed } from "vue";
+import { useI18n } from "vue-i18n";
 import * as echarts from "echarts";
 import { NDatePicker, NIcon } from "naive-ui";
 import { ArrowForwardOutline } from "@vicons/ionicons5";
 import axios from "axios";
+
+const { t, locale } = useI18n();
 const state = reactive({
   searchRange: ["1m", "3m", "YTD", "1Y", "5Y", "10Y", "Max"],
   dateRange: [new Date("2009-10-07").getTime(), new Date().getTime()],
   activeRange: "",
 });
 
+const searchRangeOptions = computed(() => [
+  { label: t("historic_stock.echarts.1m"), key: "1m" },
+  { label: t("historic_stock.echarts.3m"), key: "3m" },
+  { label: t("historic_stock.echarts.ytd_short"), key: "YTD" },
+  { label: t("historic_stock.echarts.1y"), key: "1Y" },
+  { label: t("historic_stock.echarts.5y"), key: "5Y" },
+  { label: t("historic_stock.echarts.10y"), key: "10Y" },
+  { label: t("historic_stock.echarts.max"), key: "Max" },
+]);
+
 let myCharts = null;
 let historicData = [];
 let xAxisData = [];
@@ -96,7 +109,11 @@ const initEcharts = (data) => {
       },
       formatter: function (params) {
         const p = params[0];
-        return `<span style="font-size: 1.1rem; font-weight: 600;">${p.axisValue}</span><br/><span style="font-size: 0.9rem; font-weight: 400;">Price: ${p.data}</span>`;
+        return `<span style="font-size: 1.1rem; font-weight: 600;">${
+          p.axisValue
+        }</span><br/><span style="font-size: 0.9rem; font-weight: 400;">${t(
+          "historic_stock.echarts.price"
+        )}: ${p.data}</span>`;
       },
       triggerOn: "mousemove",
       confine: true,
@@ -293,8 +310,44 @@ const initEcharts = (data) => {
   });
 };
 
+// 防抖函数
+const debounce = (func, wait) => {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+// 处理窗口大小变化
+const handleResize = () => {
+  if (myCharts) {
+    myCharts.resize();
+  }
+};
+
+// 创建防抖后的 resize 处理函数
+const debouncedResize = debounce(handleResize, 300);
+
 onMounted(() => {
   getHistoricalData();
+  // 添加窗口 resize 监听
+  window.addEventListener("resize", debouncedResize);
+});
+
+// 组件卸载时清理
+onBeforeUnmount(() => {
+  // 移除 resize 监听
+  window.removeEventListener("resize", debouncedResize);
+  // 销毁 echarts 实例
+  if (myCharts) {
+    myCharts.dispose();
+    myCharts = null;
+  }
 });
 
 //获取历史数据
@@ -578,6 +631,7 @@ const handleDateRangeChange = (range) => {
       flex-direction: column;
       justify-content: center;
       gap: 10 * 2.5px;
+      flex-wrap: wrap;
 
       .echarts-search-byRange {
         width: 100%;
@@ -592,6 +646,7 @@ const handleDateRangeChange = (range) => {
           align-items: center;
           justify-content: flex-start;
           gap: 16 * 2.5px;
+          flex-wrap: wrap;
           .search-range-list-each {
             padding: 7 * 2.5px 22 * 2.5px;
             border-radius: 5px;
diff --git a/src/components/customHeader/index.vue b/src/components/customHeader/index.vue
index dfcde5f..1baca9c 100644
--- a/src/components/customHeader/index.vue
+++ b/src/components/customHeader/index.vue
@@ -17,9 +17,9 @@ const viewComponent = computed(() => {
   const viewWidth = width.value;
   if (viewWidth <= 450) {
     return size375;
-  } else if (viewWidth <= 835) {
+  } else if (viewWidth <= 1100) {
     return size768;
-  } else if (viewWidth <= 1640) {
+  } else if (viewWidth <= 1500) {
     return size1440;
   } else if (viewWidth <= 1920 || viewWidth > 1920) {
     return size1920;
diff --git a/src/components/customSelect/index.vue b/src/components/customSelect/index.vue
new file mode 100644
index 0000000..716d30c
--- /dev/null
+++ b/src/components/customSelect/index.vue
@@ -0,0 +1,48 @@
+<script setup>
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
+
+import size375 from "@/components/customSelect/size375/index.vue";
+import size768 from "@/components/customSelect/size768/index.vue";
+import size1440 from "@/components/customSelect/size1440/index.vue";
+import size1920 from "@/components/customSelect/size1920/index.vue";
+
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number],
+    required: true,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const { width } = useWindowSize();
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value;
+  if (viewWidth <= 450) {
+    return size375;
+  } else if (viewWidth <= 1100) {
+    return size768;
+  } else if (viewWidth <= 1500) {
+    return size1440;
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920;
+  }
+});
+</script>
+
+<template>
+  <component
+    :is="viewComponent"
+    :options="props.options"
+    :modelValue="props.modelValue"
+    @update:modelValue="emit('update:modelValue', $event)"
+  />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/customSelect/size1440/index.vue b/src/components/customSelect/size1440/index.vue
new file mode 100644
index 0000000..c4be42a
--- /dev/null
+++ b/src/components/customSelect/size1440/index.vue
@@ -0,0 +1,207 @@
+<template>
+  <div class="custom-select-wrapper" v-click-outside="closeDropdown">
+    <div class="custom-select-display" @click="toggleDropdown">
+      <span class="selected-text">{{ selectedLabel }}</span>
+      <div class="select-arrow" :class="{ open: isOpen }">
+        <svg width="10" height="5" viewBox="0 0 10 5" fill="none">
+          <path
+            d="M1 1L5 4L9 1"
+            stroke="#455363"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+    </div>
+    <transition name="dropdown">
+      <div v-if="isOpen" class="custom-select-dropdown">
+        <div
+          v-for="option in props.options"
+          :key="option.value"
+          class="custom-select-option"
+          :class="{ selected: option.value === props.modelValue }"
+          @click="selectOption(option.value)"
+        >
+          {{ option.label }}
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number],
+    required: true,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const isOpen = ref(false);
+
+const selectedLabel = computed(() => {
+  const option = props.options.find((opt) => opt.value === props.modelValue);
+  return option ? option.label : "";
+});
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const closeDropdown = () => {
+  isOpen.value = false;
+};
+
+const selectOption = (value) => {
+  emit("update:modelValue", value);
+  closeDropdown();
+};
+
+// 点击外部关闭下拉菜单
+const vClickOutside = {
+  mounted(el, binding) {
+    el.clickOutsideEvent = (event) => {
+      if (!(el === event.target || el.contains(event.target))) {
+        binding.value();
+      }
+    };
+    document.addEventListener("click", el.clickOutsideEvent);
+  },
+  unmounted(el) {
+    document.removeEventListener("click", el.clickOutsideEvent);
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.custom-select-wrapper {
+  position: relative;
+  width: 100%;
+  height: 46px;
+  user-select: none;
+}
+
+.custom-select-display {
+  width: 100%;
+  height: 100%;
+  padding: 7px 36px 7px 12px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  background: #fff;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.375em;
+  letter-spacing: 0.03em;
+  color: #455363;
+  cursor: pointer;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+
+  &:hover {
+    border-color: #ff7bac;
+  }
+}
+
+.selected-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.select-arrow {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.3s ease;
+
+  &.open {
+    transform: translateY(-50%) rotate(180deg);
+  }
+}
+
+.custom-select-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  max-height: 300px;
+  overflow-y: auto;
+  background: #fff;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+
+  // 自定义滚动条样式
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #fff0f5;
+    cursor: pointer;
+  }
+}
+
+.custom-select-option {
+  padding: 8px 12px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  background: #fff;
+  &:hover {
+    background: rgba(204, 204, 204, 0.2);
+  }
+
+  &.selected {
+    color: #ff7bac;
+    font-weight: 500;
+  }
+}
+
+// 下拉动画
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.dropdown-enter-from {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>
diff --git a/src/components/customSelect/size1920/index.vue b/src/components/customSelect/size1920/index.vue
new file mode 100644
index 0000000..e022133
--- /dev/null
+++ b/src/components/customSelect/size1920/index.vue
@@ -0,0 +1,207 @@
+<template>
+  <div class="custom-select-wrapper" v-click-outside="closeDropdown">
+    <div class="custom-select-display" @click="toggleDropdown">
+      <span class="selected-text">{{ selectedLabel }}</span>
+      <div class="select-arrow" :class="{ open: isOpen }">
+        <svg width="10" height="5" viewBox="0 0 10 5" fill="none">
+          <path
+            d="M1 1L5 4L9 1"
+            stroke="#455363"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+    </div>
+    <transition name="dropdown">
+      <div v-if="isOpen" class="custom-select-dropdown">
+        <div
+          v-for="option in props.options"
+          :key="option.value"
+          class="custom-select-option"
+          :class="{ selected: option.value === props.modelValue }"
+          @click="selectOption(option.value)"
+        >
+          {{ option.label }}
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number],
+    required: true,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const isOpen = ref(false);
+
+const selectedLabel = computed(() => {
+  const option = props.options.find((opt) => opt.value === props.modelValue);
+  return option ? option.label : "";
+});
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const closeDropdown = () => {
+  isOpen.value = false;
+};
+
+const selectOption = (value) => {
+  emit("update:modelValue", value);
+  closeDropdown();
+};
+
+// 点击外部关闭下拉菜单
+const vClickOutside = {
+  mounted(el, binding) {
+    el.clickOutsideEvent = (event) => {
+      if (!(el === event.target || el.contains(event.target))) {
+        binding.value();
+      }
+    };
+    document.addEventListener("click", el.clickOutsideEvent);
+  },
+  unmounted(el) {
+    document.removeEventListener("click", el.clickOutsideEvent);
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.custom-select-wrapper {
+  position: relative;
+  width: 100%;
+  height: 34px;
+  user-select: none;
+}
+
+.custom-select-display {
+  width: 100%;
+  height: 100%;
+  padding: 7px 36px 7px 12px;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  background: #fff;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.375em;
+  letter-spacing: 0.03em;
+  color: #455363;
+  cursor: pointer;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+
+  &:hover {
+    border-color: #ff7bac;
+  }
+}
+
+.selected-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.select-arrow {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.3s ease;
+
+  &.open {
+    transform: translateY(-50%) rotate(180deg);
+  }
+}
+
+.custom-select-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  max-height: 300px;
+  overflow-y: auto;
+  background: #fff;
+  border: 1px solid #e0e0e6;
+  border-radius: 3px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+
+  // 自定义滚动条样式
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #fff0f5;
+    cursor: pointer;
+  }
+}
+
+.custom-select-option {
+  padding: 8px 12px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  background: #fff;
+  &:hover {
+    background: rgba(204, 204, 204, 0.2);
+  }
+
+  &.selected {
+    color: #ff7bac;
+    font-weight: 500;
+  }
+}
+
+// 下拉动画
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.dropdown-enter-from {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>
diff --git a/src/components/customSelect/size375/index.vue b/src/components/customSelect/size375/index.vue
new file mode 100644
index 0000000..7b8f484
--- /dev/null
+++ b/src/components/customSelect/size375/index.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="custom-select-mobile">
+    <div class="search-select" @click="openYearPicker">
+      <div class="search-select-label">Year</div>
+      <div class="search-select-icon">
+        <span class="selected-year-label">{{ selectedLabel }}</span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="10"
+          height="10"
+          viewBox="0 0 10 10"
+          fill="none"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M2.58882 9.69047C2.38633 9.48798 2.36383 9.17365 2.52132 8.9463L2.58882 8.86552L6.45447 5.00022L2.58882 1.13492C2.38633 0.932428 2.36383 0.618098 2.52132 0.390748L2.58882 0.309958C2.79132 0.107469 3.10565 0.0849685 3.33299 0.242458L3.41378 0.309958L7.69156 4.58774C7.89405 4.79023 7.91655 5.10456 7.75906 5.33191L7.69156 5.4127L3.41378 9.69047C3.18597 9.91828 2.81663 9.91828 2.58882 9.69047Z"
+            fill="black"
+          />
+        </svg>
+      </div>
+    </div>
+    <year-wheel-picker
+      v-if="showYearPicker"
+      v-model="localValue"
+      :options="props.options"
+      @close="closeYearPicker"
+      @confirm="onYearConfirm"
+    ></year-wheel-picker>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import YearWheelPicker from "@/components/YearWheelPicker.vue";
+
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number],
+    required: true,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const showYearPicker = ref(false);
+const localValue = ref(props.modelValue);
+
+const selectedLabel = computed(() => {
+  const option = props.options.find((opt) => opt.value === props.modelValue);
+  return option ? option.label : "";
+});
+
+const openYearPicker = () => {
+  localValue.value = props.modelValue;
+  showYearPicker.value = true;
+};
+
+const closeYearPicker = () => {
+  showYearPicker.value = false;
+};
+
+const onYearConfirm = (year) => {
+  emit("update:modelValue", year);
+  closeYearPicker();
+};
+</script>
+
+<style scoped lang="scss">
+.custom-select-mobile {
+  width: 100%;
+}
+
+.search-select {
+  width: 100%;
+  height: 34 * 5.12px;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 5.12px;
+  color: #455363;
+  border: 1 * 5.12px solid #e0e0e6;
+  border-radius: 3 * 5.12px;
+  background: #fff;
+}
+
+.search-select-icon {
+  display: flex;
+  align-items: center;
+  gap: 8 * 5.12px;
+}
+
+.selected-year-label {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 5.12px;
+  line-height: 1.428em;
+  color: #000;
+}
+
+.search-select-label {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 5.12px;
+  line-height: 1.428em;
+  color: #000;
+}
+</style>
diff --git a/src/components/customSelect/size768/index.vue b/src/components/customSelect/size768/index.vue
new file mode 100644
index 0000000..d25881b
--- /dev/null
+++ b/src/components/customSelect/size768/index.vue
@@ -0,0 +1,207 @@
+<template>
+  <div class="custom-select-wrapper" v-click-outside="closeDropdown">
+    <div class="custom-select-display" @click="toggleDropdown">
+      <span class="selected-text">{{ selectedLabel }}</span>
+      <div class="select-arrow" :class="{ open: isOpen }">
+        <svg width="10" height="5" viewBox="0 0 10 5" fill="none">
+          <path
+            d="M1 1L5 4L9 1"
+            stroke="#455363"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+    </div>
+    <transition name="dropdown">
+      <div v-if="isOpen" class="custom-select-dropdown">
+        <div
+          v-for="option in props.options"
+          :key="option.value"
+          class="custom-select-option"
+          :class="{ selected: option.value === props.modelValue }"
+          @click="selectOption(option.value)"
+        >
+          {{ option.label }}
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number],
+    required: true,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const isOpen = ref(false);
+
+const selectedLabel = computed(() => {
+  const option = props.options.find((opt) => opt.value === props.modelValue);
+  return option ? option.label : "";
+});
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const closeDropdown = () => {
+  isOpen.value = false;
+};
+
+const selectOption = (value) => {
+  emit("update:modelValue", value);
+  closeDropdown();
+};
+
+// 点击外部关闭下拉菜单
+const vClickOutside = {
+  mounted(el, binding) {
+    el.clickOutsideEvent = (event) => {
+      if (!(el === event.target || el.contains(event.target))) {
+        binding.value();
+      }
+    };
+    document.addEventListener("click", el.clickOutsideEvent);
+  },
+  unmounted(el) {
+    document.removeEventListener("click", el.clickOutsideEvent);
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.custom-select-wrapper {
+  position: relative;
+  width: 100%;
+  height: 34 * 2.5px;
+  user-select: none;
+}
+
+.custom-select-display {
+  width: 100%;
+  height: 100%;
+  padding: 7 * 2.5px 36 * 2.5px 7 * 2.5px 12 * 2.5px;
+  border: 1 * 2.5px solid #e0e0e6;
+  border-radius: 3 * 2.5px;
+  background: #fff;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  line-height: 1.375em;
+  letter-spacing: 0.48 * 2.5px;
+  color: #455363;
+  cursor: pointer;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+
+  &:hover {
+    border-color: #ff7bac;
+  }
+}
+
+.selected-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.select-arrow {
+  position: absolute;
+  right: 12 * 2.5px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.3s ease;
+
+  &.open {
+    transform: translateY(-50%) rotate(180deg);
+  }
+}
+
+.custom-select-dropdown {
+  position: absolute;
+  top: calc(100% + 4 * 2.5px);
+  left: 0;
+  right: 0;
+  max-height: 300 * 2.5px;
+  overflow-y: auto;
+  background: #fff;
+  border: 1 * 2.5px solid #e0e0e6;
+  border-radius: 3 * 2.5px;
+  box-shadow: 0 2 * 2.5px 8 * 2.5px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+
+  // 自定义滚动条样式
+  &::-webkit-scrollbar {
+    width: 5 * 2.5px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4 * 2.5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 4 * 2.5px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #fff0f5;
+    cursor: pointer;
+  }
+}
+
+.custom-select-option {
+  padding: 8 * 2.5px 12 * 2.5px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  background: #fff;
+  &:hover {
+    background: rgba(204, 204, 204, 0.2);
+  }
+
+  &.selected {
+    color: #ff7bac;
+    font-weight: 500;
+  }
+}
+
+// 下拉动画
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.dropdown-enter-from {
+  opacity: 0;
+  transform: translateY(-10 * 2.5px);
+}
+
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-10 * 2.5px);
+}
+</style>
diff --git a/src/components/languagePicker/index.vue b/src/components/languagePicker/index.vue
index bdb3b15..cfc4094 100644
--- a/src/components/languagePicker/index.vue
+++ b/src/components/languagePicker/index.vue
@@ -17,9 +17,9 @@ const viewComponent = computed(() => {
   const viewWidth = width.value;
   if (viewWidth <= 450) {
     return size375;
-  } else if (viewWidth <= 835) {
+  } else if (viewWidth <= 1100) {
     return size768;
-  } else if (viewWidth <= 1640) {
+  } else if (viewWidth <= 1500) {
     return size1440;
   } else if (viewWidth <= 1920 || viewWidth > 1920) {
     return size1920;
diff --git a/src/locales/enc.js b/src/locales/enc.js
index 19ea527..eb4bf5e 100644
--- a/src/locales/enc.js
+++ b/src/locales/enc.js
@@ -85,6 +85,8 @@ export default {
       "5y": "5Y",
       "10y": "10Y",
       max: "Max",
+      start_time: "Start Time",
+      end_time: "End Time",
     },
   },
   header_menu: {
@@ -135,4 +137,89 @@ export default {
       button: "Go",
     },
   },
+  product_intro: {
+    hero_line1: "More than just a tool——",
+    hero_line2: "Comprehensive growth solutions, ",
+    hero_line3: "providing a one-stop solution for content creation,",
+    hero_line4: "publishing, analysis, and monetization",
+    core_value_title: "Core Value",
+    core_value_text:
+      "The FIEE-SAAS platform is a one-stop content operation solution tailored for creators in the digital era. The platform utilizes intelligent distribution technology, A1 empowerment tools, and full-chain services,Assist you in efficiently reaching audiences on global mainstream platforms such as TikTok, YouTube, and Instagram, creating a KOL brand effect, unlocking content value, and achieving sustainable growth.",
+    features_title: "Product Features",
+    feature_sync: "One-click Synchronous Publishing",
+    feature_sync_desc:
+      "Synchronize graphic and video content to TikTok, YouTube, and Instagram platforms at once, saving time on repetitive operations.",
+    feature_schedule: "Intelligent Scheduled Publishing",
+    feature_schedule_desc:
+      "Plan the content release time in advance, support batch scheduling, and accurately grasp the optimal release time of each platform.",
+    feature_accounts: "Unified Management of Multiple Accounts",
+    feature_accounts_desc:
+      "Easily manage multiple accounts on one platform without the need for repeated login and switching, improving team collaboration efficiency.",
+    feature_library: "Cloud Content Library",
+    feature_library_desc:
+      "Safely store and manage all creative materials, access and use them anytime, anywhere, and support quick retrieval and reuse.",
+    feature_tracking: "Basic Data Tracking",
+    feature_tracking_desc:
+      "Visually view the content performance of various platforms, understand core data indicators, and provide a basis for optimizing strategies.",
+    solutions_title: "Value Added Solutions",
+    sol_kol: "KOL Brand Promotion Services",
+    sol_kol_desc:
+      "Efficiently connect high-quality business cooperation opportunities and complete the entire process management from order acceptance to publication within the platform.",
+    sol_content: "Professional Content Creation Support",
+    sol_content_desc:
+      "Connect professional shooting and post production teams for you, create high-quality \"art+story\" content, and strengthen IP influence.",
+    sol_ops: "Account Operation and Hosting Services",
+    sol_ops_desc:
+      "From 0 to 1 account positioning, follower growth strategy to monetization cycle, operation experts provide full cycle running and hosting services.",
+    advantages_title: "Our Advantages",
+    adv_time: "Time Saving",
+    adv_time_desc:
+      "Multi platform publishing efficiency improvement, allowing you to focus on content creation.",
+    adv_safe: "Safe and Reliable",
+    adv_safe_desc:
+      "Enterprise level data encryption and permission control ensure account and content security.",
+    adv_consistent: "Maintain Consistency",
+    adv_consistent_desc:
+      "Ensure that brand information is presented uniformly on all platforms.",
+    adv_data: "Data Driven",
+    adv_data_desc:
+      "Optimizing Content Strategies Based on Actual Performance.",
+    adv_easy: "Easy to Use",
+    adv_easy_desc:
+      "Intuitive interface design, no need for professional technical background.",
+    cta_title_line1: "Get customized ",
+    cta_title_line2: "solutions for free",
+  },
+  contacts: {
+    title: "Investor Contacts",
+    company_name: "FiEE Inc.",
+    investor_relations: "Investor Relations",
+    email_label: "Email:",
+  },
+  email_alerts: {
+    title: "E-Mail Alerts",
+    required_fields: "* Required Fields",
+    submitted_successfully: "Submitted successfully!",
+    submitted_info: "The information you submitted is as follows:",
+    form: {
+      first_name: "* First Name",
+      last_name: "* Last Name",
+      email: "* Email",
+      company: "* Company",
+      phone: "* Phone",
+      submit: "Submit",
+    },
+    submitted_data: {
+      first_name: "First Name：",
+      last_name: "Last Name：",
+      email: "Email：",
+      company: "Company：",
+      phone: "Phone：",
+      not_filled: "Not filled in",
+    },
+    validation: {
+      complete_info: "Please fill in complete information",
+      field_length: "Field length cannot exceed 50 characters",
+    },
+  },
 };
diff --git a/src/locales/jac.js b/src/locales/jac.js
index fd951f2..33eb9fe 100644
--- a/src/locales/jac.js
+++ b/src/locales/jac.js
@@ -85,6 +85,8 @@ export default {
       "5y": "5年",
       "10y": "10年",
       "max": "最大",
+      start_time: "開始時間",
+      end_time: "終了時間",
     },
   },
   header_menu: {
@@ -135,4 +137,87 @@ export default {
       button: "検索",
     },
   },
+  product_intro: {
+    hero_line1: "単なるツールではなく——",
+    hero_line2: "包括的な成長ソリューション、",
+    hero_line3: "コンテンツ制作のワンストップソリューションを提供し、",
+    hero_line4: "配信・分析・マネタイズまで対応",
+    core_value_title: "中核価値",
+    core_value_text:
+      "FIEE-SAASプラットフォームは、デジタル時代のクリエイター向けに設計されたワンストップのコンテンツ運用ソリューションです。インテリジェント配信技術、AI支援ツール、フルチェーンサービスを活用し、TikTok、YouTube、Instagramなどの主要プラットフォームで効率的にオーディエンスにリーチし、KOLブランド効果を創出し、コンテンツ価値を解放し、持続的な成長を実現します。",
+    features_title: "製品機能",
+    feature_sync: "ワンクリック同時投稿",
+    feature_sync_desc:
+      "画像・動画コンテンツをTikTok、YouTube、Instagramに一括同期し、繰り返し作業の時間を削減します。",
+    feature_schedule: "インテリジェント予約投稿",
+    feature_schedule_desc:
+      "事前に投稿時間を計画し、バッチ予約に対応。各プラットフォームの最適な投稿時間を正確に把握。",
+    feature_accounts: "複数アカウントの一元管理",
+    feature_accounts_desc:
+      "1つのプラットフォームで複数アカウントを簡単に管理。ログイン・切替の手間を省き、チーム協業効率を向上。",
+    feature_library: "クラウドコンテンツライブラリ",
+    feature_library_desc:
+      "すべての制作素材を安全に保管・管理。いつでもどこでもアクセス・利用可能で、迅速な検索と再利用をサポート。",
+    feature_tracking: "基本データトラッキング",
+    feature_tracking_desc:
+      "各プラットフォームのコンテンツ実績を可視化し、コア指標を把握。最適化の根拠を提供。",
+    solutions_title: "付加価値ソリューション",
+    sol_kol: "KOLブランドプロモーション",
+    sol_kol_desc:
+      "高品質なビジネス協業機会を効率的にマッチングし、受注から公開までの全工程をプラットフォーム内で完結。",
+    sol_content: "プロフェッショナルなコンテンツ制作支援",
+    sol_content_desc:
+      "撮影・編集の専門チームと連携し、高品質な“アート+ストーリー”コンテンツを制作し、IP影響力を強化。",
+    sol_ops: "アカウント運用・代行サービス",
+    sol_ops_desc:
+      "0から1までのアカウント設計、フォロワー成長戦略から収益化サイクルまで、運用専門家が一貫して支援。",
+    advantages_title: "私たちの強み",
+    adv_time: "時間の節約",
+    adv_time_desc:
+      "マルチプラットフォーム同時投稿で効率アップ。制作に集中できます。",
+    adv_safe: "安全で信頼できる",
+    adv_safe_desc:
+      "エンタープライズレベルのデータ暗号化と権限管理でアカウントとコンテンツを保護。",
+    adv_consistent: "一貫性の維持",
+    adv_consistent_desc:
+      "すべてのプラットフォームでブランド情報を統一的に提示。",
+    adv_data: "データドリブン",
+    adv_data_desc: "実績に基づく戦略最適化。",
+    adv_easy: "使いやすさ",
+    adv_easy_desc: "直感的なUIで専門知識不要。",
+    cta_title_line1: "無料で",
+    cta_title_line2: "カスタマイズされたソリューションを",
+  },
+  contacts: {
+    title: "投資家連絡先",
+    company_name: "FiEE Inc.",
+    investor_relations: "投資家関係",
+    email_label: "メール:",
+  },
+  email_alerts: {
+    title: "メールアラート",
+    required_fields: "* 必須項目",
+    submitted_successfully: "送信が完了しました！",
+    submitted_info: "送信された情報は以下の通りです：",
+    form: {
+      first_name: "* 名",
+      last_name: "* 姓",
+      email: "* メールアドレス",
+      company: "* 会社名",
+      phone: "* 電話番号",
+      submit: "送信",
+    },
+    submitted_data: {
+      first_name: "名：",
+      last_name: "姓：",
+      email: "メールアドレス：",
+      company: "会社名：",
+      phone: "電話番号：",
+      not_filled: "未入力",
+    },
+    validation: {
+      complete_info: "完全な情報を入力してください",
+      field_length: "フィールドの長さは50文字を超えることはできません",
+    },
+  },
 }
\ No newline at end of file
diff --git a/src/locales/zh-TWc.js b/src/locales/zh-TWc.js
index f223fab..a6fda7f 100644
--- a/src/locales/zh-TWc.js
+++ b/src/locales/zh-TWc.js
@@ -85,6 +85,8 @@ export default {
       "5y": "5年",
       "10y": "10年",
       "max": "最大",
+      start_time: "開始時間",
+      end_time: "結束時間",
     },
   },
   header_menu: {
@@ -135,4 +137,84 @@ export default {
       button: "開始",
     },
   },
+  product_intro: {
+    hero_line1: "不僅是一個工具——",
+    hero_line2: "全鏈路成長解決方案，",
+    hero_line3: "為內容創作提供一站式方案，",
+    hero_line4: "涵蓋發布、分析與變現",
+    core_value_title: "核心價值",
+    core_value_text:
+      "FIEE-SAAS 平台是一個為數位時代創作者量身打造的一站式內容營運解決方案。平台透過智慧分發技術、AI 賦能工具與全鏈服務，協助你高效觸達 TikTok、YouTube、Instagram 等全球主流平台受眾，打造 KOL 品牌效應，釋放內容價值，實現永續成長。",
+    features_title: "產品功能",
+    feature_sync: "一鍵同步發布",
+    feature_sync_desc:
+      "圖文與影片內容一鍵同步至 TikTok、YouTube、Instagram，節省重複操作時間。",
+    feature_schedule: "智慧排程發布",
+    feature_schedule_desc:
+      "事先規劃發布時間，支援批量排程，精準掌握各平台最佳發布時段。",
+    feature_accounts: "多帳號統一管理",
+    feature_accounts_desc:
+      "在一個平台輕鬆管理多個帳號，無需反覆登入與切換，提升團隊協作效率。",
+    feature_library: "雲端素材庫",
+    feature_library_desc:
+      "安全儲存與管理所有創作素材，隨時隨地取用，支援快速檢索與再利用。",
+    feature_tracking: "基礎數據追蹤",
+    feature_tracking_desc:
+      "以視覺化方式查看各平台內容表現，掌握核心指標，為策略優化提供依據。",
+    solutions_title: "增值解決方案",
+    sol_kol: "KOL 品牌推廣服務",
+    sol_kol_desc:
+      "高效率對接優質商務合作機會，於平台內完成從接單到發布的全流程管理。",
+    sol_content: "專業內容創作支援",
+    sol_content_desc:
+      "為你對接專業拍攝與後製團隊，打造高品質「藝術+故事」內容，強化 IP 影響力。",
+    sol_ops: "帳號營運與代營運服務",
+    sol_ops_desc:
+      "從 0 到 1 的帳號定位、粉絲成長策略到變現循環，營運專家提供全週期營運與託管服務。",
+    advantages_title: "我們的優勢",
+    adv_time: "節省時間",
+    adv_time_desc: "多平台聯動提升發布效率，專注內容創作。",
+    adv_safe: "安全可靠",
+    adv_safe_desc: "企業級數據加密與權限控管，保障帳號與內容安全。",
+    adv_consistent: "維持一致性",
+    adv_consistent_desc: "確保品牌資訊在各平台一致呈現。",
+    adv_data: "數據驅動",
+    adv_data_desc: "根據實際表現優化內容策略。",
+    adv_easy: "易於使用",
+    adv_easy_desc: "直覺化介面設計，無需專業技術背景。",
+    cta_title_line1: "免費獲取",
+    cta_title_line2: "專屬客製化方案",
+  },
+  contacts: {
+    title: "投資者聯絡方式",
+    company_name: "FiEE Inc.",
+    investor_relations: "投資者關係",
+    email_label: "郵箱:",
+  },
+  email_alerts: {
+    title: "郵件提醒",
+    required_fields: "* 必填欄位",
+    submitted_successfully: "提交成功！",
+    submitted_info: "您提交的資訊如下：",
+    form: {
+      first_name: "* 名字",
+      last_name: "* 姓氏",
+      email: "* 郵箱",
+      company: "* 公司",
+      phone: "* 電話",
+      submit: "提交",
+    },
+    submitted_data: {
+      first_name: "名字：",
+      last_name: "姓氏：",
+      email: "郵箱：",
+      company: "公司：",
+      phone: "電話：",
+      not_filled: "未填寫",
+    },
+    validation: {
+      complete_info: "請填寫完整資訊",
+      field_length: "欄位長度不能超過50個字符",
+    },
+  },
 }
\ No newline at end of file
diff --git a/src/locales/zhc.js b/src/locales/zhc.js
index a9c9889..6f7ea8e 100644
--- a/src/locales/zhc.js
+++ b/src/locales/zhc.js
@@ -85,6 +85,8 @@ export default {
       "5y": '5年',
       "10y": '10年',
       max: '最大',
+      start_time: '开始时间',
+      end_time: '结束时间',
     },
   },
   header_menu: {
@@ -135,4 +137,84 @@ export default {
       button: "开始",
     },
   },
+  product_intro: {
+    hero_line1: "不止于工具——",
+    hero_line2: "全链路增长解决方案，",
+    hero_line3: "为内容创作提供一站式方案，",
+    hero_line4: "覆盖发布、分析与变现",
+    core_value_title: "核心价值",
+    core_value_text:
+      "FIEE-SAAS 平台是为数字时代创作者量身打造的一站式内容运营解决方案。平台通过智能分发技术、AI 赋能工具与全链路服务，助你高效触达 TikTok、YouTube、Instagram 等全球主流平台受众，打造 KOL 品牌效应，释放内容价值，实现可持续增长。",
+    features_title: "产品功能",
+    feature_sync: "一键同步发布",
+    feature_sync_desc:
+      "图文与视频内容一键同步至 TikTok、YouTube、Instagram，节省重复操作时间。",
+    feature_schedule: "智能定时发布",
+    feature_schedule_desc:
+      "提前规划内容发布时间，支持批量排期，精准把握各平台最佳发布时间。",
+    feature_accounts: "多账号统一管理",
+    feature_accounts_desc:
+      "一个平台轻松管理多个账号，无需反复登录与切换，提升团队协同效率。",
+    feature_library: "云端素材库",
+    feature_library_desc:
+      "安全存储与管理全部创作素材，随时随地访问与使用，支持快速检索与复用。",
+    feature_tracking: "基础数据追踪",
+    feature_tracking_desc:
+      "可视化查看各平台内容表现，掌握核心数据指标，为策略优化提供依据。",
+    solutions_title: "增值解决方案",
+    sol_kol: "KOL 品牌推广服务",
+    sol_kol_desc:
+      "高效对接优质商务合作机会，在平台内完成从接单到发布的全流程管理。",
+    sol_content: "专业内容创作支持",
+    sol_content_desc:
+      "为你对接专业拍摄与后期团队，打造高质量“艺术+故事”内容，强化 IP 影响力。",
+    sol_ops: "账号运营与代运营服务",
+    sol_ops_desc:
+      "从 0 到 1 账号定位、粉丝增长策略到变现闭环，运营专家提供全周期运营与托管服务。",
+    advantages_title: "我们的优势",
+    adv_time: "节省时间",
+    adv_time_desc: "多平台联动提升发布效率，专注内容创作。",
+    adv_safe: "安全可靠",
+    adv_safe_desc: "企业级数据加密与权限控制，保障账号与内容安全。",
+    adv_consistent: "保持一致性",
+    adv_consistent_desc: "确保品牌信息在各平台统一呈现。",
+    adv_data: "数据驱动",
+    adv_data_desc: "基于实际表现优化内容策略。",
+    adv_easy: "易于使用",
+    adv_easy_desc: "直观的界面设计，无需专业技术背景。",
+    cta_title_line1: "免费获取",
+    cta_title_line2: "专属定制方案",
+  },
+  contacts: {
+    title: "投资者联系方式",
+    company_name: "FiEE Inc.",
+    investor_relations: "投资者关系",
+    email_label: "邮箱:",
+  },
+  email_alerts: {
+    title: "邮件提醒",
+    required_fields: "* 必填字段",
+    submitted_successfully: "提交成功！",
+    submitted_info: "您提交的信息如下：",
+    form: {
+      first_name: "* 名字",
+      last_name: "* 姓氏",
+      email: "* 邮箱",
+      company: "* 公司",
+      phone: "* 电话",
+      submit: "提交",
+    },
+    submitted_data: {
+      first_name: "名字：",
+      last_name: "姓氏：",
+      email: "邮箱：",
+      company: "公司：",
+      phone: "电话：",
+      not_filled: "未填写",
+    },
+    validation: {
+      complete_info: "请填写完整信息",
+      field_length: "字段长度不能超过50个字符",
+    },
+  },
 }
\ No newline at end of file
diff --git a/src/views/contacts/size1440/index.vue b/src/views/contacts/size1440/index.vue
index ccc7459..3e85f65 100644
--- a/src/views/contacts/size1440/index.vue
+++ b/src/views/contacts/size1440/index.vue
@@ -1,6 +1,9 @@
 <script setup>
 import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
 import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 function copyEmail() {
   navigator.clipboard.writeText("fiee@dlkadvisory.com");
@@ -12,15 +15,15 @@ function copyEmail() {
     <!-- Title Section -->
     <div class="title-section">
       <div class="title-decoration"></div>
-      <div class="contact-title">Investor Contacts</div>
+      <div class="contact-title">{{ t("contacts.title") }}</div>
     </div>
 
     <!-- Card Section -->
     <div class="contact-card">
-      <div class="logo-text">FiEE Inc.</div>
-      <div class="relation-text">Investor Relations</div>
+      <div class="logo-text">{{ t("contacts.company_name") }}</div>
+      <div class="relation-text">{{ t("contacts.investor_relations") }}</div>
       <div class="email-section">
-        <span>Email:</span>
+        <span>{{ t("contacts.email_label") }}</span>
         <span class="email-address" @click="copyEmail"
           >fiee@dlkadvisory.com</span
         >
diff --git a/src/views/contacts/size1920/index.vue b/src/views/contacts/size1920/index.vue
index 52bca93..cc61643 100644
--- a/src/views/contacts/size1920/index.vue
+++ b/src/views/contacts/size1920/index.vue
@@ -1,6 +1,9 @@
 <script setup>
 import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
 import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 function copyEmail() {
   navigator.clipboard.writeText("fiee@dlkadvisory.com");
@@ -12,15 +15,15 @@ function copyEmail() {
     <!-- Title Section -->
     <div class="title-section">
       <div class="title-decoration"></div>
-      <div class="contact-title">Investor Contacts</div>
+      <div class="contact-title">{{ t("contacts.title") }}</div>
     </div>
 
     <!-- Card Section -->
     <div class="contact-card">
-      <div class="logo-text">FiEE Inc.</div>
-      <div class="relation-text">Investor Relations</div>
+      <div class="logo-text">{{ t("contacts.company_name") }}</div>
+      <div class="relation-text">{{ t("contacts.investor_relations") }}</div>
       <div class="email-section">
-        <span>Email:</span>
+        <span>{{ t("contacts.email_label") }}</span>
         <span class="email-address" @click="copyEmail"
           >fiee@dlkadvisory.com</span
         >
diff --git a/src/views/contacts/size375/index.vue b/src/views/contacts/size375/index.vue
index 13e4857..ef9b26c 100644
--- a/src/views/contacts/size375/index.vue
+++ b/src/views/contacts/size375/index.vue
@@ -1,6 +1,9 @@
 <script setup>
 import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
 import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 function copyEmail() {
   navigator.clipboard.writeText("fiee@dlkadvisory.com");
@@ -12,7 +15,7 @@ function copyEmail() {
     <!-- Title Section -->
     <div class="title-section">
       <div class="title-decoration"></div>
-      <div class="contact-title">Investor Contacts</div>
+      <div class="contact-title">{{ t("contacts.title") }}</div>
     </div>
 
     <!-- Card Section -->
@@ -22,10 +25,10 @@ function copyEmail() {
         src="@/assets/image/375/contacts-bg.png"
         alt=""
       />
-      <div class="logo-text">FiEE Inc.</div>
-      <div class="relation-text">Investor Relations</div>
+      <div class="logo-text">{{ t("contacts.company_name") }}</div>
+      <div class="relation-text">{{ t("contacts.investor_relations") }}</div>
       <div class="email-section">
-        <span>Email:</span>
+        <span>{{ t("contacts.email_label") }}</span>
         <span class="email-address" @click="copyEmail"
           >fiee@dlkadvisory.com</span
         >
diff --git a/src/views/contacts/size768/index.vue b/src/views/contacts/size768/index.vue
index d59d35f..69c2dea 100644
--- a/src/views/contacts/size768/index.vue
+++ b/src/views/contacts/size768/index.vue
@@ -1,6 +1,9 @@
 <script setup>
 import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
 import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 function copyEmail() {
   navigator.clipboard.writeText("fiee@dlkadvisory.com");
@@ -12,15 +15,15 @@ function copyEmail() {
     <!-- Title Section -->
     <div class="title-section">
       <div class="title-decoration"></div>
-      <div class="contact-title">Investor Contacts</div>
+      <div class="contact-title">{{ t("contacts.title") }}</div>
     </div>
 
     <!-- Card Section -->
     <div class="contact-card">
-      <div class="logo-text">FiEE Inc.</div>
-      <div class="relation-text">Investor Relations</div>
+      <div class="logo-text">{{ t("contacts.company_name") }}</div>
+      <div class="relation-text">{{ t("contacts.investor_relations") }}</div>
       <div class="email-section">
-        <span>Email:</span>
+        <span>{{ t("contacts.email_label") }}</span>
         <span class="email-address" @click="copyEmail"
           >fiee@dlkadvisory.com</span
         >
diff --git a/src/views/email-alerts/size1440/index.vue b/src/views/email-alerts/size1440/index.vue
index 2f7cdd9..c4175ac 100644
--- a/src/views/email-alerts/size1440/index.vue
+++ b/src/views/email-alerts/size1440/index.vue
@@ -1,8 +1,11 @@
 <script setup>
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 
 import axios from "axios";
 import { message } from "@/utils/message.js";
+
+const { t } = useI18n();
 const form = ref({
   firstName: "",
   lastName: "",
@@ -17,11 +20,11 @@ async function handleSubmit(e) {
   if (
     Object.values(form.value).some((value) => value === "" || value === null)
   ) {
-    message.warning("请填写完整信息");
+    message.warning(t("email_alerts.validation.complete_info"));
     return;
   }
   if (Object.values(form.value).some((value) => value.length > 50)) {
-    message.warning("字段长度不能超过50个字符");
+    message.warning(t("email_alerts.validation.field_length"));
     return;
   }
   let url = "http://114.218.158.24:9020/api/fiee/emailalerts/submit";
@@ -39,14 +42,14 @@ async function handleSubmit(e) {
     <!-- 未提交 -->
     <div v-if="!submitted" class="title-section">
       <div class="title-decoration"></div>
-      <div class="title">E-Mail Alerts</div>
-      <div class="subtitle">* Required Fields</div>
+      <div class="title">{{ t("email_alerts.title") }}</div>
+      <div class="subtitle">{{ t("email_alerts.required_fields") }}</div>
     </div>
     <!-- 已提交 -->
     <div v-else class="title-section mt-[60px]">
       <div class="title-decoration"></div>
-      <div class="title">Submitted successfully!</div>
-      <div class="subtitle">The information you submitted is as follows:</div>
+      <div class="title">{{ t("email_alerts.submitted_successfully") }}</div>
+      <div class="subtitle">{{ t("email_alerts.submitted_info") }}</div>
     </div>
     <!-- Form Card -->
     <div
@@ -59,7 +62,9 @@ async function handleSubmit(e) {
       <template v-if="!submitted">
         <form class="form-content" @submit="handleSubmit">
           <div class="form-group">
-            <label for="firstName">* First Name</label>
+            <label for="firstName">{{
+              t("email_alerts.form.first_name")
+            }}</label>
             <input
               v-no-space
               id="firstName"
@@ -69,7 +74,7 @@ async function handleSubmit(e) {
             />
           </div>
           <div class="form-group">
-            <label for="lastName">* Last Name</label>
+            <label for="lastName">{{ t("email_alerts.form.last_name") }}</label>
             <input
               v-no-space
               id="lastName"
@@ -79,7 +84,7 @@ async function handleSubmit(e) {
             />
           </div>
           <div class="form-group">
-            <label for="email">* Email</label>
+            <label for="email">{{ t("email_alerts.form.email") }}</label>
             <input
               v-no-space
               id="email"
@@ -89,7 +94,7 @@ async function handleSubmit(e) {
             />
           </div>
           <div class="form-group">
-            <label for="company">* Company</label>
+            <label for="company">{{ t("email_alerts.form.company") }}</label>
             <input
               v-no-space
               id="company"
@@ -99,7 +104,7 @@ async function handleSubmit(e) {
             />
           </div>
           <div class="form-group">
-            <label for="phone">* Phone</label>
+            <label for="phone">{{ t("email_alerts.form.phone") }}</label>
             <input
               v-no-space
               id="phone"
@@ -108,31 +113,53 @@ async function handleSubmit(e) {
               required
             />
           </div>
-          <button type="submit" class="submit-btn">Submit</button>
+          <button type="submit" class="submit-btn">
+            {{ t("email_alerts.form.submit") }}
+          </button>
         </form>
       </template>
       <template v-else>
         <div class="submitted-data">
           <div class="submitted-data-content">
             <div class="submitted-row">
-              <span class="label">First Name：</span>
-              <span class="value">{{ form.firstName || "Not filled in" }}</span>
+              <span class="label">{{
+                t("email_alerts.submitted_data.first_name")
+              }}</span>
+              <span class="value">{{
+                form.firstName || t("email_alerts.submitted_data.not_filled")
+              }}</span>
             </div>
             <div class="submitted-row">
-              <span class="label">Last Name：</span>
-              <span class="value">{{ form.lastName || "Not filled in" }}</span>
+              <span class="label">{{
+                t("email_alerts.submitted_data.last_name")
+              }}</span>
+              <span class="value">{{
+                form.lastName || t("email_alerts.submitted_data.not_filled")
+              }}</span>
             </div>
             <div class="submitted-row">
-              <span class="label">Email：</span>
-              <span class="value">{{ form.email || "Not filled in" }}</span>
+              <span class="label">{{
+                t("email_alerts.submitted_data.email")
+              }}</span>
+              <span class="value">{{
+                form.email || t("email_alerts.submitted_data.not_filled")
+              }}</span>
             </div>
             <div class="submitted-row">
-              <span class="label">Company：</span>
-              <span class="value">{{ form.company || "Not filled in" }}</span>
+              <span class="label">{{
+                t("email_alerts.submitted_data.company")
+              }}</span>
+              <span class="value">{{
+                form.company || t("email_alerts.submitted_data.not_filled")
+              }}</span>
             </div>
             <div class="submitted-row">
-              <span class="label">Phone：</span>
-              <span class="value">{{ form.phone || "Not filled in" }}</span>
+              <span class="label">{{
+                t("email_alerts.submitted_data.phone")
+              }}</span>
+              <span class="value">{{
+                form.phone || t("email_alerts.submitted_data.not_filled")
+              }}</span>
             </div>
           </div>
         </div>
diff --git a/src/views/email-alerts/size1920/index.vue b/src/views/email-alerts/size1920/index.vue
index dbb9973..6ac9e0c 100644
--- a/src/views/email-alerts/size1920/index.vue
+++ b/src/views/email-alerts/size1920/index.vue
@@ -1,8 +1,11 @@
 <script setup>
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 
 import axios from "axios";
 import { message } from "@/utils/message.js";
+
+const { t } = useI18n();
 const form = ref({
   firstName: "",
   lastName: "",
@@ -17,11 +20,11 @@ async function handleSubmit(e) {
   if (
     Object.values(form.value).some((value) => value === "" || value === null)
   ) {
-    message.warning("请填写完整信息");
+    message.warning(t("email_alerts.validation.complete_info"));
     return;
   }
   if (Object.values(form.value).some((value) => value.length > 50)) {
-    message.warning("字段长度不能超过50个字符");
+    message.warning(t("email_alerts.validation.field_length"));
     return;
   }
   let url = "http://114.218.158.24:9020/api/fiee/emailalerts/submit";
@@ -39,14 +42,14 @@ async function handleSubmit(e) {
     <!-- 未提交 -->
     <div v-if="!submitted" class="title-section">
       <div class="title-decoration"></div>
-      <div class="title">E-Mail Alerts</div>
-      <div class="subtitle">* Required Fields</div>
+      <div class="title">{{ t("email_alerts.title") }}</div>
+      <div class="subtitle">{{ t("email_alerts.required_fields") }}</div>
     </div>
     <!-- 已提交 -->
     <div v-else class="title-section">
       <div class="title-decoration"></div>
-      <div class="title">Submitted successfully!</div>
-      <div class="subtitle">The information you submitted is as follows:</div>
+      <div class="title">{{ t("email_alerts.submitted_successfully") }}</div>
+      <div class="subtitle">{{ t("email_alerts.submitted_info") }}</div>
     </div>
     <!-- Form Card -->
     <div
@@ -59,7 +62,9 @@ async function handleSubmit(e) {
       <template v-if="!submitted">
         <form class="form-content" @submit="handleSubmit">
           <div class="form-group">
-            <label for="firstName">* First Name</label>
+            <label for="firstName">{{
+              t("email_alerts.form.first_name")
+            }}</label>
             <input
               id="firstName"
               v-no-space
@@ -69,7 +74,7 @@ async function handleSubmit(e) {
             />
           </div>
           <div class="form-group">
-            <label for="lastName">* Last Name</label>
+            <label for="lastName">{{ t("email_alerts.form.last_name") }}</label>
             <input
               id="lastName"
               v-no-space
@@ -79,7 +84,7 @@ async function handleSubmit(e) {
             />
           </div>
           <div class="form-group">
-            <label for="email">* Email</label>
+            <label for="email">{{ t("email_alerts.form.email") }}</label>
             <input
               id="email"
               v-no-space
@@ -89,7 +94,7 @@ async function handleSubmit(e) {
             />
           </div>
           <div class="form-group">
-            <label for="company">* Company</label>
+            <label for="company">{{ t("email_alerts.form.company") }}</label>
             <input
               id="company"
               v-no-space
@@ -99,34 +104,56 @@ async function handleSubmit(e) {
             />
           </div>
           <div class="form-group">
-            <label for="phone">* Phone</label>
+            <label for="phone">{{ t("email_alerts.form.phone") }}</label>
             <input id="phone" v-no-space v-model="form.phone" type="tel" />
           </div>
-          <button type="submit" class="submit-btn">Submit</button>
+          <button type="submit" class="submit-btn">
+            {{ t("email_alerts.form.submit") }}
+          </button>
         </form>
       </template>
       <template v-else>
         <div class="submitted-data">
           <div class="submitted-data-content">
             <div class="submitted-row">
-              <span class="label">First Name：</span>
-              <span class="value">{{ form.firstName || "Not filled in" }}</span>
+              <span class="label">{{
+                t("email_alerts.submitted_data.first_name")
+              }}</span>
+              <span class="value">{{
+                form.firstName || t("email_alerts.submitted_data.not_filled")
+              }}</span>
             </div>
             <div class="submitted-row">
-              <span class="label">Last Name：</span>
-              <span class="value">{{ form.lastName || "Not filled in" }}</span>
+              <span class="label">{{
+                t("email_alerts.submitted_data.last_name")
+              }}</span>
+              <span class="value">{{
+                form.lastName || t("email_alerts.submitted_data.not_filled")
+              }}</span>
             </div>
             <div class="submitted-row">
-              <span class="label">Email：</span>
-              <span class="value">{{ form.email || "Not filled in" }}</span>
+              <span class="label">{{
+                t("email_alerts.submitted_data.email")
+              }}</span>
+              <span class="value">{{
+                form.email || t("email_alerts.submitted_data.not_filled")
+              }}</span>
             </div>
             <div class="submitted-row">
-              <span class="label">Company：</span>
-              <span class="value">{{ form.company || "Not filled in" }}</span>
+              <span class="label">{{
+                t("email_alerts.submitted_data.company")
+              }}</span>
+              <span class="value">{{
+                form.company || t("email_alerts.submitted_data.not_filled")
+              }}</span>
             </div>
             <div class="submitted-row">
-              <span class="label">Phone：</span>
-              <span class="value">{{ form.phone || "Not filled in" }}</span>
+              <span class="label">{{
+                t("email_alerts.submitted_data.phone")
+              }}</span>
+              <span class="value">{{
+                form.phone || t("email_alerts.submitted_data.not_filled")
+              }}</span>
             </div>
           </div>
         </div>
diff --git a/src/views/email-alerts/size375/index.vue b/src/views/email-alerts/size375/index.vue
index 99a02a1..ecd0f6e 100644
--- a/src/views/email-alerts/size375/index.vue
+++ b/src/views/email-alerts/size375/index.vue
@@ -1,7 +1,10 @@
 <script setup>
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 import axios from "axios";
 import { message } from "@/utils/message.js";
+
+const { t } = useI18n();
 const form = ref({
   firstName: "",
   lastName: "",
@@ -17,11 +20,11 @@ async function handleSubmit(e) {
   if (
     Object.values(form.value).some((value) => value === "" || value === null)
   ) {
-    message.warning("请填写完整信息");
+    message.warning(t("email_alerts.validation.complete_info"));
     return;
   }
   if (Object.values(form.value).some((value) => value.length > 50)) {
-    message.warning("字段长度不能超过50个字符");
+    message.warning(t("email_alerts.validation.field_length"));
     return;
   }
   let url = "http://114.218.158.24:9020/api/fiee/emailalerts/submit";
@@ -39,33 +42,35 @@ async function handleSubmit(e) {
     <template v-if="!submitted">
       <div class="title-block">
         <div class="title-bar"></div>
-        <h2 class="title">E-Mail Alerts</h2>
-        <p class="subtitle">* Required Fields</p>
+        <h2 class="title">{{ t("email_alerts.title") }}</h2>
+        <p class="subtitle">{{ t("email_alerts.required_fields") }}</p>
       </div>
       <!-- Card -->
       <div class="card">
         <form class="form" @submit="handleSubmit">
           <div class="form-field">
-            <label>* First Name</label>
+            <label>{{ t("email_alerts.form.first_name") }}</label>
             <input v-no-space v-model="form.firstName" type="text" />
           </div>
           <div class="form-field">
-            <label>* Last Name</label>
+            <label>{{ t("email_alerts.form.last_name") }}</label>
             <input v-no-space v-model="form.lastName" type="text" />
           </div>
           <div class="form-field">
-            <label>* Email</label>
+            <label>{{ t("email_alerts.form.email") }}</label>
             <input v-no-space v-model="form.email" type="email" />
           </div>
           <div class="form-field">
-            <label>* Company</label>
+            <label>{{ t("email_alerts.form.company") }}</label>
             <input v-no-space v-model="form.company" type="text" />
           </div>
           <div class="form-field">
-            <label>* Phone</label>
+            <label>{{ t("email_alerts.form.phone") }}</label>
             <input v-no-space v-model="form.phone" type="tel" />
           </div>
-          <button type="submit" class="submit">Submit</button>
+          <button type="submit" class="submit">
+            {{ t("email_alerts.form.submit") }}
+          </button>
         </form>
       </div>
     </template>
@@ -73,30 +78,40 @@ async function handleSubmit(e) {
       <div class="success-block">
         <div class="title-block">
           <div class="title-bar"></div>
-          <h2 class="title">Submitted successfully!</h2>
-          <p class="subtitle">The information you submitted is as follows:</p>
+          <h2 class="title">{{ t("email_alerts.submitted_successfully") }}</h2>
+          <p class="subtitle">{{ t("email_alerts.submitted_info") }}</p>
         </div>
 
         <div class="success-card">
           <div class="success-card-item">
-            <div class="font-semibold success-card-label">First Name：</div>
-            {{ form.firstName || "Not filled in" }}
+            <div class="font-semibold success-card-label">
+              {{ t("email_alerts.submitted_data.first_name") }}
+            </div>
+            {{ form.firstName || t("email_alerts.submitted_data.not_filled") }}
           </div>
           <div class="success-card-item">
-            <div class="font-semibold success-card-label">Last Name：</div>
-            {{ form.lastName || "Not filled in" }}
+            <div class="font-semibold success-card-label">
+              {{ t("email_alerts.submitted_data.last_name") }}
+            </div>
+            {{ form.lastName || t("email_alerts.submitted_data.not_filled") }}
           </div>
           <div class="success-card-item">
-            <div class="font-semibold success-card-label">Email：</div>
-            {{ form.email || "Not filled in" }}
+            <div class="font-semibold success-card-label">
+              {{ t("email_alerts.submitted_data.email") }}
+            </div>
+            {{ form.email || t("email_alerts.submitted_data.not_filled") }}
           </div>
           <div class="success-card-item">
-            <div class="font-semibold success-card-label">Company：</div>
-            {{ form.company || "Not filled in" }}
+            <div class="font-semibold success-card-label">
+              {{ t("email_alerts.submitted_data.company") }}
+            </div>
+            {{ form.company || t("email_alerts.submitted_data.not_filled") }}
           </div>
           <div class="success-card-item">
-            <div class="font-semibold success-card-label">Phone：</div>
-            {{ form.phone || "Not filled in" }}
+            <div class="font-semibold success-card-label">
+              {{ t("email_alerts.submitted_data.phone") }}
+            </div>
+            {{ form.phone || t("email_alerts.submitted_data.not_filled") }}
           </div>
         </div>
         <div class="submitted-bg"></div>
diff --git a/src/views/email-alerts/size768/index.vue b/src/views/email-alerts/size768/index.vue
index 78a7036..d7b5858 100644
--- a/src/views/email-alerts/size768/index.vue
+++ b/src/views/email-alerts/size768/index.vue
@@ -1,8 +1,11 @@
 <script setup>
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 
 import axios from "axios";
 import { message } from "@/utils/message.js";
+
+const { t } = useI18n();
 const form = ref({
   firstName: "",
   lastName: "",
@@ -17,11 +20,11 @@ async function handleSubmit(e) {
   if (
     Object.values(form.value).some((value) => value === "" || value === null)
   ) {
-    message.warning("请填写完整信息");
+    message.warning(t("email_alerts.validation.complete_info"));
     return;
   }
   if (Object.values(form.value).some((value) => value.length > 50)) {
-    message.warning("字段长度不能超过50个字符");
+    message.warning(t("email_alerts.validation.field_length"));
     return;
   }
   let url = "http://114.218.158.24:9020/api/fiee/emailalerts/submit";
@@ -39,14 +42,14 @@ async function handleSubmit(e) {
     <!-- 未提交 -->
     <div v-if="!submitted" class="title-section">
       <div class="title-decoration"></div>
-      <div class="title">E-Mail Alerts</div>
-      <div class="subtitle">* Required Fields</div>
+      <div class="title">{{ t("email_alerts.title") }}</div>
+      <div class="subtitle">{{ t("email_alerts.required_fields") }}</div>
     </div>
     <!-- 已提交 -->
     <div v-else class="title-section">
       <div class="title-decoration"></div>
-      <div class="title">Submitted successfully!</div>
-      <div class="subtitle">The information you submitted is as follows:</div>
+      <div class="title">{{ t("email_alerts.submitted_successfully") }}</div>
+      <div class="subtitle">{{ t("email_alerts.submitted_info") }}</div>
     </div>
     <!-- Form Card -->
     <div
@@ -59,7 +62,9 @@ async function handleSubmit(e) {
       <template v-if="!submitted">
         <form class="form-content" @submit="handleSubmit">
           <div class="form-group mt-[36px]">
-            <label for="firstName">* First Name</label>
+            <label for="firstName">{{
+              t("email_alerts.form.first_name")
+            }}</label>
             <input
               id="firstName"
               v-no-space
@@ -69,7 +74,7 @@ async function handleSubmit(e) {
             />
           </div>
           <div class="form-group">
-            <label for="lastName">* Last Name</label>
+            <label for="lastName">{{ t("email_alerts.form.last_name") }}</label>
             <input
               id="lastName"
               v-no-space
@@ -79,7 +84,7 @@ async function handleSubmit(e) {
             />
           </div>
           <div class="form-group">
-            <label for="email">* Email</label>
+            <label for="email">{{ t("email_alerts.form.email") }}</label>
             <input
               id="email"
               v-no-space
@@ -89,7 +94,7 @@ async function handleSubmit(e) {
             />
           </div>
           <div class="form-group">
-            <label for="company">* Company</label>
+            <label for="company">{{ t("email_alerts.form.company") }}</label>
             <input
               id="company"
               v-no-space
@@ -99,34 +104,56 @@ async function handleSubmit(e) {
             />
           </div>
           <div class="form-group">
-            <label for="phone">* Phone</label>
+            <label for="phone">{{ t("email_alerts.form.phone") }}</label>
             <input id="phone" v-no-space v-model="form.phone" type="tel" />
           </div>
-          <button type="submit" class="submit-btn">Submit</button>
+          <button type="submit" class="submit-btn">
+            {{ t("email_alerts.form.submit") }}
+          </button>
         </form>
       </template>
       <template v-else>
         <div class="submitted-data">
           <div class="submitted-data-content">
             <div class="submitted-row">
-              <span class="label">First Name：</span>
-              <span class="value">{{ form.firstName || "Not filled in" }}</span>
+              <span class="label">{{
+                t("email_alerts.submitted_data.first_name")
+              }}</span>
+              <span class="value">{{
+                form.firstName || t("email_alerts.submitted_data.not_filled")
+              }}</span>
             </div>
             <div class="submitted-row">
-              <span class="label">Last Name：</span>
-              <span class="value">{{ form.lastName || "Not filled in" }}</span>
+              <span class="label">{{
+                t("email_alerts.submitted_data.last_name")
+              }}</span>
+              <span class="value">{{
+                form.lastName || t("email_alerts.submitted_data.not_filled")
+              }}</span>
             </div>
             <div class="submitted-row">
-              <span class="label">Email：</span>
-              <span class="value">{{ form.email || "Not filled in" }}</span>
+              <span class="label">{{
+                t("email_alerts.submitted_data.email")
+              }}</span>
+              <span class="value">{{
+                form.email || t("email_alerts.submitted_data.not_filled")
+              }}</span>
             </div>
             <div class="submitted-row">
-              <span class="label">Company：</span>
-              <span class="value">{{ form.company || "Not filled in" }}</span>
+              <span class="label">{{
+                t("email_alerts.submitted_data.company")
+              }}</span>
+              <span class="value">{{
+                form.company || t("email_alerts.submitted_data.not_filled")
+              }}</span>
             </div>
             <div class="submitted-row">
-              <span class="label">Phone：</span>
-              <span class="value">{{ form.phone || "Not filled in" }}</span>
+              <span class="label">{{
+                t("email_alerts.submitted_data.phone")
+              }}</span>
+              <span class="value">{{
+                form.phone || t("email_alerts.submitted_data.not_filled")
+              }}</span>
             </div>
           </div>
         </div>
diff --git a/src/views/historic-stock/size1440/index.vue b/src/views/historic-stock/size1440/index.vue
index 0cf34ee..261dc17 100644
--- a/src/views/historic-stock/size1440/index.vue
+++ b/src/views/historic-stock/size1440/index.vue
@@ -588,6 +588,8 @@ const getPageData = async () => {
     padding: 0 16px;
     margin-bottom: 32px;
     margin-top: 32px;
+    flex-wrap: wrap;
+    gap: 10px;
 
     .range-label {
       font-family: "PingFang SC", sans-serif;
diff --git a/src/views/historic-stock/size1920/index.vue b/src/views/historic-stock/size1920/index.vue
index 6cc2512..1068fd8 100644
--- a/src/views/historic-stock/size1920/index.vue
+++ b/src/views/historic-stock/size1920/index.vue
@@ -587,6 +587,8 @@ const getPageData = async () => {
     padding: 0 16px;
     margin-bottom: 32px;
     margin-top: 32px;
+    flex-wrap: wrap;
+    gap: 10px;
 
     .range-label {
       font-family: "PingFang SC", sans-serif;
diff --git a/src/views/historic-stock/size375/index.vue b/src/views/historic-stock/size375/index.vue
index 4e30b98..a1eac8d 100644
--- a/src/views/historic-stock/size375/index.vue
+++ b/src/views/historic-stock/size375/index.vue
@@ -560,6 +560,8 @@ const getPageData = async () => {
     gap: 8 * 5.12px;
     padding: 0 16 * 5.12px;
     margin-bottom: 32 * 5.12px;
+    flex-wrap: wrap;
+    gap: 10 * 5.12px;
 
     .range-label {
       font-family: "PingFang SC", sans-serif;
diff --git a/src/views/historic-stock/size768/index.vue b/src/views/historic-stock/size768/index.vue
index c9a7ace..7b9e262 100644
--- a/src/views/historic-stock/size768/index.vue
+++ b/src/views/historic-stock/size768/index.vue
@@ -589,6 +589,8 @@ const getPageData = async () => {
     padding: 0 16 * 2.5px;
     margin-bottom: 32 * 2.5px;
     margin-top: 32 * 2.5px;
+    flex-wrap: wrap;
+    gap: 10 * 2.5px;
 
     .range-label {
       font-family: "PingFang SC", sans-serif;
diff --git a/src/views/press-releases/size1440/index.vue b/src/views/press-releases/size1440/index.vue
index 06b0215..b38f91f 100644
--- a/src/views/press-releases/size1440/index.vue
+++ b/src/views/press-releases/size1440/index.vue
@@ -8,9 +8,9 @@
         </div>
       </div>
       <div class="search-container">
-        <n-select
+        <custom-select
           :options="state.selectOptions"
-          v-model:value="state.selectedValue"
+          v-model="state.selectedValue"
           class="search-select"
         />
         <input
@@ -191,6 +191,7 @@
 
 <script setup>
 import customDefaultPage from "@/components/customDefaultPage/index.vue";
+import customSelect from "@/components/customSelect/index.vue";
 import {
   reactive,
   onMounted,
@@ -200,7 +201,7 @@ import {
   computed,
   onUnmounted,
 } from "vue";
-import { NSelect, NInput, NButton, NTooltip } from "naive-ui";
+import { NTooltip } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import axios from "axios";
 
@@ -480,7 +481,7 @@ const handleClickOutside = (event) => {
 .search-input {
   flex: 1;
   height: 46px;
-  padding: 7px;
+  padding: 7px 12px;
   border: 1px solid #e0e0e6;
   border-radius: 3px;
   font-family: "PingFang SC", sans-serif;
@@ -489,32 +490,13 @@ const handleClickOutside = (event) => {
   line-height: 1.375em;
   letter-spacing: 0.03em;
   color: #455363;
+  box-sizing: border-box;
 
   &::placeholder {
     color: #b6b6b6;
   }
 }
 
-:deep(.n-input) {
-  .n-input__input {
-    padding: 4px 0;
-    // border: 1px solid #ccc;
-    border-radius: 4px;
-  }
-}
-
-:deep(.n-select) {
-  .n-select__input {
-    padding: 8px 12px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-  }
-}
-
-:deep(.n-button) {
-  padding: 20px 16px;
-  border-radius: 4px;
-}
 .search-button {
   height: 46px;
   padding: 7px 12px;
@@ -529,6 +511,7 @@ const handleClickOutside = (event) => {
   font-size: 16px;
   line-height: 1.375em;
   letter-spacing: 0.03em;
+  box-sizing: border-box;
   &:hover {
     background: #ff7bac;
     color: #fff;
diff --git a/src/views/press-releases/size1920/index.vue b/src/views/press-releases/size1920/index.vue
index 1634b46..1a778b1 100644
--- a/src/views/press-releases/size1920/index.vue
+++ b/src/views/press-releases/size1920/index.vue
@@ -8,9 +8,9 @@
         </div>
       </div>
       <div class="search-container">
-        <n-select
+        <custom-select
           :options="state.selectOptions"
-          v-model:value="state.selectedValue"
+          v-model="state.selectedValue"
           class="search-select"
         />
         <input
@@ -191,6 +191,7 @@
 
 <script setup>
 import customDefaultPage from "@/components/customDefaultPage/index.vue";
+import customSelect from "@/components/customSelect/index.vue";
 import {
   reactive,
   onMounted,
@@ -200,7 +201,7 @@ import {
   computed,
   onUnmounted,
 } from "vue";
-import { NSelect, NInput, NButton, NTooltip } from "naive-ui";
+import { NTooltip } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import axios from "axios";
 
@@ -470,7 +471,6 @@ const handleClickOutside = (event) => {
 
 .search-select {
   width: 201px;
-  height: 34px;
 }
 
 .search-input {
@@ -485,32 +485,13 @@ const handleClickOutside = (event) => {
   line-height: 1.375em;
   letter-spacing: 3%;
   color: #455363;
+  box-sizing: border-box;
 
   &::placeholder {
     color: #b6b6b6;
   }
 }
 
-:deep(.n-input) {
-  .n-input__input {
-    padding: 4px 0;
-    // border: 1px solid #ccc;
-    border-radius: 4px;
-  }
-}
-
-:deep(.n-select) {
-  .n-select__input {
-    padding: 8px 12px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-  }
-}
-
-:deep(.n-button) {
-  padding: 20px 16px;
-  border-radius: 4px;
-}
 .search-button {
   height: 34px;
   padding: 7px 12px;
@@ -525,6 +506,7 @@ const handleClickOutside = (event) => {
   font-size: 16px;
   line-height: 1.375em;
   letter-spacing: 3%;
+  box-sizing: border-box;
   &:hover {
     background: #ff7bac;
     color: #fff;
diff --git a/src/views/press-releases/size768/index.vue b/src/views/press-releases/size768/index.vue
index 9c839ee..2e24f1c 100644
--- a/src/views/press-releases/size768/index.vue
+++ b/src/views/press-releases/size768/index.vue
@@ -8,9 +8,9 @@
         </div>
       </div>
       <div class="search-container">
-        <n-select
+        <custom-select
           :options="state.selectOptions"
-          v-model:value="state.selectedValue"
+          v-model="state.selectedValue"
           class="search-select"
         />
         <input
@@ -191,6 +191,7 @@
 
 <script setup>
 import customDefaultPage from "@/components/customDefaultPage/index.vue";
+import customSelect from "@/components/customSelect/index.vue";
 import {
   reactive,
   onMounted,
@@ -200,7 +201,7 @@ import {
   computed,
   onUnmounted,
 } from "vue";
-import { NSelect, NInput, NButton, NTooltip } from "naive-ui";
+import { NTooltip } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import axios from "axios";
 
@@ -470,7 +471,6 @@ const handleClickOutside = (event) => {
 
 .search-select {
   width: 134 * 2.5px;
-  height: 34 * 2.5px;
 }
 
 .search-input {
@@ -485,32 +485,13 @@ const handleClickOutside = (event) => {
   line-height: 1.375em;
   letter-spacing: 0.48 * 2.5px;
   color: #455363;
+  box-sizing: border-box;
 
   &::placeholder {
     color: #b6b6b6;
   }
 }
 
-:deep(.n-input) {
-  .n-input__input {
-    padding: 4 * 2.5px 0;
-    // border: 1*2.5px solid #ccc;
-    border-radius: 4 * 2.5px;
-  }
-}
-
-:deep(.n-select) {
-  .n-select__input {
-    padding: 8 * 2.5px 12 * 2.5px;
-    border: 1 * 2.5px solid #ccc;
-    border-radius: 4 * 2.5px;
-  }
-}
-
-:deep(.n-button) {
-  padding: 20 * 2.5px 16 * 2.5px;
-  border-radius: 4 * 2.5px;
-}
 .search-button {
   height: 34 * 2.5px;
   padding: 7 * 2.5px 12 * 2.5px;
@@ -525,6 +506,7 @@ const handleClickOutside = (event) => {
   font-size: 14 * 2.5px;
   line-height: 1.375em;
   letter-spacing: 0.48 * 2.5px;
+  box-sizing: border-box;
   &:hover {
     background: #ff7bac;
     color: #fff;
diff --git a/src/views/product-introduction/size1440/index.vue b/src/views/product-introduction/size1440/index.vue
index 859a442..8c7be45 100644
--- a/src/views/product-introduction/size1440/index.vue
+++ b/src/views/product-introduction/size1440/index.vue
@@ -1,4 +1,7 @@
-<script setup></script>
+<script setup>
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+</script>
 
 <template>
   <div class="page-container">
@@ -12,23 +15,19 @@
     <section class="hero-section relative">
       <div class="hero-content">
         <div class="hero-title">
-          More than just a tool——<br />
-          Comprehensive growth solutions, <br />
-          providing a one-stop solution for content creation,<br />
-          publishing, analysis, and monetization
+          {{ t("product_intro.hero_line1") }}<br />
+          {{ t("product_intro.hero_line2") }}<br />
+          {{ t("product_intro.hero_line3") }}<br />
+          {{ t("product_intro.hero_line4") }}
         </div>
       </div>
       <div class="core-value-card">
         <div class="card-content">
-          <div class="card-title">Core Value</div>
+          <div class="card-title">
+            {{ t("product_intro.core_value_title") }}
+          </div>
           <div class="card-text">
-            The FIEE-SAAS platform is a one-stop content operation solution
-            tailored for creators in the digital era. The platform utilizes
-            intelligent distribution technology, A1 empowerment tools, and
-            full-chain services,Assist you in efficiently reaching audiences on
-            global mainstream platforms such as TikTok, YouTube, and Instagram,
-            creating a KOL brand effect, unlocking content value, and achieving
-            sustainable growth.
+            {{ t("product_intro.core_value_text") }}
           </div>
         </div>
       </div>
@@ -42,59 +41,52 @@
     <section class="features-section">
       <div class="section-header">
         <div class="decorator-bar"></div>
-        <div class="section-title">Product Features</div>
+        <div class="section-title">{{ t("product_intro.features_title") }}</div>
       </div>
       <div class="features-list">
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            One-click Synchronous Publishing
+            {{ t("product_intro.feature_sync") }}
           </div>
           <div class="feature-description">
-            Synchronize graphic and video content to TikTok, YouTube, and
-            Instagram platforms at once, saving time on repetitive operations.
+            {{ t("product_intro.feature_sync_desc") }}
           </div>
         </div>
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            Intelligent Scheduled Publishing
+            {{ t("product_intro.feature_schedule") }}
           </div>
           <div class="feature-description">
-            Plan the content release time in advance, support batch scheduling,
-            and accurately grasp the optimal release time of each platform.
+            {{ t("product_intro.feature_schedule_desc") }}
           </div>
         </div>
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            Unified Management of Multiple Accounts
+            {{ t("product_intro.feature_accounts") }}
           </div>
           <div class="feature-description">
-            Easily manage multiple accounts on one platform without the need for
-            repeated login and switching, improving team collaboration
-            efficiency.
+            {{ t("product_intro.feature_accounts_desc") }}
           </div>
         </div>
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            Cloud Content Library
+            {{ t("product_intro.feature_library") }}
           </div>
           <div class="feature-description">
-            Safely store and manage all creative materials, access and use them
-            anytime, anywhere, and support quick retrieval and reuse.
+            {{ t("product_intro.feature_library_desc") }}
           </div>
         </div>
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            Basic Data Tracking
+            {{ t("product_intro.feature_tracking") }}
           </div>
           <div class="feature-description">
-            Visually view the content performance of various platforms,
-            understand core data indicators, and provide a basis for optimizing
-            strategies.
+            {{ t("product_intro.feature_tracking_desc") }}
           </div>
         </div>
       </div>
@@ -103,7 +95,9 @@
     <section class="solutions-section">
       <div class="section-header">
         <div class="decorator-bar"></div>
-        <div class="section-title">Value Added Solutions</div>
+        <div class="section-title">
+          {{ t("product_intro.solutions_title") }}
+        </div>
       </div>
       <div class="solutions-content">
         <div class="solutions-list">
@@ -115,12 +109,10 @@
             />
             <div class="solution-title">
               <div class="vertical-line"></div>
-              KOL Brand Promotion Services
+              {{ t("product_intro.sol_kol") }}
             </div>
             <div class="solution-description">
-              Efficiently connect high-quality business cooperation
-              opportunities and complete the entire process management from
-              order acceptance to publication within the platform.
+              {{ t("product_intro.sol_kol_desc") }}
             </div>
           </div>
           <div class="solution-item">
@@ -131,12 +123,10 @@
             />
             <div class="solution-title">
               <div class="vertical-line"></div>
-              Professional Content Creation Support
+              {{ t("product_intro.sol_content") }}
             </div>
             <div class="solution-description">
-              Connect professional shooting and post production teams for you,
-              create high-quality "art+story" content, and strengthen IP
-              influence.
+              {{ t("product_intro.sol_content_desc") }}
             </div>
           </div>
           <div class="solution-item">
@@ -147,12 +137,10 @@
             />
             <div class="solution-title">
               <div class="vertical-line"></div>
-              Account Operation and Hosting Services
+              {{ t("product_intro.sol_ops") }}
             </div>
             <div class="solution-description">
-              From 0 to 1 account positioning, follower growth strategy to
-              monetization cycle, operation experts provide full cycle running
-              and hosting services.
+              {{ t("product_intro.sol_ops_desc") }}
             </div>
           </div>
         </div>
@@ -170,7 +158,9 @@
       <div class="advantages-content">
         <div class="advantages-header">
           <div class="decorator-bar"></div>
-          <div class="section-title text-white">Our Advantages</div>
+          <div class="section-title text-white">
+            {{ t("product_intro.advantages_title") }}
+          </div>
         </div>
 
         <div style="width: 50%">
@@ -178,51 +168,47 @@
             <div class="advantage-item">
               <div class="advantage-title">
                 <div class="vertical-line"></div>
-                Time Saving
+                {{ t("product_intro.adv_time") }}
               </div>
               <div class="advantage-description">
-                Multi platform publishing efficiency improvement, allowing you
-                to focus on content creation.
+                {{ t("product_intro.adv_time_desc") }}
               </div>
             </div>
 
             <div class="advantage-item">
               <div class="advantage-title">
                 <div class="vertical-line"></div>
-                Safe and Reliable
+                {{ t("product_intro.adv_safe") }}
               </div>
               <div class="advantage-description">
-                Enterprise level data encryption and permission control ensure
-                account and content security.
+                {{ t("product_intro.adv_safe_desc") }}
               </div>
             </div>
             <div class="advantage-item">
               <div class="advantage-title">
                 <div class="vertical-line"></div>
-                Maintain Consistency
+                {{ t("product_intro.adv_consistent") }}
               </div>
               <div class="advantage-description">
-                Ensure that brand information is presented uniformly on all
-                platforms.
+                {{ t("product_intro.adv_consistent_desc") }}
               </div>
             </div>
             <div class="advantage-item">
               <div class="advantage-title">
                 <div class="vertical-line"></div>
-                Data Driven
+                {{ t("product_intro.adv_data") }}
               </div>
               <div class="advantage-description">
-                Optimizing Content Strategies Based on Actual Performance.
+                {{ t("product_intro.adv_data_desc") }}
               </div>
             </div>
             <div class="advantage-item">
               <div class="advantage-title">
                 <div class="vertical-line"></div>
-                Easy to Use
+                {{ t("product_intro.adv_easy") }}
               </div>
               <div class="advantage-description">
-                Intuitive interface design, no need for professional technical
-                background.
+                {{ t("product_intro.adv_easy_desc") }}
               </div>
             </div>
           </div>
@@ -251,8 +237,8 @@
             />
           </svg>
           <div class="cta-title">
-            Get customized <br />
-            solutions for free
+            {{ t("product_intro.cta_title_line1") }}<br />
+            {{ t("product_intro.cta_title_line2") }}
           </div>
         </div>
         <div class="cta-qr-code">
diff --git a/src/views/product-introduction/size1920/index.vue b/src/views/product-introduction/size1920/index.vue
index 57a43f4..9561bab 100644
--- a/src/views/product-introduction/size1920/index.vue
+++ b/src/views/product-introduction/size1920/index.vue
@@ -1,4 +1,7 @@
-<script setup></script>
+<script setup>
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+</script>
 
 <template>
   <div class="page-container">
@@ -12,23 +15,19 @@
     <section class="hero-section relative">
       <div class="hero-content">
         <div class="hero-title">
-          More than just a tool——<br />
-          Comprehensive growth solutions, <br />
-          providing a one-stop solution for content creation,<br />
-          publishing, analysis, and monetization
+          {{ t("product_intro.hero_line1") }}<br />
+          {{ t("product_intro.hero_line2") }}<br />
+          {{ t("product_intro.hero_line3") }}<br />
+          {{ t("product_intro.hero_line4") }}
         </div>
       </div>
       <div class="core-value-card">
         <div class="card-content">
-          <div class="card-title">Core Value</div>
+          <div class="card-title">
+            {{ t("product_intro.core_value_title") }}
+          </div>
           <div class="card-text">
-            The FIEE-SAAS platform is a one-stop content operation solution
-            tailored for creators in the digital era. The platform utilizes
-            intelligent distribution technology, A1 empowerment tools, and
-            full-chain services,Assist you in efficiently reaching audiences on
-            global mainstream platforms such as TikTok, YouTube, and Instagram,
-            creating a KOL brand effect, unlocking content value, and achieving
-            sustainable growth.
+            {{ t("product_intro.core_value_text") }}
           </div>
         </div>
       </div>
@@ -42,59 +41,52 @@
     <section class="features-section">
       <div class="section-header">
         <div class="decorator-bar"></div>
-        <div class="section-title">Product Features</div>
+        <div class="section-title">{{ t("product_intro.features_title") }}</div>
       </div>
       <div class="features-list">
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            One-click Synchronous Publishing
+            {{ t("product_intro.feature_sync") }}
           </div>
           <div class="feature-description">
-            Synchronize graphic and video content to TikTok, YouTube, and
-            Instagram platforms at once, saving time on repetitive operations.
+            {{ t("product_intro.feature_sync_desc") }}
           </div>
         </div>
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            Intelligent Scheduled Publishing
+            {{ t("product_intro.feature_schedule") }}
           </div>
           <div class="feature-description">
-            Plan the content release time in advance, support batch scheduling,
-            and accurately grasp the optimal release time of each platform.
+            {{ t("product_intro.feature_schedule_desc") }}
           </div>
         </div>
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            Unified Management of Multiple Accounts
+            {{ t("product_intro.feature_accounts") }}
           </div>
           <div class="feature-description">
-            Easily manage multiple accounts on one platform without the need for
-            repeated login and switching, improving team collaboration
-            efficiency.
+            {{ t("product_intro.feature_accounts_desc") }}
           </div>
         </div>
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            Cloud Content Library
+            {{ t("product_intro.feature_library") }}
           </div>
           <div class="feature-description">
-            Safely store and manage all creative materials, access and use them
-            anytime, anywhere, and support quick retrieval and reuse.
+            {{ t("product_intro.feature_library_desc") }}
           </div>
         </div>
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            Basic Data Tracking
+            {{ t("product_intro.feature_tracking") }}
           </div>
           <div class="feature-description">
-            Visually view the content performance of various platforms,
-            understand core data indicators, and provide a basis for optimizing
-            strategies.
+            {{ t("product_intro.feature_tracking_desc") }}
           </div>
         </div>
       </div>
@@ -103,7 +95,9 @@
     <section class="solutions-section">
       <div class="section-header">
         <div class="decorator-bar"></div>
-        <div class="section-title">Value Added Solutions</div>
+        <div class="section-title">
+          {{ t("product_intro.solutions_title") }}
+        </div>
       </div>
       <div class="solutions-content">
         <div class="solutions-list">
@@ -115,12 +109,10 @@
             />
             <div class="solution-title">
               <div class="vertical-line"></div>
-              KOL Brand Promotion Services
+              {{ t("product_intro.sol_kol") }}
             </div>
             <div class="solution-description">
-              Efficiently connect high-quality business cooperation
-              opportunities and complete the entire process management from
-              order acceptance to publication within the platform.
+              {{ t("product_intro.sol_kol_desc") }}
             </div>
           </div>
           <div class="solution-item">
@@ -131,12 +123,10 @@
             />
             <div class="solution-title">
               <div class="vertical-line"></div>
-              Professional Content Creation Support
+              {{ t("product_intro.sol_content") }}
             </div>
             <div class="solution-description">
-              Connect professional shooting and post production teams for you,
-              create high-quality "art+story" content, and strengthen IP
-              influence.
+              {{ t("product_intro.sol_content_desc") }}
             </div>
           </div>
           <div class="solution-item">
@@ -147,12 +137,10 @@
             />
             <div class="solution-title">
               <div class="vertical-line"></div>
-              Account Operation and Hosting Services
+              {{ t("product_intro.sol_ops") }}
             </div>
             <div class="solution-description">
-              From 0 to 1 account positioning, follower growth strategy to
-              monetization cycle, operation experts provide full cycle running
-              and hosting services.
+              {{ t("product_intro.sol_ops_desc") }}
             </div>
           </div>
         </div>
@@ -170,56 +158,54 @@
       <div class="advantages-content">
         <div class="advantages-header">
           <div class="decorator-bar"></div>
-          <div class="section-title text-white">Our Advantages</div>
+          <div class="section-title text-white">
+            {{ t("product_intro.advantages_title") }}
+          </div>
         </div>
         <div class="advantages-list">
           <div class="advantage-item">
             <div class="advantage-title">
               <div class="vertical-line"></div>
-              Time Saving
+              {{ t("product_intro.adv_time") }}
             </div>
             <div class="advantage-description">
-              Multi platform publishing efficiency improvement, allowing you to
-              focus on content creation.
+              {{ t("product_intro.adv_time_desc") }}
             </div>
           </div>
           <div class="advantage-item">
             <div class="advantage-title">
               <div class="vertical-line"></div>
-              Safe and Reliable
+              {{ t("product_intro.adv_safe") }}
             </div>
             <div class="advantage-description">
-              Enterprise level data encryption and permission control ensure
-              account and content security.
+              {{ t("product_intro.adv_safe_desc") }}
             </div>
           </div>
           <div class="advantage-item">
             <div class="advantage-title">
               <div class="vertical-line"></div>
-              Maintain Consistency
+              {{ t("product_intro.adv_consistent") }}
             </div>
             <div class="advantage-description">
-              Ensure that brand information is presented uniformly on all
-              platforms.
+              {{ t("product_intro.adv_consistent_desc") }}
             </div>
           </div>
           <div class="advantage-item">
             <div class="advantage-title">
               <div class="vertical-line"></div>
-              Data Driven
+              {{ t("product_intro.adv_data") }}
             </div>
             <div class="advantage-description">
-              Optimizing Content Strategies Based on Actual Performance.
+              {{ t("product_intro.adv_data_desc") }}
             </div>
           </div>
           <div class="advantage-item">
             <div class="advantage-title">
               <div class="vertical-line"></div>
-              Easy to Use
+              {{ t("product_intro.adv_easy") }}
             </div>
             <div class="advantage-description">
-              Intuitive interface design, no need for professional technical
-              background.
+              {{ t("product_intro.adv_easy_desc") }}
             </div>
           </div>
         </div>
@@ -247,8 +233,8 @@
             />
           </svg>
           <div class="cta-title">
-            Get customized <br />
-            solutions for free
+            {{ t("product_intro.cta_title_line1") }}<br />
+            {{ t("product_intro.cta_title_line2") }}
           </div>
         </div>
         <div class="cta-qr-code">
diff --git a/src/views/product-introduction/size375/index.vue b/src/views/product-introduction/size375/index.vue
index c002c33..ec51278 100644
--- a/src/views/product-introduction/size375/index.vue
+++ b/src/views/product-introduction/size375/index.vue
@@ -1,4 +1,7 @@
-<script setup></script>
+<script setup>
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+</script>
 
 <template>
   <div class="page-container">
@@ -9,23 +12,19 @@
     <section class="hero-section relative">
       <div class="hero-content">
         <div class="hero-title">
-          More than just a tool——<br />
-          Comprehensive growth <br />solutions, providing a one- <br />stop
-          solution for content <br />creation, publishing, analysis,<br />
-          and monetization
+          {{ t("product_intro.hero_line1") }}<br />
+          {{ t("product_intro.hero_line2") }}<br />
+          {{ t("product_intro.hero_line3") }}<br />
+          {{ t("product_intro.hero_line4") }}
         </div>
       </div>
       <div class="core-value-card">
         <div class="card-content">
-          <div class="card-title">Core Value</div>
+          <div class="card-title">
+            {{ t("product_intro.core_value_title") }}
+          </div>
           <div class="card-text">
-            The FIEE-SAAS platform is a one-stop content operation solution
-            tailored for creators in the digital era. The platform utilizes
-            intelligent distribution technology, A1 empowerment tools, and
-            full-chain services,Assist you in efficiently reaching audiences on
-            global mainstream platforms such as TikTok, YouTube, and Instagram,
-            creating a KOL brand effect, unlocking content value, and achieving
-            sustainable growth.
+            {{ t("product_intro.core_value_text") }}
           </div>
         </div>
       </div>
@@ -39,59 +38,52 @@
     <section class="features-section">
       <div class="section-header">
         <div class="decorator-bar"></div>
-        <div class="section-title">Product Features</div>
+        <div class="section-title">{{ t("product_intro.features_title") }}</div>
       </div>
       <div class="features-list">
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            One-click Synchronous Publishing
+            {{ t("product_intro.feature_sync") }}
           </div>
           <div class="feature-description">
-            Synchronize graphic and video content to TikTok, YouTube, and
-            Instagram platforms at once, saving time on repetitive operations.
+            {{ t("product_intro.feature_sync_desc") }}
           </div>
         </div>
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            Intelligent Scheduled Publishing
+            {{ t("product_intro.feature_schedule") }}
           </div>
           <div class="feature-description">
-            Plan the content release time in advance, support batch scheduling,
-            and accurately grasp the optimal release time of each platform.
+            {{ t("product_intro.feature_schedule_desc") }}
           </div>
         </div>
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            Unified Management of Multiple Accounts
+            {{ t("product_intro.feature_accounts") }}
           </div>
           <div class="feature-description">
-            Easily manage multiple accounts on one platform without the need for
-            repeated login and switching, improving team collaboration
-            efficiency.
+            {{ t("product_intro.feature_accounts_desc") }}
           </div>
         </div>
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            Cloud Content Library
+            {{ t("product_intro.feature_library") }}
           </div>
           <div class="feature-description">
-            Safely store and manage all creative materials, access and use them
-            anytime, anywhere, and support quick retrieval and reuse.
+            {{ t("product_intro.feature_library_desc") }}
           </div>
         </div>
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            Basic Data Tracking
+            {{ t("product_intro.feature_tracking") }}
           </div>
           <div class="feature-description">
-            Visually view the content performance of various platforms,
-            understand core data indicators, and provide a basis for optimizing
-            strategies.
+            {{ t("product_intro.feature_tracking_desc") }}
           </div>
         </div>
       </div>
@@ -100,7 +92,9 @@
     <section class="solutions-section">
       <div class="section-header">
         <div class="decorator-bar"></div>
-        <div class="section-title">Value Added Solutions</div>
+        <div class="section-title">
+          {{ t("product_intro.solutions_title") }}
+        </div>
       </div>
       <div class="solutions-content">
         <div class="solution-image-container">
@@ -119,12 +113,10 @@
             />
             <div class="solution-title">
               <div class="vertical-line"></div>
-              KOL Brand Promotion Services
+              {{ t("product_intro.sol_kol") }}
             </div>
             <div class="solution-description">
-              Efficiently connect high-quality business cooperation
-              opportunities and complete the entire process management from
-              order acceptance to publication within the platform.
+              {{ t("product_intro.sol_kol_desc") }}
             </div>
           </div>
           <div class="solution-item">
@@ -135,12 +127,10 @@
             />
             <div class="solution-title">
               <div class="vertical-line"></div>
-              Professional Content Creation Support
+              {{ t("product_intro.sol_content") }}
             </div>
             <div class="solution-description">
-              Connect professional shooting and post production teams for you,
-              create high-quality "art+story" content, and strengthen IP
-              influence.
+              {{ t("product_intro.sol_content_desc") }}
             </div>
           </div>
           <div class="solution-item">
@@ -151,12 +141,10 @@
             />
             <div class="solution-title">
               <div class="vertical-line"></div>
-              Account Operation and Hosting Services
+              {{ t("product_intro.sol_ops") }}
             </div>
             <div class="solution-description">
-              From 0 to 1 account positioning, follower growth strategy to
-              monetization cycle, operation experts provide full cycle running
-              and hosting services.
+              {{ t("product_intro.sol_ops_desc") }}
             </div>
           </div>
         </div>
@@ -167,56 +155,54 @@
       <div class="advantages-content">
         <div class="advantages-header">
           <div class="decorator-bar"></div>
-          <div class="section-title text-white">Our Advantages</div>
+          <div class="section-title text-white">
+            {{ t("product_intro.advantages_title") }}
+          </div>
         </div>
         <div class="advantages-list">
           <div class="advantage-item">
             <div class="advantage-title">
               <div class="vertical-line"></div>
-              Time Saving
+              {{ t("product_intro.adv_time") }}
             </div>
             <div class="advantage-description">
-              Multi platform publishing efficiency improvement, allowing you to
-              focus on content creation.
+              {{ t("product_intro.adv_time_desc") }}
             </div>
           </div>
           <div class="advantage-item">
             <div class="advantage-title">
               <div class="vertical-line"></div>
-              Safe and Reliable
+              {{ t("product_intro.adv_safe") }}
             </div>
             <div class="advantage-description">
-              Enterprise level data encryption and permission control ensure
-              account and content security.
+              {{ t("product_intro.adv_safe_desc") }}
             </div>
           </div>
           <div class="advantage-item">
             <div class="advantage-title">
               <div class="vertical-line"></div>
-              Maintain Consistency
+              {{ t("product_intro.adv_consistent") }}
             </div>
             <div class="advantage-description">
-              Ensure that brand information is presented uniformly on all
-              platforms.
+              {{ t("product_intro.adv_consistent_desc") }}
             </div>
           </div>
           <div class="advantage-item">
             <div class="advantage-title">
               <div class="vertical-line"></div>
-              Data Driven
+              {{ t("product_intro.adv_data") }}
             </div>
             <div class="advantage-description">
-              Optimizing Content Strategies Based on Actual Performance.
+              {{ t("product_intro.adv_data_desc") }}
             </div>
           </div>
           <div class="advantage-item">
             <div class="advantage-title">
               <div class="vertical-line"></div>
-              Easy to Use
+              {{ t("product_intro.adv_easy") }}
             </div>
             <div class="advantage-description">
-              Intuitive interface design, no need for professional technical
-              background.
+              {{ t("product_intro.adv_easy_desc") }}
             </div>
           </div>
         </div>
@@ -225,7 +211,11 @@
 
     <section class="cta-section">
       <div class="cta-content">
-        <div class="cta-title">Get customized<br />solutions for free</div>
+        <div class="cta-title">
+          {{ t("product_intro.cta_title_line1") }}<br />{{
+            t("product_intro.cta_title_line2")
+          }}
+        </div>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="32"
diff --git a/src/views/product-introduction/size768/index.vue b/src/views/product-introduction/size768/index.vue
index e30281e..8b0531a 100644
--- a/src/views/product-introduction/size768/index.vue
+++ b/src/views/product-introduction/size768/index.vue
@@ -1,4 +1,7 @@
-<script setup></script>
+<script setup>
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+</script>
 
 <template>
   <div class="page-container">
@@ -10,23 +13,19 @@
     <section class="hero-section relative">
       <div class="hero-content">
         <div class="hero-title">
-          More than just a tool——<br />
-          Comprehensive growth solutions, <br />providing a one-stop solution
-          for <br />content creation, publishing, analysis, <br />and
-          monetization
+          {{ t("product_intro.hero_line1") }}<br />
+          {{ t("product_intro.hero_line2") }}<br />
+          {{ t("product_intro.hero_line3") }}<br />
+          {{ t("product_intro.hero_line4") }}
         </div>
       </div>
       <div class="core-value-card">
         <div class="card-content">
-          <div class="card-title">Core Value</div>
+          <div class="card-title">
+            {{ t("product_intro.core_value_title") }}
+          </div>
           <div class="card-text">
-            The FIEE-SAAS platform is a one-stop content operation solution
-            tailored for creators in the digital era. The platform utilizes
-            intelligent distribution technology, A1 empowerment tools, and
-            full-chain services,Assist you in efficiently reaching audiences on
-            global mainstream platforms such as TikTok, YouTube, and Instagram,
-            creating a KOL brand effect, unlocking content value, and achieving
-            sustainable growth.
+            {{ t("product_intro.core_value_text") }}
           </div>
         </div>
       </div>
@@ -40,59 +39,52 @@
     <section class="features-section">
       <div class="section-header">
         <div class="decorator-bar"></div>
-        <div class="section-title">Product Features</div>
+        <div class="section-title">{{ t("product_intro.features_title") }}</div>
       </div>
       <div class="features-list">
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            One-click Synchronous Publishing
+            {{ t("product_intro.feature_sync") }}
           </div>
           <div class="feature-description">
-            Synchronize graphic and video content to TikTok, YouTube, and
-            Instagram platforms at once, saving time on repetitive operations.
+            {{ t("product_intro.feature_sync_desc") }}
           </div>
         </div>
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            Intelligent Scheduled Publishing
+            {{ t("product_intro.feature_schedule") }}
           </div>
           <div class="feature-description">
-            Plan the content release time in advance, support batch scheduling,
-            and accurately grasp the optimal release time of each platform.
+            {{ t("product_intro.feature_schedule_desc") }}
           </div>
         </div>
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            Unified Management of Multiple Accounts
+            {{ t("product_intro.feature_accounts") }}
           </div>
           <div class="feature-description">
-            Easily manage multiple accounts on one platform without the need for
-            repeated login and switching, improving team collaboration
-            efficiency.
+            {{ t("product_intro.feature_accounts_desc") }}
           </div>
         </div>
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            Cloud Content Library
+            {{ t("product_intro.feature_library") }}
           </div>
           <div class="feature-description">
-            Safely store and manage all creative materials, access and use them
-            anytime, anywhere, and support quick retrieval and reuse.
+            {{ t("product_intro.feature_library_desc") }}
           </div>
         </div>
         <div class="feature-item">
           <div class="feature-title">
             <div class="vertical-line"></div>
-            Basic Data Tracking
+            {{ t("product_intro.feature_tracking") }}
           </div>
           <div class="feature-description">
-            Visually view the content performance of various platforms,
-            understand core data indicators, and provide a basis for optimizing
-            strategies.
+            {{ t("product_intro.feature_tracking_desc") }}
           </div>
         </div>
       </div>
@@ -101,7 +93,9 @@
     <section class="solutions-section">
       <div class="section-header">
         <div class="decorator-bar"></div>
-        <div class="section-title">Value Added Solutions</div>
+        <div class="section-title">
+          {{ t("product_intro.solutions_title") }}
+        </div>
       </div>
       <div class="solutions-content">
         <div class="solution-image-container">
@@ -120,12 +114,10 @@
             />
             <div class="solution-title">
               <div class="vertical-line"></div>
-              KOL Brand Promotion Services
+              {{ t("product_intro.sol_kol") }}
             </div>
             <div class="solution-description">
-              Efficiently connect high-quality business cooperation
-              opportunities and complete the entire process management from
-              order acceptance to publication within the platform.
+              {{ t("product_intro.sol_kol_desc") }}
             </div>
           </div>
           <div class="solution-item">
@@ -136,12 +128,10 @@
             />
             <div class="solution-title">
               <div class="vertical-line"></div>
-              Professional Content Creation Support
+              {{ t("product_intro.sol_content") }}
             </div>
             <div class="solution-description">
-              Connect professional shooting and post production teams for you,
-              create high-quality "art+story" content, and strengthen IP
-              influence.
+              {{ t("product_intro.sol_content_desc") }}
             </div>
           </div>
           <div class="solution-item">
@@ -152,12 +142,10 @@
             />
             <div class="solution-title">
               <div class="vertical-line"></div>
-              Account Operation and Hosting Services
+              {{ t("product_intro.sol_ops") }}
             </div>
             <div class="solution-description">
-              From 0 to 1 account positioning, follower growth strategy to
-              monetization cycle, operation experts provide full cycle running
-              and hosting services.
+              {{ t("product_intro.sol_ops_desc") }}
             </div>
           </div>
         </div>
@@ -168,56 +156,54 @@
       <div class="advantages-content">
         <div class="advantages-header">
           <div class="decorator-bar"></div>
-          <div class="section-title text-white">Our Advantages</div>
+          <div class="section-title text-white">
+            {{ t("product_intro.advantages_title") }}
+          </div>
         </div>
         <div class="advantages-list">
           <div class="advantage-item">
             <div class="advantage-title">
               <div class="vertical-line"></div>
-              Time Saving
+              {{ t("product_intro.adv_time") }}
             </div>
             <div class="advantage-description">
-              Multi platform publishing efficiency improvement, allowing you to
-              focus on content creation.
+              {{ t("product_intro.adv_time_desc") }}
             </div>
           </div>
           <div class="advantage-item">
             <div class="advantage-title">
               <div class="vertical-line"></div>
-              Safe and Reliable
+              {{ t("product_intro.adv_safe") }}
             </div>
             <div class="advantage-description">
-              Enterprise level data encryption and permission control ensure
-              account and content security.
+              {{ t("product_intro.adv_safe_desc") }}
             </div>
           </div>
           <div class="advantage-item">
             <div class="advantage-title">
               <div class="vertical-line"></div>
-              Maintain Consistency
+              {{ t("product_intro.adv_consistent") }}
             </div>
             <div class="advantage-description">
-              Ensure that brand information is presented uniformly on all
-              platforms.
+              {{ t("product_intro.adv_consistent_desc") }}
             </div>
           </div>
           <div class="advantage-item">
             <div class="advantage-title">
               <div class="vertical-line"></div>
-              Data Driven
+              {{ t("product_intro.adv_data") }}
             </div>
             <div class="advantage-description">
-              Optimizing Content Strategies Based on Actual Performance.
+              {{ t("product_intro.adv_data_desc") }}
             </div>
           </div>
           <div class="advantage-item">
             <div class="advantage-title">
               <div class="vertical-line"></div>
-              Easy to Use
+              {{ t("product_intro.adv_easy") }}
             </div>
             <div class="advantage-description">
-              Intuitive interface design, no need for professional technical
-              background.
+              {{ t("product_intro.adv_easy_desc") }}
             </div>
           </div>
         </div>
@@ -245,8 +231,8 @@
             />
           </svg>
           <div class="cta-title">
-            Get customized <br />
-            solutions for free
+            {{ t("product_intro.cta_title_line1") }}<br />
+            {{ t("product_intro.cta_title_line2") }}
           </div>
         </div>
         <div class="cta-qr-code">