FAT: demonstation v1 !

2022-11-26 17:11:08 +01:00
parent 6a5803a353
commit eeb6522a78
10 changed files with 153 additions and 47 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -3453,9 +3453,10 @@
      }
    },
    "node_modules/webpack-virtual-modules": {
-      "version": "0.4.4",
-      "dev": true,
-      "license": "MIT"
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.4.6.tgz",
+      "integrity": "sha512-5tyDlKLqPfMqjT3Q9TAqf2YqjwmnUleZwzJi1A5qXnlBCdj2AtOJ6wAWdglTIDOPgOiOrXeBeFcsQ8+aGQ6QbA==",
+      "dev": true
    },
    "node_modules/which": {
      "version": "2.0.2",
@@ -5644,7 +5645,9 @@
      "dev": true
    },
    "webpack-virtual-modules": {
-      "version": "0.4.4",
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.4.6.tgz",
+      "integrity": "sha512-5tyDlKLqPfMqjT3Q9TAqf2YqjwmnUleZwzJi1A5qXnlBCdj2AtOJ6wAWdglTIDOPgOiOrXeBeFcsQ8+aGQ6QbA==",
      "dev": true
    },
    "which": {
--- a/package.json
+++ b/package.json
@@ -26,4 +26,4 @@
    "vite-plugin-pages": "^0.27.1",
    "vite-plugin-vue-layouts": "^0.7.0"
  }
-}
+}
--- a/src/components/demo.vue
+++ b/src/components/demo.vue
@@ -1,46 +1,115 @@
 <script>
