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

src/lang/en.ts

@@ -44,4 +44,77 @@ export default {
 		EmailInputTitle: 'Interested in Mixi?',
 		EmailInputTip: 'We will contact you for customized plan.',
 	},
+	helpCentre:{
+		Title: 'HELP CENTRE',
+		FAQ: 'FAQ',
+		faqItem1: 'What are the minimum, recommended system requirements?',
+		faqItem1Content: 'As AiDA is a cloud-based system, only stable internet access is required.',
+		faqItem2: 'Does AiDA run on both a PC & a MAC?',
+		faqItem2Content: 'Yes, AiDA supports both PC & MAC.',
+		faqItem3: 'Does AiDA run on an iPad?',
+		faqItem3Content: 'Yes, AiDA can be run on an iPad.',
+		faqItem4: 'What File Types it supports?',
+		faqItem4Content: 'The image file types that can be uploaded into AiDA: jpeg, jpg, png',
+		faqItem5: 'In what languages is AiDA system system available',
+		faqItem5Content: 'Currently, AiDA is available in English',
+		faqItem6: 'Can I receive my invoice?',
+		faqItem6Content: 'The invoice will be sent to your registered mailbox 1 months before (for paid subscription) with the reminder email.',
+		faqItem7: 'How do I change my password?',
+		faqItem7Content: 'You could change your password after login to your account in “My Account” page “Account details” part.',
+	},
+	aboutUs:{
+		Title: 'ABOUT US',
+		ecosystem:{
+			Title: 'REVITALISE THE FASHION ECOSYSTEM',
+			Desc: 'through Artificial Intelligence (AI)',
+		},
+		mission:{
+			Title: 'Focus Area',
+			Desc: 'To be the world leading innovative leader in offering the state-of-the-art AI based solutions and systems to disrupt the fashion industry',
+			FocusArea: 'Focus Area',
+			ElevateOperationEfficiency: 'Elevate Operation Efficiency',
+			VerticalDesignPlatform: 'Vertical Design Platform',
+			Education: 'Education',
+			Community: 'Community',
+		},
+		ourTeam:{
+			Title: 'OUR Team',
+			ProfWong: 'Prof Wong is Cheng Yik Hung Professor in Fashion of School of Fashion and Textiles at The Hong Kong Polytechnic University and currently serving as the Chief Executive Officer and Centre Director of AiDLab.',
+			ProfWongLink: 'Laboratory for Artificial Intelligence in Design (AiDLab)',
+			ProfWongDesc: 'He is one of the inventors of the technologies to be commercialized in the start-up.',
+			ProfWongName: 'Prof Calvin WONG',
+			ProfWongPosition: 'Co-Founder and Technical Advisor',
+			MsWong: 'Ms Kim WONG is a successful business executive with extensive experience in the fashion and luxury goods industries, building business across China and APAC and leading operations for renowned fashion houses such as DFS USA, Lane Crawford, Burberry Asia, Brunello Cucinelli and Versace Asia Pacific.',
+			MsWongName: 'Ms Kim WONG',
+			MsWongPosition: 'Co-Founder and Chief Executive Officer',
+			DrZou: 'Dr Zou is currently serving as Assistant Professor at School of Fashion and Textiles at The Hong Kong Polytechnic University. She is one of the inventors of the technologies to be commercialized in the start-up.',
+			DrZouName: 'Dr Aemika ZOU',
+			DrZouPosition: 'Technical Advisor',
+			Giovanni: 'Mr Giovanni DI SALVO is the Chief Executive Officer Asia of Salvatore Ferragamo',
+			GiovanniName: 'Mr Giovanni DI SALVO',
+			GiovanniPosition: 'Advisory Member',
+		},
+		StrategicPartners: 'Strategic Partners',
+	},
+	userStories:{
+		Title: 'User Stories',
+		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: 'This high level of productivity makes AiDA an invaluable tool for designers, and the vast array of designs it produces also provides valuable learning opportunities. By analyzing and appreciating these designs, designers can gain inspiration and enhance their own creative skills.',
+		XULULUInfo3: 'Therefore, I believe that in the future, AiDA has the potential to become an essential tool for designers, driving innovation and transformation in the fashion industry.',
+		YiuChingYauInfo1: 'Throughout the process of using AiDA, I deeply felt the significant impact of artificial intelligence on the future society. AI has provided me with a lot of innovative ideas for clothing design, such as the use of different garments, the combination of silhouettes and the matching of materials. Because of the intelligence of AI, I have received a lot of inspiration. AI’s intelligence has provided me with a lot of inspiration that I never thought of, and its convenient and fast design methods have also greatly promoted my creative process.',
+		XIEYAUKITInfo1: 'Using AiDA has been a transformative experience in my design journey. The integration of technology and creativity has allowed me to explore new dimensions in my work. One of the most significant advantages of AiDA is its ability to automate repetitive tasks, such as creating style sketches. This automation has freed up valuable time, enabling me to focus on the more creative aspects of my designs. ',
+		XIEYAUKITInfo2: 'Reflecting on my experience with AiDA, I feel a renewed sense of excitement about the future of design. It has not only improved my skills but also opened my eyes to the endless possibilities that lie ahead when creativity meets technology.',
+		YuzhiLaiInfo1: 'During the process of using AiDA for fashion design, I experienced unprecedented convenience and efficiency. Especially in the stages of color extraction and generating design sketches, as well as further developing them into fashion rendering image, the powerful capabilities of AI technology left me deeply impressed.',
+		YuzhiLaiInfo2: 'Using AiDA for fashion design is a highly enjoyable and innovative experience. Despite some limitations, I still believe that AiDA has brought revolutionary changes to the field of fashion design. Its efficiency and convenience have greatly shortened the design cycle. I look forward to future breakthroughs in AiDA and the emergence of more stunning design works.',
+		CheungTszChingInfo1: 'Through this competition, I had the opportunity to explore many different features of AiDA. Using AiDA allows me to design a collection step by step, starting from a moodboard. It provides the ability to edit outfit details, such as prints and colors. This feature makes it easier for the designs to align with my desired outcomes. Once completed, AiDA can generate real-life versions of the designs, making my work feel more complete. ',
+		INJURYInfo1: 'Regarding the user experience of AiDA, we would like to use five keywords to describe, which are “Surprise” “Easy”, “Unlimited”, “Automatic” and “Fast”.',
+		BESFXXKInfo1: 'Those keywords that come to my mind when describing the systems are “Safe”, “Fast”, “Friendly”, “Smart” and “Futuristic”',
+		MountainYamInfo1: 'The process is “Simple and user-friendly”, and the system is “Efficient”, “Fruitful”, “Innovative” and “Solidarity”.',
+		ProfJungSchool: 'Hanyang University Department of Clothing and Textiles',
+		ProfJungInfo1: 'In the “Digital Fashion Content Development” course, I’ve integrated the AiDA system into a 4-week mini-project with the goal of designing a “My Own Capsule Collection.” The class included a diverse group of students. Even those without prior knowledge of fashion design were able to create fun and imaginative designs within just three weeks using AiDA. Most notably, AiDA’s powerful generative AI system stimulated students’ creativity, enabling them to produce designs beyond what they thought they were capable of. Based on this experience, I summarized the impact of AiDA through a short rhyme: “No barrier to begin — that’s for sure, Ready to use everywhere, Boosting designer’s flair to dare.”',
+		IreneSiuInfo1: 'The concept of AiDA has many potential applications in the fashion industry, which are still waiting for us to discover and develop.',
+		JoyceChowInfo1: 'AiDA lets the fashion industry go into a new generation. A successful AiDA can help to push – eco-friendliness, which is one of the most crucial worldwide topics in the fashion industry.',
+		CherylHoInfo1: 'Apart from providing new elements to inform my design process, AiDA also inspires me by offering much more variety of proportions and outfit combinations.',
+		MinnaPolamInfo1: 'AiDA helps us mix and match each item and generate colours so we can quickly see what it will look like – all items match together, and the effects come with different colours and patterns. It also assists us at the design development stage by learning our style and taste.',
+	}
 }

src/lang/zh-cn.ts

@@ -44,4 +44,77 @@ export default {
 		EmailInputTitle: '有兴趣使用精准时装属性及颜色辨识系统 (Mixi)？',
 		EmailInputTip: '请留下电邮地址，以获取度身订造的计划',
 	},
