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

src/lang/zh-cn.ts

@@ -64,9 +64,9 @@ export default {
 	},
 	Aida: {
 		description:
-			'AiDA 3.1 是一项开创性的技术，它使时装设计师能够基于自己的创意灵感，借助人工智能创作原创设计。设计师只需点击几下，即可选择或调整方案来开发时装系列，为传统且耗时的设计工作室流程注入敏捷性、高效性和灵活性。',
+			'AiDA 3.1，一项首次上市的技术，使时装设计师能够根据他们的创意灵感，与AI合作创造原创设计。 只需简单数下点击，设计师便可轻松地在时装系列中进行微调或加入个人化选项，以灵活、高效及别具弹性的方式提升传统而密集的工作室设计流程。',
 		slogan: '互动性人工智能时装设计助理',
-		desc: 'AiDA 3.1 是一项开创性的技术，它使时装设计师能够基于自己的创意灵感，借助人工智能创作原创设计。设计师只需点击几下，即可选择或调整方案来开发时装系列，为传统且耗时的设计工作室流程注入敏捷性、高效性和灵活性。',
+		desc: 'AiDA 3.1，一项首次上市的技术，使时装设计师能够根据他们的创意灵感，与AI合作创造原创设计。 只需简单数下点击，设计师便可轻松地在时装系列中进行微调或加入个人化选项，以灵活、高效及别具弹性的方式提升传统而密集的工作室设计流程。',
 		annual: '年费: $5,000 HKD / 年(50000积分)',
 		monthly: '月费: $500 HKD / 月 (3500 积分)',
 		monthlyCheaper: '月费: $100 HKD / 月 (500 积分)',
@@ -98,8 +98,8 @@ export default {
 		trial: '试用',
 		days: '7天免费试用',
 		start: '开始使用',
-		corporate: '企业',
+		corporate: '公司账户',
-		customised: '定制计划',
+		customised: '客制方案',
 		contactUs: '联系我们',
 		termsAndConditions: '条款及细则',
 		agreement: '订阅协议'
@@ -148,7 +148,7 @@ export default {
 			ProfWongPosition: '联合创办人和技术顾问',
 			MsWong: '王女士在时尚和奢侈品行业拥有丰富的高阶管理经验，于中国内地和亚太地区建立业务，并带领知名时装公司的营运，包括DFS USA、Lane Crawford、Burberry Asia、Brunello Cucinelli和Versace Asia Pacific。',
 			MsWongName: '王剑虹女士',
-			MsWongPosition: '联合创办人及行政总裁r',
+			MsWongPosition: '联合创办人及行政总裁',
 			DrZou: '邹博士目前是人工智能设计研究所的技术项目经理。 她是Code Create商业化技术的发明者之一。',
 			DrZouName: '邹星星博士',
 			DrZouPosition: '技术顾问',

src/lang/zh-tw.ts

@@ -62,6 +62,48 @@ export default {
 		EmailInputTitle: '有興趣使用精準時裝屬性及顏色辨識系統 (Mixi)？',
 		EmailInputTip: '請留下電郵地址，以獲取度身訂造的計劃'
 	},
+	Aida: {
+		description:
+			'AiDA 3.1，一項首次上市的技術，使時裝設計師能夠根據他們的創意靈感，與AI合作創造原創設計。 只需簡單數下點擊，設計師便可輕鬆地在時裝系列中進行微調或加入個人化選項，以靈活、高效及別具彈性的方式提升傳統而密集的工作室設計流程。',
+		slogan: '互動性人工智能時裝設計助理',
+		desc: 'AiDA 3.1，一項首次上市的技術，使時裝設計師能夠根據他們的創意靈感，與AI合作創造原創設計。 只需簡單數下點擊，設計師便可輕鬆地在時裝系列中進行微調或加入個人化選項，以靈活、高效及別具彈性的方式提升傳統而密集的工作室設計流程。',
+		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: '常見問題',

src/pages/about-us/ecosystem.vue

@@ -6,8 +6,6 @@
 	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

@@ -1,15 +1,11 @@
 <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'
 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'),
@@ -25,9 +21,6 @@ defineExpose({})
 </script>
 <template>
 	<div class="about-us">
-		<div class="bg" v-show="windowWidth > 1000">
-			<img src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/12/about_banner-1.jpg" alt="">
-		</div>
 		<Title />
 		<Ecosystem />
 		<Mission />
@@ -40,14 +33,5 @@ defineExpose({})
 		width: 100%;
 		height: 100%;
 		position: relative;
-		> .bg{
-			width: 100%;
-			position: fixed;
-			z-index: -1;
-			top: 0;
-			> img{
-				width: 100%;
-			}
-		}
 	}
 </style>

src/pages/about-us/mission.vue

@@ -150,12 +150,11 @@ const {} = toRefs(data);
 				> .img-item{
 					margin: 10px;
 					// width: 1120px;
-					width: 340px;
-					height: 503px;
 					position: relative;
+					aspect-ratio: 165 / 244;
+					width: 25%;
 					@media (max-width: 1000px) {
 						width: 100%;
-						aspect-ratio: 165 / 244;
 					}
 					> h2{
 						font-family: "Poppins", Sans-serif;

src/pages/about-us/title.vue

@@ -10,7 +10,6 @@ defineExpose({})
 		<div class="content">
 			<div class="text">
 				<h1>{{$t('aboutUs.Title')}}</h1>
-				<img v-show="windowWidth < 1000" src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/12/about_banner-1.jpg" alt="">
 			</div>
 		</div>
 	</section>
@@ -18,7 +17,15 @@ defineExpose({})
 <style lang="less" scoped>
 	.title-section{
 		width: 100%;
-	
+		background-color: #000000;
+		background-image: url(https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/12/about_banner-1.jpg);
+		background-position: top center;
+		background-repeat: no-repeat;
+		background-size: auto;
+		background-attachment: fixed;
+		@media (max-width: 1000px) {
+			background-attachment: scroll;
+		}
 		> .content{
 			max-width: 1400px;
 			margin: 0 auto;
@@ -42,13 +49,6 @@ defineExpose({})
 						font-size: 40px;
 					}
 				}
-				> img{
-					position: absolute;
-					top: 0;
-					right: 0;
-					z-index: -1;
-					height: 100%;
-				}
 			}
 		}
 	}

src/pages/aida/index.vue

@@ -443,12 +443,14 @@
 
 				<div class="plans-grid">
 					<article v-for="plan in plans" :key="plan.name" class="plan-card">
-						<img
+						<div class="plan-icon-wrap">
-							class="plan-icon"
+							<img
-							:src="plan.icon"
+								class="plan-icon"
-							:alt="`${plan.name} plan icon`"
+								:src="plan.icon"
-							loading="lazy"
+								:alt="`${plan.name} plan icon`"
-						/>
+								loading="lazy"
+							/>
+						</div>
 						<h3 class="plan-title">{{ plan.name }}</h3>
 						<p class="plan-copy">{{ plan.description }}</p>
 						<a class="plan-button" :href="plan.href">{{ plan.action }}</a>
@@ -816,16 +818,17 @@
 		margin-bottom: 27px;
 		font-size: clamp(28px, 3vw, 43px);
 		line-height: 1.2;
-		text-align: left;
+		text-align: center;
 	}
 
 	.subscription-list {
 		margin: 0 auto 52px;
 		padding: 0;
 		list-style: none;
-		color: #333333;
+		color: #555;
-		font-size: 13px;
+		font-size: 16px;
-		line-height: 1.48;
+		font-weight: 400;
+		// line-height: 1.48;
 	}
 
 	.subscription-list li {
@@ -870,11 +873,21 @@
 		text-align: center;
 	}
 
-	.plan-icon {
+	.plan-icon-wrap {
-		width: 86px;
+		display: flex;
-		height: 86px;
+		align-items: center;
-		object-fit: contain;
+		justify-content: center;
+		width: 100px;
+		height: 100px;
 		margin-bottom: 30px;
+		border: 3px solid #666666;
+		border-radius: 50%;
+	}
+
+	.plan-icon {
+		width: 50px;
+		height: 50px;
+		object-fit: contain;
 	}
 
 	.plan-title {

src/pages/events/all-events.vue

@@ -14,7 +14,7 @@ defineExpose({})
 		<div class="content">
 			<h2>ALL EVENTS</h2>
 			<div class="all-events">
-				<div v-for="item in list" :key="item.url" class="img-item">
+				<div v-for="item  in list as any" :key="item.url" class="img-item">
 					<div class="img-box">
 						<img :src="item.coverUrl" alt="">
 						<div class="line">

src/pages/events/swiper.vue

@@ -27,7 +27,7 @@ defineExpose({})
 				:interval="1000"
 				class="events-carousel"
 			>
-				<div class="carousel-item" v-for="(item,index) in list" :key="index">
+				<div class="carousel-item" v-for="(item,index) in list as any" :key="index">
 					<div class="img-box">
 						<img :src="item?.coverUrl" alt="">
 					</div>

src/pages/help-centre/index.vue

@@ -1,18 +1,10 @@
 <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" v-show="windowWidth > 1000">
-			<img src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/helpcentre_banner-1.jpg" alt="">
-		</div>
 		<Title />
 		<Faq />
 	</div>
@@ -22,14 +14,5 @@ defineExpose({})
 		width: 100%;
 		height: 100%;
 		position: relative;
-		> .bg{
-			width: 100%;
-			position: fixed;
-			z-index: -1;
-			top: 0;
-			> img{
-				width: 100%;
-			}
-		}
 	}
 </style>

src/pages/help-centre/title.vue

@@ -1,8 +1,4 @@
 <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>
@@ -10,7 +6,6 @@ defineExpose({})
 		<div class="content">
 			<div class="text">
 				<h1>{{ $t('helpCentre.Title') }}</h1>
-				<img v-show="windowWidth < 1000" src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/helpcentre_banner-1.jpg" alt="">
 			</div>
 		</div>
 	</section>
@@ -18,6 +13,15 @@ defineExpose({})
 <style lang="less" scoped>
 	.title-section{
 		width: 100%;
+		background-color: #000000;
+		background-image: url(https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/helpcentre_banner-1.jpg);
+		background-position: top center;
+		background-repeat: no-repeat;
+		background-size: auto;
+		background-attachment: fixed;
+		@media (max-width: 1000px) {
+			background-attachment: scroll;
+		}
 		> .content{
 			max-width: 1400px;
 			margin: 0 auto;

src/pages/home/components/Carousel.vue

@@ -526,8 +526,8 @@
 		.home-carousel {
 			.carousel-slide {
 				aspect-ratio: auto;
-				height: 365px;
+				height: 504px;
-				min-height: 365px;
+				min-height: 504px;
 
 				.carousel-banner {
 					height: 100%;
@@ -596,4 +596,13 @@
 			transform: translateX(0);
 		}
 	}
+
+	// @media (max-width: 768px) and (min-height: 844px) {
+	// 	.home-carousel {
+	// 		.carousel-slide {
+	// 			height: 504px;
+	// 			min-height: 504px;
+	// 		}
+	// 	}
+	// }
 </style>

src/pages/home/components/ProductFeature.vue

@@ -30,7 +30,7 @@
 				:src="backgroundImage"
 				:alt="backgroundAlt"
 				loading="lazy"
-				translate-x-s="-100"
+				translate-x-s="0"
 				translate-x="100"
 			/>
 			<img
@@ -46,13 +46,8 @@
 		<div class="product-feature-copy">
 			<p class="product-feature-name">{{ name }}</p>
 			<h2 class="product-feature-title">{{ title }}</h2>
-			<RouterLink
+			<RouterLink class="product-feature-link" :to="to">
-				class="product-feature-link"
+				{{ $t('Home.viewMore') }}
-				:to="to"
-				translate-y-s="100"
-				translate-y="0"
-			>
-				{{$t('Home.viewMore')}}
 			</RouterLink>
 		</div>
 	</section>
@@ -63,12 +58,18 @@
 		display: flex;
 		align-items: center;
 		gap: clamp(48px, 5.5vw, 76px);
+		width: 100%;
 		max-width: 1440px;
 		min-width: 0;
 		min-height: 690px;
 		margin: 0 auto;
+		padding: 100px 15px;
+		justify-content: center;
+		box-sizing: border-box;
+		overflow-x: hidden;
 		& > div {
-			width: 50%;
+			// width: 50%;
+			box-sizing: content-box;
 		}
 	}
 
@@ -89,15 +90,17 @@
 
 	.product-feature-art {
 		position: relative;
-		width: min(100%, 560px);
+		width: clamp(320px, 45vw, 560px);
 		min-width: 0;
 		min-height: 560px;
 		justify-self: start;
+		flex: 0 1 auto;
+		overflow: hidden;
 	}
 
 	.product-feature-bg {
 		display: block;
-		width: min(100%, 480px);
+		width: clamp(200px, 70%, 400px);
 		max-width: 100%;
 		height: auto;
 		user-select: none;
@@ -105,52 +108,51 @@
 
 	.product-feature-panel {
 		position: absolute;
-		right: 0;
+		left: 15%;
-		bottom: 94px;
+		top: 53.329%;
-		width: min(72%, 380px);
+		max-width: 400px;
-		max-width: 100%;
+		width: auto;
 		height: auto;
 		user-select: none;
 	}
 
 	.product-feature-reversed .product-feature-bg {
-		width: min(100%, 460px);
+		width: 70%;
 		margin-left: auto;
 	}
 
 	.product-feature-reversed .product-feature-panel {
-		right: auto;
+		left: 0;
-		left: -88px;
+		top: 53.329%;
-		bottom: 70px;
-		width: min(78%, 430px);
 	}
 
 	.product-feature-copy {
 		position: relative;
 		z-index: 1;
-		max-width: 590px;
+		max-width: 450px;
 		min-width: 0;
 		justify-self: start;
 		padding-bottom: 18px;
+		flex: 1 1 auto;
 	}
 
 	.product-feature-name {
 		margin: 0 0 20px;
-		color: #6e6e6e;
+		color: #666666;
 		font-family: Poppins, sans-serif;
-		font-size: 18px;
+		font-size: 24px;
-		font-weight: 700;
+		font-weight: 600;
 		line-height: 1;
 		letter-spacing: 2px;
 	}
 
 	.product-feature-title {
-		margin: 0 0 28px;
+		margin: 0 0 10px;
-		color: #252525;
+		color: #222222;
 		font-family: Poppins, sans-serif;
-		font-size: clamp(30px, 2.8vw, 38px);
+		font-size: clamp(24px, 2.8vw, 39px);
-		font-weight: 700;
+		font-weight: 600;
-		line-height: 1.16;
+		line-height: 1.3em;
 		letter-spacing: 2px;
 		text-transform: none;
 		overflow-wrap: break-word;
@@ -160,19 +162,17 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		min-width: 152px;
+		padding: 20px 40px;
-		min-height: 48px;
+		border-radius: 40px;
-		padding: 0 28px;
-		border-radius: 999px;
 		color: #ffffff;
-		background: #a72125;
+		background: #9a2125;
 		font-family: Poppins, sans-serif;
-		font-size: 10px;
+		font-size: 14px;
-		font-weight: 700;
+		font-weight: 600;
-		line-height: 1;
 		letter-spacing: 2px;
 		text-decoration: none;
 		text-transform: uppercase;
+		margin-top: 12px;
 		transition:
 			background-color 0.2s ease,
 			transform 0.2s ease;
@@ -180,23 +180,23 @@
 
 	.product-feature-link:hover,
 	.product-feature-link:focus-visible {
-		background: #8e171b;
+		background: #63504b;
 		transform: translateY(-1px);
 	}
 
 	.product-feature-link:focus-visible {
-		outline: 2px solid #a72125;
+		outline: 2px solid #9a2125;
 		outline-offset: 4px;
 	}
 
-	@media (max-width: 980px) {
+	@media (max-width: 1024px) {
 		.product-feature,
 		.product-feature-reversed {
 			flex-direction: column-reverse;
 			gap: 24px;
 			width: min(680px, calc(100% - 40px));
 			min-height: 0;
-			padding: 70px 0;
+			padding: 60px 0;
 		}
 
 		.product-feature-reversed .product-feature-art,
@@ -219,17 +219,26 @@
 			padding-bottom: 0;
 		}
 
+		.product-feature-panel,
 		.product-feature-reversed .product-feature-panel {
-			left: 0;
+			max-width: 60%;
+		}
+
+		.product-feature-title {
+			font-size: 32px;
+		}
+
+		.product-feature-link {
+			font-size: 12px;
 		}
 	}
 
-	@media (max-width: 640px) {
+	@media (max-width: 767px) {
 		.product-feature,
 		.product-feature-reversed {
 			width: calc(100% - 32px);
 			gap: 28px;
-			padding: 0 0 64px;
+			padding: 20px 0;
 		}
 
 		.product-feature-art {
@@ -244,8 +253,7 @@
 		}
 
 		.product-feature-bg {
-			width: 72%;
+			width: 70%;
-			margin-left: 38px;
 			border-radius: 10px;
 		}
 
@@ -254,7 +262,8 @@
 			left: auto;
 			right: 12px;
 			bottom: 22px;
-			width: 72%;
+			top: auto;
+			max-width: 70%;
 		}
 
 		.product-feature-reversed .product-feature-bg {
@@ -267,31 +276,31 @@
 			right: auto;
 			left: 18px;
 			bottom: 16px;
-			width: 72%;
+			top: auto;
+			max-width: 70%;
 		}
 
 		.product-feature-name {
 			margin-bottom: 16px;
-			font-size: 18px;
+			font-size: 24px;
+			font-weight: 600;
 			letter-spacing: 1.5px;
 		}
 
 		.product-feature-title {
 			width: 100%;
 			max-width: 100%;
-			margin-bottom: 26px;
+			margin-bottom: 10px;
-			font-size: clamp(22px, 6.1vw, 26px);
+			font-size: 24px;
+			font-weight: 600;
 			line-height: 1.35;
 			letter-spacing: 1.2px;
 			overflow-wrap: anywhere;
 		}
 
 		.product-feature-link {
-			min-width: 100px;
+			font-size: 12px;
-			min-height: 40px;
+			padding: 16px 32px;
-			padding: 0 22px;
-			font-size: 9px;
-			letter-spacing: 1px;
 		}
 	}
 </style>

src/pages/home/components/ProjectCta.vue

@@ -18,16 +18,15 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		min-height: 435px;
+		padding: 200px 0;
-		padding: 72px 20px;
+		background: #463A37;
-		background: #473935;
 	}
 
 	.project-cta-inner {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: 38px;
+		gap: 20px;
 		text-align: center;
 	}
 
@@ -35,9 +34,9 @@
 		margin: 0;
 		color: #ffffff;
 		font-family: Poppins, sans-serif;
-		font-size: clamp(22px, 2vw, 27px);
+		font-size: clamp(22px, 2vw, 29px);
-		font-weight: 700;
+		font-weight: 600;
-		line-height: 1.35;
+		line-height: 1.3em;
 		letter-spacing: 2px;
 		text-transform: capitalize;
 	}
@@ -46,16 +45,14 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		min-width: 158px;
+		padding: 20px 40px;
-		min-height: 48px;
+		border-radius: 40px;
-		padding: 0 28px;
-		border-radius: 999px;
 		color: #ffffff;
-		background: #ad2228;
+		background: #9A2125;
 		font-family: Poppins, sans-serif;
-		font-size: 10px;
+		font-size: 14px;
-		font-weight: 700;
+		font-weight: 600;
-		line-height: 1;
+		line-height: 1.2em;
 		letter-spacing: 2px;
 		text-decoration: none;
 		text-transform: uppercase;
@@ -66,7 +63,7 @@
 
 	.project-cta-link:hover,
 	.project-cta-link:focus-visible {
-		background: #93191f;
+		background: #000000;
 		transform: translateY(-1px);
 	}
 
@@ -75,14 +72,13 @@
 		outline-offset: 4px;
 	}
 
-	@media (max-width: 640px) {
+	@media (max-width: 767px) {
 		.project-cta {
-			min-height: 288px;
+			padding: 100px 0;
-			padding: 64px 20px;
 		}
 
 		.project-cta-inner {
-			gap: 28px;
+			gap: 20px;
 		}
 
 		.project-cta-title {
@@ -92,11 +88,8 @@
 		}
 
 		.project-cta-link {
-			min-width: 100px;
+			font-size: 12px;
-			min-height: 40px;
+			padding: 16px 32px;
-			padding: 0 22px;
-			font-size: 9px;
-			letter-spacing: 1px;
 		}
 	}
 </style>

src/pages/home/index.vue

@@ -23,7 +23,7 @@
 				panelImage: `${IMAGE_BASE_URL}/2024/01/new-layout-1.png`,
 				panelAlt: 'AiDA design workspace preview',
 				reversed: false,
-				to:'/aida'
+				to: '/aida'
 			},
 			{
 				name: 'Mixi',
@@ -33,7 +33,7 @@
 				panelImage: `${IMAGE_BASE_URL}/2022/11/mixi_intro_01_panel.png`,
 				panelAlt: 'Mixi visual search interface preview',
 				reversed: true,
-				to:'/mixi'
+				to: '/mixi'
 			}
 		]
 	})
