FIX: design for mobile

src/components/demo.vue

@@ -12,13 +12,14 @@
       nextcloudClass: [],
       jellyfinClass: [],
       backbuttonClass: [],
+      subdomainClass: [],
       isDemonstrationEnded: false,
     }),
     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 openClass = ['w-full', 'h-full', 'p-20', 'rounded-b-xl', '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) {
@@ -48,6 +49,8 @@
           if (i == 5) this.nextcloudClass.push('animate-openApp')
           if (i == 6) this.nextcloudClass = openClass
           if (i == 6) this.subDomain = 'nextcloud.'
+          if (i == 6) this.subdomainClass = ['']
+          if (i == 6) this.subdomainClass = ['animate-click']
           //close
           if (i == 7) this.terminalContent = ''
           if (i == 9) this.backbuttonClass = ['animate-click']
@@ -71,6 +74,8 @@
           if (i == 16) this.nextcloudClass = downClass
           if (i == 17) this.jellyfinClass = openClass
           if (i == 17) this.subDomain = 'jellyfin.'
+          if (i == 6) this.subdomainClass = ['']
+          if (i == 6) this.subdomainClass = ['animate-click']
           //close
           if (i == 20) this.backbuttonClass = ['animate-click']
           if (i == 21) this.jellyfinClass = this.nextcloudClass = closeClass
@@ -115,31 +120,40 @@
         <div class="bg-red-600 h-4 w-4 r-1 rounded-full"></div>
       </div>
       <div class="flex h-4/5">
-        <code class="w-full text-white font-mono p-4 pt-0 mr-0 overflow-scroll whitespace-pre">
+        <code class="w-full text-white font-mono text-xs md:text-base p-4 pt-0 mr-0 overflow-scroll whitespace-pre">
           {{ 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" :class="{'blur-sm': isDemonstrationEnded}">
-      <div class="bg-white flex items-center rounded-2xl px-4 py-1 m-4 w-4/6">
+      <div class="bg-white flex items-center rounded-2xl pr-4 pl-2 py-1 m-4 w-4/5">
-        <Backbutton :class="backbuttonClass" />
+        <Backbutton class="mr-3 p-1 bg-slate-300 rounded-full" :class="backbuttonClass" />
         <span class="text-gray-400">
           https://
         </span>
-        <span class="text-indigo-700 font-semibold">
+        <span class="text-indigo-700 font-bold" :class="subdomainClass">
           {{ subDomain }}
         </span>domain.com
       </div>
-      <div class="bg-white w-full h-full flex justify-center items-center">
+      <div class="bg-white w-full h-full flex rounded-b-xl 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
+    <transition
-      @click="demonstration"
+      enter-active-class="duration-300 ease-out"
-      v-if="isDemonstrationEnded"
+      enter-from-class="transform opacity-0"
-      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">
+      enter-to-class="opacity-100"
-      <Rewind class="text-white" />
+      leave-active-class="duration-200 ease-in"
-    </div>
+      leave-from-class="opacity-100"
+      leave-to-class="transform opacity-0"
+    >
+      <div
+        @click="demonstration"
+        v-if="isDemonstrationEnded"
+        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>
+    </transition>
   </section>
 </template>

src/components/hero-buttons.vue

@@ -26,11 +26,11 @@
       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">
+    <div class="font-mono bg-neutral-900 text-neutral-50 text-base rounded-xl flex justify-between items-center pl-3 pr-4 py-4 sm:ml-4 border border-transparent text-base shadow-primary-700 relative">
       <span class="select-all">
         curl -sL get.pegaz.io | sudo bash
       </span>
-      <ClipBoard class="inline ml-3 cursor-pointer" :class="{ 'animate-ping': isClicked }" @click="copyToClipBoard" />
+      <ClipBoard class="ml-3 cursor-pointer" :class="{ 'animate-ping': isClicked }" @click="copyToClipBoard" />
     </div>
   </section>
 </template>

src/components/svg/backbutton.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg height="16" width="28">
+  <svg height="26" width="26">
     <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>

tailwind.config.js

@@ -12,6 +12,10 @@ module.exports = {
 					'0%': { transform: 'translateX(-40px)' },
 					'100%': { transform: 'translateX(0px)' },
 				},
+				fadin: {
+					'0%': { opacity: '0' },
+					'100%': { opacity: '1' },
+				},
 				fadeout: {
 					'0%': { opacity: '1' },
 					'100%': { opacity: '0' },