+	helpCentre:{
+		Title: '支援中心',
+		FAQ: '常见问题',
+		faqItem1: '请问最低限度及建议的系统要求是什么？',
+		faqItem1Content: '因为AiDA是云端系统，只需要有稳定的网络连结就可以简单存取。',
+		faqItem2: 'AiDA可以用于PC和MAC吗?',
+		faqItem2Content: '是的，AiDA可以在PC 和 MAC上使用。',
+		faqItem3: 'AiDA可以用于iPad吗?',
+		faqItem3Content: '是的，AiDA可以在iPad上使用。',
+		faqItem4: 'AiDA可以支援哪些文件类型？',
+		faqItem4Content: '以下图像文件类型可上传至 AiDA: jpeg, jpg, png',
+		faqItem5: 'AiDA系统支援哪些语言？',
+		faqItem5Content: '目前AiDA只支援英文版本',
+		faqItem6: '当我订阅 AiDA 后会收到账单吗？',
+		faqItem6Content: '订阅账单会在订阅结束一个月前连同续期提示电邮一同发送至登记的电邮地址(付费订阅)。',
+		faqItem7: '如何可以更改我的密码？',
+		faqItem7Content: '您可以在「我的账户」页面「账户详情」部分登录您的账户后修改密码。',
+	},
+	aboutUs:{
+		Title: '关于我们',
+		ecosystem:{
+			Title: '通过人工智能(AI)',
+			Desc: '重塑时尚生态系统',
+		},
+		mission:{
+			Title: '使命',
+			Desc: '成为世界创新领导者，基于最先进的人工智能技术，提供解决方案和系统，重塑时尚生态系统。',
+			FocusArea: '专注范畴',
+			ElevateOperationEfficiency: '提高营运效率',
+			VerticalDesignPlatform: '垂直设计平台',
+			Education: '教育',
+			Community: '社区',
+		},
+		ourTeam:{
+			Title: '我们的团队',
+			ProfWong: '黄教授是香港理工大学时装及纺织学院的郑翼雄时装教授，目前担任',
+			ProfWongLink: '人工智能设计研究所（AiDLab）',
+			ProfWongDesc: '的行政总裁及总监。 他是Code Create多个商业化技术的发明者之一。',
+			ProfWongName: '黄伟强教授',
+			ProfWongPosition: '联合创办人和技术顾问',
+			MsWong: '王女士在时尚和奢侈品行业拥有丰富的高阶管理经验，于中国内地和亚太地区建立业务，并带领知名时装公司的营运，包括DFS USA、Lane Crawford、Burberry Asia、Brunello Cucinelli和Versace Asia Pacific。',
+			MsWongName: '王剑虹女士',
+			MsWongPosition: '联合创办人及行政总裁r',
+			DrZou: '邹博士目前是人工智能设计研究所的技术项目经理。 她是Code Create商业化技术的发明者之一。',
+			DrZouName: '邹星星博士',
+			DrZouPosition: '技术顾问',
+			Giovanni: 'Giovanni 目前是 Salvatore Ferragamo (菲拉格慕) 亚洲区行政总裁。',
+			GiovanniName: 'Giovanni DI SALVO 先生',
+			GiovanniPosition: '顾问委员',
+		},
+		StrategicPartners: '战略合作伙伴',
+	},
+	userStories:{
+		Title: '使用者故事',
+		XULULUInfo1: 'AiDA 是一个有趣且富有创意灵感的系统，在时尚设计领域展现出无限潜力。与传统设计师一天只能设计出几款服装相比，AiDA 能瞬间生成多款设计，效率远超人类。',
+		XULULUInfo2: '这种高效率使 AiDA 成为设计师的得力工具，其海量设计作品也为设计师提供了宝贵的学习契机。通过分析欣赏这些作品，设计师能够获取灵感，提升自身创造力。',
+		XULULUInfo3: '因此，我认为未来 AiDA 有望成为设计师必备的工具，推动时尚行业的创新与变革。',
+		YiuChingYauInfo1: '使用AiDA的过程中，我深切感受到人工智能对未来社会的重大影响。它为我的服装设计提供了诸多创新思路，涉及款式、廓形搭配和面料组合。人工智能的智慧给了我许多意想不到的灵感，其便捷快速的设计方式也极大推动了我的创作进程。',
+		XIEYAUKITInfo1: '使用 AiDA 是我设计之旅中一次变革性的体验。技术与创意的结合使我能够探索工作中的新维度。AiDA 最显著的优势之一是能够自动化重复性任务，例如创建款式草图。这种自动化节省了宝贵的时间，让我能够专注于设计中更具创意的部分。AiDA 让我即使作为初学者也能轻松驾驭软件。我很快掌握了其功能，从而提高了整体工作效率。此外，AiDA 提供的灵活性和编辑选项来适应我独特的设计风格，我十分享受整个设计过程。',
+		XIEYAUKITInfo2: '我特别喜欢即时生成功能，它能够实时提供设计的视觉评估。这种能力使我能够迅速做出调整，确保创意愿景得以完整保留。此外，AiDA 的智能建议系统激发了新的想法，鼓励我突破创意的边界。该软件还包含简单的数据分析工具，帮助我衡量受众对不同设计的反应，为未来项目提供有价值的见解。这种设计与技术的结合加深了我对它们如何无缝协作的欣赏。回顾使用 AiDA 的经历，我对设计的未来感到焕然一新的兴奋。它不仅提高了我的技能，也让我看到了创意与技术相遇时前方无限的可能性',
+		YuzhiLaiInfo1: '在运用 AiDA 进行服装设计时，我感受到了前所未有的便捷与高效。尤其是在色彩提取、设计草图生成，以及时尚效果图的阶段，人工智能的强大能力令我惊叹。',
+		YuzhiLaiInfo2: '利用 AiDA 进行服装设计是一种极为兴奋且充满创新的体验。尽管存在一些局限性，但我依然认为 AiDA 为服装设计领域带来了变革性的变化。它的高效与便捷大幅缩短了设计周期。我期待 AiDA 未来的突破以及更多精彩设计作品的诞生。',
+		CheungTszChingInfo1: '通過本次競賽，我得以深入探索 AiDA 許多不同的功能。使用 AiDA 時，我能從靈感闆開始，一步步設計繫列作品，還能編輯服裝細節，比如圖案和顏色，這使設計更契合預期。設計完成後，AiDA 還能生成可視化産品效果圖，這讓我的設計作品更具完整性。',
+		INJURYInfo1: '对于AiDA的使用体验，我想用五个形容词去描述，「惊喜」、 「容易」 、 「无限 」 、 「自动化」 和 「 快捷」。',
+		BESFXXKInfo1: '当问我怎样去描述AiDA这个系统时，我立即想到这些关键词：「安全」、「快捷」、 「方便」 、「智能」和 「未来」。',
+		MountainYamInfo1: '使用AiDA时整个流程都很「简易及人性化」 ，而且这个系统 「有效率」 、「富有成效」 、「创新」 和「 团结」 。',
+		ProfJungSchool: '汉阳大学服装与纺织系',
+		ProfJungInfo1: '在“数字时尚内容开发”课程中，我将 AiDA 系统融入了一个为期四周的迷你项目，目标是设计一个“我自己的胶囊系列”。这个班级的学生背景各异，包括服装与纺织专业、室内建筑设计、戏剧与电影以及工商管理学院的学生。即使是那些没有时尚基础设计的同学，也能在短短三周内利用 AiDA 创作出有趣且富有想象力的设计。由于 AiDA 仅需连接网络，学生们可以随时随地开发自己的系列，这与他们各自的创作周期相契合。最为明显的是，AiDA 强大的生成式 AI 系统激发了学生的创造力，使他们能够设计出超出自我预期的作品。基于此次体验，我总结了 AiDA 的影响，并用简短的韵文表达： “无门槛易上手，随时随地用，激发设计师的大胆创意。”',
+		IreneSiuInfo1: 'AiDA这个概念在时尚界有很多不同应用的可能性，还有待我们去了解和开发。',
+		JoyceChowInfo1: 'AiDA推动时尚产业进入一个新时代。 AiDA可以成功帮助推动环境保护，是对于时尚界而言其中一个全世界最重要的话题。',
+		CherylHoInfo1: '除了提供新元素去帮助我的设计过程 ，AiDA亦可以激发我的灵感，提供更多不同种类的比例和服装组合建议给我。',
+		MinnaPolamInfo1: 'AiDA除了可以帮助我们衬搭不同的单品，更可以生成不同的颜色，令我们可以快速看到整个造型，所有单品都可以衬搭在一起，可看到不同颜色和图案的效果。 而且AiDA亦在设计开发阶段，通过学习我们的风格和品味，帮助我们加快设计过程。',
+	}
 }

src/lang/zh-tw.ts

