Code-Create/src/pages/aida/index.vue

<script setup lang="ts">
	import { useHead } from '@unhead/vue'
	import { shallowRef, useTemplateRef } from 'vue'
	import aidaIntroBg from '@/assets/images/home/aida-intro-bg.png'
	import aidaPanel from '@/assets/images/home/aida-panel.png'
	import aidaBanner from '@/assets/images/aida/aida-banner.jpg'
	import demoVideo from '@/assets/images/aida/aida-demo-video.mp4'
	import diamondIcon from '@/assets/images/aida/diamond.svg'
	import industryOne from '@/assets/images/aida/industry-1.png'
	import industryTwo from '@/assets/images/aida/industry-2.png'
	import industryThree from '@/assets/images/aida/industry-3.png'
	import timeIcon from '@/assets/images/aida/time.svg'

	const keyFeatures = [
		"The world's first AI system in fashion design emphasizing user control, ensuring AI-generated designs align seamlessly with the designer's unique vision and brand identity.",
		'Excels in synthesizing diverse inputs, such as moodboards, fabric prints, color choices, and sketches, into a cohesive collection quickly, harmoniously, and efficiently.',
		'Significantly speeds up the design process by over 60%, quickly generating unlimited designs based on user input.',
		'Incorporates cutting-edge AIGC technology to generate innovative designs and provide comprehensive assistance in the creative process.'
	] as const

	const benefits = [
		{
			image: industryOne,
			alt: 'Light bulb icon',
			text: 'Provides speedy ideation for fashion brands and individual designers'
		},
		{
			image: industryTwo,
			alt: 'Stopwatch icon',
			text: 'Speeds up the whole fashion design process to strive for the goal of sustainability and cost-saving'
		},
		{
			image: industryThree,
			alt: 'Drawing brush icon',
			text: 'Allows fashion novices who do not have drawing or sketching skills to create their own designs in a simple and easy mode'
		}
	] as const

	const subscriptionHighlights = [
		'Easily create your fashion collections in around 10 seconds based on your creative inspirations and Brand DNA',
		'Upload mood boards, colour choices, fabric prints and sketches for generating unlimited design proposals',
		'Save and retrieve your own designs with just a few clicks',
		'A Cloud-based system by subscription for accessing anytime and anywhere',
		'Easy to use, can learn in 10 minutes',
		'Contact us for AiDA trial at info@code-create.com.hk'
	] as const

	const plans = [
		{
			icon: timeIcon,
			name: 'Trial',
			description: '7 days free trial',
			action: 'Start Trial',
			href: 'mailto:info@code-create.com.hk?subject=AiDA%203.1%20Trial'
		},
		{
			icon: diamondIcon,
			name: 'Corporate',
			description: 'Customised plan',
			action: 'Contact Us',
			href: 'mailto:info@code-create.com.hk?subject=AiDA%203.1%20Corporate%20Plan'
		}
	] as const

	const demoVideoRef = useTemplateRef<HTMLVideoElement>('demoVideoRef')
	const isVideoPlaying = shallowRef(false)

	async function toggleDemoVideo() {
		const video = demoVideoRef.value

		if (!video) {
			return
		}

		if (video.paused) {
			await video.play()
			isVideoPlaying.value = true
			return
		}

		video.pause()
		isVideoPlaying.value = false
	}

	function handleVideoStateChange() {
		const video = demoVideoRef.value
		isVideoPlaying.value = Boolean(video && !video.paused && !video.ended)
	}

	useHead({
		title: 'AiDA 3.1 | Code Create',
		meta: [
			{
				name: 'description',
				content:
					'AiDA 3.1 is an AI-based interactive design assistant for fashion designers.'
			}
		]
	})
</script>

