<template>
	<section class="section-index bgw">
		<img src="@/assets/images/home/bg.jpg" class="bg" />
		<div class="shade-1"></div>
		<div class="shade-2"></div>
		<div class="content">
			<div class="title">Windswept Burden</div>
			<div class="tip">We are spiritual nomads carrying<br />what wind cannot take.</div>
			<button custom>View More</button>
			<div class="aida-logo"><img src="@/assets/images/aida-logo.png" /></div>
			<p class="tip">
				What you wear is how you present yourself to the world, especially today, when human
				contacts are so quick. Fashion is instant language
			</p>
			<p class="tip">I firmly believe that with the right footwear one can rule the world.</p>
		</div>
	</section>
</template>

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

<style lang="less">
	.section-index {
		> .shade-1 {
			position: absolute;
			top: 0;
			left: 0;
			width: 96rem;
			height: 100%;
			background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
		}
		> .shade-2 {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 30rem;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.37%, rgba(0, 0, 0, 0.192) 90.74%);
		}
		> .content {
			top: 16rem;
			left: 9rem;
			color: #fff;
			> .title {
				font-family: KaiseiOpti-Bold;
				font-size: 6rem;
				margin-bottom: 3rem;
			}
			> div.tip {
				font-family: KaiseiOpti-Regular;
				font-size: 3.2rem;
				line-height: 4.3rem;
			}
			> button {
				margin-top: 11.6rem;
				margin-bottom: 13.9rem;
			}
			> .aida-logo {
				margin-bottom: 3rem;
				> img {
					width: auto;
					height: 5rem;
				}
			}
			> p.tip {
				font-family: KaiseiOpti-Regular;
				font-size: 1.2rem;
				line-height: 2rem;
				color: #ededed;
			}
		}
	}
</style>