-  import { onBeforeUnmount } from 'vue'
-import Nextcloud from '~/components/svg/apps/nextcloud.vue'
+  import { onBeforeUnmount, openBlock } from 'vue'
+  import Nextcloud from '~/components/svg/apps/nextcloud.vue'
+  import Jellyfin from '~/components/svg/apps/jellyfin.vue'
+  import Backbutton from '~/components/svg/backbutton.vue'
+  import Rewind from '~/components/svg/rewind.vue'

  export default {
    components: { Nextcloud },
    data: () => ({
      terminalContent: '',
      subDomain: '',
-      isLaunched: false,
-      stories: [
-        {
-          terminal: ['pegaz up nextcloud', 'Creating nextcloud ... done', '[√] https://cloud.domain.com'],
-          navigator: ['show', 'nextcloud', 'click', 'nextcloud', 'goto', 'cloud'],
-        },
-        {
-          terminal: ['pegaz up jellyfin', 'Creating jellyfin ... done', '[√] https://jellyfin.domain.com'],
-          navigator: ['show', 'jellyfin', 'click', 'jellyfin', 'goto', 'jellyfin'],
-        },
-        {
-          terminal: ['pegaz down nextcloud', 'Stopping nextcloud ... done', 'Removing nextcloud ... done'],
-          navigator: ['goto', 'home', 'hide', 'jellyfin'],
-        },
-      ],
+      nextcloudClass: [],
+      jellyfinClass: [],
+      backbuttonClass: [],
+      isDemonstrationEnded: false,
    }),
-    async created() {
-      const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
-      let i = 0
-      this.timer = await setInterval(() => {
-        this.terminalContent += this.stories[0].terminal[i]+'\n'
-        i += 1
-        if (i == this.stories[0].terminal.length) {
-          clearInterval(this.timer)
-          this.isLaunched = true
+    methods: {
+      demonstration() {
+        const upClass = ['w-20', 'p-4', 'opacity-100', 'animate-upApp', 'rounded-xl']
+        const downClass = ['opacity-0', 'w-0', 'p-0']
+        const openClass = ['w-full', 'h-full', 'p-20', 'rounded-t-none', 'bg-gradient-to-r', 'from-violet-100', 'to-indigo-100']
+        const closeClass = ['w-20', 'p-4', 'opacity-100', 'animate-upApp', 'rounded-xl', 'm-2']
+
+        function delay(time) {
+          return new Promise(resolve => setTimeout(resolve, time))
        }
-      }, 1000)
-    }
+
+        this.isDemonstrationEnded = false
+        this.terminalContent = ''
+        this.nextcloudClass = this.jellyfinClass = downClass
+
+        let i = 0
+
+        this.timer = setInterval(async () => {
+          // nextcloud
+          // up
+          if (i == 0) {
+            let cmd = '$ pegaz up nextcloud\n'
+            for (let y in cmd) {
+              this.terminalContent += cmd[y]
+              await delay(20)
+            }
+          }
+          if (i == 1) this.terminalContent += 'Creating nextcloud ... done\n'
+          if (i == 2) this.terminalContent += '[√] https://cloud.domain.com\n'
+          if (i == 3) this.nextcloudClass = upClass
+          // open
+          if (i == 5) this.nextcloudClass.push('animate-openApp')
+          if (i == 6) this.nextcloudClass = openClass
+          if (i == 6) this.subDomain = 'nextcloud.'
+          //close
+          if (i == 7) this.terminalContent = ''
+          if (i == 9) this.backbuttonClass = ['animate-click']
+          if (i == 10) this.nextcloudClass = closeClass
+          if (i == 10) this.subDomain = this.backbuttonClass = ''
+
+          // jellyfin
+          // up
+          if (i == 11) {
+            let cmd = '$ pegaz up jellyfin\n'
+            for (let y in cmd) {
+              this.terminalContent += cmd[y]
+              await delay(20)
+            }
+          }
+          if (i == 12) this.terminalContent += 'Creating jellyfin ... done\n'
+          if (i == 13) this.terminalContent += '[√] https://jellyfin.domain.com\n'
+          if (i == 14) this.jellyfinClass = closeClass
+          // open
+          if (i == 16) this.jellyfinClass.push('animate-openApp')
+          if (i == 16) this.nextcloudClass = downClass
+          if (i == 17) this.jellyfinClass = openClass
+          if (i == 17) this.subDomain = 'jellyfin.'
+          //close
+          if (i == 20) this.backbuttonClass = ['animate-click']
+          if (i == 21) this.jellyfinClass = this.nextcloudClass = closeClass
+          if (i == 21) this.subDomain = ''
+          if (i == 21) this.terminalContent = ''
+
+          // nextcloud down
+          if (i == 23) {
+            let cmd = '$ pegaz down nextcloud\n'
+            for (let y in cmd) {
+              this.terminalContent += cmd[y]
+              await delay(20)
+            }
+          }
+          if (i == 24) this.terminalContent += 'Stopping nextcloud ... done\n'
+          if (i == 25) this.terminalContent += '[√] Removing nextcloud ... done\n'
+          if (i == 26) this.nextcloudClass = downClass
+          if (i == 27) this.isDemonstrationEnded = true
+
+          if (i == 30) clearInterval(this.timer)
+          i += 1
+        }, 1000)
+      }
+    },
+    async created() {
+      let isPageScrolled = false
+      this.nextcloudClass = this.jellyfinClass = []
+      document.onscroll = (event) => {
+        if (!isPageScrolled) this.demonstration()
+        isPageScrolled = true
+      }
+    },
  }
 </script>

 <template>
  <section class="flex flex-col md:flex-row items-center justify-center mb-28">
-    <code 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 md:min-w-max">
+    <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 md:min-w-max" :class="{'blur-sm': isDemonstrationEnded}">
      <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>
@@ -51,9 +120,10 @@ import Nextcloud from '~/components/svg/apps/nextcloud.vue'
          {{ terminalContent }}<span class="w-2 h-4 bg-white inline-block animate-blink relative" style="margin-bottom: -2px;" ref="terminal" />
        </code>
      </div>
-    </code>
-    <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">
+    </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" :class="{'blur-sm': isDemonstrationEnded}">
+      <div class="bg-white flex items-center rounded-2xl px-4 py-1 m-4 w-4/6">
+        <Backbutton :class="backbuttonClass" />
        <span class="text-gray-400">
          https://
        </span>
@@ -61,9 +131,16 @@ import Nextcloud from '~/components/svg/apps/nextcloud.vue'
          {{ 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 transition-transform" :class="isLaunched ? 'scale-100' : ''" />
+      <div class="bg-white w-full h-full flex justify-center items-center">
+        <Nextcloud class="bg-black bg-opacity-10 inline-block cursor-pointer transition-all" :class="nextcloudClass" title="nextcloud.domain.com" />
+        <Jellyfin class="bg-black bg-opacity-10 inline-block cursor-pointer transition-all" :class="jellyfinClass" title="jellyfin.domain.com" />
      </div>
    </div>
+    <div
+      @click="demonstration"
+      v-if="isDemonstrationEnded"
+      class="bg-indigo-500 rounded-full p-20 absolute cursor-pointer focus:p-18 shadow-2xl">
+      <Rewind class="text-white" />
+    </div>
  </section>
 </template>
--- a/src/components/hero-buttons.vue
+++ b/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-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">
+      class="py-4 px-6 h-14 leading-6 flex justify-center bg-indigo-600 text-white text-lg capitalize font-semibold mb-4 sm:mb-0 rounded-xl shadow-md hover:bg-indigo-500 focus:outline-none focus:ring-4 hover:ring-indigo-200 focus:ring-indigo-300 focus:ring-opacity-100 transition-all">
      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">
--- a/src/components/svg/apps/jellyfin.vue
+++ b/src/components/svg/apps/jellyfin.vue
@@ -3,8 +3,8 @@
      xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-      xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="logo" width="30.903151pt"
-      height="30.903004pt" viewBox="0 0 465.36509 465.36288" class="svg replaced-svg" sodipodi:docname="logo.svg"
+      xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="logo" width="300"
+      height="72" viewBox="0 0 465.36509 465.36288" class="svg replaced-svg" sodipodi:docname="logo.svg"
      inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
      <defs id="defs2431">
         <linearGradient id="linear-gradient" gradientUnits="userSpaceOnUse" x1="110.25" y1="213.3" x2="496.14001"
--- a/src/components/svg/backbutton.vue
+++ b/src/components/svg/backbutton.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg height="16" width="28">
+    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+      d="m7.25 3.75l-4.5 4.5l4.5 4.5m6-4.5H2.75" />
+  </svg>
+</template>
--- a/src/components/svg/pegaz.vue
+++ b/src/components/svg/pegaz.vue
@@ -1 +1,3 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="160.997" xmlns="http://www.w3.org/2000/svg" height="98.997" id="screenshot-ad9ebd90-5ab7-11ed-b140-a5c46caee909" viewBox="766.502 -54.498 160.997 98.997" style="-webkit-print-color-adjust: exact;" fill="none" version="1.1"><g id="shape-ad9ebd90-5ab7-11ed-b140-a5c46caee909"><defs><linearGradient gradientUnits="userSpaceOnUse" y1="294.65009" id="d3e7133f-3d52-8015-8001-96a125166333-linearGradient5892" xlink:href="#d3e7133f-3d52-8015-8001-96a125166333-linearGradient5890" x1="37.362221" y2="279.14844" x2="19.9897" gradientTransform="matrix(1.027997,0,0,1.03956,747.572515,-73.646054) matrix(3.7795276,0,0,3.7795276,18.897638,-1009.3508)"/><linearGradient id="d3e7133f-3d52-8015-8001-96a125166333-linearGradient5890"><stop offset="0" id="stop5886" style="stop-color: rgb(50, 46, 235); stop-opacity: 1;"/><stop offset="1" id="stop5888" style="stop-color: rgb(112, 47, 255); stop-opacity: 1;"/></linearGradient></defs><g id="fills-ad9ebd90-5ab7-11ed-b140-a5c46caee909"><path rx="0" ry="0" d="M886.653,-54C870.298,-53.532,863.114,-31.168,863.114,-31.168C858.24,-40.251,846.248,-41.148,842.636,-41.213L781.653,-41.215C781.653,-41.211,781.652,-41.206,781.651,-41.198L767.054,-41.237C767.027,-40.977,767.009,-40.716,767,-40.455C767.008,-32.786,774.928,-26.389,785.257,-25.709L818.135,-25.644L818.135,-25.648L833.035,-25.621C834.436,-25.598,835.56,-24.442,835.561,-23.024C835.561,-21.592,834.415,-20.43,832.999,-20.426L832.999,-20.423L818.135,-20.423L818.135,-20.446L786.108,-20.446C785.485,-20.446,785.845,-20.446,785.263,-20.446L785.263,-20.444C785.273,-12.775,793.23,-5.553,803.558,-4.873C803.558,-4.873,805.16,-4.869,805.233,-4.869C805.792,-4.865,807.303,-4.85,818.119,-4.85C818.132,-4.85,818.144,-4.847,818.157,-4.846C818.157,-4.846,820.128,-4.826,832.999,-4.826C834.415,-4.822,835.561,-3.659,835.561,-2.227C835.561,-0.881,834.545,0.213,833.248,0.345L820.191,0.345L818.135,0.345L803.542,0.345L803.542,0.362C803.549,7.085,809.667,13.462,818.135,15.393L820.191,15.902C825.606,15.937,831.021,15.906,836.436,15.963C819.147,15.971,847.872,15.965,850.989,15.965L854.33,16.185L863.873,25.003C881.087,35.074,895.985,36.562,895.985,36.562C895.985,36.562,908.222,52.531,926.285,37.672C927.885,36.356,926.299,34.566,926.299,34.566L878.636,-31.168ZM785.263,-20.444C776.71,-20.444,771.287,-20.445,770.819,-20.446L770.819,-20.444C770.377,-20.444,775.319,-20.444,785.263,-20.444ZZM893.486,-43.489C887.446,-41.215,885.133,-31.079,885.133,-31.079L889.053,-25.751Z" style="display: inline; fill: url(&quot;#d3e7133f-3d52-8015-8001-96a125166333-linearGradient5892&quot;);"/></g><g id="strokes-ad9ebd90-5ab7-11ed-b140-a5c46caee909"><g class="stroke-shape"><path rx="0" ry="0" d="M886.653,-54C870.298,-53.532,863.114,-31.168,863.114,-31.168C858.24,-40.251,846.248,-41.148,842.636,-41.213L781.653,-41.215C781.653,-41.211,781.652,-41.206,781.651,-41.198L767.054,-41.237C767.027,-40.977,767.009,-40.716,767,-40.455C767.008,-32.786,774.928,-26.389,785.257,-25.709L818.135,-25.644L818.135,-25.648L833.035,-25.621C834.436,-25.598,835.56,-24.442,835.561,-23.024C835.561,-21.592,834.415,-20.43,832.999,-20.426L832.999,-20.423L818.135,-20.423L818.135,-20.446L786.108,-20.446C785.485,-20.446,785.845,-20.446,785.263,-20.446L785.263,-20.444C785.273,-12.775,793.23,-5.553,803.558,-4.873C803.558,-4.873,805.16,-4.869,805.233,-4.869C805.792,-4.865,807.303,-4.85,818.119,-4.85C818.132,-4.85,818.144,-4.847,818.157,-4.846C818.157,-4.846,820.128,-4.826,832.999,-4.826C834.415,-4.822,835.561,-3.659,835.561,-2.227C835.561,-0.881,834.545,0.213,833.248,0.345L820.191,0.345L818.135,0.345L803.542,0.345L803.542,0.362C803.549,7.085,809.667,13.462,818.135,15.393L820.191,15.902C825.606,15.937,831.021,15.906,836.436,15.963C819.147,15.971,847.872,15.965,850.989,15.965L854.33,16.185L863.873,25.003C881.087,35.074,895.985,36.562,895.985,36.562C895.985,36.562,908.222,52.531,926.285,37.672C927.885,36.356,926.299,34.566,926.299,34.566L878.636,-31.168ZM785.263,-20.444C776.71,-20.444,771.287,-20.445,770.819,-20.446L770.819,-20.444C770.377,-20.444,775.319,-20.444,785.263,-20.444ZZM893.486,-43.489C887.446,-41.215,885.133,-31.079,885.133,-31.079L889.053,-25.751Z" style="display: inline; fill: none; stroke-width: 0.996658;"/></g></g></g></svg>
+<template>
+  <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="160.997" xmlns="http://www.w3.org/2000/svg" height="98.997" id="screenshot-ad9ebd90-5ab7-11ed-b140-a5c46caee909" viewBox="766.502 -54.498 160.997 98.997" style="-webkit-print-color-adjust: exact;" fill="none" version="1.1"><g id="shape-ad9ebd90-5ab7-11ed-b140-a5c46caee909"><defs><linearGradient gradientUnits="userSpaceOnUse" y1="294.65009" id="d3e7133f-3d52-8015-8001-96a125166333-linearGradient5892" xlink:href="#d3e7133f-3d52-8015-8001-96a125166333-linearGradient5890" x1="37.362221" y2="279.14844" x2="19.9897" gradientTransform="matrix(1.027997,0,0,1.03956,747.572515,-73.646054) matrix(3.7795276,0,0,3.7795276,18.897638,-1009.3508)"/><linearGradient id="d3e7133f-3d52-8015-8001-96a125166333-linearGradient5890"><stop offset="0" id="stop5886" style="stop-color: rgb(50, 46, 235); stop-opacity: 1;"/><stop offset="1" id="stop5888" style="stop-color: rgb(112, 47, 255); stop-opacity: 1;"/></linearGradient></defs><g id="fills-ad9ebd90-5ab7-11ed-b140-a5c46caee909"><path rx="0" ry="0" d="M886.653,-54C870.298,-53.532,863.114,-31.168,863.114,-31.168C858.24,-40.251,846.248,-41.148,842.636,-41.213L781.653,-41.215C781.653,-41.211,781.652,-41.206,781.651,-41.198L767.054,-41.237C767.027,-40.977,767.009,-40.716,767,-40.455C767.008,-32.786,774.928,-26.389,785.257,-25.709L818.135,-25.644L818.135,-25.648L833.035,-25.621C834.436,-25.598,835.56,-24.442,835.561,-23.024C835.561,-21.592,834.415,-20.43,832.999,-20.426L832.999,-20.423L818.135,-20.423L818.135,-20.446L786.108,-20.446C785.485,-20.446,785.845,-20.446,785.263,-20.446L785.263,-20.444C785.273,-12.775,793.23,-5.553,803.558,-4.873C803.558,-4.873,805.16,-4.869,805.233,-4.869C805.792,-4.865,807.303,-4.85,818.119,-4.85C818.132,-4.85,818.144,-4.847,818.157,-4.846C818.157,-4.846,820.128,-4.826,832.999,-4.826C834.415,-4.822,835.561,-3.659,835.561,-2.227C835.561,-0.881,834.545,0.213,833.248,0.345L820.191,0.345L818.135,0.345L803.542,0.345L803.542,0.362C803.549,7.085,809.667,13.462,818.135,15.393L820.191,15.902C825.606,15.937,831.021,15.906,836.436,15.963C819.147,15.971,847.872,15.965,850.989,15.965L854.33,16.185L863.873,25.003C881.087,35.074,895.985,36.562,895.985,36.562C895.985,36.562,908.222,52.531,926.285,37.672C927.885,36.356,926.299,34.566,926.299,34.566L878.636,-31.168ZM785.263,-20.444C776.71,-20.444,771.287,-20.445,770.819,-20.446L770.819,-20.444C770.377,-20.444,775.319,-20.444,785.263,-20.444ZZM893.486,-43.489C887.446,-41.215,885.133,-31.079,885.133,-31.079L889.053,-25.751Z" style="display: inline; fill: url(&quot;#d3e7133f-3d52-8015-8001-96a125166333-linearGradient5892&quot;);"/></g><g id="strokes-ad9ebd90-5ab7-11ed-b140-a5c46caee909"><g class="stroke-shape"><path rx="0" ry="0" d="M886.653,-54C870.298,-53.532,863.114,-31.168,863.114,-31.168C858.24,-40.251,846.248,-41.148,842.636,-41.213L781.653,-41.215C781.653,-41.211,781.652,-41.206,781.651,-41.198L767.054,-41.237C767.027,-40.977,767.009,-40.716,767,-40.455C767.008,-32.786,774.928,-26.389,785.257,-25.709L818.135,-25.644L818.135,-25.648L833.035,-25.621C834.436,-25.598,835.56,-24.442,835.561,-23.024C835.561,-21.592,834.415,-20.43,832.999,-20.426L832.999,-20.423L818.135,-20.423L818.135,-20.446L786.108,-20.446C785.485,-20.446,785.845,-20.446,785.263,-20.446L785.263,-20.444C785.273,-12.775,793.23,-5.553,803.558,-4.873C803.558,-4.873,805.16,-4.869,805.233,-4.869C805.792,-4.865,807.303,-4.85,818.119,-4.85C818.132,-4.85,818.144,-4.847,818.157,-4.846C818.157,-4.846,820.128,-4.826,832.999,-4.826C834.415,-4.822,835.561,-3.659,835.561,-2.227C835.561,-0.881,834.545,0.213,833.248,0.345L820.191,0.345L818.135,0.345L803.542,0.345L803.542,0.362C803.549,7.085,809.667,13.462,818.135,15.393L820.191,15.902C825.606,15.937,831.021,15.906,836.436,15.963C819.147,15.971,847.872,15.965,850.989,15.965L854.33,16.185L863.873,25.003C881.087,35.074,895.985,36.562,895.985,36.562C895.985,36.562,908.222,52.531,926.285,37.672C927.885,36.356,926.299,34.566,926.299,34.566L878.636,-31.168ZM785.263,-20.444C776.71,-20.444,771.287,-20.445,770.819,-20.446L770.819,-20.444C770.377,-20.444,775.319,-20.444,785.263,-20.444ZZM893.486,-43.489C887.446,-41.215,885.133,-31.079,885.133,-31.079L889.053,-25.751Z" style="display: inline; fill: none; stroke-width: 0.996658;"/></g></g></g></svg>
+</template>
--- a/src/components/svg/rewind.vue
+++ b/src/components/svg/rewind.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg width="100" height="100" viewBox="0 0 20 20"><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M5.955 5.805a5.94 5.94 0 0 0-1.736 4.87a1 1 0 0 1-1.99.21a7.94 7.94 0 0 1 2.322-6.504c3.136-3.092 8.19-3.04 11.289.102c3.1 3.143 3.081 8.198-.054 11.29a7.924 7.924 0 0 1-5.44 2.286a8.021 8.021 0 0 1-2.283-.29a1 1 0 1 1 .533-1.927a6 6 0 0 0 1.714.217a5.924 5.924 0 0 0 4.071-1.71c2.343-2.31 2.365-6.099.035-8.461c-2.33-2.363-6.118-2.393-8.46-.083Z"/><path d="M3.967 11.695a1 1 0 0 1-1.412.082l-1.72-1.53a1 1 0 0 1 1.33-1.494l1.72 1.53a1 1 0 0 1 .082 1.412Z"/><path d="M2.42 11.6a1 1 0 0 0 1.4.2l2-1.5a1 1 0 0 0-1.2-1.6l-2 1.5a1 1 0 0 0-.2 1.4ZM10 6a1 1 0 0 1 1 1v3.5a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1Z"/><path d="M14 10.5a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h3a1 1 0 0 1 1 1Z"/></g></svg>
+</template>
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -7,7 +7,7 @@
          href="https://github.com/valerebron/pegaz"
          target="_blank"
        >
-          <Github class="bg-white rounded-full hover:scale-105" />
+          <Github class="bg-white rounded-full shadow-lg hover:scale-105" />
        </a>
      </nav>
      <HeroTitle client:visible />
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,15 +16,30 @@ module.exports = {
 					'0%': { opacity: '1' },
 					'100%': { opacity: '0' },
 				},
-				popin: {
-					'0%': { opacity: '1' },
-					'100%': { opacity: '0' },
+				upApp: {
+					'0%': { transform: 'scale(0)' },
+					'90%': { transform: 'scale(1.2)' },
+					'100%': { transform: 'sale(1)' },
+				},
+				openApp: {
+					'0%': { transform: 'scale(0.8)' },
+					'50%': { transform: 'scale(1.2)' },
+					'100%': { transform: 'sale(1)' },
+				},
+				click: {
+					'0%': { transform: 'scale(0.5)' },
+					'50%': { transform: 'scale(1.5)' },
+					'100%': { transform: 'sale(1)' },
 				},
 			},
 			animation: {
 				blink: 'blink .6s infinite',
 				slide: 'slide .3s',
 				fadeout: 'fadeout .8s',
+				upApp: 'upApp .5s cubic-bezier(0, 0, 0.2, 1)',
+				openApp: 'openApp .3s cubic-bezier(0, 0, 0.2, 1)',
+				click: 'click .3s cubic-bezier(0, 0, 0.2, 1)',
+
 			},
    },
  },