@@ -110,7 +110,7 @@
 	}
 
 	.home-content {
-		padding: clamp(116px, 10vw, 172px) 0 clamp(92px, 8vw, 126px);
+		padding: 100px 0;
 		background: #ffffff;
 	}
 
@@ -119,28 +119,29 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		padding: 0 20px clamp(92px, 10vw, 150px);
+		padding: 0 0 100px;
 		text-align: center;
 	}
 
 	.ecosystem-logo {
 		display: block;
-		width: clamp(146px, 15vw, 184px);
+		width: auto;
+		max-width: 100%;
 		height: auto;
-		margin-bottom: 30px;
+		margin-bottom: 16px;
 		user-select: none;
 	}
 
 	.ecosystem-title {
 		width: 100%;
 		max-width: 100%;
-		margin: 0 0 9px;
+		margin: 0 0 8px;
-		color: #101010;
+		color: #222222;
 		font-family: Poppins, sans-serif;
-		font-size: clamp(18px, 1.65vw, 22px);
+		font-size: 24px;
-		font-weight: 700;
+		font-weight: 600;
-		line-height: 1.25;
+		line-height: 1;
-		letter-spacing: 4px;
+		letter-spacing: 2px;
 		text-transform: uppercase;
 		overflow-wrap: break-word;
 	}
