FEAT: backup & restore 1

src/pages/index.vue

@@ -16,6 +16,7 @@
     <main class="-mt-20">
       <Demo />
       <AppList />
+      <BackupRestore />
     </main>
   </div>
 </template>
@@ -24,13 +25,14 @@
 import { useMeta } from 'vue-meta'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { useUsersStore } from '~/stores/useUsersStore'
+import { useUsersStore } from 'Store/useUsersStore'
 
-import Github from "~/components/svg/github.vue";
-import HeroTitle from "~/components/hero-title.vue";
-import HeroButtons from "~/components/hero-buttons.vue";
-import Demo from "~/components/demo.vue";
-import AppList from "~/components/applications-list.vue";
+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'
 
 useMeta({
   title: 'Deploy stack',
@@ -52,3 +54,12 @@ function saveName() {
   newName.value = ''
 }
 </script>
+
+<style>
+  .pegaz-section {
+    @apply flex flex-col md:flex-row items-center justify-center mb-28;
+  }
+  .app {
+    @apply bg-black bg-opacity-10 w-20 h-20 p-4 rounded-xl flex-wrap cursor-pointer inline-block transition-all;
+  }
+</style>