feat: AiDA页面i18n

2026-06-03 16:13:15 +08:00
parent 1b7403b375
commit 3610bbb013
4 changed files with 224 additions and 83 deletions
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -45,7 +45,7 @@ export default {
 		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',
+		contactUs: 'CONTACT US'
 	},
 	Mixi: {
 		IntroduceTitle: 'Best-in-class Precise Fashion Attribute and Colour Recognition System',
@@ -66,6 +66,46 @@ export default {
 		EmailInputTitle: 'Interested in Mixi?',
 		EmailInputTip: 'We will contact you for customized plan.'
 	},
+	Aida: {
+		description:
+			'AiDA 3.1 AI-based interactive Design Assistant for Fashion AiDA 3.1, a first-to-market technology that empowers fashion designers, based on their creative inspirations, to work with AI to create original designs. With just a few clicks, designers can choose or refine options to develop fashion collections, bringing agility, efficiency and flexibility to conventional and intensive studio',
+		slogan: '	AI-Based Interactive Design Assistant For Fashion',
+		desc: `AiDA 3.1, a first-to-market technology that empowers fashion designers, based on their creative inspirations, to work with AI to create original designs. With just a few clicks, designers can choose or refine options to develop fashion collections, bringing agility, efficiency and flexibility to conventional and intensive studio processes.`,
+		annual: 'Annual Subscription Fee: $5,000 HKD / Year (50000 Credits)',
+		monthly: 'Monthly Subscription Fee: $500 HKD / Month (3500 Credits)',
+		monthlyCheaper: 'Monthly Subscription Fee: $100 HKD / Month (500 Credits)',
+		tips: 'Special Academic rate available, please contact us for details.',
+		subscribe: 'Subscribe Now',
+		userManual: 'User Manual',
+		keyFeatures: 'Key Features',
+		feature1: `The world's first AI system in fashion design emphasizing user control, ensuring AI-generated designs align seamlessly with the designer's unique vision and brand identity.`,
+		feature2: `Excels in synthesizing diverse inputs, such as moodboards, fabric prints, color choices, and sketches, into a cohesive collection quickly, harmoniously, and efficiently.`,
+		feature3: `Significantly speeds up the design process by over 60%, quickly generating unlimited designs based on user input.`,
+		feature4: `Incorporates cutting-edge AIGC technology to generate innovative designs and provide comprehensive assistance in the creative process.`,
+		benefits: 'Benefits to Industry',
+		benefits1: 'Provides speedy ideation for fashion brands and individual designers',
+		benefits2:
+			'Speeds up the whole fashion design process to strive for the goal of sustainability and cost-saving',
+		benefits3:
+			'Allows fashion novices who do not have drawing or sketching skills to create their own designs in a simple and easy mode',
+		demo: 'Demo',
+		play: 'Click to play',
+		choosePlan: 'Choose Your Subscription Plan',
+		plan1: 'Easily create your fashion collections in around 10 seconds based on your creative inspirations and Brand DNA',
+		plan2: 'Upload mood boards, colour choices, fabric prints and sketches for generating unlimited design proposals',
+		plan3: 'Save and retrieve your own designs with just a few clicks',
+		plan4: 'A Cloud-based system by subscription for accessing anytime and anywhere',
+		plan5: 'Easy to use, can learn in 10 minutes',
+		plan6: 'Contact us for AiDA trial at info\\@code-create.com.hk',
+		trial:'Trial',
+		days:'7 days free trial',
+		start:'Start Trial',
+		corporate:'Corporate',
+		customised:'Customised plan',
+		contact:'Contact Us',
+		termsAndConditions: 'Terms & Conditions',
+		agreement:'Subscription Agreement',
+	},
 	helpCentre: {
 		Title: 'HELP CENTRE',
 		FAQ: 'FAQ',
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -44,7 +44,7 @@ export default {
 		viewMore: '查看更多',
 		mixiSlogan: '精确、快速地检索，改善顾客的购物体验，推动销售量',
 		contactSlogan: '与我们分享你的创意项目',
-		contactUs: '联络我们',
+		contactUs: '联络我们'
 	},
 	Mixi: {
 		IntroduceTitle: '精准时装属性及颜色辨识系统(Mixi)',
@@ -62,6 +62,48 @@ export default {
 		EmailInputTitle: '有兴趣使用精准时装属性及颜色辨识系统 (Mixi)？',
 		EmailInputTip: '请留下电邮地址，以获取度身订造的计划'
 	},
+	Aida: {
+		description:
+			'AiDA 3.1 是一项开创性的技术，它使时装设计师能够基于自己的创意灵感，借助人工智能创作原创设计。设计师只需点击几下，即可选择或调整方案来开发时装系列，为传统且耗时的设计工作室流程注入敏捷性、高效性和灵活性。',
+		slogan: '互动性人工智能时装设计助理',
+		desc: 'AiDA 3.1 是一项开创性的技术，它使时装设计师能够基于自己的创意灵感，借助人工智能创作原创设计。设计师只需点击几下，即可选择或调整方案来开发时装系列，为传统且耗时的设计工作室流程注入敏捷性、高效性和灵活性。',
+		annual: '年费: $5,000 HKD / 年(50000积分)',
+		monthly: '月费: $500 HKD / 月 (3500 积分)',
+		monthlyCheaper: '月费: $100 HKD / 月 (500 积分)',
+		tips: '可提供专属教育优惠，详情请联系我们',
+		subscribe: '立即订阅',
+		userManual: '用户手册',
+		keyFeatures: '技术特点',
+		feature1:
+			'世界上第一个服装设计领域的人工智能系统，强调用户控制，确保人工智能生成的设计与设计师的独特愿景和品牌身份无缝结合。',
+		feature2:
+			'擅长综合不同的输入，如情绪板，织物印花，颜色选择和草图，成为一个有凝聚力的集合，快速，和谐，高效。',
+		feature3: '设计过程显著加快超过60%，根据用户输入快速生成无限的设计。',
+		feature4: '采用尖端的AIGC技术，生成创新设计，并在创作过程中提供全面的协助。',
+		benefits: '对行业的好处',
+		benefits1:
+			'加快设计流程: AiDA为个人设计师和时尚品牌提供快速创意构思，革新了时装设计过程，让设计师以灵活、高效及别具弹性的方式提升传统而密集的工作室设计流程。',
+		benefits2: '加快产品上市速度: 同时又能确保品牌的标志性设计元素在新设计中得以体现。',
+		benefits3:
+			'更有弹性: 让没有绘画基础的时装设计初学者也可以简易的创作自己的设计。设计师们通过和 AI一起合作，可以迅速创作多样化的原创设计产品，并快速把这些产品推向市场。',
+		demo: '示范影片',
+		play: '点击播放',
+		choosePlan: '选择你的订阅方案',
+		plan1: '根据你的创意灵感及品牌DNA，只需要10秒时间去设计一个时装系列',
+		plan2: '上载灵感板、颜色、布料印花图案及草图等，生成无限设计建议',
+		plan3: '只需点击几下，储存及取回你的设计',
+		plan4: '订阅后只需通过云端系统就能随时随地存取',
+		plan5: '操作精简，只需大概十分钟就能学习使用方法',
+		plan6: '通过 info\\@code-create.com.hk 联系我们了解更多',
+		trial: '试用',
+		days: '7天免费试用',
+		start: '开始使用',
+		corporate: '企业',
+		customised: '定制计划',
+		contactUs: '联系我们',
+		termsAndConditions: '条款及细则',
+		agreement: '订阅协议'
+	},
 	helpCentre: {
 		Title: '支援中心',
 		FAQ: '常见问题',
--- a/src/lang/zh-tw.ts
+++ b/src/lang/zh-tw.ts
@@ -62,6 +62,48 @@ export default {
 		EmailInputTitle: '有興趣使用精準時裝屬性及顏色辨識系統 (Mixi)？',
 		EmailInputTip: '請留下電郵地址，以獲取度身訂造的計劃'
 	},
+	Aida: {
+		description:
+			'AiDA 3.1 基於人工智能的時尚互動設計助手 AiDA 3.1 是一項開創性的技術，它賦能時尚設計師，使其能夠基於創意靈感，藉助人工智能創作原創設計。設計師隻需點擊幾下，即可選擇或優化方案來開髮時尚繫列，爲傳統且工作強度大的工作室帶來敏捷性、高效性和靈活性。',
+		slogan: '互動性人工智能時裝設計助理',
+		desc: 'AiDA 3.1 是一項開創性的技術，它使時裝設計師能夠基於自己的創意靈感，藉助人工智能創作原創設計。設計師隻需點擊幾下，即可選擇或調整方案來開髮時裝繫列，爲傳統且耗時的設計工作室流程注入敏捷性、高效性和靈活性。',
+		annual: '年費: $5,000 HKD / 年(50000積分)',
+		monthly: '月費: $500 HKD / 月 (3500 積分)',
+		monthlyCheaper: '月費: $100 HKD / 月 (500 積分)',
+		tips: '可提供專屬教育優惠，詳情請聯繫我們',
+		subscribe: '立即訂閱',
+		userManual: '用戶手冊',
+		keyFeatures: '技術特點',
+		feature1:
+			'世界上第一個服裝設計領域的人工智能繫統，強調用戶控製，確保人工智能生成的設計與設計師的獨特願景和品牌身份無縫結合。',
+		feature2:
+			'擅長綜合不同的輸入，如情緒闆，織物印花，顏色選擇和草圖，成爲一個有凝聚力的集合，快速，和諧，高效。',
+		feature3: '設計過程顯著加快超過60%，根據用戶輸入快速生成無限的設計。',
+		feature4: '採用尖端的AIGC技術，生成創新設計，並在創作過程中提供全麵的協助。',
+		benefits: '對行業的好處',
+		benefits1:
+			'加快設計流程: AiDA為個人設計師和時尚品牌提供快速創意構思，革新了時裝設計過程，讓設計師以靈活、高效及別具彈性的方式提升傳統而密集的工作室設計流程。',
+		benefits2: '加快產品上市速度: 同時又能確保品牌的標誌性設計元素在新設計中得以體現。',
+		benefits3:
+			'更有彈性: 讓沒有繪畫基礎的時裝設計初學者也可以簡易的創作自己的設計。設計師們通過和 AI一起合作，可以迅速創作多樣化的原創設計產品，並快速把這些產品推向市場。',
+		demo: '示範影片',
+		play: '點擊播放',
+		choosePlan: '選擇你的訂閱方案',
+		plan1: '根據你的創意靈感及品牌DNA，只需要10秒時間去設計一個時裝系列',
+		plan2: '上載靈感板、顏色、布料印花圖案及草圖等，生成無限設計建議',
+		plan3: '只需點擊幾下，儲存及取回你的設計',
+		plan4: '訂閱後只需通過雲端系統就能隨時隨地存取',
+		plan5: '操作精簡，只需大概十分鐘就能學習使用方法',
+		plan6: '通過 info\\@code-create.com.hk 聯繫我們了解更多',
+		trial: '試用',
+		days: '7 天免費試用',
+		start: '開始使用',
+		corporate: '公司賬戶',
+		customised: '客製方案',
+		contactUs: '聯繫我們',
+		termsAndConditions: '條款及細則',
+		agreement: '訂閱協議'
+	},
 	helpCentre: {
 		Title: '支援中心',
 		FAQ: '常見問題',
--- a/src/pages/aida/index.vue
+++ b/src/pages/aida/index.vue
@@ -1,66 +1,74 @@
 <script setup lang="ts">
 	import { useHead } from '@unhead/vue'
-	import { shallowRef, useTemplateRef } from 'vue'
-	import aidaIntroBg from '@/assets/images/home/aida-intro-bg.png'
-	import aidaPanel from '@/assets/images/home/aida-panel.png'
-	import aidaBanner from '@/assets/images/aida/aida-banner.jpg'
-	import demoVideo from '@/assets/images/aida/aida-demo-video.mp4'
+	import { shallowRef, useTemplateRef, computed } from 'vue'
+	import { useI18n } from 'vue-i18n'
 	import diamondIcon from '@/assets/images/aida/diamond.svg'
-	import industryOne from '@/assets/images/aida/industry-1.png'
 	import industryTwo from '@/assets/images/aida/industry-2.png'
 	import industryThree from '@/assets/images/aida/industry-3.png'
 	import timeIcon from '@/assets/images/aida/time.svg'

-	const keyFeatures = [
-		"The world's first AI system in fashion design emphasizing user control, ensuring AI-generated designs align seamlessly with the designer's unique vision and brand identity.",
-		'Excels in synthesizing diverse inputs, such as moodboards, fabric prints, color choices, and sketches, into a cohesive collection quickly, harmoniously, and efficiently.',
-		'Significantly speeds up the design process by over 60%, quickly generating unlimited designs based on user input.',
-		'Incorporates cutting-edge AIGC technology to generate innovative designs and provide comprehensive assistance in the creative process.'
-	] as const
+	const { t, locale } = useI18n()

-	const benefits = [
-		{
-			image: industryOne,
-			alt: 'Light bulb icon',
-			text: 'Provides speedy ideation for fashion brands and individual designers'
-		},
-		{
-			image: industryTwo,
-			alt: 'Stopwatch icon',
-			text: 'Speeds up the whole fashion design process to strive for the goal of sustainability and cost-saving'
-		},
-		{
-			image: industryThree,
-			alt: 'Drawing brush icon',
-			text: 'Allows fashion novices who do not have drawing or sketching skills to create their own designs in a simple and easy mode'
+	const demoVideo = computed(() => {
+		if (locale.value === 'en') {
+			return 'https://code-create.com.hk/wp-content/uploads/2026/02/Demo-video-26-2-27-EN.mp4'
 		}
-	] as const
+		return 'https://code-create.com.hk/wp-content/uploads/2026/02/Demo-video-26-2-27-CN.mp4'
+	})

-	const subscriptionHighlights = [
-		'Easily create your fashion collections in around 10 seconds based on your creative inspirations and Brand DNA',
-		'Upload mood boards, colour choices, fabric prints and sketches for generating unlimited design proposals',
-		'Save and retrieve your own designs with just a few clicks',
-		'A Cloud-based system by subscription for accessing anytime and anywhere',
-		'Easy to use, can learn in 10 minutes',
-		'Contact us for AiDA trial at info@code-create.com.hk'
-	] as const
+	const keyFeatures = computed(() => {
+		return [t('Aida.feature1'), t('Aida.feature2'), t('Aida.feature3'), t('Aida.feature4')]
+	})

-	const plans = [
+	const benefits = computed(() => {
+		return [
+			{
+				image: 'https://code-create.com.hk/wp-content/uploads/2022/11/aida_feature_icon_01.png',
+				alt: 'Light bulb icon',
+				text: t('Aida.benefits1')
+			},
+			{
+				image: 'https://code-create.com.hk/wp-content/uploads/2022/11/aida_feature_icon_02.png',
+				alt: 'Stopwatch icon',
+				text: t('Aida.benefits2')
+			},
+			{
+				image: 'https://code-create.com.hk/wp-content/uploads/2022/11/aida_feature_icon_03-1.png',
+				alt: 'Drawing brush icon',
+				text: t('Aida.benefits3')
+			}
+		]
+	})
+
+	const subscriptionHighlights = computed(() => {
+		return [
+			t('Aida.plan1'),
+			t('Aida.plan2'),
+			t('Aida.plan3'),
+			t('Aida.plan4'),
+			t('Aida.plan5'),
+			t('Aida.plan6')
+		]
+	})
+
+const plans = computed(() => {
+		return [
 		{
 			icon: timeIcon,
-			name: 'Trial',
-			description: '7 days free trial',
-			action: 'Start Trial',
-			href: 'mailto:info@code-create.com.hk?subject=AiDA%203.1%20Trial'
+			name: t('Aida.trial'),
+			description: t('Aida.days'),
+			action: t('Aida.start'),
+			href: 'https://www.aida.com.hk/register'
 		},
 		{
 			icon: diamondIcon,
-			name: 'Corporate',
-			description: 'Customised plan',
-			action: 'Contact Us',
-			href: 'mailto:info@code-create.com.hk?subject=AiDA%203.1%20Corporate%20Plan'
+			name: t('Aida.corporate'),
+			description: t('Aida.customised'),
+			action: t('Aida.contactUs'),
+			href: 'mailto:info\\@code-create.com.hk?subject=AiDA%203.1%20Corporate%20Plan'
 		}
-	] as const
+	] 
+	})

 	const demoVideoRef = useTemplateRef<HTMLVideoElement>('demoVideoRef')
 	const isVideoPlaying = shallowRef(false)
@@ -88,12 +96,11 @@
 	}

 	useHead({
-		title: 'AiDA 3.1 | Code Create',
+		title: 'AiDA - Code-Create',
 		meta: [
 			{
 				name: 'description',
-				content:
-					'AiDA 3.1 is an AI-based interactive design assistant for fashion designers.'
+				content: t('Aida.description')
 			}
 		]
 	})
@@ -102,37 +109,37 @@
 <template>
 	<main class="aida-page">
 		<section class="aida-hero" aria-labelledby="aida-title">
-			<img class="aida-hero-image" :src="aidaBanner" alt="AiDA 3.1 purple silk banner" />
+			<img
+				class="aida-hero-image"
+				src="https://code-create.com.hk/wp-content/uploads/2022/11/aida_banner-1.jpg"
+				alt="AiDA 3.1 banner"
+			/>
 			<h1 id="aida-title" class="aida-hero-title">AiDA 3.1</h1>
 		</section>

 		<section class="intro-section" aria-labelledby="intro-title">
 			<div class="intro-inner" v-custom-animation.scroll>
 				<h2 id="intro-title" class="intro-title">
-					AI-Based Interactive Design Assistant For Fashion
+					{{ t('Aida.slogan') }}
 				</h2>
 				<p class="intro-copy">
-					AiDA 3.1, a first-to-market technology that empowers fashion designers, based on
-					their creative inspirations, to work with AI to create original designs. With
-					just a few clicks, designers can choose or refine options to develop fashion
-					collections, bringing agility, efficiency and flexibility to conventional and
-					intensive studio processes.
+					{{ t('Aida.desc') }}
 				</p>
 				<p class="pricing-copy">
-					Annual Subscription Fee: $5,000 HKD / Year (50000 Credits)<br />
-					Monthly Subscription Fee: $500 HKD / Month (3500 Credits)<br />
-					Monthly Subscription Fee: $100 HKD / Month (500 Credits)
+					{{ t('Aida.annual') }}<br />
+					{{ t('Aida.monthly') }}<br />
+					{{ t('Aida.monthlyCheaper') }}
 				</p>
 				<p class="academic-copy">
-					Special Academic rate available, please contact us for details.
+					{{ t('Aida.tips') }}
 				</p>
 				<a
 					class="primary-button"
 					href="mailto:info@code-create.com.hk?subject=AiDA%203.1%20Subscription"
 				>
-					Subscribe Now
+					{{ t('Aida.subscribe') }}
 				</a>
-				<a class="manual-link" href="#subscription">User Manual</a>
+				<a class="manual-link" href="#subscription">{{ t('Aida.userManual') }}</a>
 			</div>
 		</section>

@@ -141,19 +148,19 @@
 				<div class="feature-art">
 					<img
 						class="feature-bg"
-						:src="aidaIntroBg"
+						src="https://code-create.com.hk/wp-content/uploads/2022/11/aida_intro_01_bg.png"
 						alt="Fashion design sketches on paper"
 						loading="lazy"
 					/>
 					<img
 						class="feature-panel"
-						:src="aidaPanel"
+						src="https://code-create.com.hk/wp-content/uploads/2024/01/new-layout-1.png"
 						alt="AiDA design workspace preview"
 						loading="lazy"
 					/>
 				</div>
 				<div class="feature-copy">
-					<h2 id="features-title" class="section-title">Key Features</h2>
+					<h2 id="features-title" class="section-title">{{ t('Aida.keyFeatures') }}</h2>
 					<ul class="feature-list">
 						<li v-for="feature in keyFeatures" :key="feature">
 							{{ feature }}
@@ -166,7 +173,7 @@
 		<section class="benefits-section" aria-labelledby="benefits-title">
 			<div class="benefits-inner">
 				<h2 id="benefits-title" class="section-title benefits-title">
-					Benefits to Industry
+					{{ t('Aida.benefits') }}
 				</h2>
 				<div class="benefits-grid">
 					<article v-for="benefit in benefits" :key="benefit.text" class="benefit-card">
@@ -184,7 +191,7 @@

 		<section class="demo-section" aria-labelledby="demo-title">
 			<div class="demo-inner">
-				<h2 id="demo-title" class="demo-title">Demo</h2>
+				<h2 id="demo-title" class="demo-title">{{ t('Aida.demo') }}</h2>
 				<div class="demo-video-wrap">
 					<video
 						ref="demoVideoRef"
@@ -206,7 +213,7 @@
 						aria-label="Play AiDA demo video"
 						@click="toggleDemoVideo"
 					>
-						Click to play
+						{{ t('Aida.play') }}
 						<span class="play-dot" aria-hidden="true"></span>
 					</button>
 				</div>
@@ -220,11 +227,18 @@
 		>
 			<div class="subscription-inner">
 				<h2 id="subscription-title" class="section-title subscription-title">
-					Choose Your Subscription Plan
+					{{ t('Aida.choosePlan') }}
 				</h2>
 				<ul class="subscription-list">
-					<li v-for="item in subscriptionHighlights" :key="item">
-						{{ item }}
+					<li v-for="(item, index) in subscriptionHighlights" :key="item">
+						<template v-if="index + 1 === subscriptionHighlights.length">
+							<a class="mail-link" href="mailto:info@code-create.com.hk">
+								{{ item }}
+							</a>
+						</template>
+						<template v-else>
+							{{ item }}
+						</template>
 					</li>
 				</ul>

@@ -243,8 +257,8 @@
 				</div>

 				<div class="legal-links">
-					<a href="#subscription">Terms &amp; Conditions</a>
-					<a href="#subscription">Subscription Agreement</a>
+					<a href="#subscription">{{ t('Aida.termsAndConditions') }}</a>
+					<a href="#subscription">{{ t('Aida.agreement') }}</a>
 				</div>
 			</div>
 		</section>
@@ -366,7 +380,7 @@
 		border-radius: 999px;
 		background: #a51f28;
 		color: #ffffff;
-		font-size: 10px;
+		font-size: 14px;
 		font-weight: 700;
 		line-height: 1;
 		letter-spacing: 1.8px;
@@ -398,7 +412,7 @@
 		display: table;
 		margin: 23px auto 0;
 		color: #333333;
-		font-size: 10px;
+		font-size: 14px;
 		font-weight: 700;
 		line-height: 1.4;
 		text-decoration: underline;
@@ -459,8 +473,8 @@
 		margin: 32px 0 0;
 		padding-left: 18px;
 		color: #444444;
-		font-size: 13px;
-		line-height: 1.55;
+		font-size: 16px;
+		// line-height: 1.55;
 	}

 	.feature-list li + li {
@@ -507,8 +521,7 @@
 		max-width: 248px;
 		margin: 0;
 		color: #555555;
-		font-size: 12px;
-		line-height: 1.45;
+		font-size: 16px;
 		letter-spacing: 0;
 	}

@@ -620,7 +633,11 @@
 		position: relative;
 		padding-left: 24px;
 	}
-
+	.mail-link {
+		color: inherit;
+		text-decoration: none;
+		cursor: pointer;
+	}
 	.subscription-list li + li {
 		margin-top: 14px;
 	}