<script setup>
import { ref, reactive } from "vue";
import "animate.css";
import axios from "axios";
import Marquee from "../components/Marquee.vue";
</script>

<template>
  <div class="content">
    <section class="px-3 mb-10">
      <p>
        AI 明信片可以分辨來自不同國籍的旅客 <br />
        只需要使用手機自拍，加上 AI 技術 <br />
        將您完美合成至台灣各景點
      </p>
      <p>
        如果您此趟旅程沒辦法每個地方都去過 <br />
        那這是我們送給您的禮物
      </p>
    </section>

    <Marquee />

    <router-link to="/step2" class="main-btn">下一步</router-link>
    <div class="hashtag">
      <span># 認識台灣</span>
      <span># 馬上取得照片</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
p {
  font-size: 1.5rem;

  @media (max-width: 600px) {
    font-size: 1rem;
  }
}

span {
  font-size: 1.25rem;

  @media (max-width: 600px) {
    font-size: 1rem;
  }
}

.content {
  height: 100vh;
  padding: 4rem 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;

  p {
    &:first-child {
      margin-bottom: 1.625rem;
    }
  }

  .main-btn {
    margin: 3rem auto;
  }

  .hashtag {
    display: flex;
    justify-content: center;

    span {
      color: white;
      &:last-child {
        margin-left: 20px;
      }
    }
  }
}
</style>
