animation added in title

akaunting · Jul 28, 2022 · bee73a8 · bee73a8
1 parent 226c655
commit bee73a8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/resources/views/components/layouts/modules.blade.php b/resources/views/components/layouts/modules.blade.php
@@ -16,8 +16,6 @@
 
         <x-layouts.admin.menu />
 
-        <x-loading.content />
-
         <div class="main-content xl:ltr:ml-64  xl:rtl:mr-64 transition-all ease-in-out" id="panel">
             <div id="main-body">
                 <div class="container">

diff --git a/resources/views/components/modules/banners.blade.php b/resources/views/components/modules/banners.blade.php
@@ -5,9 +5,23 @@
 @else
     <div class="w-full lg:h-48 px-6 bg-dark-blue rounded-lg flex flex-col lg:flex-row justify-between items-center my-8">
         <div class="w-full lg:w-1/2 flex flex-col self-end py-6">
-            <h1 class="text-lg lg:text-7xl font-semibold text-white">
-                {{ trans('modules.premium_banner') }}
-            </h1>
+            <div
+                class="w-96 h-28"
+                x-data="{
+                    text: '',
+                    textArray : ['{{ trans('modules.premium_banner') }}'],
+                    textIndex: 0,
+                    charIndex: 0,
+                    typeSpeed: 100,
+                 }"
+                x-init="setInterval(function(){
+                    let current = $data.textArray[ $data.textIndex ];
+                    $data.text = current.substring(0, $data.charIndex);
+                    $data.charIndex += 1;
+                 }, $data.typeSpeed);"
+            >
+                <h1 class="text-lg lg:text-7xl font-semibold text-white" x-text="text"></h1>
+            </div>
 
             <a href="https://akaunting.com/plans" class="text-white transition-all hover:underline">
                 {{ trans('modules.learn_more') }}
@@ -18,4 +32,5 @@
             <img src="{{ asset('/public/img/akaunting-logo-gold.png') }}" class="h-40" alt="Akaunting" />
         </div>
     </div>
+</div>
 @endif