<template>
  <div class="notifications">
    <section class="page-hero">
      <div class="container">
        <h1>Уведомления</h1>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div class="notifications__empty">
          <p class="body-text--gray">У вас пока нет уведомлений</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  title: 'Уведомления',
})
</script>

<style scoped>
.page-hero {
  background: var(--color-primary);
  padding: 60px 0;
  text-align: center;
  color: var(--color-text-white);
}

.page-hero h1 {
  color: var(--color-text-white);
}

.notifications__empty {
  text-align: center;
  padding: 60px 0;
}
</style>
