sfp_front_vue_diarista_cliente/src/pages/agenda/AgendaPage.vue

<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
<template>
  <section class="mobile-placeholder">
    <div class="mobile-placeholder__badge">
      <q-icon name="mdi-calendar-blank-outline" />
    </div>
    <h1 class="mobile-placeholder__title">Agenda</h1>
    <p class="mobile-placeholder__description">
      Área reservada para exibir compromissos, confirmações e próximas diárias.
    </p>
  </section>
</template>

<style scoped>
.mobile-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 240px);
  padding: 32px 20px;
  text-align: center;
}

.mobile-placeholder__badge {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 28px;
  margin-bottom: 20px;
  background: linear-gradient(180deg, rgba(255, 0, 234, 0.14), rgba(107, 17, 203, 0.08));
  color: #ff00ea;
  font-size: 44px;
}

.mobile-placeholder__title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: #4d4d4d;
}

.mobile-placeholder__description {
  max-width: 280px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #8d8d8d;
}
</style>