<template>
	<main class="aida-page">
		<section class="aida-hero" aria-labelledby="aida-title">
			<img class="aida-hero-image" :src="aidaBanner" alt="AiDA 3.1 purple silk banner" />
			<h1 id="aida-title" class="aida-hero-title">AiDA 3.1</h1>
		</section>

		<section class="intro-section" aria-labelledby="intro-title">
			<div class="intro-inner" v-custom-animation.scroll>
				<h2 id="intro-title" class="intro-title">
					AI-Based Interactive Design Assistant For Fashion
				</h2>
				<p class="intro-copy">
					AiDA 3.1, a first-to-market technology that empowers fashion designers, based on
					their creative inspirations, to work with AI to create original designs. With
					just a few clicks, designers can choose or refine options to develop fashion
					collections, bringing agility, efficiency and flexibility to conventional and
					intensive studio processes.
				</p>
				<p class="pricing-copy">
					Annual Subscription Fee: $5,000 HKD / Year (50000 Credits)<br />
					Monthly Subscription Fee: $500 HKD / Month (3500 Credits)<br />
					Monthly Subscription Fee: $100 HKD / Month (500 Credits)
				</p>
				<p class="academic-copy">
					Special Academic rate available, please contact us for details.
				</p>
				<a
					class="primary-button"
					href="mailto:info@code-create.com.hk?subject=AiDA%203.1%20Subscription"
				>
					Subscribe Now
				</a>
				<a class="manual-link" href="#subscription">User Manual</a>
			</div>
		</section>

		<section class="features-section" aria-labelledby="features-title">
			<div class="features-inner" v-custom-animation.scroll>
				<div class="feature-art">
					<img
						class="feature-bg"
						:src="aidaIntroBg"
						alt="Fashion design sketches on paper"
						loading="lazy"
					/>
					<img
						class="feature-panel"
						:src="aidaPanel"
						alt="AiDA design workspace preview"
						loading="lazy"
					/>
				</div>
				<div class="feature-copy">
					<h2 id="features-title" class="section-title">Key Features</h2>
					<ul class="feature-list">
						<li v-for="feature in keyFeatures" :key="feature">
							{{ feature }}
						</li>
					</ul>
				</div>
			</div>
		</section>

		<section class="benefits-section" aria-labelledby="benefits-title">
			<div class="benefits-inner">
				<h2 id="benefits-title" class="section-title benefits-title">
					Benefits to Industry
				</h2>
				<div class="benefits-grid">
					<article v-for="benefit in benefits" :key="benefit.text" class="benefit-card">
						<img
							class="benefit-icon"
							:src="benefit.image"
							:alt="benefit.alt"
							loading="lazy"
						/>
						<p class="benefit-copy">{{ benefit.text }}</p>
					</article>
				</div>
			</div>
		</section>

		<section class="demo-section" aria-labelledby="demo-title">
			<div class="demo-inner">
				<h2 id="demo-title" class="demo-title">Demo</h2>
				<div class="demo-video-wrap">
					<video
						ref="demoVideoRef"
						class="demo-video"
						:class="{ 'is-playing': isVideoPlaying }"
						preload="metadata"
						playsinline
						@click="toggleDemoVideo"
						@pause="handleVideoStateChange"
						@play="handleVideoStateChange"
						@ended="handleVideoStateChange"
					>
						<source :src="demoVideo" type="video/mp4" />
					</video>
					<button
						v-show="!isVideoPlaying"
						class="video-play-button"
						type="button"
						aria-label="Play AiDA demo video"
						@click="toggleDemoVideo"
					>
						Click to play
						<span class="play-dot" aria-hidden="true"></span>
					</button>
				</div>
			</div>
		</section>

		<section
			id="subscription"
			class="subscription-section"
			aria-labelledby="subscription-title"
		>
			<div class="subscription-inner">
				<h2 id="subscription-title" class="section-title subscription-title">
					Choose Your Subscription Plan
				</h2>
				<ul class="subscription-list">
					<li v-for="item in subscriptionHighlights" :key="item">
						{{ item }}
					</li>
				</ul>

				<div class="plans-grid">
					<article v-for="plan in plans" :key="plan.name" class="plan-card">
						<img
							class="plan-icon"
							:src="plan.icon"
							:alt="`${plan.name} plan icon`"
							loading="lazy"
						/>
						<h3 class="plan-title">{{ plan.name }}</h3>
						<p class="plan-copy">{{ plan.description }}</p>
						<a class="plan-button" :href="plan.href">{{ plan.action }}</a>
					</article>
				</div>

				<div class="legal-links">
					<a href="#subscription">Terms &amp; Conditions</a>
					<a href="#subscription">Subscription Agreement</a>
				</div>
			</div>
		</section>
	</main>
</template>

