<template>
  <div class="mx-6">
    <header class="h-screen flex flex-col justify-center">
      <nav class="fixed right-0 top-0 p-2 z-50">
        <a
          title="Go to Pegaz GitHub repo"
          href="https://github.com/valerebron/pegaz"
          target="_blank"
        >
          <SvgGithub class="bg-white rounded-full shadow-lg hover:scale-105" />
        </a>
      </nav>
      <HeroTitle client:visible />
      <HeroButtons client:visible />
    </header>
    <main class="-mt-20">
      <Demo />
      <Disclaimer />
      <BackupRestore />
      <ApplicationsList />
    </main>
  </div>
</template>

<style>
.pegaz-section {
  @apply flex flex-col md:flex-row items-center justify-center mb-28;
}
.title {
  @apply text-3xl text-center mb-10  uppercase text-transparent bg-clip-text bg-gradient-to-r from-violet-900 to-blue-500;
}
.app {
  @apply bg-black bg-opacity-10 w-20 h-20 p-4 flex-wrap cursor-pointer inline-block rounded-xl transition-all;
}
.app--demo {
  @apply bg-black bg-opacity-10 w-20 h-20 p-4 flex-wrap cursor-pointer inline-block transition-all;
}
.app--backup {
  @apply bg-black bg-opacity-10 w-20 h-20 p-4 flex-wrap cursor-pointer inline-block transition-all;
}
</style>
