FEAT: add apps list

src/components/applications-list.vue

@@ -0,0 +1,30 @@
+<script>
+  import Code from '~/components/svg/apps/code.vue'
+  import Deluge from '~/components/svg/apps/deluge.vue'
+  import Drone from '~/components/svg/apps/drone.vue'
+  import Gitea from '~/components/svg/apps/gitea.vue'
+  import Jellyfin from '~/components/svg/apps/jellyfin.vue'
+  import Nextcloud from '~/components/svg/apps/nextcloud.vue'
+  import Penpot from '~/components/svg/apps/penpot.vue'
+  import Plausible from '~/components/svg/apps/plausible.vue'
+
+  export default {
+    components: { Code, Deluge, Drone, Gitea, Jellyfin,Nextcloud, Penpot, Plausible },
+    data: () => ({
+      apps: ['code', 'Deluge', 'Drone', 'Gitea', 'Jellyfin', 'Nextcloud', 'Penpot', 'Plausible'],
+    }),
+  }
+</script>
+
+<template>
+  <section>
+    <h2 class="text-3xl text-center">
+      Pre-configured applications :
+    </h2>
+    <ul class="flex justify-center p-4 m-4 max-w-full flex-wrap">
+      <li v-for="app in apps" class="m-4">
+        <component :is="app" class="bg-black bg-opacity-10 w-20 h-20 p-4 rounded-xl flex-wrap" />
+      </li>
+    </ul>
+  </section>
+</template>

src/components/demo.vue

@@ -6,7 +6,6 @@
   import Rewind from '~/components/svg/rewind.vue'
 
   export default {
-    components: { Nextcloud },
     data: () => ({
       terminalContent: '',
       subDomain: '',
@@ -139,7 +138,7 @@
     <div
       @click="demonstration"
       v-if="isDemonstrationEnded"
-      class="bg-indigo-500 rounded-full p-20 absolute cursor-pointer focus:p-18 shadow-2xl">
+      class="bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:ring-4 hover:ring-indigo-200 focus:ring-indigo-300 focus:ring-opacity-100 transition-all rounded-full p-8 lg:p-20 md:p-12 absolute cursor-pointer focus:p-18 shadow-2xl z-50">
       <Rewind class="text-white" />
     </div>
   </section>

src/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="mx-6">
     <header class="h-screen flex flex-col justify-center">
-      <nav class="fixed right-0 top-0 p-2">
+      <nav class="fixed right-0 top-0 p-2 z-50">
         <a
           title="Go to Pegaz GitHub repo"
           href="https://github.com/valerebron/pegaz"
@@ -15,6 +15,7 @@
     </header>
     <main class="-mt-20">
       <Demo />
+      <AppList />
     </main>
   </div>
 </template>
@@ -29,6 +30,7 @@ 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";
 
 useMeta({
   title: 'Deploy stack',