<template>
<Sidebar>
</Sidebar>
<Content>
  <template v-slot:title>Welcome to Mercury!</template>
  <template v-slot:content>
    <div class="d-flex flex-column text-center align-items-center px-5 overflow-hidden">
      <img class="animate__animated animate__rollIn py-5 w-25" id="logo" src="../assets/logo-light.png" />
      <h1 class="animate__animated animate__zoomIn">
        Mercury is a web-based BENNC client.
      </h1>
      <h2 class="animate__animated animate__zoomIn">
        Go to <router-link :to="{ name: 'Settings' }" class="text-muted"><i class="bi bi-gear-fill"></i> Settings</router-link> to configure your client.
      </h2>
    </div>
  </template>
</Content>
</template>

<script setup>
import Sidebar from '../components/Sidebar.vue'
import Content from '../components/Content.vue'
</script>

<style scoped>
#logo {
  filter: invert(80%);
}
/* h1 {
  --animate-delay: 0.5s;
}
h2 {
  --animate-delay: 0.5s;
} */
</style>