@@ -44,4 +44,77 @@ export default {
 		EmailInputTitle: '有興趣使用精準時裝屬性及顏色辨識系統 (Mixi)？',
 		EmailInputTip: '請留下電郵地址，以獲取度身訂造的計劃',
 	},
+	helpCentre:{
+		Title: '支援中心',
+		FAQ: '常見問題',
+		faqItem1: '請問最低限度及建議的系統要求是什麼？',
+		faqItem1Content: '因為AiDA是雲端系統，只需要有穩定的網絡連結就可以簡單存取。',
+		faqItem2: 'AiDA可以用於PC和MAC嗎?',
+		faqItem2Content: '是的，AiDA可以在PC 和 MAC上使用。',
+		faqItem3: 'AiDA可以用於iPad嗎?',
+		faqItem3Content: '是的，AiDA可以在iPad上使用。',
+		faqItem4: 'AiDA可以支援哪些文件類型？',
+		faqItem4Content: '以下圖像文件類型可上傳至 AiDA: jpeg, jpg, png',
+		faqItem5: 'AiDA系統支援哪些語言？',
+		faqItem5Content: '目前AiDA只支援英文版本',
+		faqItem6: '當我訂閱 AiDA 後會收到賬單嗎？',
+		faqItem6Content: '訂閱賬單會在訂閱結束一個月前連同續期提示電郵一同發送至登記的電郵地址(付費訂閱)。',
+		faqItem7: '如何可以更改我的密碼？',
+		faqItem7Content: '您可以在「我的賬戶」頁面「賬戶詳情」部分登錄您的賬戶後修改密碼。',
+	},
+	aboutUs:{
+		Title: '關於我們',
+		ecosystem:{
+			Title: '通過人工智能(AI)',
+			Desc: '重塑時尚生態系統',
+		},
+		mission:{
+			Title: '使命',
+			Desc: '成為世界創新領導者，基於最先進的人工智能技術，提供解決方案和系統，重塑時尚生態系統。',
+			FocusArea: '專注範疇',
+			ElevateOperationEfficiency: '提高營運效率',
+			VerticalDesignPlatform: '垂直設計平台',
+			Education: '教育',
+			Community: '社區',
+		},
+		ourTeam:{
+			Title: '我們的團隊',
+			ProfWong: '黃教授是香港理工大學時裝及紡織學院的鄭翼雄時裝教授，目前擔任',
+			ProfWongLink: '人工智能設計研究所（AiDLab）',
+			ProfWongDesc: '的行政總裁及總監。 他是Code Create多個商業化技術的發明者之一。',
+			ProfWongName: '黃偉强教授',
+			ProfWongPosition: '聯合創辦人和技術顧問',
+			MsWong: '王女士在時尚和奢侈品行業擁有豐富的高階管理經驗，於中國内地和亞太地區建立業務，並帶領知名時裝公司的營運，包括DFS USA、Lane Crawford、Burberry Asia、Brunello Cucinelli和Versace Asia Pacific。',
+			MsWongName: '王劍虹女士',
+			MsWongPosition: '聯合創辦人及行政總裁',
+			DrZou: '鄒博士目前是人工智能設計研究所的技術項目經理。 她是Code Create商業化技術的發明者之一。',
+			DrZouName: '鄒星星博士',
+			DrZouPosition: '技術顧問',
+			Giovanni: 'Giovanni 目前是 Salvatore Ferragamo (菲拉格慕) 亞洲區行政總裁。',
+			GiovanniName: 'Giovanni DI SALVO先生',
+			GiovanniPosition: '顧問委員',
+		},
+		StrategicPartners: '戰略合作夥伴',
+	},
+	userStories:{
+		Title: '使用者故事',
+		XULULUInfo1: 'AiDA 是一個有趣且富有創意靈感的繫統，在時尚設計領域展現出無限潛力。與傳統設計師一天隻能設計出幾款服裝相比，AiDA 能瞬間生成多款設計，效率遠超人類。',
+		XULULUInfo2: '這種高效率使 AiDA 成爲設計師的得力工具，其海量設計作品也爲設計師提供了寶貴的學習契機。通過分析欣賞這些作品，設計師能夠獲取靈感，提昇自身創造力。',
+		XULULUInfo3: '因此，我認爲未來 AiDA 有望成爲設計師必備的工具，推動時尚行業的創新與變革。',
+		YiuChingYauInfo1: '使用AiDA的過程中，我深切感受到人工智能對未來社會的重大影響。它爲我的服裝設計提供了諸多創新思路，涉及款式、廓形搭配和麵料組合。人工智能的智慧給了我許多意想不到的靈感，其便捷快速的設計方式也極大推動了我的創作進程。',
+		XIEYAUKITInfo1: '在運用 AiDA 進行服裝設計時，我感受到了前所未有的便捷與高效。尤其是在色彩提取、設計草圖生成，以及時尚效果圖的階段，人工智能的強大能力令我驚嘆。',
+		XIEYAUKITInfo2: '利用 AiDA 進行服裝設計是一種極爲興奮且充滿創新的體驗。儘管存在一些局限性，但我依然認爲 AiDA 爲服裝設計領域帶來了變革性的變化。它的高效與便捷大幅縮短了設計週期。我期待 AiDA 未來的突破以及更多精彩設計作品的誕生。',
+		YuzhiLaiInfo1: '在運用 AiDA 進行服裝設計時，我感受到了前所未有的便捷與高效。尤其是在色彩提取、設計草圖生成，以及時尚效果圖的階段，人工智能的強大能力令我驚嘆。',
+		YuzhiLaiInfo2: '利用 AiDA 進行服裝設計是一種極爲興奮且充滿創新的體驗。儘管存在一些局限性，但我依然認爲 AiDA 爲服裝設計領域帶來了變革性的變化。它的高效與便捷大幅縮短了設計週期。我期待 AiDA 未來的突破以及更多精彩設計作品的誕生。',
+		CheungTszChingInfo1: '通過本次競賽，我得以深入探索 AiDA 許多不同的功能。使用 AiDA 時，我能從靈感闆開始，一步步設計繫列作品，還能編輯服裝細節，比如圖案和顏色，這使設計更契合預期。設計完成後，AiDA 還能生成可視化産品效果圖，這讓我的設計作品更具完整性。',
+		INJURYInfo1: '對於AiDA的使用體驗，我想用五個形容詞去描述，「驚喜」、 「容易」 、 「無限 」 、 「自動化」 和 「 快捷」。',
+		BESFXXKInfo1: '當問我怎樣去描述AiDA這個系統時，我立即想到這些關鍵詞：「安全」、「快捷」、 「方便」 、「智能」和 「未來」。',
+		MountainYamInfo1: '使用AiDA時整個流程都很「簡易及人性化」 ，而且這個系統 「有效率」 、「富有成效」 、「創新」 和「 團結」 。',
+		ProfJungSchool: '漢陽大學服裝與紡織繫',
+		ProfJungInfo1: '在“數字時尚內容開髮”課程中，我將 AiDA 繫統融入了一個爲期四週的迷你項目，目標是設計一個“我自己的膠囊繫列”。這個班級的學生背景各異，包括服裝與紡織專業、室內建築設計、戲劇與電影以及工商管理學院的學生。即使是那些沒有時尚基礎設計的同學，也能在短短三週內利用 AiDA 創作出有趣且富有想象力的設計。由於 AiDA 僅需連接網絡，學生們可以隨時隨地開髮自己的繫列，這與他們各自的創作週期相契合。最爲明顯的是，AiDA 強大的生成式 AI 繫統激髮了學生的創造力，使他們能夠設計出超出自我預期的作品。基於此次體驗，我總結了 AiDA 的影響，並用簡短的韻文表達： “無門檻易上手，隨時隨地用，激髮設計師的大膽創意。”',
+		IreneSiuInfo1: 'AiDA這個概念在時尚界有很多不同應用的可能性，還有待我們去了解和開發。',
+		JoyceChowInfo1: 'AiDA推動時尚產業進入一個新時代。 AiDA可以成功幫助推動環境保護，是對於時尚界而言其中一個全世界最重要的話題。',
+		CherylHoInfo1: '除了提供新元素去幫助我的設計過程 ，AiDA亦可以激發我的靈感，提供更多不同種類的比例和服裝組合建議給我。',
+		MinnaPolamInfo1: 'AiDA除了可以幫助我們襯搭不同的單品，更可以生成不同的顏色，令我們可以快速看到整個造型，所有單品都可以襯搭在一起，可看到不同顏色和圖案的效果。 而且AiDA亦在設計開發階段，通過學習我們的風格和品味，幫助我們加快設計過程。',
+	}
 }

src/pages/about-us/ecosystem.vue

