Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create

src/components/main-footer.vue

@@ -80,12 +80,34 @@
 			}
 		}
 		@media (max-width: 800px) {
-			padding: 15px 20px;
+			min-height: 155px;
+			padding: 20px 14px 18px;
 			flex-direction: column;
 			align-items: center;
+			justify-content: center;
+			gap: 28px;
+
+			> .left {
+				order: 1;
+				font-size: 11px;
+				line-height: 1.4;
+			}
+
 			> .right {
+				order: 2;
+				width: 100%;
+				justify-content: space-around;
+				gap: 10px;
 				> div {
 					border-left: none;
+					margin-left: 0;
+					padding-left: 0;
+
+					> .link {
+						font-size: 11px;
+						line-height: 1.4;
+						white-space: nowrap;
+					}
 				}
 			}
 		}

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',
@@ -89,6 +129,7 @@ export default {
 	},
 	aboutUs: {
 		Title: 'ABOUT US',
+		meta: 'About Us: Transforming the Fashion Ecosystem through Artificial Intelligence (AI) https://code-create.com.hk',
 		ecosystem: {
 			Title: 'REVITALISE THE FASHION ECOSYSTEM',
 			Desc: 'through Artificial Intelligence (AI)'
@@ -126,6 +167,7 @@ export default {
 	},
 	userStories: {
 		Title: 'User Stories',
+		meta: 'User Stories - Code-Create',
 		XULULUInfo1:
 			'AiDA is a very interesting and creatively inspiring system that showcases limitless potential in fashion design. Traditional designers can typically create only a handful of styles in a day, whereas AiDA can generate multiple designs in an instant, making its efficiency incomparable to that of humans.',
 		XULULUInfo2:

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: '常见问题',
@@ -83,6 +125,7 @@ export default {
 	},
 	aboutUs: {
 		Title: '关于我们',
+		meta: '关于我们 通过人工智能(AI) 重塑时尚生态系统 https://code-create.com.hk/wp-',
 		ecosystem: {
 			Title: '通过人工智能(AI)',
 			Desc: '重塑时尚生态系统'
@@ -117,6 +160,7 @@ export default {
 	},
 	userStories: {
 		Title: '使用者故事',
+		meta: '使用者故事 - Code-Create',
 		XULULUInfo1:
 			'AiDA 是一个有趣且富有创意灵感的系统，在时尚设计领域展现出无限潜力。与传统设计师一天只能设计出几款服装相比，AiDA 能瞬间生成多款设计，效率远超人类。',
 		XULULUInfo2:

src/lang/zh-tw.ts

@@ -83,6 +83,7 @@ export default {
 	},
 	aboutUs: {
 		Title: '關於我們',
+		meta: '關於我們 通過人工智能(AI) 重塑時尚生態系統 https://code-create.com.hk',
 		ecosystem: {
 			Title: '通過人工智能(AI)',
 			Desc: '重塑時尚生態系統'
@@ -117,6 +118,7 @@ export default {
 	},
 	userStories: {
 		Title: '使用者故事',
+		meta: '使用者故事 - Code-Create',
 		XULULUInfo1:
 			'AiDA 是一個有趣且富有創意靈感的繫統，在時尚設計領域展現出無限潛力。與傳統設計師一天隻能設計出幾款服裝相比，AiDA 能瞬間生成多款設計，效率遠超人類。',
 		XULULUInfo2:

src/pages/about-us/ecosystem.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 	import { ref } from "vue";
+	import { useI18n } from 'vue-i18n'
 	import MyEvent from "@/tools/myEvents";
+	const { t, locale } = useI18n()
 	let videoUrl = 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2023/05/codec_brand_vid_16x9_ENG.mp4'
 	let videoPosterUrl = 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2026/06/codec_brand_vid_16x9_ENG_11_layer.jpeg'
 	const playVideo = ()=>{
+		console.log(locale.value)
+		return
 		MyEvent.emit("playVideo",{
 			url: videoUrl,
 			poster: videoPosterUrl,

src/pages/about-us/index.vue

@@ -6,9 +6,22 @@ import Mission from './mission.vue'
 import OurTeam from './our-team.vue'
 import StrategicPartners from './strategic-partners.vue'
 import { useGlobalStore } from '@/stores/global'
+import { useHead } from '@unhead/vue'
+import { useI18n } from 'vue-i18n'
 const globalStore = useGlobalStore()
 const windowWidth = computed(() => globalStore.state.windowWidth)
+const { t } = useI18n()
+useHead({
+	title: t('aboutUs.Title'),
+	meta: [
+		{
+			name: 'description',
+			content: t('aboutUs.meta')
+		}
+	]
+})
 defineExpose({})
+
 </script>
 <template>
 	<div class="about-us">

src/pages/aida/index.vue

@@ -1,66 +1,77 @@
 <script setup lang="ts">
 	import { useHead } from '@unhead/vue'
-	import { shallowRef, useTemplateRef } from 'vue'
+	import { shallowRef, useTemplateRef, computed, onMounted } from 'vue'
-	import aidaIntroBg from '@/assets/images/home/aida-intro-bg.png'
+	import { useI18n } from 'vue-i18n'
-	import aidaPanel from '@/assets/images/home/aida-panel.png'
+	import { gsap } from 'gsap'
-	import aidaBanner from '@/assets/images/aida/aida-banner.jpg'
+	import { ScrollTrigger } from 'gsap/ScrollTrigger'
-	import demoVideo from '@/assets/images/aida/aida-demo-video.mp4'
 	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'
+	import { IMAGE_BASE_URL } from '@/tools/config'
 
-	const keyFeatures = [
+	gsap.registerPlugin(ScrollTrigger)
-		"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 benefits = [
+	const { t, locale } = useI18n()
-		{
+
-			image: industryOne,
+	const demoVideo = computed(() => {
-			alt: 'Light bulb icon',
+		if (locale.value === 'en') {
-			text: 'Provides speedy ideation for fashion brands and individual designers'
+			return `${IMAGE_BASE_URL}/2026/02/Demo-video-26-2-27-EN.mp4`
-		},
-		{
-			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'
 		}
-	] as const
+		return `${IMAGE_BASE_URL}/2026/02/Demo-video-26-2-27-CN.mp4`
+	})
 
-	const subscriptionHighlights = [
+	const keyFeatures = computed(() => {
-		'Easily create your fashion collections in around 10 seconds based on your creative inspirations and Brand DNA',
+		return [t('Aida.feature1'), t('Aida.feature2'), t('Aida.feature3'), t('Aida.feature4')]
-		'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 plans = [
+	const benefits = computed(() => {
+		return [
+			{
+				image: `${IMAGE_BASE_URL}/2022/11/aida_feature_icon_01.png`,
+				alt: 'Light bulb icon',
+				text: t('Aida.benefits1')
+			},
+			{
+				image: `${IMAGE_BASE_URL}/2022/11/aida_feature_icon_02.png`,
+				alt: 'Stopwatch icon',
+				text: t('Aida.benefits2')
+			},
+			{
+				image: `${IMAGE_BASE_URL}/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',
+				name: t('Aida.trial'),
-			description: '7 days free trial',
+				description: t('Aida.days'),
-			action: 'Start Trial',
+				action: t('Aida.start'),
-			href: 'mailto:info@code-create.com.hk?subject=AiDA%203.1%20Trial'
+				href: 'https://www.aida.com.hk/register'
 			},
 			{
 				icon: diamondIcon,
-			name: 'Corporate',
+				name: t('Aida.corporate'),
-			description: 'Customised plan',
+				description: t('Aida.customised'),
-			action: 'Contact Us',
+				action: t('Aida.contactUs'),
-			href: 'mailto:info@code-create.com.hk?subject=AiDA%203.1%20Corporate%20Plan'
+				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,51 +99,246 @@
 	}
 
 	useHead({
-		title: 'AiDA 3.1 | Code Create',
+		title: 'AiDA - Code-Create',
 		meta: [
 			{
 				name: 'description',
-				content:
+				content: t('Aida.description')
-					'AiDA 3.1 is an AI-based interactive design assistant for fashion designers.'
 			}
 		]
 	})
+
+	onMounted(() => {
+		// 1. 顶部 aida-title 从上往下滑入
+		gsap.from('#aida-title', {
+			y: -100,
+			opacity: 0,
+			duration: 1.5,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '#aida-title',
+				start: 'top 80%',
+				once: true
+			}
+		})
+
+		// 2. intro-copy 从下往上滑入
+		gsap.from('.intro-copy', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.intro-copy',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 3. pricing-copy 从下往上滑入
+		gsap.from('.pricing-copy', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			delay: 0.1,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.pricing-copy',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 4. academic-copy 从下往上滑入
+		gsap.from('.academic-copy', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			delay: 0.2,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.academic-copy',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 5. features-section 的 section-title 从下往上滑入
+		gsap.from('.features-section .section-title', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.features-section .section-title',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 6. feature-list 从下往上滑入
+		gsap.from('.feature-list', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			delay: 0.2,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.feature-list',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 7. benefits-section 的 section-title 从下往上滑入
+		gsap.from('.benefits-title', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.benefits-title',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 8. benefits-grid 的三个图标动画
+		// 先设置初始状态：左右两个隐藏在中间位置
+		gsap.set('.benefit-card:first-child', { x: 200, opacity: 0 })
+		gsap.set('.benefit-card:last-child', { x: -200, opacity: 0 })
+
+		// 中间的图标先显示
+		gsap.from('.benefit-card:nth-child(2)', {
+			scale: 0.5,
+			opacity: 0,
+			duration: 1.1,
+			ease: 'back.out(1.7)',
+			scrollTrigger: {
+				trigger: '.benefits-grid',
+				start: 'top 80%',
+				once: true
+			}
+		})
+
+		// 左边的图标从中间滑到左边
+		gsap.to('.benefit-card:first-child', {
+			x: 0,
+			opacity: 1,
+			duration: 1.3,
+			delay: 0.3,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.benefits-grid',
+				start: 'top 80%',
+				once: true
+			}
+		})
+
+		// 右边的图标从中间滑到右边
+		gsap.to('.benefit-card:last-child', {
+			x: 0,
+			opacity: 1,
+			duration: 1.3,
+			delay: 0.3,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.benefits-grid',
+				start: 'top 80%',
+				once: true
+			}
+		})
+
+		// 9. demo-title 从下往上滑入
+		gsap.from('.demo-title', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.demo-title',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 10. subscription-title 从下往上滑入
+		gsap.from('.subscription-title', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.subscription-title',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 11. subscription-list 从下往上滑入
+		gsap.from('.subscription-list', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			delay: 0.1,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.subscription-list',
+				start: 'top 85%',
+				once: true
+			}
+		})
+
+		// 12. plans-grid 从下往上滑入
+		gsap.from('.plans-grid', {
+			y: 50,
+			opacity: 0,
+			duration: 1.3,
+			delay: 0.2,
+			ease: 'power3.out',
+			scrollTrigger: {
+				trigger: '.plans-grid',
+				start: 'top 85%',
+				once: true
+			}
+		})
+	})
 </script>
 
 <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="`${IMAGE_BASE_URL}/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
+					{{ t('Aida.desc') }}
-					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.
 				</p>
 				<p class="pricing-copy">
-					Annual Subscription Fee: $5,000 HKD / Year (50000 Credits)<br />
+					{{ t('Aida.annual') }}<br />
-					Monthly Subscription Fee: $500 HKD / Month (3500 Credits)<br />
+					{{ t('Aida.monthly') }}<br />
-					Monthly Subscription Fee: $100 HKD / Month (500 Credits)
+					{{ 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 +347,19 @@
 				<div class="feature-art">
 					<img
 						class="feature-bg"
-						:src="aidaIntroBg"
+						:src="`${IMAGE_BASE_URL}/2022/11/aida_intro_01_bg.png`"
 						alt="Fashion design sketches on paper"
 						loading="lazy"
 					/>
 					<img
 						class="feature-panel"
-						:src="aidaPanel"
+						:src="`${IMAGE_BASE_URL}/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 +372,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 +390,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 +412,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 +426,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">
+					<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 +456,8 @@
 				</div>
 
 				<div class="legal-links">
-					<a href="#subscription">Terms &amp; Conditions</a>
+					<a href="#subscription">{{ t('Aida.termsAndConditions') }}</a>
-					<a href="#subscription">Subscription Agreement</a>
+					<a href="#subscription">{{ t('Aida.agreement') }}</a>
 				</div>
 			</div>
 		</section>
@@ -366,7 +579,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 +611,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 +672,8 @@
 		margin: 32px 0 0;
 		padding-left: 18px;
 		color: #444444;
-		font-size: 13px;
+		font-size: 16px;
-		line-height: 1.55;
+		// line-height: 1.55;
 	}
 
 	.feature-list li + li {
@@ -507,8 +720,7 @@
 		max-width: 248px;
 		margin: 0;
 		color: #555555;
-		font-size: 12px;
+		font-size: 16px;
-		line-height: 1.45;
 		letter-spacing: 0;
 	}
 
@@ -620,7 +832,11 @@
 		position: relative;
 		padding-left: 24px;
 	}
-
+	.mail-link {
+		color: inherit;
+		text-decoration: none;
+		cursor: pointer;
+	}
 	.subscription-list li + li {
 		margin-top: 14px;
 	}

src/pages/home/components/Carousel.vue

@@ -1,15 +1,19 @@
 <template>
 	<section
 		class="carousel-container"
+		:class="{ 'show-pagination': showPagination }"
 		aria-label="Featured content"
 		@mouseenter="pauseAutoplay"
 		@mouseleave="resumeAutoplay"
+		@click="handleCarouselClick"
+		@touchstart="handleCarouselTouch"
+		@touchmove="handleCarouselTouch"
 	>
 		<KagolCarousel
 			v-model="activePage"
 			class="home-carousel"
-			:autoplay="false"
+			:autoplay="isAutoplayEnabled"
-			:interval="1000"
+			:interval="10000"
 		>
 			<article v-for="slide in slides" :key="slide.id" ref="slideEls" class="carousel-slide">
 				<div class="mask"></div>
@@ -89,9 +93,8 @@
 	import { gsap } from 'gsap'
 	import { Carousel as KagolCarousel } from '@kagol/vue-carousel'
 	import '@kagol/vue-carousel/dist/style.css'
-	import mainBanner01 from '../../../assets/images/home/mainbanner01.jpg'
-	import mainBanner02 from '../../../assets/images/home/mainbanner02.jpg'
 	import { useI18n } from 'vue-i18n'
+	import { IMAGE_BASE_URL } from '@/tools/config'
 
 	const { t, locale } = useI18n()
 
@@ -109,6 +112,8 @@
 	const isAutoplayEnabled = shallowRef(false)
 	const slideEls = useTemplateRef<HTMLElement[]>('slideEls')
 	const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 768)
+	const showPagination = ref(false)
+	let hideTimeout: number | null = null
 
 	const getVideoUrl = () => {
 		const isMobile = windowWidth.value < 768
@@ -129,7 +134,7 @@
 	const slides = computed<HomeSlide[]>(() => [
 		{
 			id: 'aida',
-			image: mainBanner01,
+			image: `${IMAGE_BASE_URL}/2022/11/mainbanner01-2.jpg`,
 			video: '',
 			alt: t('Home.banner1slogan'),
 			title: t('Home.banner1slogan'),
@@ -138,7 +143,7 @@
 		},
 		{
 			id: 'mixi',
-			image: mainBanner02,
+			image: `${IMAGE_BASE_URL}/2022/11/mainbanner02-3.jpg`,
 			video: '',
 			alt: 'Code Create product banner',
 			title: t('Home.banner2slogan'),
@@ -247,6 +252,38 @@
 		isAutoplayEnabled.value = true
 	}
 
+	function showPaginationControls() {
+		showPagination.value = true
+		
+		if (hideTimeout) {
+			window.clearTimeout(hideTimeout)
+		}
+		
+		hideTimeout = window.setTimeout(() => {
+			showPagination.value = false
+			hideTimeout = null
+		}, 3000)
+	}
+
+	function handleCarouselClick() {
+		showPaginationControls()
+	}
+
+	function handleCarouselTouch() {
+		showPaginationControls()
+	}
+
+	function handleOutsideClick(event: MouseEvent | TouchEvent) {
+		const container = document.querySelector('.carousel-container')
+		if (container && !container.contains(event.target as Node)) {
+			showPagination.value = false
+			if (hideTimeout) {
+				window.clearTimeout(hideTimeout)
+				hideTimeout = null
+			}
+		}
+	}
+
 	onMounted(() => {
 		resumeAutoplay()
 		queueDescAnimation()
@@ -256,6 +293,10 @@
 			windowWidth.value = window.innerWidth
 		}
 		window.addEventListener('resize', handleResize)
+
+		// 监听点击轮播图外部区域
+		document.addEventListener('click', handleOutsideClick)
+		document.addEventListener('touchstart', handleOutsideClick)
 	})
 
 	onBeforeUnmount(() => {
@@ -269,6 +310,13 @@
 		if (handleResize) {
 			window.removeEventListener('resize', handleResize)
 		}
+
+		// 清理定时器和事件监听
+		if (hideTimeout) {
+			window.clearTimeout(hideTimeout)
+		}
+		document.removeEventListener('click', handleOutsideClick)
+		document.removeEventListener('touchstart', handleOutsideClick)
 	})
 
 	watch(activePage, queueDescAnimation)
@@ -327,6 +375,7 @@
 				color: #ffffff;
 				background: transparent;
 				isolation: isolate;
+				pointer-events: none;
 			}
 			.desc-fill {
 				position: absolute;
@@ -337,6 +386,9 @@
 				background: #a51f24;
 				pointer-events: none;
 			}
+			.desc > * {
+				pointer-events: auto;
+			}
 
 			.desc-index-group {
 				position: relative;
@@ -407,6 +459,8 @@
 			transform: translateX(100%);
 			transition: transform 0.28s ease;
 			will-change: transform;
+			z-index: 9;
+			opacity: 1;
 		}
 		.carousel-pagination-button {
 			position: relative;
@@ -424,16 +478,16 @@
 			transition: background-color 0.2s ease;
 		}
 
-		.carousel-pagination-button:hover {
+		// .carousel-pagination-button:hover {
-			background: rgba(255, 255, 255, 0.75);
+		// 	background: rgba(255, 255, 255, 0.75);
-		}
+		// }
 
-		.carousel-pagination-button:focus-visible {
+		// .carousel-pagination-button:focus-visible {
-			position: relative;
+		// 	position: relative;
-			z-index: 1;
+		// 	z-index: 1;
-			outline: 2px solid #ffffff;
+		// 	outline: 2px solid #ffffff;
-			outline-offset: -6px;
+		// 	outline-offset: -6px;
-		}
+		// }
 
 		.carousel-pagination-arrow {
 			position: absolute;
@@ -469,36 +523,77 @@
 	}
 
 	@media (max-width: 768px) {
-		.carousel-slide {
-			min-height: 320px;
-		}
-
 		.home-carousel {
 			.carousel-slide {
+				aspect-ratio: auto;
+				height: 365px;
+				min-height: 365px;
+
+				.carousel-banner {
+					height: 100%;
+				}
+
+				.banner-title {
+					top: 86px;
+					right: auto;
+					left: 30px;
+					width: min(220px, calc(100% - 60px));
+					font-size: 28px;
+					font-weight: 700;
+					line-height: 1.35;
+					letter-spacing: 2px;
+					transform: none;
+				}
+
 				.desc {
 					width: 100%;
 					min-width: 0;
-					height: auto;
+					height: 102px;
-					min-height: 92px;
+					min-height: 102px;
-					padding: 16px 20px;
+					padding: 16px 15px;
+					gap: 18px;
+					background: transparent;
 				}
 				.desc-line {
-					top: -28px;
+					top: -70px;
-					height: 42px;
+					height: 45px;
 				}
 				.desc-index {
-					font-size: 40px;
+					font-size: 32px;
 				}
 				.desc-copy {
 					max-width: none;
-					font-size: 12px;
+					font-size: 11px;
+					font-weight: 600;
+					line-height: 1.45;
 				}
 			}
+
+			.carousel-pagination {
+				width: 50px;
+				height: 102px;
+				transform: translateX(0);
+				opacity: 0;
+				transition: opacity 0.3s ease;
+			}
+
+			.carousel-pagination-button {
+				width: 50px;
+				height: 51px;
+			}
+		}
+
+		.carousel-container.show-pagination .carousel-pagination {
+			opacity: 1;
 		}
 
 		.carousel-pagination-arrow {
 			width: 18px;
 			height: 18px;
 		}
+
+		.carousel-container:hover .carousel-pagination {
+			transform: translateX(0);
+		}
 	}
 </style>

src/pages/home/components/ProductFeature.vue

@@ -191,7 +191,7 @@
 	@media (max-width: 980px) {
 		.product-feature,
 		.product-feature-reversed {
-			grid-template-columns: 1fr;
+			flex-direction: column-reverse;
 			gap: 24px;
 			width: min(680px, calc(100% - 40px));
 			min-height: 0;
@@ -227,11 +227,12 @@
 		.product-feature,
 		.product-feature-reversed {
 			width: calc(100% - 32px);
-			padding: 52px 0;
+			gap: 28px;
+			padding: 0 0 64px;
 		}
 
 		.product-feature-art {
-			min-height: clamp(300px, 82vw, 430px);
+			min-height: clamp(280px, 82vw, 360px);
 		}
 
 		.product-feature-copy,
@@ -242,28 +243,54 @@
 		}
 
 		.product-feature-bg {
-			width: 78%;
+			width: 72%;
+			margin-left: 38px;
+			border-radius: 10px;
 		}
 
 		.product-feature-panel,
 		.product-feature-reversed .product-feature-panel {
 			left: auto;
-			right: 0;
+			right: 12px;
-			bottom: 42px;
+			bottom: 22px;
-			width: 68%;
+			width: 72%;
 		}
 
 		.product-feature-reversed .product-feature-bg {
+			width: 70%;
+			margin-right: 16px;
+			margin-left: auto;
+		}
+
+		.product-feature-reversed .product-feature-panel {
+			right: auto;
+			left: 18px;
+			bottom: 16px;
 			width: 72%;
 		}
 
+		.product-feature-name {
+			margin-bottom: 16px;
+			font-size: 18px;
+			letter-spacing: 1.5px;
+		}
+
 		.product-feature-title {
 			width: 100%;
 			max-width: 100%;
-			font-size: clamp(26px, 7.2vw, 30px);
+			margin-bottom: 26px;
-			line-height: 1.2;
+			font-size: clamp(22px, 6.1vw, 26px);
+			line-height: 1.35;
 			letter-spacing: 1.2px;
 			overflow-wrap: anywhere;
 		}
+
+		.product-feature-link {
+			min-width: 100px;
+			min-height: 40px;
+			padding: 0 22px;
+			font-size: 9px;
+			letter-spacing: 1px;
+		}
 	}
 </style>

src/pages/home/components/ProjectCta.vue

@@ -77,7 +77,26 @@
 
 	@media (max-width: 640px) {
 		.project-cta {
-			min-height: 340px;
+			min-height: 288px;
+			padding: 64px 20px;
+		}
+
+		.project-cta-inner {
+			gap: 28px;
+		}
+
+		.project-cta-title {
+			font-size: 22px;
+			line-height: 1.4;
+			letter-spacing: 1.2px;
+		}
+
+		.project-cta-link {
+			min-width: 100px;
+			min-height: 40px;
+			padding: 0 22px;
+			font-size: 9px;
+			letter-spacing: 1px;
 		}
 	}
 </style>

src/pages/home/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 	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'
 	import homeAiLogo from '@/assets/images/home/home-ai-logo.png'
 	import mixiIntroBg from '@/assets/images/home/mixi-intro-bg.png'
@@ -9,7 +8,9 @@
 	import HomeCarousel from './components/Carousel.vue'
 	import ProductFeature from './components/ProductFeature.vue'
 	import ProjectCta from './components/ProjectCta.vue'
+	import { IMAGE_BASE_URL } from '@/tools/config'
 	import { useI18n } from 'vue-i18n'
+
 	const { t, locale } = useI18n()
 
 	const productFeatures = computed(() => {
@@ -17,18 +18,18 @@
 			{
 				name: 'AiDA 3.1',
 				title: t('Home.aidaDesc'),
-				backgroundImage: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/aida_intro_01_bg.png',
+				backgroundImage: `${IMAGE_BASE_URL}/2022/11/aida_intro_01_bg.png`,
 				backgroundAlt: 'Fashion design sketches on paper',
-				panelImage: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2024/01/new-layout-1.png',
+				panelImage: `${IMAGE_BASE_URL}/2024/01/new-layout-1.png`,
 				panelAlt: 'AiDA design workspace preview',
 				reversed: false
 			},
 			{
 				name: 'Mixi',
 				title: t('Home.mixiSlogan'),
-				backgroundImage: mixiIntroBg,
+				backgroundImage: `${IMAGE_BASE_URL}/2022/11/mixi_intro_01_bg.png`,
 				backgroundAlt: 'Layered fabric texture',
-				panelImage: mixiPanel,
+				panelImage: `${IMAGE_BASE_URL}/2022/11/mixi_intro_01_panel.png`,
 				panelAlt: 'Mixi visual search interface preview',
 				reversed: true
 			}
@@ -62,7 +63,7 @@
 			>
 				<img
 					class="ecosystem-logo"
-					src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/home_ai_logo.png"
+					:src="homeAiLogo"
 					alt="Code Create"
 					loading="lazy"
 					translate-y-s="-20"
@@ -164,26 +165,31 @@
 
 	@media (max-width: 640px) {
 		.home-content {
-			padding: 72px 0 36px;
+			padding: 52px 0 0;
+		}
+
+		.ecosystem-intro {
+			padding: 0 24px 58px;
 		}
 
 		.ecosystem-logo {
-			width: 138px;
+			width: 76px;
-			margin-bottom: 22px;
+			margin-bottom: 26px;
 		}
 
 		.ecosystem-title {
 			width: min(100%, 330px);
 			max-width: none;
-			font-size: 14px;
+			margin-bottom: 10px;
-			letter-spacing: 1.5px;
+			font-size: 18px;
-			line-height: 1.45;
+			letter-spacing: 1px;
+			line-height: 1.35;
 			overflow-wrap: anywhere;
 		}
 
 		.ecosystem-subtitle {
-			font-size: 12px;
+			font-size: 13px;
-			letter-spacing: 1.5px;
+			letter-spacing: 0.8px;
 		}
 	}
 </style>

src/pages/user-stories/index.vue

@@ -1,5 +1,17 @@
 <script setup lang="ts">
 import UserList from './user-list.vue'
+import { useHead } from '@unhead/vue'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+useHead({
+	title: t('userStories.Title'),
+	meta: [
+		{
+			name: 'description',
+			content: t('userStories.meta')
+		}
+	]
+})
 defineExpose({})
 </script>
 <template>

src/tools/config.ts

@@ -0,0 +1 @@
+export const IMAGE_BASE_URL = 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk'

tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.vue","./src/main.ts","./src/routes.ts","./src/vite-env.d.ts","./src/components/back-top.vue","./src/components/down-menu.vue","./src/components/main-footer.vue","./src/components/main-header.vue","./src/components/video-model.vue","./src/directives/custom-animation.js","./src/directives/index.ts","./src/directives/myevents.ts","./src/directives/scroll-progress.ts","./src/directives/tween-animation.ts","./src/lang/en.ts","./src/lang/index.ts","./src/lang/zh-cn.ts","./src/lang/zh-tw.ts","./src/pages/aboutview.vue","./src/pages/contactview.vue","./src/pages/productsview.vue","./src/pages/about-us/ecosystem.vue","./src/pages/about-us/index.vue","./src/pages/about-us/mission.vue","./src/pages/about-us/our-team.vue","./src/pages/about-us/strategic-partners.vue","./src/pages/about-us/title.vue","./src/pages/aida/index.vue","./src/pages/events/index.vue","./src/pages/events/swiper.vue","./src/pages/home/index.vue","./src/pages/home/components/carousel.vue","./src/pages/home/components/productfeature.vue","./src/pages/home/components/projectcta.vue","./src/pages/my-account/account-info.vue","./src/pages/my-account/index.vue","./src/pages/my-account/login.vue","./src/pages/my-account/orders.vue","./src/pages/my-account/register.vue","./src/pages/my-account/tip-box.vue","./src/pages/my-account/welcome.vue","./src/stores/global.ts","./src/stores/index.ts","./src/stores/userinfo.ts","./src/types/kagol-vue-carousel.d.ts"],"version":"6.0.3"}
+{"root":["./src/app.vue","./src/main.ts","./src/routes.ts","./src/vite-env.d.ts","./src/components/back-top.vue","./src/components/down-menu.vue","./src/components/email-box.vue","./src/components/main-footer.vue","./src/components/main-header.vue","./src/components/main-menu-dialog.vue","./src/components/video-model.vue","./src/directives/custom-animation.js","./src/directives/custom-show.js","./src/directives/index.ts","./src/directives/scroll-progress.ts","./src/directives/tween.ts","./src/lang/en.ts","./src/lang/index.ts","./src/lang/zh-cn.ts","./src/lang/zh-tw.ts","./src/pages/aboutview.vue","./src/pages/productsview.vue","./src/pages/about-us/ecosystem.vue","./src/pages/about-us/index.vue","./src/pages/about-us/mission.vue","./src/pages/about-us/our-team.vue","./src/pages/about-us/strategic-partners.vue","./src/pages/about-us/title.vue","./src/pages/aida/index.vue","./src/pages/contact-us/index.vue","./src/pages/events/all-events.vue","./src/pages/events/index.vue","./src/pages/events/list-en.js","./src/pages/events/list-zh-cn.js","./src/pages/events/list-zh-tw.js","./src/pages/events/swiper.vue","./src/pages/events-detail/index.vue","./src/pages/events-detail/list-en.js","./src/pages/events-detail/list-zh-cn.js","./src/pages/events-detail/list-zh-tw.js","./src/pages/help-centre/faq.vue","./src/pages/help-centre/index.vue","./src/pages/help-centre/title.vue","./src/pages/home/index.vue","./src/pages/home/components/carousel.vue","./src/pages/home/components/productfeature.vue","./src/pages/home/components/projectcta.vue","./src/pages/media/index.vue","./src/pages/media/list-en.js","./src/pages/media/list-zh-cn.js","./src/pages/media/list-zh-tw.js","./src/pages/mixi/index.vue","./src/pages/my-account/account-info.vue","./src/pages/my-account/address.vue","./src/pages/my-account/index.vue","./src/pages/my-account/login.vue","./src/pages/my-account/orders.vue","./src/pages/my-account/payment-methods.vue","./src/pages/my-account/register.vue","./src/pages/my-account/subscriptions.vue","./src/pages/my-account/tip-box.vue","./src/pages/my-account/welcome.vue","./src/pages/others/disclaimer.vue","./src/pages/others/not-found-404.vue","./src/pages/others/others-header.vue","./src/pages/others/privacy-policy.vue","./src/pages/others/site-map.vue","./src/pages/others/terms-of-use.vue","./src/pages/user-stories/index.vue","./src/pages/user-stories/user-list.vue","./src/stores/global.ts","./src/stores/index.ts","./src/stores/userinfo.ts","./src/tools/myevents.ts","./src/types/kagol-vue-carousel.d.ts"],"errors":true,"version":"6.0.3"}