<template>
  <div class="dressfor-container flex flex-center">
    <div class="content flex flex-center flex-column">
      <div class="text">What are you dressing for?</div>
      <div class="start-btn" @click="handleStart">Start</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()

const handleStart = () => {
  console.log('click start')
  router.push('/asistant')
}
</script>
<style lang="less" scoped>
.dressfor-container {
  height: 100vh;
  overflow: hidden;
  color: #fff;
  position: relative;
  background: url('@/assets/images/dress_for_bg.png') no-repeat center center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 6rem 12.4rem 0 8.5rem;
  .content {
    row-gap: 20rem;
    .text {
      font-family: 'satoshiBold';
      font-size: 11rem;
      line-height: 106%;
      text-align: center;
    }
    .start-btn {
      font-size: 5.6rem;
      width: 32.5rem;
      height: 8.1rem;
      border: 2px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4rem;
    }
  }
}
</style>
