Files
docker-website/src/pages/index.vue
2022-12-06 19:31:52 +01:00

69 lines
1.7 KiB
Vue

<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>