<template>
	<div class="nuic-1">
		<img src="@/assets/images/nuic/nuic-1-bg.png" />
		<p class="hi">Hi, Aaa.</p>
		<p class="title">Help Fiphant discover the <b>'YOU'</b> in your space.</p>
		<p class="tip">
			Let's set up your profile. A few quick details will help Fiphant understand
			<br />
			your needs and find exactly what you're looking for.
		</p>
		<div class="btns">
			<button class="next" @click="emit('next')">Let’s go, Fiphant!</button>
			<button class="skip" @click="onSkip">Skip</button>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue'
	import { useRouter } from 'vue-router'
	const router = useRouter()
	const emit = defineEmits(['next'])
	const onSkip = () => {
		router.push({ name: 'home' })
	}
</script>

<style lang="less" scoped>
	.nuic-1 {
		> img {
			width: 44.7rem;
			height: auto;
			margin-bottom: 4.8rem;
		}
		> .hi {
			font-weight: 500;
			font-size: 4rem;
			margin-bottom: 1rem;
		}
		> .title {
			font-weight: 500;
			font-size: 4rem;
			margin-bottom: 2rem;
			> b {
				font-size: 4.8rem;
			}
		}
		> .tip {
			font-weight: 400;
			font-size: 2rem;
			color: #585858;
			margin-bottom: 8.7rem;
		}
	}
</style>
