feat: 首页i18n

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 = [
-		{
-			name: 'AiDA 3.1',
-			title: 'Empowers fashion designers to create a collection with just a few clicks based on their creative inspirations.',
-			backgroundImage: aidaIntroBg,
-			backgroundAlt: 'Fashion design sketches on paper',
-			panelImage: aidaPanel,
-			panelAlt: 'AiDA design workspace preview',
-			reversed: false
-		},
-		{
-			name: 'Mixi',
-			title: "Drives sales by improving shoppers' experience through precise and fast search.",
-			backgroundImage: mixiIntroBg,
-			backgroundAlt: 'Layered fabric texture',
-			panelImage: mixiPanel,
-			panelAlt: 'Mixi visual search interface preview',
-			reversed: true
-		}
-	] as const
+	const productFeatures = computed(() => {
+		return [
+			{
+				name: 'AiDA 3.1',
+				title: t('Home.aidaDesc'),
+				backgroundImage: 'https://code-create.com.hk/wp-content/uploads/2022/11/aida_intro_01_bg.png',
+				backgroundAlt: 'Fashion design sketches on paper',
+				panelImage: 'https://code-create.com.hk/wp-content/uploads/2024/01/new-layout-1.png',
+				panelAlt: 'AiDA design workspace preview',
+				reversed: false
+			},
+			{
+				name: 'Mixi',
+				title: t('Home.mixiSlogan'),
+				backgroundImage: mixiIntroBg,
+				backgroundAlt: 'Layered fabric texture',
+				panelImage: mixiPanel,
+				panelAlt: 'Mixi visual search interface preview',
+				reversed: true
+			}
+		]
+	})
 
-	// watch(locale, () => {
-	// 	document.documentElement.lang = locale.value
-	// 	console.log(t('Home.title'))
-	// },{immediate: true})
+	watch(locale, () => {
+		location.reload()
+	})
 
 	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>