<script setup>
import { useI18n } from "vue-i18n";
import "animate.css";
import Marquee from "../components/Marquee.vue";

const { t } = useI18n();
</script>

<template>
  <div class="content">
    <section class="px-3 mb-10">
      <p>
        {{ t("postcard.step1.text_1") }} <br />
        {{ t("postcard.step1.text_2") }} <br />
        {{ t("postcard.step1.text_3") }}
      </p>
      <p>
        {{ t("postcard.step1.text_4") }} <br />
        {{ t("postcard.step1.text_5") }}
      </p>
    </section>

    <Marquee />

    <router-link to="/step2" class="main-btn">
      {{ t("next_step") }}
    </router-link>
    
    <div class="hashtag">
      <span># {{ t("postcard.step1.text_6") }}</span>
      <span># {{ t("postcard.step1.text_7") }}</span>
    </div>
  </div>
</template>

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

  @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>
