aida_front/src/views/AwardPage/index.vue

<template>
	<div class="award-page">
		<div class="banner">
			<div
				class="submit-btn flex flex-center"
				@click="handleSubmitApplication"
			>
				<div>Submit your Application</div>
				<img
					src="@/assets/images/award/arrow_right.png"
					alt=""
					class="arrow"
				/>
				<div class="ddl">Application Deadline:15th March 2026</div>
			</div>
		</div>
		<div class="blocks-list flex">
			<div
				class="block-item flex flex-col flex-center"
				v-for="item in blocksList"
				:key="item.number"
			>
				<div class="number">{{ item.number }}</div>
				<div class="label">{{ item.label }}</div>
				<div class="line"></div>
			</div>
		</div>

		<Bloom />
		<TimeLine />
		<JudgesSection />
		<PrizesSection />
		<ApplySection />
		<SelectionSection />
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useRouter } from 'vue-router'
	import JudgesSection from './components/JudgesSection.vue'
	import SelectionSection from './components/SelectionSection.vue'
	import ApplySection from './components/ApplySection.vue'
	import PrizesSection from './components/PrizesSection.vue'
	import TimeLine from './components/TimeLine.vue'
	import Bloom from './components/Bloom.vue'

	const router = useRouter()

	const handleSubmitApplication = () => {
		router.push('/award/contestants')
	}

	const blocksList = ref([
		{
			number: 'NETWORKING\n OPPORTUNITIES',
			label: 'with international\nmedia and designers'
		},
		{
			number: 'INTERNATIONAL\nMEDIA EXPOSE',
			label: 'through\nleading outlets'
		},
		{
			number: 'UP TO\nUS$9000',
			label: 'in total prize\npool awards'
		},
		{
			number: 'TRAVEL\NALLOWANCE',
			label: 'for finalists to attend\naward ceremony'
		}
	])
</script>

<style lang="less" scoped>
	.container {
		height: 97rem;
	}

	.logo {
		width: 2.4rem;
		height: 2.4rem;
	}
	.banner {
		height: 108rem;
		background: url('@/assets/images/award/banner.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
		.submit-btn {
			width: 41rem;
			height: 6.394rem;
			line-height: 6.394rem;
			text-align: center;
			border-radius: 3.2rem;
			box-shadow: inset 0 0 1119px 0 rgba(255, 255, 255, 0.3),
				inset -0.8px -2.4px 1.6px 0.4px rgba(255, 255, 255, 0.1),
				inset 0.8px 2.4px 1.6px 0 rgba(255, 255, 255, 0.3);
			color: #fff;
			font-family: 'PoppinsBold';
			font-weight: 600;
			font-size: 2.4rem;
			column-gap: 3.2rem;
			position: absolute;
			top: 23.88rem;
			left: 51rem;
			backdrop-filter: blur(5px);
			cursor: pointer;
			.arrow {
				width: 3.83rem;
				height: 3.83rem;
			}
			.ddl {
				position: absolute;
				bottom: -4rem;
				left: 0;
				text-align: center;
				width: 41rem;
				font-family: 'Arial';
				font-weight: 400;
				font-size: 2rem;
				line-height: 2.2rem;
			}
		}
	}
	.blocks-list {
		height: 31.4rem;
		background: linear-gradient(98.55deg, #232323 18.22%, #898989 101.1%);

		.block-item {
			flex: 1;
			height: 100%;
			color: #fff;
			position: relative;
			text-align: center;
			white-space: pre-line;
			row-gap: 3rem;
			.number {
				font-size: 3.6rem;
				font-family: 'PoppinsBold';
				font-weight: 600;
			}
			.label {
				font-size: 2.4rem;
				font-family: 'Arial';
				font-weight: 400;
				letter-spacing: 0.05em;
			}
			.line {
				position: absolute;
				bottom: 50%;
				right: 0;
				transform: translate(0, 50%);
				width: 0.1rem;
				height: 27.4rem;
				background-color: #8d8d8d;
			}
		}
	}
</style>