<template>
  <div class="project-create">
    <img src="/flag.svg" class="mb-40">

    <i18n-t scope="global" keypath="create_your_project.title" tag="h2">
      <span class="text-clr-cyan-500">
        {{ $t('create_your_project.create') }}
      </span>
    </i18n-t>

    <h4 class="project-create__text">
      {{ $t('create_your_project.content') }}
    </h4>

    <UiButton size="large" class="mt-40 w-100" href="/projects/create">
      {{ $t('create') }}
    </UiButton>
  </div>
</template>

<style lang="scss">
.project-create {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 422px;
  align-self: center;
  justify-self: center;

  &__text {
    color: $clr-grey-400;
    margin-top: 8px;
  }
}
</style>
