From fe205f4920191e3c6f4ebdd8694d151523abe0ed Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Wed, 20 May 2026 10:52:33 +0800
Subject: [PATCH] help-centre

---
 src/pages/help-centre/index.vue      |   0
 src/pages/user-stories/index.vue     |   3 +-
 src/pages/user-stories/user-list.vue | 337 +++++++++++++++++++++++++++
 src/routes.ts                        |   4 +
 4 files changed, 343 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/help-centre/index.vue
 create mode 100644 src/pages/user-stories/user-list.vue

diff --git a/src/pages/help-centre/index.vue b/src/pages/help-centre/index.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/user-stories/index.vue b/src/pages/user-stories/index.vue
index 96afefa..55ebaec 100644
--- a/src/pages/user-stories/index.vue
+++ b/src/pages/user-stories/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-
+import UserList from './user-list.vue'
 defineExpose({})
 </script>
 <template>
 	<div class="user-stores">
 		<div class="placeholder"></div>
+		<UserList></UserList>
 	</div>
 </template>
 <style lang="less" scoped>
diff --git a/src/pages/user-stories/user-list.vue b/src/pages/user-stories/user-list.vue
new file mode 100644
index 0000000..4d78968
--- /dev/null
+++ b/src/pages/user-stories/user-list.vue
@@ -0,0 +1,337 @@
+<script setup lang="ts">
+	import { ref } from "vue";
+	import MyEvent from "@/directives/myEvents";
+	const playVideo = (item)=>{
+		MyEvent.emit("playVideo",{
+			url: item.videoUrl,
+			poster: item.imgUrl,
+		});
+	}
+	const list = ref([
+		{
+			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',
+			name: 'XULULU',
+			textList: [
+				'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.',
+				'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.',
+				'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.'
+			],
+		},
+		{
+			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',
+			name: 'Yiu Ching Yau',
+			textList: [
+				'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.',
+			],
+		},
+		{
+			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',
+			name: 'XIEYAUKIT',
+			textList: [
+				'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. ',
+				'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.',
+			],
+		},
+		{
+			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',
+			name: 'Yuzhi Lai',
+			textList: [
+				'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.',
+				'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.',
+			],
+		},
+		{
+			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',
+			name: 'Cheung Tsz Ching（Bobo）',
+			textList: [
+				'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. ',
+			],
+		},
+		{
+			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',
+			name: 'INJURY from Australia',
+			textList: [
+				'Regarding the user experience of AiDA, we would like to use five keywords to describe, which are “Surprise” “Easy”, “Unlimited”, “Automatic” and “Fast”.',
+			],
+		},
+		{
+			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',
+			name: 'BESFXXK from Korea',
+			textList: [
+				'Those keywords that come to my mind when describing the systems are “Safe”, “Fast”, “Friendly”, “Smart” and “Futuristic”',
+			],
+		},
+		{
+			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',
+			name: 'Mountain Yam from Hong Kong',
+			textList: [
+				'The process is “Simple and user-friendly”, and the system is “Efficient”, “Fruitful”, “Innovative” and “Solidarity”.',
+			],
+		},
+	])
+	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',
+			name: 'Prof. Jung',
+			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/userstory_irene_siu-1-150x150.jpg',
+			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_joyce_chow-150x150.jpg',
+			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/2023/02/userstory_cheryl_ho-150x150.jpg',
+			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_minna_n_polam-150x150.jpg',
+			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.',
+		},
+	])
+	defineExpose({})
+</script>
+<template>
+	<section class="user-list">
+		<div class="content">
+			<h2>User Stories</h2>
+		</div>
+	</section>
+	<section class="user-item" v-for="item in list" :key="item.name">
+		<div class="content">
+			<div class="video-box">
+				<img :src="item.imgUrl" alt="">
+				<span class="iconfont icon-bofang" @click="playVideo(item)"></span>
+			</div>
+			<div class="text-box">
+				<div class="text-content">
+					<div class="icon">
+						<span class="iconfont icon-quotesUp-copy"></span>
+					</div>
+					<h2 v-tween="{opacity:0,y:'30px'}">{{item.name}}</h2>
+					<div v-tween="{opacity:0}">
+						<p v-for="text in item.textList" :key="text">{{text}}</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+	<section class="user2-type">
+		<div class="content">
+			<div class="item" v-for="item in userList" :key="item.name">
+				<div class="img-box">
+					<img :src="item.profile" alt="">
+				</div>
+				<div class="box">
+					<div class="icon">
+						<span class="iconfont icon-quotesUp-copy"></span>
+					</div>
+					<h2 class="name" v-tween="{opacity:0,y:'30px'}">{{item.name}}</h2>
+					<h2 class="school" v-tween="{opacity:0,y:'30px'}" v-if="item?.school">{{item?.school}}</h2>
+					<p v-tween="{opacity:0}">{{item.info}}</p>
+				</div>
+			</div>
+		</div>
+	</section>
+
+</template>
+<style lang="less" scoped>
+	.user-list{
+		width: 100%;
+		background-color: #f9f9f9;
+		> .content{
+			margin: 0 auto;
+			max-width: 1140px;
+			padding: 100px 0px 100px 0px;
+			> h2{
+				text-align: center;
+				width: 100%;
+				font-size: 40px;
+				font-weight: 600;
+				letter-spacing: 1px;
+				color: #000000;
+			}
+		}
+	}
+	.user-item{
+		background-color: #f9f9f9;
+		width: 100%;
+		&:nth-child(2n){
+			> .content{
+				flex-direction: row-reverse;
+			}
+		}
+		> .content{
+			margin: 0 auto;
+			max-width: 1140px;
+			padding: 40px 0;
+			display: flex;
+			> div{
+				width: 50%;
+				padding: 20px;
+			}
+			> .video-box{
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				position: relative;
+				> img{
+					aspect-ratio: 1.777 / 1;
+					width: 100%;
+					object-fit: cover;
+				}
+				> .icon-bofang{
+					font-size: 100px;
+					color: #fff;
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%,-50%);
+					// box-shadow: 0 0 10px #fff;
+					filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, .5));
+					cursor: pointer;
+				}
+			}
+			> .text-box{
+				display: flex;
+				align-items: center;
+				> .text-content{
+					box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+					padding: 20px 20px 20px 20px;
+					border-radius: 20px;
+					text-align: center;
+					> .icon{
+						margin-bottom: 20px;
+						height: 25px;
+						width: 100%;
+						display: flex;
+						align-items: flex-end; 
+						justify-content: center;
+						> span{
+							width: 80px;
+							height: 80px;
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							background-color: #86040e;
+							border-radius: 50%;
+							font-size: 40px;
+							color: #fff;
+						}
+					}
+					> h2{
+						margin-bottom: 20px;
+						font-size: 19px;
+						font-weight: 600;
+						line-height: 20px;
+						color: #222222;
+					}
+					> div{
+						> p{
+							margin-bottom: 20px;
+							font-size: 14px;
+							font-weight: 400;
+							color: #333333;
+							line-height: 20px;
+						}
+					}
+				}
+			}
+		}
+	}
+	.user2-type{
+		background-color: #f9f9f9;
+		width: 100%;
+		> .content{
+			margin: 0 auto;
+			max-width: 1140px;
+			padding: 20px;	
+		    display: flex;
+		    flex-wrap: wrap;
+			> .item{
+				margin: 40px 0;
+				width: 50%;
+				padding: 20px;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				&:nth-child(1){
+					width: 100%;
+				}
+				> .img-box{
+					width: 100%;
+					height: 40px;
+					margin-bottom: 20px;
+					text-align: start;
+					> img{
+						width: 100px;
+						height: 100px;
+						border-radius: 50%;
+						object-fit: cover;
+						object-position: top right;
+						box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
+					}
+				}
+				> .box{
+					border-radius: 20px;
+					box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+					text-align: center;
+					padding: 20px;
+					> .icon{
+						width: 100%;
+						height: 15px;
+						display: flex;
+						align-items: flex-end; 
+						> span{
+							margin: -30px 0px 0px 60px;
+							width: 40px;
+							height: 40px;
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							background-color: #86040e;
+							border-radius: 50%;
+							font-size: 20px;
+							color: #fff;
+						}
+					}
+					> h2{
+						margin-bottom: 20px;
+						font-size: 19px;
+						font-family: "Poppins", Sans-serif;
+						color: #222222;
+						line-height: 1;
+						font-weight: 600;
+						letter-spacing: 2px;
+						&.school{
+							font-size: 15px;
+						}
+					}
+					> p{
+						color: #333333;
+						font-size: 14px;
+						font-weight: 400;
+						line-height: 20px;
+						margin-bottom: 20px;
+					}
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/routes.ts b/src/routes.ts
index 690625a..dbab3a7 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -45,6 +45,10 @@ export const routes: RouteRecordRaw[] = [
 				name: 'user-stories',
 				component: () => import('./pages/user-stories/index.vue')
 			},
+			{	path: 'help-centre',
+				name: 'help-centre',
+				component: () => import('./pages/help-centre/index.vue')
+			},
 			{
 				path: 'my-account',
 				name: 'MyAccount',