@@ -148,51 +149,51 @@
 	.ecosystem-subtitle {
 		width: 100%;
 		margin: 0;
-		color: #101010;
+		color: #333333;
 		font-family: Poppins, sans-serif;
-		font-size: clamp(13px, 1.2vw, 16px);
+		font-size: 18px;
 		font-weight: 600;
-		line-height: 1.35;
+		line-height: 1;
-		letter-spacing: 2.5px;
+		letter-spacing: 2px;
 	}
 
-	@media (max-width: 980px) {
+	@media (max-width: 1024px) {
 		.home-content {
-			padding: 96px 0 64px;
+			padding: 60px 0;
 		}
 
 		.ecosystem-intro {
-			padding-bottom: 50px;
+			padding-bottom: 60px;
 		}
 	}
 
-	@media (max-width: 640px) {
+	@media (max-width: 767px) {
 		.home-content {
-			padding: 52px 0 0;
+			padding: 40px 0;
 		}
 
 		.ecosystem-intro {
-			padding: 0 24px 58px;
+			padding: 40px 20px 40px 20px;
 		}
 
 		.ecosystem-logo {
-			width: 76px;
+			width: 100px;
-			margin-bottom: 26px;
+			margin-bottom: 54px;
 		}
 
 		.ecosystem-title {
 			width: min(100%, 330px);
 			max-width: none;
-			margin-bottom: 10px;
+			margin-bottom: 20px;
-			font-size: 18px;
+			font-size: 24px;
-			letter-spacing: 1px;
+			letter-spacing: 2px;
-			line-height: 1.35;
+			line-height: 1;
 			overflow-wrap: anywhere;
 		}
 
 		.ecosystem-subtitle {
-			font-size: 13px;
+			font-size: 18px;
-			letter-spacing: 0.8px;
+			letter-spacing: 2px;
 		}
 	}
 </style>

src/pages/media/index.vue

@@ -19,7 +19,7 @@
 					>
 				</div>
 				<div class="list">
-					<div class="item" v-for="v in list" :key="nav + v.text">
+					<div class="item" v-for="v in list as any" :key="nav + v.text">
 						<span class="date">{{ FormatDate(v.date, 'SM D, YYYY') }}</span>
 						<a class="text" :href="v.url" target="_blank">{{ v.text }}</a>
 					</div>

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/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"}
+{"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/config.ts","./src/tools/myevents.ts","./src/types/kagol-vue-carousel.d.ts"],"version":"6.0.3"}