@@ -16,8 +16,8 @@
 	<section class="ecosystem">
 		<div class="content">
 			<img src="https://code-create.com.hk/wp-content/uploads/2022/11/home_ai_logo.png" alt="">
-			<h2>REVITALISE THE FASHION ECOSYSTEM</h2>
+			<h2>{{ $t('aboutUs.ecosystem.Title') }}</h2>
-			<h4>through Artificial Intelligence (AI)</h4>
+			<h4>{{ $t('aboutUs.ecosystem.Desc') }}</h4>
 		</div>
 	</section>
 	<section class="ecosystem-video">
@@ -38,18 +38,34 @@
 			display: flex;
 			flex-direction: column;
 			align-items: center;
+			@media (max-width: 1000px) {
+				padding: 40px 40px 40px 40px;
+				max-width: 1000px;
+			}
 			> img{
 				width: 300px;
 				height: 300px;
 				margin-bottom: 20px;
+				@media (max-width: 1000px) {
+					width: 100px;
+					height: 100px;
+				}
 			}
 			> h2{
 				margin-bottom: 20px;
 				font-size: 24px;
+				@media (max-width: 1000px) {
+					font-size: 22px;
+					text-align: center;
+				}
 			}
 			> h4{
 				color: #333333;
 				font-size: 18px;
+				@media (max-width: 1000px) {
+					font-size: 16px;
+					text-align: center;
+				}
 			}
 
 		}
@@ -62,9 +78,16 @@
 			margin: 0 auto;
 			padding: 100px 0;
 			position: relative;
