<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"
        >
          <Github 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 />
      <AppList />
    </main>
  </div>
</template>

<script setup>
import { useMeta } from 'vue-meta'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUsersStore } from 'Store/useUsersStore'

import Github from 'Svg/github.vue'
import HeroTitle from 'Component/hero-title.vue'
import HeroButtons from 'Component/hero-buttons.vue'
import Demo from 'Component/demo.vue'
import AppList from 'Component/applications-list.vue'
import BackupRestore from 'Component/backup-restore.vue'
import Disclaimer from 'Component/disclaimer.vue'

useMeta({
  title: 'Deploy stack on the go'
})

const router = useRouter()
const usersStore = useUsersStore()
const newName = ref('')

function saveName() {
  if (newName.value === '') {
    return
  }

  usersStore.saveName(newName.value)
  router.push(`/about/${newName.value}`)
  newName.value = ''
}
</script>

<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 rounded-xl flex-wrap cursor-pointer inline-block transition-all;
}
</style>
