Aida_Purchaser_Front/src/views/home/section-index.vue

<template>
	<section class="section-index bgw">
		<img src="@/assets/images/home/bg.png" class="bg" />
		<div class="content">
			<div class="title" v-html="title"></div>
			<div class="tip">
				Discover collections through the stories behind their creation. A curated space connecting
				designers, narratives, and fashion commerce.
			</div>
			<button custom="black-box" @click="handleClickArrow">
				<svg-icon name="arrow_right" size="34" />
			</button>
		</div>
	</section>
</template>

<script setup lang="ts">
	import { computed } from 'vue'
	import { useRouter } from 'vue-router'
	const router = useRouter()
	const title =
		'We’re Seeking<br /><span>Fashion Voice</span><br /><span class="small">Worth Featuring.</span>'
	const handleClickArrow = () => {
		router.push({ name: 'collectionStory' })
	}
</script>

<style lang="less">
	.section-index {
		> .content {
			top: 13.7rem;
			left: 9rem;
			color: #232323;
			> .title {
				font-family: KaiseiOpti-Bold;
				font-size: 7rem;
				margin-bottom: 3rem;
				span {
					font-family: KaiseiOpti-Medium;
					&.small {
						font-size: 6rem;
					}
				}
			}
			> .tip {
				width: 50rem;
				font-size: 1.8rem;
				line-height: 2.6rem;
				color: #585858;
			}
			> button {
				margin-top: 12rem;
				min-width: 0;
				width: 8rem;
				height: 8rem;
			}
		}
	}
</style>