+			@media (max-width: 1000px) {
+				padding: 20px 40px;
+				max-width: 1000px;
+			}
 			> img{
 				width: 100%;
-				height: 675px;
+				aspect-ratio: 16/9;
+				@media (max-width: 1000px) {
+					height: auto;
+				}
 			}
 			> .icon-bofang{
 				font-size: 100px;

src/pages/about-us/index.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import Ecosystem from './ecosystem.vue'
 import Title from './title.vue'
 import Mission from './mission.vue'
 import OurTeam from './our-team.vue'
 import StrategicPartners from './strategic-partners.vue'
+import { useGlobalStore } from '@/stores/global'
+const globalStore = useGlobalStore()
+const windowWidth = computed(() => globalStore.state.windowWidth)
 defineExpose({})
 </script>
 <template>
 	<div class="about-us">
-		<div class="bg">
+		<div class="bg" v-show="windowWidth > 1000">
 			<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
 		</div>
 		<Title />

src/pages/about-us/mission.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
 import { gsap, TweenMax, TweenLite } from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import { useGlobalStore } from '@/stores/global'
+const globalStore = useGlobalStore()
+const windowWidth = computed(() => globalStore.state.windowWidth)
 //const props = defineProps({
 //})
 //const emit = defineEmits([
@@ -14,6 +17,9 @@ const imgBox = ref(null)
 let data = reactive({
 })
 onMounted(()=>{
+	if(windowWidth.value < 1000){
+		return
+	}
 	let dom = document.querySelector('body')
 	gsap.registerPlugin(ScrollTrigger);
 	let tl1 = gsap.timeline();
@@ -40,29 +46,29 @@ const {} = toRefs(data);
 <template>
 	<section class="mission">
 		<div class="content">
-			<h2>Mission</h2>
+			<h2>{{ $t('aboutUs.mission.Title') }}</h2>
-			<p>To be the world leading innovative leader in offering the state-of-the-art AI based solutions and systems to disrupt the fashion industry</p>
+			<p>{{ $t('aboutUs.mission.Desc') }}</p>
 		</div>
 	</section>
 	<section class="mission-focus-area">
 		<div class="content">
-			<h2>Focus Area</h2>
+			<h2>{{ $t('aboutUs.mission.FocusArea') }}</h2>
 			<div class="img-box" ref="imgBox">
 				<div class="img-item" ref="imgItem1">
 					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_01.png" alt="">
-					<h2>Elevate Operation Efficiency</h2>
+					<h2>{{ $t('aboutUs.mission.ElevateOperationEfficiency') }}</h2>
 				</div>
 				<div class="img-item" ref="imgItem2">
 					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_02-1-600x888.png" alt="">
-					<h2>Vertical Design Platform</h2>
+					<h2>{{ $t('aboutUs.mission.VerticalDesignPlatform') }}</h2>
 				</div>
 				<div class="img-item" ref="imgItem3">
 					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_03-1-600x887.png" alt="">
-					<h2>Education</h2>
+					<h2>{{ $t('aboutUs.mission.Education') }}</h2>
 				</div>
 				<div class="img-item" ref="imgItem4">
 					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_04-1-600x888.png" alt="">
-					<h2>Community</h2>
+					<h2>{{ $t('aboutUs.mission.Community') }}</h2>
 				</div>
 			</div>
 		</div>
@@ -80,6 +86,10 @@ const {} = toRefs(data);
 			flex-direction: column;
 			align-items: center;
 			text-align: center;
+			@media (max-width: 1000px) {
+				max-width: 1000px;
+				padding: 60px 20px 60px 20px;
+			}
 			> h2{
 				margin-bottom: 30px;
 				color: #000000;
@@ -87,10 +97,16 @@ const {} = toRefs(data);
 				font-weight: 600;
 				letter-spacing: 1px;
 				font-family: "Poppins", Sans-serif;
+				@media (max-width: 1000px) {
+					font-size: 28px;
+				}
 			}
 			> p{
 				color: #555;
 				font-size: 16px;
+				@media (max-width: 1000px) {
+					font-size: 12px;
+				}
 			}
 
 		}
@@ -105,6 +121,9 @@ const {} = toRefs(data);
 			align-items: center;
 			justify-content: center;
 			flex-direction: column;
+			@media (max-width: 1000px) {
+				max-width: 1000px;
+			}
 			> h2{
 				font-family: "Poppins", Sans-serif;
 				font-size: 40px;
@@ -112,6 +131,10 @@ const {} = toRefs(data);
 				letter-spacing: 1px;
 				color: #000000;
 				margin: 100px auto;
+				@media (max-width: 1000px) {
+					font-size: 28px;
+					margin: 60px auto;
+				}
 			}
 			> .img-box{
 				padding: 10px;
@@ -119,12 +142,22 @@ const {} = toRefs(data);
 				margin-bottom: 20px;
 				position: relative;
 				display: flex;
+				flex-wrap: wrap;
+				justify-content: center;
+				@media (max-width: 1000px) {
+					flex-wrap: wrap;
+					max-width: 330px;
+				}
 				> .img-item{
 					margin: 10px;
 					// width: 1120px;
 					width: 340px;
 					height: 503px;
 					position: relative;
+					@media (max-width: 1000px) {
+						width: 100%;
+						aspect-ratio: 165 / 244;
+					}
 					> h2{
 						font-family: "Poppins", Sans-serif;
 						font-weight: 600;

src/pages/about-us/our-team.vue

@@ -42,20 +42,22 @@ const {} = toRefs(data);
 <template>
 	<section class="our-team">
 		<div class="content">
-			<h2>Our Team</h2>
+			<h2>{{ $t('aboutUs.ourTeam.Title') }}</h2>
 		</div>
 	</section>
 	<section class="our-team-item bg1">
 		<div class="content">
 			<div class="text">
 				<p>
-					Prof Wong is Cheng Yik Hung Professor in Fashion of School of Fashion and Textiles at The Hong Kong Polytechnic University and currently serving as the Chief Executive Officer and Centre Director of 
+					{{ $t('aboutUs.ourTeam.ProfWong') }}
-					<a href="https://www.aidlab.hk/">Laboratory for Artificial Intelligence in Design (AiDLab)</a>.
+					<a href="https://www.aidlab.hk/">
-					He is one of the inventors of the technologies to be commercialized in the start-up.
+						{{ $t('aboutUs.ourTeam.ProfWongLink') }}
+					</a>.
+					{{ $t('aboutUs.ourTeam.ProfWongDesc') }}
 				</p>
 				<div class="bottom-text" ref="bottomText">
-					<h4 class="name">Prof Calvin WONG</h4>
+					<h4 class="name">{{ $t('aboutUs.ourTeam.ProfWongName') }}</h4>
-					<h4 class="position">Co-Founder and Technical Advisor</h4>
+					<h4 class="position">{{ $t('aboutUs.ourTeam.ProfWongPosition') }}</h4>
 				</div>
 			</div>
 			<div class="img">
@@ -70,11 +72,11 @@ const {} = toRefs(data);
 			</div>
 			<div class="text">
 				<p>
-					Ms Wong is an accomplished C-level business executive with extensive experience in the fashion and luxury goods industries, building business across China and APAC and leading operations for renowned fashion houses such as DFS USA, Lane Crawford, Burberry Asia, Brunello Cucinelli and Versace Asia Pacific.
+					{{ $t('aboutUs.ourTeam.MsWong') }}
 				</p>
 				<div class="bottom-text" ref="bottomText">
-					<h4 class="name">Ms Kim WONG</h4>
+					<h4 class="name">{{ $t('aboutUs.ourTeam.MsWongName') }}</h4>
-					<h4 class="position">Co-Founder and Chief Executive Officer</h4>
+					<h4 class="position">{{ $t('aboutUs.ourTeam.MsWongPosition') }}</h4>
 				</div>
 			</div>
 		</div>
@@ -83,11 +85,11 @@ const {} = toRefs(data);
 		<div class="content">
 			<div class="text">
 				<p>
-					Dr Zou is currently serving as Assistant Professor at School of Fashion and Textiles at The Hong Kong Polytechnic University. She is one of the inventors of the technologies to be commercialized in the start-up.
+					{{ $t('aboutUs.ourTeam.DrZou') }}
 				</p>
 				<div class="bottom-text" ref="bottomText">
-					<h4 class="name">Dr Aemika ZOU</h4>
+					<h4 class="name">{{ $t('aboutUs.ourTeam.DrZouName') }}</h4>
-					<h4 class="position">Technical Advisor</h4>
+					<h4 class="position">{{ $t('aboutUs.ourTeam.DrZouPosition') }}</h4>
 				</div>
 			</div>
 			<div class="img">
@@ -102,11 +104,11 @@ const {} = toRefs(data);
 			</div>
 			<div class="text">
 				<p>
-					Giovanni is currently the Chief Executive Officer Asia of Salvatore Ferragamo.
+					{{ $t('aboutUs.ourTeam.Giovanni') }}
 				</p>
 				<div class="bottom-text" ref="bottomText">
-					<h4 class="name">Mr Giovanni DI SALVO</h4>
+					<h4 class="name">{{ $t('aboutUs.ourTeam.GiovanniName') }}</h4>
-					<h4 class="position">Advisory Member</h4>
+					<h4 class="position">{{ $t('aboutUs.ourTeam.GiovanniPosition') }}</h4>
 				</div>
 			</div>
 		</div>
@@ -120,6 +122,9 @@ const {} = toRefs(data);
 			margin: 0 auto;
 			max-width: 730px;
 			padding: 100px 0px 100px 0px;
+			@media (max-width: 1000px) {
+				padding: 60px 0px 60px 0px;
+			}
 			> h2{
 				text-align: center;
 				margin-bottom: 30px;
@@ -128,11 +133,18 @@ const {} = toRefs(data);
 				font-weight: 600;
 				letter-spacing: 1px;
 				font-family: "Poppins", Sans-serif;
+				@media (max-width: 1000px) {
+					font-size: 28px;
+					margin-bottom: 0;
+				}
 			}
 		}
 	}
 	.our-team-item{
 		width: 100%;
+		@media (max-width: 1000px) {
+			padding: 40px 20px;
+		}
 		&.bg1{
 			background-color: #eeeeee;
 			.img{
@@ -150,13 +162,22 @@ const {} = toRefs(data);
 			max-width: 960px;
 			margin: 0 auto;
 			display: flex;
+			@media (max-width: 1000px) {
+				max-width: 330px;
+				flex-direction: column-reverse;
+				padding: 0;
+			}
 			> div{
 				width: 50%;
+				@media (max-width: 1000px) {
+					width: 100%;
+				}
 			}
 			> .text{
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
+				
 				> p{
 					font-family: "Poppins", Sans-serif;
 					font-size: 16px;
@@ -164,6 +185,9 @@ const {} = toRefs(data);
 					line-height: 1.6em;
 					color: #000000;
 					margin-bottom: 20px;
+					@media (max-width: 1000px) {
+						font-size: 12px;
+					}
 					> a{
 						color: inherit;
 						font-size: inherit;
@@ -180,6 +204,9 @@ const {} = toRefs(data);
 						color: #000000;
 						line-height: 1;
 						margin-bottom: 10px;
+						@media (max-width: 1000px) {
+							margin-bottom: 10px;
+						}
 					}
 					> .position{
 						font-family: "Poppins", Sans-serif;
@@ -197,6 +224,12 @@ const {} = toRefs(data);
 					height: 492px;
 					object-fit: cover;
 					max-width: 330px;
+					@media (max-width: 1000px) {
+						margin-bottom: 40px;
+						width: 100%;
+						height: auto;
+						aspect-ratio: 165 / 244;
+					}
 				}
 			}
 		}

src/pages/about-us/strategic-partners.vue

@@ -20,7 +20,7 @@ const {} = toRefs(data);
 <template>
 	<section class="strategic-partners">
 		<div class="content">
-			<h2 v-tween="{'y':'30px','opacity':0}">Strategic Partners</h2>
+			<h2 v-tween="{'y':'30px','opacity':0}">{{ $t('aboutUs.StrategicPartners') }}</h2>
 			<div class="img-box" v-tween="{'y':'30px','opacity':0}">
 				<a href="https://www.aidlab.hk/">
 					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_partners_01.png" alt="">
@@ -44,6 +44,10 @@ const {} = toRefs(data);
 			margin: 0 auto;
 			max-width: 1440px;
 			padding: 200px 0px 200px 0px;
+			@media (max-width: 1000px) {
+				padding: 60px 20px 60px 20px;
+				max-width: 1000px;
+			}
 			> h2{
 				font-family: "Poppins", Sans-serif;
 				font-size: 40px;
@@ -52,6 +56,9 @@ const {} = toRefs(data);
 				color: #000000;
 				margin-bottom: 30px;
 				text-align: center;
+				@media (max-width: 1000px) {
+					font-size: 28px;
+				}
 			}
 			> .img-box{
 				width: 1110px;
@@ -59,8 +66,20 @@ const {} = toRefs(data);
 				margin-top: 40px;
 				display: flex;
 				height: 100px;
+				@media (max-width: 1000px) {
+					height: auto;
+					flex-direction: column;
+					align-items: center;
+					width: 100%;
+
+				}
 				> a{
 					width: 25%;
+					@media (max-width: 1000px) {
+						text-align: center;
+						width: 100%;
+						height: 100px;
+					}
 					> img{
 						object-fit: contain;
 						height: 100%;
@@ -71,6 +90,10 @@ const {} = toRefs(data);
 					width: 25%;
 					object-fit: contain;
 					padding: 10px;
+					@media (max-width: 1000px) {
+						width: 100%;
+						height: 100px;
+					}
 				}
 			}
 		}

src/pages/about-us/title.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useGlobalStore } from '@/stores/global'
+const globalStore = useGlobalStore()
+const windowWidth = computed(() => globalStore.state.windowWidth)
 defineExpose({})
 </script>
 <template>
 	<section class="title-section">
 		<div class="content">
 			<div class="text">
-				<h1>ABOUT US</h1>
+				<h1>{{$t('aboutUs.Title')}}</h1>
+				<img v-show="windowWidth < 1000" src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
 			</div>
 		</div>
 	</section>
@@ -13,11 +18,19 @@ defineExpose({})
 <style lang="less" scoped>
 	.title-section{
 		width: 100%;
+	
 		> .content{
 			max-width: 1400px;
 			margin: 0 auto;
+			@media (max-width: 1000px) {
+				max-width: 1000px;
+			}
 			> .text{
 				padding: 200px 300px;
+				position: relative;
+				@media (max-width: 1000px) {
+					padding: 100px 15px;	
+				}
 				> h1{
 					text-align: center;
 					font-size: 64px;
@@ -25,6 +38,16 @@ defineExpose({})
 					line-height: 64px;
 					letter-spacing: 2px;
 					color: #FFFFFF;
+					@media (max-width: 1000px) {
+						font-size: 40px;
+					}
+				}
+				> img{
+					position: absolute;
+					top: 0;
+					right: 0;
+					z-index: -1;
+					height: 100%;
 				}
 			}
 		}

src/pages/events-detail/index.vue

@@ -82,6 +82,9 @@ defineExpose({})
 				margin-top: 100px;
 				padding: 10px;
 				max-width: 740px;
+				@media (max-width: 1000px) {
+					margin-top: 0px;
+				}
 				> .img{
 					margin-bottom: 20px;
 					img{
@@ -149,10 +152,12 @@ defineExpose({})
 				display: grid;
 				grid-template-columns: repeat(3, 1fr);
 				> .img-item{
+					aspect-ratio: 3 / 2;
 					img{
 						width: 100%;
 						height: 100%;
 						object-fit: cover;
+						display: flex;
 					}
 				}
 			}

src/pages/events/all-events.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+const emit = defineEmits(['clickItem'])
 const props = defineProps({
 	list: {
 		type: Array,
@@ -27,10 +28,10 @@ defineExpose({})
 							{{ item?.brief }}
 						</p>
 					</div>
-					<a href="#" class="read-more" target="_blank">
+					<div class="read-more" @click="$emit('clickItem', item)">
 						Read More
 						<span class="iconfont icon-direction-right"></span>
-					</a>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -44,17 +45,29 @@ defineExpose({})
 			margin: 0 auto;
 			padding: 40px 0px 40px 0px;
 			max-width: 1120px;
+			@media (max-width: 1000px) {
+				padding: 40px 10px;
+				width: 100%;
+			}
 			> h2{
 				text-align: center;
 				margin-bottom: 50px;
 				font-size: 40px;
 				color: #222222;
 				font-family: "Poppins", Sans-serif;
+				@media (max-width: 1000px) {
+					font-size: 28px;
+					margin-bottom: 40px;
+				}
 			}
 			> .all-events{
 			    display: grid;
 				grid-template-columns: repeat(3, minmax(100px, 1fr));
 				grid-gap: 20px 30px;
+				@media (max-width: 1000px) {
+					grid-template-columns: repeat(1, minmax(100px, 1fr));
+					grid-gap: 30px;
+				}
 				> .img-item{
 					&:hover{
 						> .img-box{
@@ -105,6 +118,9 @@ defineExpose({})
 						font-weight: 600;
 						line-height: 1;
 						margin-bottom: 10px;
+						@media (max-width: 1000px) {
+							font-size: 18px;
+						}
 						&:hover{
 							color: #626262;
 						}
@@ -121,6 +137,9 @@ defineExpose({})
 						overflow: hidden;
 						text-overflow: ellipsis;
 						word-break: break-word; 
+						@media (max-width: 1000px) {
+							font-size: 14px;
+						}
 					}
 					.read-more{
 						color: #9A2125;
@@ -128,6 +147,8 @@ defineExpose({})
 						font-size: 14px;
 						text-decoration: none;
 						position: relative;
+						width: min-content;
+						white-space: nowrap;
 						&:hover{
 							&::after{
 								left: 0;

src/pages/events/index.vue

@@ -7,7 +7,9 @@ import listZhCn from './list-zh-cn.js'
 import listZhTw from './list-zh-tw.js'
 import { LangType } from '../../lang'
 import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 const { locale } = useI18n()
+const router = useRouter()
 const allList = computed(() => {
 	if (locale.value === LangType.zhCn) {
 		return listZhCn
@@ -20,13 +22,18 @@ const allList = computed(() => {
 const swiperList = computed(() => {
 	return allList.value.slice(0, 5)
 })
+const goDetail = (item) => {
+	router.push({
+		path: `/events/${item.id}`,
+	})
+}
 defineExpose({})
 </script>
 <template>
 	<div class="events">
 		<div class="placeholder"></div>
-		<Swiper :list="swiperList" />
+		<Swiper :list="swiperList" @clickItem="goDetail" />
-		<AllEvents :list="allList" />
+		<AllEvents :list="allList" @clickItem="goDetail" />
 	</div>
 </template>
 <style lang="less" scoped>

src/pages/events/swiper.vue

@@ -8,6 +8,7 @@ const props = defineProps({
 		default: () => [],
 	},
 })
+const emit = defineEmits(['clickItem'])
 //const emit = defineEmits([
 //])
 
@@ -37,10 +38,10 @@ defineExpose({})
 						<div class="info">
 							{{ item?.brief }}		
 						</div>
-						<a href="#" class="read-more" target="_blank">
+						<div class="read-more" @click="$emit('clickItem', item)">
 							Read More
 							<span class="iconfont icon-direction-right"></span>
-						</a>
+						</div>
 					</div>
 				</div>
 				
@@ -66,6 +67,11 @@ defineExpose({})
 			margin: 0 auto;
 			max-width: 1120px;
 			position: relative;
+			@media (max-width: 1000px) {
+				max-width: 767px;
+				padding: 10px;
+				padding-top: 30px;
+			}
 			> .events-carousel{
 				.carousel-item{
 					overflow: hidden;
@@ -80,6 +86,9 @@ defineExpose({})
 						height: 600px;
 						width: 100%;
 						overflow: hidden;
+						@media (max-width: 1000px) {
+							height: 500px;
+						}
 						img{
 							width: 100%;							
 							height: 100%;
@@ -95,6 +104,9 @@ defineExpose({})
 						background-color: #fff;
 						position: relative;
 						z-index: 22;
+						@media (max-width: 1000px) {
+							width: calc(100% - 50px);
+						}
 						.title{
 							font-family: Poppins, sans-serif;
 							font-weight: 600;
@@ -121,6 +133,8 @@ defineExpose({})
 							font-size: 14px;
 							text-decoration: none;
 							position: relative;
+							width: min-content;
+							white-space: nowrap;
 							&:hover{
 								&::after{
 									left: 0;
@@ -158,8 +172,16 @@ defineExpose({})
 				justify-content: center;
 				position: absolute;
 				bottom: 0;
+				z-index: 2222;
+				@media (max-width: 1000px) {
+					width: 40px;
+					height: 40px;
+				}
 				> span{
 					font-size: 38px;
+					@media (max-width: 1000px) {
+						font-size: 24px;
+					}
 				}
 				&:hover{
 					border: 1px solid #000;
@@ -167,6 +189,9 @@ defineExpose({})
 			}
 			.prev-page{
 				right: 112px;
+				@media (max-width: 1000px) {
+					right: 50px;
+				}
 			}
 			.next-page{
 				right: 0;

src/pages/help-centre/faq.vue

@@ -1,43 +1,47 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref,computed } from "vue";
+import { useI18n } from "vue-i18n";
 // 使用接口定义
-const faqList = ref([
+const { t } = useI18n()
-	{
+const faqList = computed(()=>{
-		id: 1,
+	return [
-		title: 'What are the minimum, recommended system requirements?',
+		{
-		content: 'As AiDA is a cloud-based system, only stable internet access is required.',
+			id: 1,
-	},
+			title: t('helpCentre.faqItem1'),
-	{
+			content: t('helpCentre.faqItem1Content'),
-		id: 2,
+		},
-		title: 'Does AiDA run on both a PC & a MAC?',
+		{
-		content: 'Yes, AiDA supports both PC & MAC.',
+			id: 2,
-	},
+			title: t('helpCentre.faqItem2'),
-	{
+			content: t('helpCentre.faqItem2Content'),
-		id: 3,
+		},
-		title: 'Does AiDA run on an iPad?',
+		{
-		content: 'Yes, AiDA can be run on an iPad.',
+			id: 3,
-	},
+			title: t('helpCentre.faqItem3'),
-	{
+			content: t('helpCentre.faqItem3Content'),
-		id: 4,
+		},
-		title: 'What File Types it supports?',
+		{
-		content: 'The image file types that can be uploaded into AiDA: jpeg, jpg, png',
+			id: 4,
-	},
+			title: t('helpCentre.faqItem4'),
-	{
+			content: t('helpCentre.faqItem4Content'),
-		id: 5,
+		},
-		title: 'In what languages is AiDA system available',
+		{
-		content: 'Currently, AiDA is available in English',
+			id: 5,
-	},
+			title: t('helpCentre.faqItem5'),
-	{
+			content: t('helpCentre.faqItem5Content'),
-		id: 6,
+		},
-		title: 'Can I receive my invoice?',
+		{
-		content: 'The invoice will be sent to your registered mailbox 1 months before (for paid subscription) with the reminder email.',
+			id: 6,
-	},
+			title: t('helpCentre.faqItem6'),
-	{
+			content: t('helpCentre.faqItem6Content'),
-		id: 7,
+		},
-		title: 'How do I change my password?',
+		{
-		content: 'You could change your password after login to your account in “My Account” page “Account details” part.',
+			id: 7,
-	},
+			title: t('helpCentre.faqItem7'),
-])
+			content: t('helpCentre.faqItem7Content'),
+		},
+	]
+})
 const openIdList = ref([])
 const openInfo = (id) => {
 	if(openIdList.value.includes(id)){
@@ -51,7 +55,7 @@ defineExpose({})
 <template>
 	<section class="faq">
 		<div class="content">
-			<h2>FAQ</h2>
+			<h2>{{ t('helpCentre.FAQ') }}</h2>
 			<div class="faq-list">
 				<div v-for="item in faqList" :key="item.id" class="faq-item">
 					<h2 @click="openInfo(item.id)">
@@ -71,10 +75,15 @@ defineExpose({})
 		width: 100%;
 		padding: 60px 0;
 		background-color: #f9f9f9;
-		
+		@media (max-width: 1000px) {
+			padding: 40px 0;
+		}
 		> .content{
 			max-width: 1140px;
 			margin: 0 auto;
+			@media (max-width: 1000px) {
+				max-width: 1000px;
+			}
 			> h2{
 				
 				font-family: "Poppins", Sans-serif;
@@ -85,9 +94,15 @@ defineExpose({})
 				margin-bottom: 40px;
 				line-height: 1;
 				text-align: center;
+				@media (max-width: 1000px) {
+					font-size: 28px;
+				}
 			}
 			
 			> .faq-list{
+				@media (max-width: 1000px) {
+					padding: 0 20px;
+				}
 				> .faq-item{
 					border-bottom: 1px solid #d5d8dc;
 					> h2{
@@ -101,6 +116,10 @@ defineExpose({})
 						align-items: flex-start;
 						justify-content: space-between;
 						cursor: pointer;
+						@media (max-width: 1000px) {
+							padding: 20px 0;
+							font-size: 16px;
+						}
 						> span{
 							font-size: 14px;
 							transition: all .3s;
@@ -123,6 +142,9 @@ defineExpose({})
 							font-size: 14px;
 							line-height: 20px;
 							margin-bottom: 20px;
+							@media (max-width: 1000px) {
+								padding: 12px;
+							}
 						}
 					}
 				}

src/pages/help-centre/index.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import Title from './title.vue'
 import Faq from './faq.vue'
+import { useGlobalStore } from '@/stores/global'
+const globalStore = useGlobalStore()
+const windowWidth = computed(() => globalStore.state.windowWidth)
+
 defineExpose({})
 </script>
 <template>
 	<div class="about-us">
-		<div class="bg">
+		<div class="bg" v-show="windowWidth > 1000">
 			<img src="https://code-create.com.hk/wp-content/uploads/2022/11/helpcentre_banner-1.jpg" alt="">
 		</div>
 		<Title />

src/pages/help-centre/title.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useGlobalStore } from '@/stores/global'
+const globalStore = useGlobalStore()
+const windowWidth = computed(() => globalStore.state.windowWidth)
 defineExpose({})
 </script>
 <template>
 	<section class="title-section">
 		<div class="content">
 			<div class="text">
-				<h1>HELP CENTRE</h1>
+				<h1>{{ $t('helpCentre.Title') }}</h1>
+				<img v-show="windowWidth < 1000" src="https://code-create.com.hk/wp-content/uploads/2022/11/helpcentre_banner-1.jpg" alt="">
 			</div>
 		</div>
 	</section>
@@ -16,8 +21,15 @@ defineExpose({})
 		> .content{
 			max-width: 1400px;
 			margin: 0 auto;
+			@media (max-width: 1000px) {
+				max-width: 1000px;
+			}
 			> .text{
 				padding: 200px 300px;
+				position: relative;
+				@media (max-width: 1000px) {
+					padding: 100px 15px;	
+				}
 				> h1{
 					text-align: center;
 					font-size: 64px;
@@ -25,6 +37,18 @@ defineExpose({})
 					line-height: 64px;
 					letter-spacing: 2px;
 					color: #FFFFFF;
+					@media (max-width: 1000px) {
+						font-size: 40px;
+					}
+				}
+				> img{
+					position: absolute;
+					top: 0;
+					right: 0;
+					z-index: -1;
+					height: 100%;
+					width: 100%;
+					object-fit: cover;
 				}
 			}
 		}

src/pages/user-stories/user-list.vue

@@ -1,116 +1,122 @@
 <script setup lang="ts">
-	import { ref } from "vue";
+	import { ref,computed } from "vue";
 	import MyEvent from "@/tools/myEvents";
+	import { useI18n } from "vue-i18n";
+	const { t } = useI18n();
 	const playVideo = (item)=>{
 		MyEvent.emit("playVideo",{
 			url: item.videoUrl,
 			poster: item.imgUrl,
 		});
 	}
-	const list = ref([
+	const list = computed(()=>{
-		{
+		return[
-			imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XULULU.png',
+			{
-			videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XULULU.mp4',
+				imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XULULU.png',
-			name: 'XULULU',
+				videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XULULU.mp4',
-			textList: [
+				name: 'XULULU',
-				'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.',
+				textList: [
-				'This high level of productivity makes AiDA an invaluable tool for designers, and the vast array of designs it produces also provides valuable learning opportunities. By analyzing and appreciating these designs, designers can gain inspiration and enhance their own creative skills.',
+					t('userStories.XULULUInfo1'),
-				'Therefore, I believe that in the future, AiDA has the potential to become an essential tool for designers, driving innovation and transformation in the fashion industry.'
+					t('userStories.XULULUInfo2'),
-			],
+					t('userStories.XULULUInfo3'),
-		},
+				],
-		{
+			},
-			imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yiu-Ching-Yau.png',
+			{
-			videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yiu-Ching-Yau1.mp4',
+				imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yiu-Ching-Yau.png',
-			name: 'Yiu Ching Yau',
+				videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yiu-Ching-Yau1.mp4',
-			textList: [
+				name: 'Yiu Ching Yau',
-				'Throughout the process of using AiDA, I deeply felt the significant impact of artificial intelligence on the future society. AI has provided me with a lot of innovative ideas for clothing design, such as the use of different garments, the combination of silhouettes and the matching of materials. Because of the intelligence of AI, I have received a lot of inspiration. AI’s intelligence has provided me with a lot of inspiration that I never thought of, and its convenient and fast design methods have also greatly promoted my creative process.',
+				textList: [
-			],
+					t('userStories.YiuChingYauInfo1'),
-		},
+				],
-		{
+			},
-			imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XIEYAUKIT-scaled.png',
+			{
-			videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XIEYAUKIT.mp4',
+				imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XIEYAUKIT-scaled.png',
-			name: 'XIEYAUKIT',
+				videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XIEYAUKIT.mp4',
-			textList: [
+				name: 'XIEYAUKIT',
-				'Using AiDA has been a transformative experience in my design journey. The integration of technology and creativity has allowed me to explore new dimensions in my work. One of the most significant advantages of AiDA is its ability to automate repetitive tasks, such as creating style sketches. This automation has freed up valuable time, enabling me to focus on the more creative aspects of my designs. ',
+				textList: [
-				'Reflecting on my experience with AiDA, I feel a renewed sense of excitement about the future of design. It has not only improved my skills but also opened my eyes to the endless possibilities that lie ahead when creativity meets technology.',
+					t('userStories.XIEYAUKITInfo1'),
-			],
+					t('userStories.XIEYAUKITInfo2'),
-		},
+				],
-		{
+			},
-			imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yuzhi-Lai-scaled.jpg',
+			{
-			videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yuzhi-Lai1.mp4',
+				imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yuzhi-Lai-scaled.jpg',
-			name: 'Yuzhi Lai',
+				videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yuzhi-Lai1.mp4',
-			textList: [
+				name: 'Yuzhi Lai',
-				'During the process of using AiDA for fashion design, I experienced unprecedented convenience and efficiency. Especially in the stages of color extraction and generating design sketches, as well as further developing them into fashion rendering image, the powerful capabilities of AI technology left me deeply impressed.',
+				textList: [
-				'Using AiDA for fashion design is a highly enjoyable and innovative experience. Despite some limitations, I still believe that AiDA has brought revolutionary changes to the field of fashion design. Its efficiency and convenience have greatly shortened the design cycle. I look forward to future breakthroughs in AiDA and the emergence of more stunning design works.',
+					t('userStories.YuzhiLaiInfo1'),
-			],
+					t('userStories.YuzhiLaiInfo2'),
-		},
+				],
-		{
+			},
-			imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Cheung-Tsz-Ching.png',
+			{
-			videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Cheung-Tsz-Ching.mp4',
+				imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Cheung-Tsz-Ching.png',
-			name: 'Cheung Tsz Ching（Bobo）',
+				videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Cheung-Tsz-Ching.mp4',
-			textList: [
+				name: 'Cheung Tsz Ching（Bobo）',
-				'Through this competition, I had the opportunity to explore many different features of AiDA. Using AiDA allows me to design a collection step by step, starting from a moodboard. It provides the ability to edit outfit details, such as prints and colors. This feature makes it easier for the designs to align with my desired outcomes. Once completed, AiDA can generate real-life versions of the designs, making my work feel more complete. ',
+				textList: [
-			],
+					t('userStories.CheungTszChingInfo1'),
-		},
+				],
-		{
+			},
-			imgUrl: 'https://code-create.com.hk/wp-content/uploads/2023/01/Aidlab_interview02_INJURY_thumb.jpg',
+			{
-			videoUrl: 'https://code-create.com.hk/wp-content/uploads/2026/03/UserStory3.mp4',
+				imgUrl: 'https://code-create.com.hk/wp-content/uploads/2023/01/Aidlab_interview02_INJURY_thumb.jpg',
-			name: 'INJURY from Australia',
+				videoUrl: 'https://code-create.com.hk/wp-content/uploads/2026/03/UserStory3.mp4',
-			textList: [
+				name: 'INJURY from Australia',
-				'Regarding the user experience of AiDA, we would like to use five keywords to describe, which are “Surprise” “Easy”, “Unlimited”, “Automatic” and “Fast”.',
+				textList: [
-			],
+					t('userStories.INJURYInfo1'),
-		},
+				],
-		{
+			},
-			imgUrl: 'https://code-create.com.hk/wp-content/uploads/2023/01/Aidlab_interview02_Jae_thumb.jpg',
+			{
-			videoUrl: 'https://code-create.com.hk/wp-content/uploads/2026/03/UserStory2.mp4',
+				imgUrl: 'https://code-create.com.hk/wp-content/uploads/2023/01/Aidlab_interview02_Jae_thumb.jpg',
-			name: 'BESFXXK from Korea',
+				videoUrl: 'https://code-create.com.hk/wp-content/uploads/2026/03/UserStory2.mp4',
-			textList: [
+				name: 'BESFXXK from Korea',
-				'Those keywords that come to my mind when describing the systems are “Safe”, “Fast”, “Friendly”, “Smart” and “Futuristic”',
+				textList: [
-			],
+					t('userStories.BESFXXKInfo1'),
-		},
+				],
-		{
+			},
-			imgUrl: 'https://code-create.com.hk/wp-content/uploads/2023/01/Aidlab_interview02_Mountain_thumb.jpg',
+			{
-			videoUrl: 'https://code-create.com.hk/wp-content/uploads/2026/03/UserStory1.mp4',
+				imgUrl: 'https://code-create.com.hk/wp-content/uploads/2023/01/Aidlab_interview02_Mountain_thumb.jpg',
-			name: 'Mountain Yam from Hong Kong',
+				videoUrl: 'https://code-create.com.hk/wp-content/uploads/2026/03/UserStory1.mp4',
-			textList: [
+				name: 'Mountain Yam from Hong Kong',
-				'The process is “Simple and user-friendly”, and the system is “Efficient”, “Fruitful”, “Innovative” and “Solidarity”.',
+				textList: [
-			],
+					t('userStories.MountainYamInfo1'),
-		},
+				],
-	])
+			},
-	const userList = ref([
+		]
-		{
+	})
-			profile:'https://code-create.com.hk/wp-content/uploads/2025/04/WhatsApp-Image-2025-04-23-at-18.36.16_740726a9-794x1024.jpg',
+	const userList = computed(()=>{
-			name: 'Prof. Jung',
+		return [
-			school: 'Hanyang University Department of Clothing and Textiles',
+			{
-			info: 'In the “Digital Fashion Content Development” course, I’ve integrated the AiDA system into a 4-week mini-project with the goal of designing a “My Own Capsule Collection.” The class included a diverse group of students. Even those without prior knowledge of fashion design were able to create fun and imaginative designs within just three weeks using AiDA. Most notably, AiDA’s powerful generative AI system stimulated students’ creativity, enabling them to produce designs beyond what they thought they were capable of. Based on this experience, I summarized the impact of AiDA through a short rhyme: “No barrier to begin — that’s for sure, Ready to use everywhere, Boosting designer’s flair to dare.”',
+				profile:'https://code-create.com.hk/wp-content/uploads/2025/04/WhatsApp-Image-2025-04-23-at-18.36.16_740726a9-794x1024.jpg',
-		},
+				name: 'Prof. Jung',
-		{
+				school: t('userStories.ProfJungSchool'),
-			profile:'https://code-create.com.hk/wp-content/uploads/2025/04/userstory_irene_siu-1-150x150.jpg',
+				info: t('userStories.ProfJungInfo1'),
-			name: 'Irene Siu',
+			},
-			info: 'The concept of AiDA has many potential applications in the fashion industry, which are still waiting for us to discover and develop.',
+			{
-		},
+				profile:'https://code-create.com.hk/wp-content/uploads/2025/04/userstory_irene_siu-1-150x150.jpg',
-		{
+				name: 'Irene Siu',
-			profile:'https://code-create.com.hk/wp-content/uploads/2025/04/userstory_joyce_chow-150x150.jpg',
+				info: t('userStories.IreneSiuInfo1'),
-			name: 'Joyce Chow',
+			},
-			info: 'AiDA lets the fashion industry go into a new generation. A successful AiDA can help to push – eco-friendliness, which is one of the most crucial worldwide topics in the fashion industry.',
+			{
-		},
+				profile:'https://code-create.com.hk/wp-content/uploads/2025/04/userstory_joyce_chow-150x150.jpg',
-		{
+				name: 'Joyce Chow',
-			profile:'https://code-create.com.hk/wp-content/uploads/2023/02/userstory_cheryl_ho-150x150.jpg',
+				info: t('userStories.JoyceChowInfo1'),
-			name: 'Cheryl Ho',
+			},
-			info: 'Apart from providing new elements to inform my design process, AiDA also inspires me by offering much more variety of proportions and outfit combinations.',
+			{
-		},
+				profile:'https://code-create.com.hk/wp-content/uploads/2023/02/userstory_cheryl_ho-150x150.jpg',
-		{
+				name: 'Cheryl Ho',
-			profile:'https://code-create.com.hk/wp-content/uploads/2023/02/userstory_minna_n_polam-150x150.jpg',
+				info: t('userStories.CherylHoInfo1'),
-			name: 'Minna & Polam',
+			},
-			info: 'AiDA helps us mix and match each item and generate colours so we can quickly see what it will look like – all items match together, and the effects come with different colours and patterns. It also assists us at the design development stage by learning our style and taste.',
+			{
-		},
+				profile:'https://code-create.com.hk/wp-content/uploads/2023/02/userstory_minna_n_polam-150x150.jpg',
-	])
+				name: 'Minna & Polam',
+				info: t('userStories.MinnaPolamInfo1'),
+			},
+		]
+	})
 	defineExpose({})
 </script>
 <template>
 	<section class="user-list">
 		<div class="content">
-			<h2>User Stories</h2>
+			<h2>{{ $t('userStories.Title') }}</h2>
 		</div>
 	</section>
 	<section class="user-item" v-for="item in list" :key="item.name">
@@ -159,6 +165,10 @@
 			margin: 0 auto;
 			max-width: 1140px;
 			padding: 100px 0px 100px 0px;
+			@media (max-width: 1000px) {
+				padding: 10px;
+				padding-top: 50px;
+			}
 			> h2{
 				text-align: center;
 				width: 100%;
@@ -166,6 +176,9 @@
 				font-weight: 600;
 				letter-spacing: 1px;
 				color: #000000;
+				@media (max-width: 1000px) {
+					padding: 7px 15px;
+				}
 			}
 		}
 	}
@@ -175,6 +188,9 @@
 		&:nth-child(2n){
 			> .content{
 				flex-direction: row-reverse;
+				@media (max-width: 1000px) {
+					flex-direction: column;
+				}
 			}
 		}
 		> .content{
@@ -182,9 +198,17 @@
 			max-width: 1140px;
 			padding: 40px 0;
 			display: flex;
+			@media (max-width: 1000px) {
+				padding: 20px 0;
+				flex-direction: column-reverse;
+				max-width: 1000px;
+			}
 			> div{
 				width: 50%;
 				padding: 20px;
+				@media (max-width: 1000px) {
+					width: 100%;
+				}
 			}
 			> .video-box{
 				display: flex;
@@ -264,6 +288,9 @@
 			padding: 20px;	
 		    display: flex;
 		    flex-wrap: wrap;
+			@media (max-width: 1000px) {
+				max-width: 1000px;
+			}
 			> .item{
 				margin: 40px 0;
 				width: 50%;
@@ -274,6 +301,10 @@
 				&:nth-child(1){
 					width: 100%;
 				}
+				@media (max-width: 1000px) {
+					width: 100%;
+					margin: 0;
+				}
 				> .img-box{
 					width: 100%;
 					height: 40px;