<template>
	<section class="section-design bgw">
		<img src="@/assets/images/home/design-bg.jpg" class="bg" />
		<div class="content">
			<div class="aida-logo"><img src="@/assets/images/aida-logo.png" /></div>
			<div class="title">Design with AiDA</div>
			<div class="tip">
				Each garment on this platform is where designer vision blooms through AiDA. A tool that
				nurtures your creativity, never overshadows it. Let your ideas flourish.
			</div>
			<button custom>Try Now</button>
		</div>
	</section>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue'
</script>

<style lang="less">
	.section-design {
		> .content {
			width: 55rem;
			top: 12rem;
			left: 9rem;
			> .aida-logo {
				margin-bottom: 6rem;
				> img {
					width: auto;
					height: 6.9rem;
				}
			}
			> .title {
				font-family: KaiseiOpti-Bold;
				font-size: 5.6rem;
				line-height: 6.2rem;
				margin-bottom: 2rem;
				color: #fff;
			}
			> .tip {
				font-family: KaiseiOpti-Regular;
				font-size: 2rem;
				line-height: 2.8rem;
				color: #fff;
				margin-bottom: 10rem;
			}
		}
	}
</style>