<style scoped lang="less">
	.aida-page {
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		background: #f0f0f0;
		color: #333333;
		font-family: Poppins, Arial, sans-serif;
	}

	.aida-hero {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: clamp(280px, 36vw, 520px);
		min-height: 280px;
		background: #241023;
		overflow: hidden;
	}

	.aida-hero-image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.aida-hero-title {
		position: relative;
		z-index: 1;
		margin: 0;
		padding-top: 34px;
		color: #ffffff;
		font-size: clamp(40px, 5.2vw, 72px);
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0;
		text-transform: none;
		text-align: center;
	}

	.intro-section {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 735px;
		padding: 110px 24px 122px;
		background: #ebebeb;
	}

	.intro-inner {
		width: min(100%, 720px);
		text-align: center;
	}

	.intro-title,
	.section-title,
	.demo-title,
	.subscription-title,
	.plan-title {
		margin: 0;
		color: #333333;
		font-family: Poppins, Arial, sans-serif;
		font-weight: 700;
		letter-spacing: 1.4px;
		text-transform: none;
	}

	.intro-title {
		margin-bottom: 32px;
		font-size: clamp(18px, 1.55vw, 24px);
		line-height: 1.35;
	}

	.intro-copy,
	.pricing-copy,
	.academic-copy {
		margin: 0 auto;
		color: #555555;
		font-size: 12px;
		line-height: 1.5;
		letter-spacing: 0;
	}

	.intro-copy {
		max-width: 610px;
		margin-bottom: 20px;
	}

	.pricing-copy {
		max-width: 520px;
		margin-bottom: 14px;
		color: #3f3f3f;
		font-weight: 700;
		line-height: 1.32;
		letter-spacing: 1.1px;
	}

	.academic-copy {
		margin-bottom: 25px;
	}

	.primary-button,
	.plan-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 43px;
		padding: 0 34px;
		border-radius: 999px;
		background: #a51f28;
		color: #ffffff;
		font-size: 10px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 1.8px;
		text-decoration: none;
		text-transform: uppercase;
		transition:
			background-color 0.2s ease,
			transform 0.2s ease;
	}

	.primary-button:hover,
	.primary-button:focus-visible,
	.plan-button:hover,
	.plan-button:focus-visible {
		background: #8f1720;
		transform: translateY(-1px);
	}

	.primary-button:focus-visible,
	.plan-button:focus-visible,
	.manual-link:focus-visible,
	.legal-links a:focus-visible,
	.video-play-button:focus-visible {
		outline: 2px solid #a51f28;
		outline-offset: 4px;
	}

	.manual-link {
		display: table;
		margin: 23px auto 0;
		color: #333333;
		font-size: 10px;
		font-weight: 700;
		line-height: 1.4;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.features-section,
	.benefits-section,
	.subscription-section {
		background: #f4f4f4;
	}

	.features-section {
		padding: clamp(82px, 9vw, 132px) 24px 70px;
	}

	.features-inner {
		display: grid;
		grid-template-columns: minmax(300px, 520px) minmax(320px, 620px);
		align-items: center;
		gap: clamp(56px, 7vw, 112px);
		width: min(100%, 1180px);
		margin: 0 auto;
	}

	.feature-art {
		position: relative;
		min-height: clamp(440px, 38vw, 565px);
	}

	.feature-bg {
		display: block;
		width: min(75%, 430px);
		border-radius: 24px;
		user-select: none;
	}

	.feature-panel {
		position: absolute;
		right: 0;
		bottom: 32px;
		width: min(75%, 445px);
		filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.12));
		user-select: none;
	}

	.feature-copy {
		max-width: 610px;
		padding-top: 12px;
	}

	.section-title {
		font-size: clamp(26px, 2.35vw, 42px);
		line-height: 1.18;
	}

	.feature-list {
		margin: 32px 0 0;
		padding-left: 18px;
		color: #444444;
		font-size: 13px;
		line-height: 1.55;
	}

	.feature-list li + li {
		margin-top: 12px;
	}

	.benefits-section {
		padding: 78px 24px 112px;
	}

	.benefits-inner {
		width: min(100%, 1160px);
		margin: 0 auto;
		text-align: center;
	}

	.benefits-title {
		margin-bottom: clamp(56px, 7vw, 95px);
	}

	.benefits-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(40px, 8vw, 118px);
		align-items: start;
	}

	.benefit-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 0;
	}

	.benefit-icon {
		width: 84px;
		height: 84px;
		object-fit: contain;
		margin-bottom: 48px;
		user-select: none;
	}

	.benefit-copy {
		max-width: 248px;
		margin: 0;
		color: #555555;
		font-size: 12px;
		line-height: 1.45;
		letter-spacing: 0;
	}

	.demo-section {
		padding: 78px 24px 104px;
		background: #372b28;
	}

	.demo-inner {
		width: min(100%, 1060px);
		margin: 0 auto;
		text-align: center;
	}

	.demo-title {
		margin-bottom: 14px;
		color: #ffffff;
		font-size: clamp(24px, 2.15vw, 34px);
		line-height: 1.2;
	}

	.demo-video-wrap {
		position: relative;
		width: min(100%, 960px);
		margin: 0 auto;
		background: #202020;
		aspect-ratio: 16 / 9;
		overflow: hidden;
	}

	.demo-video {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		cursor: pointer;
		filter: grayscale(1);
	}

	.demo-video.is-playing {
		filter: none;
	}

	.video-play-button {
		position: absolute;
		top: 50%;
		left: 50%;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 32px;
		padding: 0 16px;
		border: 0;
		border-radius: 999px;
		background: #a51f28;
		color: #ffffff;
		font-family: Poppins, Arial, sans-serif;
		font-size: 10px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0;
		cursor: pointer;
		transform: translate(-50%, -50%);
		transition:
			background-color 0.2s ease,
			transform 0.2s ease;
	}

	.video-play-button:hover {
		background: #8f1720;
		transform: translate(-50%, calc(-50% - 1px));
	}

	.play-dot {
		display: block;
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 8px solid #ffffff;
	}

	.subscription-section {
		padding: clamp(76px, 8vw, 104px) 24px 86px;
	}

	.subscription-inner {
		width: min(100%, 930px);
		margin: 0 auto;
	}

	.subscription-title {
		margin-bottom: 27px;
		font-size: clamp(28px, 3vw, 43px);
		line-height: 1.2;
		text-align: left;
	}

	.subscription-list {
		margin: 0 auto 52px;
		padding: 0;
		list-style: none;
		color: #333333;
		font-size: 13px;
		line-height: 1.48;
	}

	.subscription-list li {
		position: relative;
		padding-left: 24px;
	}

	.subscription-list li + li {
		margin-top: 14px;
	}

	.subscription-list li::before {
		content: '';
		position: absolute;
		top: 0.55em;
		left: 0;
		width: 10px;
		height: 5px;
		border-left: 2px solid #333333;
		border-bottom: 2px solid #333333;
		transform: rotate(-45deg);
	}

	.plans-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px;
	}

	.plan-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 324px;
		padding: 34px 28px 30px;
		border-radius: 12px;
		background: #ffffff;
		text-align: center;
	}

	.plan-icon {
		width: 86px;
		height: 86px;
		object-fit: contain;
		margin-bottom: 30px;
	}

	.plan-title {
		margin-bottom: 34px;
		color: #a51f28;
		font-size: 22px;
		line-height: 1.2;
	}

	.plan-copy {
		margin: 0 0 44px;
		color: #555555;
		font-size: 12px;
		line-height: 1.45;
	}

	.plan-button {
		min-height: 39px;
		margin-top: auto;
		padding: 0 27px;
	}

	.legal-links {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 18px;
		margin-top: 45px;
	}

	.legal-links a {
		color: #333333;
		font-size: 10px;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	@media (max-width: 980px) {
		.intro-section {
			min-height: 620px;
			padding: 84px 24px 94px;
		}

		.features-inner {
			grid-template-columns: 1fr;
			gap: 34px;
			width: min(100%, 680px);
		}

		.feature-art {
			min-height: clamp(390px, 78vw, 560px);
		}

		.feature-copy {
			max-width: 100%;
		}

		.benefits-grid {
			gap: 40px;
		}

		.subscription-inner {
			width: min(100%, 760px);
		}
	}

	@media (max-width: 720px) {
		.aida-hero {
			height: 292px;
		}

		.aida-hero-title {
			padding-top: 24px;
			font-size: 42px;
		}

		.intro-section {
			min-height: 520px;
			padding: 72px 20px 78px;
		}

		.intro-title {
			margin-bottom: 24px;
		}

		.features-section {
			padding: 64px 20px 44px;
		}

		.feature-bg {
			width: 72%;
		}

		.feature-panel {
			width: 78%;
			bottom: 24px;
		}

		.benefits-section {
			padding: 52px 20px 76px;
		}

		.benefits-grid,
		.plans-grid {
			grid-template-columns: 1fr;
		}

		.benefit-icon {
			margin-bottom: 24px;
		}

		.demo-section {
			padding: 58px 20px 76px;
		}

		.subscription-section {
			padding: 62px 20px 70px;
		}

		.subscription-title {
			text-align: center;
		}

		.subscription-list {
			margin-bottom: 40px;
		}
	}

	@media (max-width: 480px) {
		.aida-hero {
			height: 250px;
			min-height: 250px;
		}

		.aida-hero-title {
			font-size: 34px;
		}

		.intro-copy,
		.pricing-copy,
		.academic-copy,
		.feature-list,
		.subscription-list {
			font-size: 12px;
		}

		.feature-art {
			min-height: 320px;
		}

		.plan-card {
			min-height: 292px;
			padding: 30px 22px;
		}
	}
</style>