feat: 首页i18n

src/lang/en.ts

@@ -37,7 +37,15 @@ export default {
 		banner1slogan: 'Shaping the future\nof fashion design',
 		banner1desc: `World's first and only designer-led AI system that streamlines ideation from hours to seconds`,
 		banner2slogan: 'Be the game changer,\n subscribe now!',
-		banner2desc: 'Make the first move to streamline and facilitate your inspiration process'
+		banner2desc: 'Make the first move to streamline and facilitate your inspiration process',
+		slogan: 'Revitalise The Fashion Ecosystem',
+		subSlogan: 'Through Artificial Intelligence (AI)',
+		aidaDesc:
+			'Empowers fashion designers to create a collection with just a few clicks based on their creative inspirations.',
+		viewMore: 'VIEW MORE',
+		mixiSlogan: `Drives sales by improving shoppers' experience through precise and fast search.`,
+		contactSlogan: 'Talk To Us About Your Next Project',
+		contactUs: 'CONTACT US',
 	},
 	Mixi: {
 		IntroduceTitle: 'Best-in-class Precise Fashion Attribute and Colour Recognition System',

src/lang/zh-cn.ts

@@ -37,7 +37,14 @@ export default {
 		banner1slogan: '塑造时尚设计未来',
 		banner1desc: `世界首创及独有的设计师主导人工智能系统,能够简化构思流程`,
 		banner2slogan: '立即订阅,颠覆传统!',
-		banner2desc: '踏出第一步,简化和促进你的创作过程'
+		banner2desc: '踏出第一步,简化和促进你的创作过程',
+		slogan: '通过人工智能(AI)',
+		subSlogan: '重塑时尚生态系统',
+		aidaDesc: '时装设计师只需数下点击，就能按照自己的创意灵感设计出一个时装系列',
+		viewMore: '查看更多',
+		mixiSlogan: '精确、快速地检索，改善顾客的购物体验，推动销售量',
+		contactSlogan: '与我们分享你的创意项目',
+		contactUs: '联络我们',
 	},
 	Mixi: {
 		IntroduceTitle: '精准时装属性及颜色辨识系统(Mixi)',

src/lang/zh-tw.ts

@@ -37,7 +37,14 @@ export default {
 		banner1slogan: '塑造時尚設計未來',
 		banner1desc: `世界首創及獨有的設計師主導人工智能繫統,能夠簡化構思流程`,
 		banner2slogan: '立即訂閱,顛覆傳統!',
-		banner2desc: '踏出第一步,簡化和促進你的創作過程'
+		banner2desc: '踏出第一步,簡化和促進你的創作過程',
+		slogan: '通過人工智能(AI)',
+		subSlogan: '重塑時裝生態繫統',
+		aidaDesc: '時裝設計師只需數下點擊，就能按照自己的創意靈感設計出一個時裝系列',
+		viewMore: '查看更多',
+		mixiSlogan: '精確、快速地檢索，改善顧客的購物體驗，推動銷售量',
+		contactSlogan: '與我們分享你的創意項目',
+		contactUs: '聯絡我們'
 	},
 	Mixi: {
 		IntroduceTitle: '精準時裝屬性及顏色辨識系統(Mixi)',

src/pages/home/components/ProductFeature.vue

@@ -5,9 +5,9 @@
 		defineProps<{
 			name: string
 			title: string
-			backgroundImage: string
+			backgroundImage?: string
 			backgroundAlt: string
-			panelImage: string
+			panelImage?: string
 			panelAlt: string
 			reversed?: boolean
 		}>(),
@@ -51,7 +51,7 @@
 				translate-y-s="100"
 				translate-y="0"
 			>
-				View More
+				{{$t('Home.viewMore')}}
 			</RouterLink>
 		</div>
 	</section>
@@ -62,7 +62,7 @@
 		display: flex;
 		align-items: center;
 		gap: clamp(48px, 5.5vw, 76px);
-		width: 1440px;
+		max-width: 1440px;
 		min-width: 0;
 		min-height: 690px;
 		margin: 0 auto;

src/pages/home/components/ProjectCta.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { RouterLink } from 'vue-router'
+	import { RouterLink } from 'vue-router'
 </script>
 
 <template>
 	<section class="project-cta">
 		<div class="project-cta-inner">
-			<h2 class="project-cta-title">Talk To Us About Your Next Project</h2>
+			<h2 class="project-cta-title">{{ $t('Home.contactSlogan') }}</h2>
 			<RouterLink class="project-cta-link" to="/contact">
-				Contact Us
+				{{ $t('Home.contactUs') }}
 			</RouterLink>
 		</div>
 	</section>

src/pages/home/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { watch } from 'vue'
+	import { watch, computed } from 'vue'
 	import { useHead } from '@unhead/vue'
 	import aidaIntroBg from '@/assets/images/home/aida-intro-bg.png'
 	import aidaPanel from '@/assets/images/home/aida-panel.png'
@@ -12,38 +12,39 @@
 	import { useI18n } from 'vue-i18n'
 	const { t, locale } = useI18n()
 
-	const productFeatures = [
+	const productFeatures = computed(() => {
-		{
+		return [
-			name: 'AiDA 3.1',
+			{
-			title: 'Empowers fashion designers to create a collection with just a few clicks based on their creative inspirations.',
+				name: 'AiDA 3.1',
-			backgroundImage: aidaIntroBg,
+				title: t('Home.aidaDesc'),
-			backgroundAlt: 'Fashion design sketches on paper',
+				backgroundImage: 'https://code-create.com.hk/wp-content/uploads/2022/11/aida_intro_01_bg.png',
-			panelImage: aidaPanel,
+				backgroundAlt: 'Fashion design sketches on paper',
-			panelAlt: 'AiDA design workspace preview',
+				panelImage: 'https://code-create.com.hk/wp-content/uploads/2024/01/new-layout-1.png',
-			reversed: false
+				panelAlt: 'AiDA design workspace preview',
-		},
+				reversed: false
-		{
+			},
-			name: 'Mixi',
+			{
-			title: "Drives sales by improving shoppers' experience through precise and fast search.",
+				name: 'Mixi',
-			backgroundImage: mixiIntroBg,
+				title: t('Home.mixiSlogan'),
-			backgroundAlt: 'Layered fabric texture',
+				backgroundImage: mixiIntroBg,
-			panelImage: mixiPanel,
+				backgroundAlt: 'Layered fabric texture',
-			panelAlt: 'Mixi visual search interface preview',
+				panelImage: mixiPanel,
-			reversed: true
+				panelAlt: 'Mixi visual search interface preview',
-		}
+				reversed: true
-	] as const
+			}
+		]
+	})
 
-	// watch(locale, () => {
+	watch(locale, () => {
-	// 	document.documentElement.lang = locale.value
+		location.reload()
-	// 	console.log(t('Home.title'))
+	})
-	// },{immediate: true})
 
 	useHead({
 		title: t('Home.title'),
 		meta: [
 			{
 				name: 'description',
-				content:t('Home.description')
+				content: t('Home.description')
 			}
 		]
 	})
@@ -61,7 +62,7 @@
 			>
 				<img
 					class="ecosystem-logo"
-					:src="homeAiLogo"
+					src="https://code-create.com.hk/wp-content/uploads/2022/11/home_ai_logo.png"
 					alt="Code Create"
 					loading="lazy"
 					translate-y-s="-20"
@@ -73,10 +74,10 @@
 					translate-y-s="-60"
 					translate-y="0"
 				>
-					Revitalise The Fashion Ecosystem
+					{{ $t('Home.slogan') }}
 				</h1>
 				<p translate-y-s="-60" translate-y="0" class="ecosystem-subtitle">
-					Through Artificial Intelligence (AI)
+					{{ $t('Home.subSlogan') }}
 				</p>
 			</section>