From aa193f08cb031e0adba97f3342c2ee740f5ff5e7 Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Tue, 20 Jan 2026 15:42:17 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E9=A1=B5=E9=9D=A2=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AwardPage/components/ApplySection.vue     | 209 ++++++++
 .../AwardPage/components/JudgesSection.vue    | 227 +++++++++
 .../AwardPage/components/PrizesSection.vue    | 234 +++++++++
 .../AwardPage/components/SelectionSection.vue | 173 +++++++
 src/views/AwardPage/index.vue                 | 469 +-----------------
 5 files changed, 851 insertions(+), 461 deletions(-)
 create mode 100644 src/views/AwardPage/components/ApplySection.vue
 create mode 100644 src/views/AwardPage/components/JudgesSection.vue
 create mode 100644 src/views/AwardPage/components/PrizesSection.vue
 create mode 100644 src/views/AwardPage/components/SelectionSection.vue

diff --git a/src/views/AwardPage/components/ApplySection.vue b/src/views/AwardPage/components/ApplySection.vue
new file mode 100644
index 00000000..ba40b94c
--- /dev/null
+++ b/src/views/AwardPage/components/ApplySection.vue
@@ -0,0 +1,209 @@
+<template>
+	<div class="apply-container container flex flex-col" ref="applyRef">
+		<div class="title" ref="applyTitleRef">How to Apply</div>
+		<div class="sub-title" ref="applySubTitleRef">Requirments</div>
+		<div class="requirments-list flex" ref="reqListRef">
+			<div class="left flex flex-col space-between">
+				<div class="item-box" v-for="item in leftRequirment" :key="item.type">
+					<div class="item-header flex align-center">
+						<img src="@/assets/images/award/bloom_logo.png" class="logo" />
+						<div class="item-title">{{ item.type }}</div>
+					</div>
+					<div class="context" v-for="el in item.desc">
+						{{ el }}
+					</div>
+				</div>
+			</div>
+			<div class="right">
+				<div class="item-box">
+					<div class="item-box">
+						<div class="item-header flex align-center">
+							<img src="@/assets/images/award/bloom_logo.png" class="logo" />
+							<div class="item-title">{{ rightRequirment.type }}</div>
+						</div>
+						<div class="context" v-for="el in rightRequirment.desc">
+							{{ el }}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { gsap } from 'gsap'
+
+const leftRequirment = ref([
+	{
+		type: 'Video',
+		desc: ['The process of doing design']
+	},
+	{
+		type: 'Design',
+		desc: [
+			'Structure: design title, moodboard and elaboration (how will you use AiDA to design)',
+			'Design sketch: Maximum 4 outfit design with proposed materials'
+		]
+	}
+])
+
+const rightRequirment = ref({
+	type: 'Submission Format',
+	desc: [
+		'Naming as “AiDA global award 2026_applicantname”',
+		'Mp4\n(1080x1920pixels/20mb within 1min)',
+		'Single PDF file\n(within 15 pages, maximum 20mb)',
+		'English or native language\nwith English translation'
+	]
+})
+
+const applyRef = ref<HTMLElement | null>(null)
+const applyTitleRef = ref<HTMLElement | null>(null)
+const applySubTitleRef = ref<HTMLElement | null>(null)
+const reqListRef = ref<HTMLElement | null>(null)
+const hasPlayedApplyAnim = ref(false)
+let applyObserver: IntersectionObserver | null = null
+
+const setupApplyInitialState = () => {
+	const titleEls = [applyTitleRef.value, applySubTitleRef.value].filter(
+		Boolean
+	) as HTMLElement[]
+	if (titleEls.length) {
+		gsap.set(titleEls, {
+			opacity: 0,
+			scale: 0,
+			transformOrigin: '50% 50%'
+		})
+	}
+	const headers = reqListRef.value?.querySelectorAll<HTMLElement>('.item-header')
+	const contexts = reqListRef.value?.querySelectorAll<HTMLElement>('.context')
+	gsap.set([headers, contexts], { opacity: 0 })
+}
+
+const playApplyAnimation = () => {
+	if (hasPlayedApplyAnim.value) return
+	const titleEls = [applyTitleRef.value, applySubTitleRef.value].filter(
+		Boolean
+	) as HTMLElement[]
+	const headers = reqListRef.value?.querySelectorAll<HTMLElement>('.item-header')
+	const contexts = reqListRef.value?.querySelectorAll<HTMLElement>('.context')
+	if (!titleEls.length) return
+
+	const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
+	tl.to(titleEls, {
+		opacity: 1,
+		scale: 1,
+		duration: 0.6,
+		ease: 'back.out(1.6)',
+		stagger: 0.1
+	})
+	if (headers?.length) {
+		tl.to(
+			headers,
+			{
+				opacity: 1,
+				duration: 0.4,
+				stagger: 0.1
+			},
+			'-=0.1'
+		)
+	}
+	if (contexts?.length) {
+		tl.to(
+			contexts,
+			{
+				opacity: 1,
+				duration: 0.4,
+				stagger: 0.05
+			},
+			'-=0.05'
+		)
+	}
+
+	hasPlayedApplyAnim.value = true
+	applyObserver?.disconnect()
+}
+
+onMounted(() => {
+	nextTick(() => {
+		setupApplyInitialState()
+		if ('IntersectionObserver' in window) {
+			applyObserver = new IntersectionObserver(
+				(entries) => {
+					entries.forEach((entry) => {
+						if (entry.isIntersecting) {
+							playApplyAnimation()
+						}
+					})
+				},
+				{ threshold: 0.25 }
+			)
+			if (applyRef.value) applyObserver.observe(applyRef.value)
+		} else {
+			playApplyAnimation()
+		}
+	})
+})
+
+onBeforeUnmount(() => {
+	applyObserver?.disconnect()
+})
+</script>
+
+<style scoped lang="less">
+.apply-container {
+	flex: 1;
+	background: url('@/assets/images/award/apply_bg.png') no-repeat;
+	background-size: 100% 100%;
+	padding: 12.7rem 0 16.9rem;
+	.title {
+		text-align: center;
+		color: #232323;
+		font-family: 'PoppinsBold';
+		font-weight: 600;
+		font-size: 4rem;
+		margin-bottom: 3rem;
+	}
+	.sub-title {
+		text-align: center;
+		color: #b10000;
+		font-size: 3rem;
+		font-family: 'Arial';
+		font-weight: 400;
+	}
+	.requirments-list {
+		flex: 1;
+		padding-left: 41.4rem;
+		column-gap: 17.7rem;
+		margin-top: 12rem;
+		.left {
+			color: #232323;
+			height: 100%;
+		}
+		.item-box {
+			.item-header {
+				column-gap: 3.2rem;
+				.item-title {
+					color: #232323;
+					font-family: 'PoppinsBold';
+					font-weight: 600;
+					font-size: 2.8rem;
+				}
+			}
+			.context {
+				margin-top: 4rem;
+				width: 46.8rem;
+				color: #585858;
+				font-family: 'Arial';
+				font-weight: 400;
+				line-height: 3rem;
+				font-size: 2.4rem;
+				padding-left: 5.6rem;
+				white-space: pre-line;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/AwardPage/components/JudgesSection.vue b/src/views/AwardPage/components/JudgesSection.vue
new file mode 100644
index 00000000..a0db9a18
--- /dev/null
+++ b/src/views/AwardPage/components/JudgesSection.vue
@@ -0,0 +1,227 @@
+<template>
+	<div class="judges-container flex flex-col align-center">
+		<div class="title" ref="judgesTitleRef">Panel of Judges</div>
+		<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
+		<div class="sub-title" ref="judgesSubTitleRef">Expertise</div>
+		<div class="judgement-list" ref="judgementListRef">
+			<div
+				class="judgement-item flex flex-col align-center"
+				v-for="item in judgements"
+				:key="item.name"
+			>
+				<img :src="item.picture" class="picture" />
+				<div class="name">{{ item.name }}</div>
+				<div class="desc">{{ item.desc }}</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, nextTick, ref } from 'vue'
+import { gsap } from 'gsap'
+import jae from '@/assets/images/award/jae.png'
+import diego from '@/assets/images/award/diego.png'
+import gregory from '@/assets/images/award/gregory.png'
+import vincenzo from '@/assets/images/award/vincenzo.png'
+import tim from '@/assets/images/award/tim.png'
+import desmond from '@/assets/images/award/desmond.png'
+
+const judgements = [
+	{
+		picture: jae,
+		name: 'Jae Hyuk Lim',
+		desc: 'Code-create\nKorea Branch Director\nBesfxxk creative director'
+	},
+	{
+		picture: diego,
+		name: 'Diego Dultzin Lacoste',
+		desc: 'Co-founder & Chief Father\nOfficer of OnTheList\n(Hong Kong)'
+	},
+	{
+		picture: gregory,
+		name: 'Gregory de la Hogue Moran',
+		desc: 'Senior Designer at\nGabriela Heasrst (Italy)'
+	},
+	{
+		picture: vincenzo,
+		name: 'Vincenzo La Torre',
+		desc: 'Cheif Editor of SCMP Style\n(Hong Kong)'
+	},
+	{
+		picture: tim,
+		name: 'Tim Lim',
+		desc: 'Group Fashion Direction of\n Modern Media Group\n(Shanghai)'
+	},
+	{
+		picture: desmond,
+		name: 'Desmond Lim',
+		desc: 'Cheif Editor of Vogue\n(Singapore)'
+	}
+]
+
+const judgesTitleRef = ref<HTMLElement | null>(null)
+const judgesSubTitleRef = ref<HTMLElement | null>(null)
+const judgementListRef = ref<HTMLElement | null>(null)
+const hasPlayedJudgementAnim = ref(false)
+let judgementObserver: IntersectionObserver | null = null
+
+const setupJudgementInitialState = () => {
+	const titleEls = [judgesTitleRef.value, judgesSubTitleRef.value].filter(
+		Boolean
+	) as HTMLElement[]
+	if (titleEls.length) {
+		gsap.set(titleEls, {
+			opacity: 0,
+			scale: 0,
+			transformOrigin: '50% 50%'
+		})
+	}
+	const items =
+		judgementListRef.value?.querySelectorAll<HTMLElement>('.judgement-item')
+	if (items?.length) {
+		gsap.set(items, {
+			opacity: 0,
+			clipPath: 'inset(0 0 100% 0)'
+		})
+	}
+}
+
+const playJudgementAnimation = () => {
+	if (hasPlayedJudgementAnim.value) return
+	const titleEls = [judgesTitleRef.value, judgesSubTitleRef.value].filter(
+		Boolean
+	) as HTMLElement[]
+	const listEl = judgementListRef.value
+	if (!titleEls.length || !listEl) return
+
+	const items = Array.from(
+		listEl.querySelectorAll<HTMLElement>('.judgement-item')
+	)
+	const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
+
+	tl.to(titleEls, {
+		opacity: 1,
+		scale: 1,
+		duration: 0.4,
+		ease: 'back.out(1.6)',
+		stagger: 0.1
+	})
+	if (items.length) {
+		const firstRow = items.slice(0, 3)
+		const secondRow = items.slice(3)
+
+		if (firstRow.length) {
+			tl.to(
+				firstRow,
+				{
+					opacity: 1,
+					clipPath: 'inset(0% 0% 0% 0%)',
+					duration: 0.45,
+					stagger: 0.05
+				},
+				'-=0.2'
+			)
+		}
+
+		if (secondRow.length) {
+			tl.to(
+				secondRow,
+				{
+					opacity: 1,
+					clipPath: 'inset(0% 0% 0% 0%)',
+					duration: 0.45,
+					stagger: 0.05
+				},
+				'+=0.1'
+			)
+		}
+	}
+
+	hasPlayedJudgementAnim.value = true
+	judgementObserver?.disconnect()
+}
+
+onMounted(() => {
+	nextTick(() => {
+		setupJudgementInitialState()
+		if ('IntersectionObserver' in window) {
+			judgementObserver = new IntersectionObserver(
+				(entries) => {
+					entries.forEach((entry) => {
+						if (entry.isIntersecting) {
+							playJudgementAnimation()
+						}
+					})
+				},
+				{ threshold: 0.3 }
+			)
+			if (judgementListRef.value) {
+				judgementObserver.observe(judgementListRef.value)
+			}
+		} else {
+			// Fallback: play immediately if IntersectionObserver unsupported
+			playJudgementAnimation()
+		}
+	})
+})
+
+onBeforeUnmount(() => {
+	judgementObserver?.disconnect()
+})
+</script>
+
+<style scoped lang="less">
+.judges-container {
+	height: 147.4rem;
+	background: url('@/assets/images/award/judges_bg.png') no-repeat;
+	background-size: 100% 100%;
+	padding-top: 12.8rem;
+	.title {
+		color: #232323;
+		font-family: 'PoppinsBold';
+		font-weight: 600;
+		font-size: 4rem;
+	}
+	.logo {
+		margin: 2.4rem 0 2.2rem;
+	}
+	.sub-title {
+		color: #b10000;
+		font-family: 'Arial';
+		font-weight: 400;
+		font-size: 3rem;
+		margin-bottom: 12rem;
+	}
+	.judgement-list {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		column-gap: 23.22rem;
+		row-gap: 8rem;
+		padding: 0 25rem 0 26.6rem;
+		.judgement-item {
+			overflow: hidden;
+			.picture {
+				width: 20.2rem;
+				height: 26rem;
+				border-radius: 0.8rem;
+			}
+			.name {
+				margin: 3rem 0 2.4rem;
+				color: #232323;
+				font-family: 'PoppinsBold';
+				font-weight: 600;
+				font-size: 2.4rem;
+			}
+			.desc {
+				color: #585858;
+				font-family: 'Arial';
+				font-weight: 400;
+				font-size: 2rem;
+				white-space: pre-line;
+				text-align: center;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/AwardPage/components/PrizesSection.vue b/src/views/AwardPage/components/PrizesSection.vue
new file mode 100644
index 00000000..f8823289
--- /dev/null
+++ b/src/views/AwardPage/components/PrizesSection.vue
@@ -0,0 +1,234 @@
+<template>
+	<div
+		class="prizes-container container flex align-center space-between"
+		ref="prizesRef"
+	>
+		<div class="left flex flex-col flex-center">
+			<div
+				class="title"
+				ref="prizesTitleRef"
+			>
+				Award & Prizes
+			</div>
+			<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
+			<div
+				class="desc"
+				ref="prizesSubTitleRef"
+			>
+				Recongnition
+			</div>
+		</div>
+		<div
+			class="right"
+			ref="prizesRightRef"
+		>
+			<div
+				class="prize-item flex flex-col flex-center"
+				v-for="item in prizes"
+				:key="item.name"
+			>
+				<div class="prize-money">{{ item.money }}</div>
+				<div class="prize-name">{{ item.name }}</div>
+				<div class="prize-desc flex flex-col flex-center">
+					<div
+						class="desc-item"
+						v-for="el in item.desc"
+					>
+						{{ el }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+	import { gsap } from 'gsap'
+
+	const prizes = [
+		{
+			money: 'US$5000',
+			name: 'Grand Prize',
+			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+		},
+		{
+			money: 'US$3000',
+			name: 'First Runner-Up',
+			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+		},
+		{
+			money: 'US$2000',
+			name: 'Second Runner-Up',
+			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+		},
+		{
+			money: 'Certification',
+			name: 'Finalists',
+			desc: ['Award Ceritificate', 'Global Media Exposure']
+		}
+	]
+
+	const prizesRef = ref<HTMLElement | null>(null)
+	const prizesTitleRef = ref<HTMLElement | null>(null)
+	const prizesSubTitleRef = ref<HTMLElement | null>(null)
+	const prizesRightRef = ref<HTMLElement | null>(null)
+	const hasPlayedPrizesAnim = ref(false)
+	let prizesObserver: IntersectionObserver | null = null
+
+	const setupPrizesInitialState = () => {
+		const titleEls = [prizesTitleRef.value, prizesSubTitleRef.value].filter(
+			Boolean
+		) as HTMLElement[]
+		if (titleEls.length) {
+			gsap.set(titleEls, {
+				opacity: 0,
+				scale: 0,
+				transformOrigin: '50% 50%'
+			})
+		}
+		if (prizesRightRef.value) {
+			gsap.set(prizesRightRef.value, {
+				opacity: 0,
+				y: 40,
+				scale: 1.08
+			})
+		}
+	}
+
+	const playPrizesAnimation = () => {
+		if (hasPlayedPrizesAnim.value) return
+		const titleEls = [prizesTitleRef.value, prizesSubTitleRef.value].filter(
+			Boolean
+		) as HTMLElement[]
+
+		const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
+		if (titleEls.length) {
+			tl.to(titleEls, {
+				opacity: 1,
+				scale: 1,
+				duration: 0.6,
+				ease: 'back.out(1.6)',
+				stagger: 0.1
+			})
+		}
+		if (prizesRightRef.value) {
+			tl.to(
+				prizesRightRef.value,
+				{
+					opacity: 1,
+					y: 0,
+					scale: 1,
+					duration: 0.55,
+					ease: 'back.out(1.4)'
+				},
+				titleEls.length ? '-=0.15' : 0
+			)
+		}
+
+		hasPlayedPrizesAnim.value = true
+		prizesObserver?.disconnect()
+	}
+
+	onMounted(() => {
+		nextTick(() => {
+			setupPrizesInitialState()
+			if ('IntersectionObserver' in window) {
+				prizesObserver = new IntersectionObserver(
+					entries => {
+						entries.forEach(entry => {
+							if (entry.isIntersecting) {
+								playPrizesAnimation()
+							}
+						})
+					},
+					{ threshold: 0.25 }
+				)
+				if (prizesRef.value) prizesObserver.observe(prizesRef.value)
+			} else {
+				playPrizesAnimation()
+			}
+		})
+	})
+
+	onBeforeUnmount(() => {
+		prizesObserver?.disconnect()
+	})
+</script>
+
+<style scoped lang="less">
+	.prizes-container {
+		background: url('@/assets/images/award/prizes_bg.png') no-repeat;
+		background-size: 100% 100%;
+		padding: 0 21.4rem 0 34.2rem;
+		box-sizing: border-box;
+		.left {
+			row-gap: 3.6rem;
+			.title {
+				text-align: center;
+				font-family: 'PoppinsBold';
+				font-weight: 600;
+				font-size: 4rem;
+				color: #fff;
+			}
+			.desc {
+				text-align: center;
+				color: #f95750;
+				font-family: 'Poppins';
+				font-weight: 400;
+				font-size: 3rem;
+			}
+		}
+		.right {
+			// height: 45.4rem;
+			// padding: 4.6rem 6.1rem 4.6rem 0;
+			box-sizing: border-box;
+			display: grid;
+			grid-template-columns: repeat(2, 1fr);
+			grid-template-rows: repeat(2, 1fr);
+			row-gap: 4.2rem;
+			column-gap: 4.4rem;
+			// flex: 1;
+			.prize-item {
+				width: 35.5rem;
+				height: 32.8rem;
+				color: #fff;
+				padding: 4.5rem 0 4.8rem 0;
+				justify-content: space-between;
+				background: url('@/assets/images/award/first_bg.png') no-repeat;
+				background-size: 100% 100%;
+				&:nth-of-type(2) {
+					background: url('@/assets/images/award/second_bg.png') no-repeat;
+					background-size: 100% 100%;
+				}
+				&:nth-of-type(3) {
+					background: url('@/assets/images/award/grand_bg.png') no-repeat;
+					background-size: 100% 100%;
+				}
+				&:nth-of-type(4) {
+					background: url('@/assets/images/award/certification_bg.png')
+						no-repeat;
+					background-size: 100% 100%;
+				}
+				.prize-money {
+					font-family: 'PoppinsBold';
+					font-weight: bold;
+					font-size: 4rem;
+				}
+				.prize-name {
+					font-family: 'PoppinsMedium';
+					font-weight: 500;
+					font-size: 2.8rem;
+				}
+				.prize-desc {
+					color: #e0e0e0;
+					font-family: 'Arial';
+					font-weight: 400;
+					font-size: 2rem;
+					line-height: 3rem;
+					height: 8.9rem;
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/views/AwardPage/components/SelectionSection.vue b/src/views/AwardPage/components/SelectionSection.vue
new file mode 100644
index 00000000..82a314bb
--- /dev/null
+++ b/src/views/AwardPage/components/SelectionSection.vue
@@ -0,0 +1,173 @@
+<template>
+	<div
+		class="selection-container container flex flex-col align-center"
+		ref="selectionRef"
+	>
+		<div class="title">Selection Criteria</div>
+		<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
+		<div class="sub-title">Evaluation</div>
+		<div class="criteria-list flex" ref="criteriaListRef">
+			<div
+				class="item flex flex-col align-center"
+				v-for="item in criteriaList"
+				:key="item.name"
+			>
+				<img :src="item.icon" class="icon" :style="item.style" />
+				<div class="name">{{ item.name }}</div>
+				<div class="desc">{{ item.desc }}</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { gsap } from 'gsap'
+import criteria1 from '@/assets/images/award/criteria_1.png'
+import criteria2 from '@/assets/images/award/criteria_2.png'
+import criteria3 from '@/assets/images/award/criteria_3.png'
+import criteria4 from '@/assets/images/award/criteria_4.png'
+
+const criteriaList = ref([
+	{
+		icon: criteria1,
+		name: 'Originality',
+		desc: 'Unique perspective and innovative approach to fashion design',
+		style: { width: '13rem', height: '17rem' }
+	},
+	{
+		icon: criteria2,
+		name: 'Creativity',
+		desc: 'Artistic vision and exceptional design excellence',
+		style: { width: '16rem', height: '18rem' }
+	},
+	{
+		icon: criteria3,
+		name: 'AiDA Integration',
+		desc: 'Effective application of AI design tools and functions',
+		style: { width: '16rem', height: '18rem' }
+	},
+	{
+		icon: criteria4,
+		name: 'Execution',
+		desc: 'Quality of presentation and technical craftsmanship',
+		style: { width: '18.8rem', height: '18rem' }
+	}
+])
+
+const selectionRef = ref<HTMLElement | null>(null)
+const criteriaListRef = ref<HTMLElement | null>(null)
+const hasPlayedSelectionAnim = ref(false)
+let selectionObserver: IntersectionObserver | null = null
+
+const setupSelectionInitialState = () => {
+	const items =
+		criteriaListRef.value?.querySelectorAll<HTMLElement>('.item') ?? []
+	if (items.length) {
+		gsap.set(items, {
+			opacity: 0,
+			scale: 0,
+			transformOrigin: '50% 50%'
+		})
+	}
+}
+
+const playSelectionAnimation = () => {
+	if (hasPlayedSelectionAnim.value) return
+	const items =
+		criteriaListRef.value?.querySelectorAll<HTMLElement>('.item') ?? []
+	if (!items.length) return
+
+	gsap.to(items, {
+		opacity: 1,
+		scale: 1,
+		duration: 0.6,
+		ease: 'back.out(1.6)',
+		stagger: 0.3
+	})
+
+	hasPlayedSelectionAnim.value = true
+	selectionObserver?.disconnect()
+}
+
+onMounted(() => {
+	nextTick(() => {
+		setupSelectionInitialState()
+		if ('IntersectionObserver' in window) {
+			selectionObserver = new IntersectionObserver(
+				(entries) => {
+					entries.forEach((entry) => {
+						if (entry.isIntersecting) {
+							playSelectionAnimation()
+						}
+					})
+				},
+				{ threshold: 0.25 }
+			)
+			if (selectionRef.value) {
+				selectionObserver.observe(selectionRef.value)
+			}
+		} else {
+			playSelectionAnimation()
+		}
+	})
+})
+
+onBeforeUnmount(() => {
+	selectionObserver?.disconnect()
+})
+</script>
+
+<style scoped lang="less">
+.selection-container {
+	background: url('@/assets/images/award/selection_bg.png') no-repeat;
+	background-size: 100% 100%;
+	padding-top: 9.3rem;
+	.title {
+		color: #fff;
+		font-family: 'PoppinsBold';
+		font-weight: 600;
+		font-size: 4rem;
+	}
+	.logo {
+		margin: 2.3rem 0 2.3rem;
+	}
+	.sub-title {
+		color: #f95750;
+		font-family: 'Popins';
+		font-weight: 400;
+		font-size: 3rem;
+		margin-bottom: 11.8rem;
+	}
+	.criteria-list {
+		column-gap: 6rem;
+		.item {
+			height: 44rem;
+			width: 32.2rem;
+			box-sizing: border-box;
+			&:nth-of-type(3) {
+				background: url('@/assets/images/award/criteria_bg.png') no-repeat;
+				background-size: 100% 100%;
+			}
+			.icon {
+				width: 18.8rem;
+				height: 18rem;
+			}
+			.name {
+				font-family: 'PoppinsMedium';
+				font-weight: 500;
+				font-size: 2.8rem;
+				color: #fff;
+				margin: 2rem 0 5rem;
+			}
+			.desc {
+				font-family: 'Arial';
+				font-weight: 400;
+				font-size: 2.4rem;
+				color: #e0e0e0;
+				text-align: center;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/AwardPage/index.vue b/src/views/AwardPage/index.vue
index 0abb68a5..3a04df79 100644
--- a/src/views/AwardPage/index.vue
+++ b/src/views/AwardPage/index.vue
@@ -114,142 +114,20 @@
 				</div>
 			</div>
 		</div>
-		<div class="judges-container flex flex-col align-center">
-			<div class="title">Panel of Judges</div>
-			<img
-				src="@/assets/images/award/bloom_logo.png"
-				class="logo"
-			/>
-			<div class="sub-title">Expertise</div>
-			<div class="judgement-list">
-				<div
-					class="judgement-item flex flex-col align-center"
-					v-for="item in judgements"
-					:key="item.name"
-				>
-					<img
-						:src="item.picture"
-						class="picture"
-					/>
-					<div class="name">{{ item.name }}</div>
-					<div class="desc">{{ item.desc }}</div>
-				</div>
-			</div>
-		</div>
-		<div class="prizes-container container flex align-center">
-			<div class="left flex flex-col flex-center">
-				<div class="title">Award & Prizes</div>
-				<!-- <img
-					src="@/assets/images/award/bloom_logo.png"
-					class="logo"
-				/> -->
-				<div class="desc">Recongnition</div>
-			</div>
-			<div class="right">
-				<div
-					class="prize-item flex flex-col flex-center"
-					v-for="item in prizes"
-					:key="item.name"
-				>
-					<div class="prize-money">{{ item.money }}</div>
-					<div class="prize-name">{{ item.name }}</div>
-					<div class="prize-desc flex flex-col flex-center">
-						<div
-							class="desc-item"
-							v-for="el in item.desc"
-						>
-							{{ el }}
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="apply-container container flex flex-col">
-			<div class="title">How to Apply</div>
-			<div class="sub-title">Requirments</div>
-			<div class="requirments-list flex">
-				<div class="left flex flex-col space-between">
-					<div
-						class="item-box"
-						v-for="item in leftRequirment"
-						:key="item.type"
-					>
-						<div class="item-header flex align-center">
-							<img
-								src="@/assets/images/award/bloom_logo.png"
-								class="logo"
-							/>
-							<div class="item-title">{{ item.type }}</div>
-						</div>
-						<div
-							class="context"
-							v-for="el in item.desc"
-						>
-							{{ el }}
-						</div>
-					</div>
-				</div>
-				<div class="right">
-					<div class="item-box">
-						<div class="item-box">
-							<div class="item-header flex align-center">
-								<img
-									src="@/assets/images/award/bloom_logo.png"
-									class="logo"
-								/>
-								<div class="item-title">{{ rightRequirment.type }}</div>
-							</div>
-							<div
-								class="context"
-								v-for="el in rightRequirment.desc"
-							>
-								{{ el }}
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="selection-container container flex flex-col align-center">
-			<div class="title">Selection Criteria</div>
-			<img
-				src="@/assets/images/award/bloom_logo.png"
-				class="logo"
-			/>
-			<div class="sub-title">Evaluation</div>
-			<div class="criteria-list flex">
-				<div
-					class="item flex flex-col align-center"
-					v-for="item in criteriaList"
-					:key="item.name"
-				>
-					<img
-						:src="item.icon"
-						class="icon"
-						:style="item.style"
-					/>
-					<div class="name">{{ item.name }}</div>
-					<div class="desc">{{ item.desc }}</div>
-				</div>
-			</div>
-		</div>
+		<JudgesSection />
+		<PrizesSection />
+		<ApplySection />
+		<SelectionSection />
 	</div>
 </template>
 
 <script setup lang="ts">
 	import { ref } from 'vue'
 	import { useRouter } from 'vue-router'
-	import criteria1 from '@/assets/images/award/criteria_1.png'
-	import criteria2 from '@/assets/images/award/criteria_2.png'
-	import criteria3 from '@/assets/images/award/criteria_3.png'
-	import criteria4 from '@/assets/images/award/criteria_4.png'
-
-	import jae from '@/assets/images/award/jae.png'
-	import diego from '@/assets/images/award/diego.png'
-	import gregory from '@/assets/images/award/gregory.png'
-	import vincenzo from '@/assets/images/award/vincenzo.png'
-	import tim from '@/assets/images/award/tim.png'
-	import desmond from '@/assets/images/award/desmond.png'
+	import JudgesSection from './components/JudgesSection.vue'
+	import SelectionSection from './components/SelectionSection.vue'
+	import ApplySection from './components/ApplySection.vue'
+	import PrizesSection from './components/PrizesSection.vue'
 
 	const router = useRouter()
 
@@ -300,112 +178,6 @@
 			desc: 'Winners revealed with media coverage and live showcase.'
 		}
 	])
-
-	const prizes = ref([
-		{
-			money: 'US$5000',
-			name: 'Grand Prize',
-			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
-		},
-		{
-			money: 'US$3000',
-			name: 'First Runner-Up',
-			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
-		},
-		{
-			money: 'US$2000',
-			name: 'Second Runner-Up',
-			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
-		},
-		{
-			money: 'Certification',
-			name: 'Finalists',
-			desc: ['Award Ceritificate', 'Global Media Exposure']
-		}
-	])
-
-	const leftRequirment = ref([
-		{
-			type: 'Video',
-			desc: ['The process of doing design']
-		},
-		{
-			type: 'Design',
-			desc: [
-				'Structure: design title, moodboard and elaboration (how will you use AiDA to design)',
-				'Design sketch: Maximum 4 outfit design with proposed materials'
-			]
-		}
-	])
-	const rightRequirment = ref({
-		type: 'Submission Format',
-		desc: [
-			'Naming as “AiDA global award 2026_applicantname”',
-			'Mp4\n(1080x1920pixels/20mb within 1min)',
-			'Single PDF file\n(within 15 pages, maximum 20mb)',
-			'English or native language\nwith English translation'
-		]
-	})
-
-	const criteriaList = ref([
-		{
-			icon: criteria1,
-			name: 'Originality',
-			desc: 'Unique perspective and innovative approach to fashion design',
-			style: { width: '13rem', height: '17rem' }
-		},
-		{
-			icon: criteria2,
-			name: 'Creativity',
-			desc: 'Artistic vision and exceptional design excellence',
-			style: { width: '16rem', height: '18rem' }
-		},
-		{
-			icon: criteria3,
-			name: 'AiDA Integration',
-			desc: 'Effective application of AI design tools and functions',
-			style: { width: '16rem', height: '18rem' }
-		},
-		{
-			icon: criteria4,
-			name: 'Execution',
-			desc: 'Quality of presentation and technical craftsmanship',
-			style: { width: '18.8rem', height: '18rem' }
-		}
-	])
-
-	const judgements = [
-		{
-			picture: jae,
-			name: 'Jae Hyuk Lim',
-			desc: 'Code-create\nKorea Branch Director\nBesfxxk creative director'
-		},
-		{
-			picture: diego,
-			name: 'Diego Dultzin Lacoste',
-			desc: 'Co-founder & Chief Father\nOfficer of OnTheList\n(Hong Kong)'
-		},
-		{
-			picture: gregory,
-			name: 'Gregory de la Hogue Moran',
-			desc: 'Senior Designer at\nGabriela Heasrst (Italy)'
-		},
-		{
-			picture: vincenzo,
-			name: 'Vincenzo La Torre',
-			desc: 'Cheif Editor of SCMP Style\n(Hong Kong)'
-		},
-		{
-			picture: tim,
-			name: 'Tim Lim',
-			desc: 'Group Fashion Direction of\n Modern Media Group\n(Shanghai)'
-		},
-		{
-			picture: desmond,
-			name: 'Desmond Lim',
-			desc: 'Cheif Editor of Vogue\n(Singapore)'
-		}
-	]
 </script>
 
 <style lang="less" scoped>
@@ -665,232 +437,7 @@
 			}
 		}
 	}
-	.prizes-container {
-		background: url('@/assets/images/award/prizes_bg.png') no-repeat;
-		background-size: 100% 100%;
-		padding: 0 21.4rem 0 33.4rem;
 
-		.left {
-			width: 36.2rem;
-			row-gap: 2.3rem;
-			margin-right: 27rem;
-			.title {
-				font-family: 'PoppinsBold';
-				font-weight: 600;
-				font-size: 4rem;
-				text-align: center;
-				color: #fff;
-			}
-			.desc {
-				font-family: 'Poppins';
-				font-weight: 400;
-				font-size: 3rem;
-				text-align: center;
-				color: #f95750;
-			}
-		}
-		.right {
-			display: grid;
-			grid-template-columns: repeat(2, 35.5rem);
-			grid-template-rows: repeat(2, 32.8rem);
-			gap: 4.2rem;
-			.prize-item {
-				width: 35.5rem;
-				height: 32.8rem;
-				color: #fff;
-				padding: 4.5rem 0 4.8rem 0;
-				justify-content: space-between;
-				background: url('@/assets/images/award/first_bg.png') no-repeat;
-				background-size: 100% 100%;
-				&:nth-of-type(2) {
-					background: url('@/assets/images/award/second_bg.png') no-repeat;
-					background-size: 100% 100%;
-				}
-				&:nth-of-type(3) {
-					background: url('@/assets/images/award/grand_bg.png') no-repeat;
-					background-size: 100% 100%;
-				}
-				&:nth-of-type(4) {
-					background: url('@/assets/images/award/certification_bg.png')
-						no-repeat;
-					background-size: 100% 100%;
-				}
-				.prize-money {
-					font-family: 'PoppinsBold';
-					font-weight: bold;
-					font-size: 4rem;
-				}
-				.prize-name {
-					font-family: 'PoppinsMedium';
-					font-weight: 500;
-					font-size: 2.8rem;
-				}
-				.prize-desc {
-					color: #e0e0e0;
-					font-family: 'Arial';
-					font-weight: 400;
-					font-size: 2rem;
-					line-height: 3rem;
-					height: 8.9rem;
-				}
-			}
-		}
-	}
-	.apply-container {
-		flex: 1;
-		background: url('@/assets/images/award/apply_bg.png') no-repeat;
-		background-size: 100% 100%;
-		padding: 12.7rem 0 16.9rem;
-		.title {
-			text-align: center;
-			color: #232323;
-			font-family: 'PoppinsBold';
-			font-weight: 600;
-			font-size: 4rem;
-			margin-bottom: 3rem;
-		}
-		.sub-title {
-			text-align: center;
-			color: #b10000;
-			font-size: 3rem;
-			font-family: 'Arial';
-			font-weight: 400;
-		}
-		.requirments-list {
-			flex: 1;
-			padding-left: 41.4rem;
-			column-gap: 17.7rem;
-			margin-top: 12rem;
-			.left {
-				color: #232323;
-				height: 100%;
-			}
-			.item-box {
-				.item-header {
-					column-gap: 3.2rem;
-					.item-title {
-						color: #232323;
-						font-family: 'PoppinsBold';
-						font-weight: 600;
-						font-size: 2.8rem;
-					}
-				}
-				.context {
-					margin-top: 4rem;
-					width: 46.8rem;
-					color: #585858;
-					font-family: 'Arial';
-					font-weight: 400;
-					line-height: 3rem;
-					font-size: 2.4rem;
-					padding-left: 5.6rem;
-					white-space: pre-line;
-				}
-			}
-		}
-	}
-	.selection-container {
-		background: url('@/assets/images/award/selection_bg.png') no-repeat;
-		background-size: 100% 100%;
-		padding-top: 9.3rem;
-		.title {
-			color: #fff;
-			font-family: 'PoppinsBold';
-			font-weight: 600;
-			font-size: 4rem;
-		}
-		.logo {
-			margin: 2.3rem 0 2.3rem;
-		}
-		.sub-title {
-			color: #f95750;
-			font-family: 'Popins';
-			font-weight: 400;
-			font-size: 3rem;
-			margin-bottom: 11.8rem;
-		}
-		.criteria-list {
-			column-gap: 6rem;
-			.item {
-				height: 44rem;
-				width: 32.2rem;
-				box-sizing: border-box;
-				&:nth-of-type(3) {
-					background: url('@/assets/images/award/criteria_bg.png') no-repeat;
-					background-size: 100% 100%;
-				}
-				.icon {
-					width: 18.8rem;
-					height: 18rem;
-				}
-				.name {
-					font-family: 'PoppinsMedium';
-					font-weight: 500;
-					font-size: 2.8rem;
-					color: #fff;
-					margin: 2rem 0 5rem;
-				}
-				.desc {
-					font-family: 'Arial';
-					font-weight: 400;
-					font-size: 2.4rem;
-					color: #e0e0e0;
-					text-align: center;
-				}
-			}
-		}
-	}
-	.judges-container {
-		height: 147.4rem;
-		background: url('@/assets/images/award/judges_bg.png') no-repeat;
-		background-size: 100% 100%;
-		padding-top: 12.8rem;
-		.title {
-			color: #232323;
-			font-family: 'PoppinsBold';
-			font-weight: 600;
-			font-size: 4rem;
-		}
-		.logo {
-			margin: 2.4rem 0 2.2rem;
-		}
-		.sub-title {
-			color: #b10000;
-			font-family: 'Arial';
-			font-weight: 400;
-			font-size: 3rem;
-			margin-bottom: 12rem;
-		}
-		.judgement-list {
-			display: grid;
-			grid-template-columns: repeat(3, 1fr);
-			column-gap: 23.22rem;
-			row-gap: 8rem;
-			padding: 0 25rem 0 26.6rem;
-			.judgement-item {
-				.picture {
-					width: 20.2rem;
-					height: 26rem;
-					border-radius: 0.8rem;
-				}
-				.name {
-					margin: 3rem 0 2.4rem;
-					color: #232323;
-					font-family: 'PoppinsBold';
-					font-weight: 600;
-					font-size: 2.4rem;
-				}
-				.desc {
-					color: #585858;
-					font-family: 'Arial';
-					font-weight: 400;
-					font-size: 2rem;
-					white-space: pre-line;
-					text-align: center;
-				}
-			}
-		}
-	}
 	.footer {
 		height: 10rem;
 		padding-left: 21.5rem;