<template>
  <main class="home">
    <h1 class="home__title">fete</h1>
    <p class="home__subtitle">No events yet.<br />Create your first one!</p>
    <RouterLink to="/create" class="btn-primary home__cta">+ Create Event</RouterLink>
  </main>
</template>

<script setup lang="ts">
import { RouterLink } from 'vue-router'
</script>

<style scoped>
.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  text-align: center;
}

.home__title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-text-on-gradient);
}

.home__subtitle {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-on-gradient);
  opacity: 0.9;
}

.home__cta {
  margin-top: var(--spacing-md);
  max-width: 280px;
}
</style>
