FEAT: last astro version (need dynamic data after loading the page)

src/components/demo.vue

@@ -1,29 +1,69 @@
-<script>
+<script is:inline>
   import Nextcloud from '../svg/apps/nextcloud.vue'
+
   export default {
     components: { Nextcloud },
+    data: () => ({
+      terminalContent: '',
+      subDomain: '',
+      stories: [
+        {
+          terminal: ['pegaz up nextcloud', '[*] pre-install', 'Creating nextcloud ... done', '[*] post-install', '[√] https://cloud.domain.com'],
+          navigator: ['show', 'nextcloud', 'click', 'nextcloud', 'goto', 'cloud'],
+        },
+        {
+          terminal: ['pegaz up jellyfin', '[*] pre-install', 'Creating jellyfin ... done', '[*] post-install', '[√] https://jellyfin.domain.com'],
+          navigator: ['show', 'jellyfin', 'click', 'jellyfin', 'goto', 'jellyfin'],
+        },
+        {
+          terminal: ['pegaz down nextcloud', 'Stopping test ... done', 'Removing test ... done'],
+          navigator: ['goto', 'home', 'hide', 'jellyfin'],
+        },
+      ],
+    }),
+    methods: {
+      delay(milliseconds) {
+        return new Promise(resolve => {
+          setTimeout(resolve, milliseconds)
+        })
+      },
+    },
+    async created() {
+      this.stories.map(story => {
+        story.terminal.map(async cmd => {
+          this.terminalContent += 'n'
+          await this.delay(1000)
+          this.terminalContent = 'NEW'
+          console.log('each second')
+          }
+        )
+      })
+    },
   }
 </script>
 
 <template>
   <section class="flex flex-col md:flex-row items-center justify-center mb-28">
-    <div class="bg-slate-900 rounded-xl w-4/5 md:w-96 h-56 md:z-10 -mb-8 md:-mb-0 max-w-full">
+    <div class="bg-slate-900 flex-row rounded-xl w-4/5 md:w-96 h-56 md:z-10 -mb-8 md:-mb-0 max-w-full">
       <div class="p-3 flex justify-between w-20">
         <div class="bg-green-400 h-4 w-4 r-1 rounded-full"></div>
         <div class="bg-yellow-300 h-4 w-4 r-1 rounded-full"></div>
         <div class="bg-red-600 h-4 w-4 r-1 rounded-full"></div>
       </div>
-      <code class="text-white font-mono p-4 pt-0">
-        $: pegaz up nextcloud
-        <span class="w-2 h-4 bg-white inline-block animate-blink relative" />
-      </code>
+      <div class="flex h-4/5">
+        <code class="text-white font-mono p-4 pt-0 mr-0 overflow-scroll">
+          {{ terminalContent }}<span class="w-2 h-4 bg-white inline-block animate-blink relative" style="margin-bottom: -2px;" ref="terminal" />
+        </code>
+      </div>
     </div>
     <div class="bg-slate-400 flex flex-col items-center rounded-2xl w-full md:w-2/4 md:min-w-fit h-80 md:-ml-8 md:z-0">
       <div class="bg-white inline-block rounded-2xl px-4 py-1 m-4 w-4/6">
         <span class="text-gray-400">
           https://
         </span>
-        domain.com
+        <span class="text-indigo-700 font-semibold">
+          {{ subDomain }}
+        </span>domain.com
       </div>
       <div class="bg-white w-full h-full flex justify-center items-center group">
         <Nextcloud class="w-20 bg-black bg-opacity-10 inline-block rounded-xl p-4 cursor-pointer scale-0 group-hover:scale-100 transition-transform" />

src/components/hero-buttons.vue

@@ -23,7 +23,7 @@
 <template>
   <section class="py-4 sm:flex justify-center items-center">
     <a href="https://github.com/valerebron/pegaz" target="_blank"
-      class="py-4 px-6 h-14 leading-6 flex justify-center bg-purple-500 text-black text-lg capitalize font-semibold mb-4 sm:mb-0 rounded-xl shadow-md hover:bg-purple-400 focus:outline-none focus:text-white focus:ring-2 focus:ring-purple-300 focus:ring-opacity-75">
+      class="py-4 px-6 h-14 leading-6 flex justify-center bg-indigo-500 text-black text-lg capitalize font-semibold mb-4 sm:mb-0 rounded-xl shadow-md hover:bg-indigo-600 focus:outline-none hover:text-white focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-100">
       get started
     </a>
     <div class="font-mono bg-neutral-900 text-neutral-50 rounded-md flex justify-between pl-3 pr-4 py-3 sm:ml-4 border border-transparent text-base shadow-primary-700 relative">

src/pages/index.astro

@@ -13,6 +13,7 @@ import Demo from "../components/demo.vue";
         <a
           title="Go to Pegaz GitHub repo"
           href="https://github.com/valerebron/pegaz"
+          target="_blank"
         >
           <Github class="bg-white rounded-full hover:scale-105" />
         </a>