<template>
	<section class="section-aida bgw">
		<img src="@/assets/images/home/aida-bg.jpg" class="bg" />
		<div class="content">
			<div class="aida-logo"><img src="@/assets/images/logos/aida.png" /></div>
			<div class="title">{{ $t('Home.AidaTitle') }}</div>
			<div class="tip">{{ $t('Home.AidaTip') }}</div>
			<button custom @click="openView(UrlList.aida)">{{ $t('Home.TryNow') }}</button>
		</div>
	</section>
</template>

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

<style lang="less">
	.section-aida {
		> .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>
