From 997a86f7348b6400714742d18f1de92a0b64e500 Mon Sep 17 00:00:00 2001
From: Ali <75311052+AAVision@users.noreply.github.com>
Date: Tue, 10 Jan 2023 15:28:17 +0300
Subject: [PATCH] adding CSS transition to welcome page (#65)

---
 resources/js/components/pages/welcome/Features.vue | 5 ++++-
 resources/js/pages/welcome.vue                     | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/pages/welcome/Features.vue b/resources/js/components/pages/welcome/Features.vue
index cc584dd..ae357c6 100644
--- a/resources/js/components/pages/welcome/Features.vue
+++ b/resources/js/components/pages/welcome/Features.vue
@@ -84,7 +84,10 @@
       </div>
       <div class="w-full md:w-1/2 lg:w-7/12 flex items-center justify-center relative w-full"
            :class="{'md:pr-8':index%2==1, 'md:pl-8':index%2==0}">
-        <img loading="lazy" class="block rounded-2xl w-full"
+        <img loading="lazy" class="
+        ease-in-out delay-300 rounded shadow-lg shadow-blue-600/50 hover:skew-y-3 hover:border-blue-600
+        transition ease-in-out hover:-translate-y-1 hover:scale-110 duration-300
+        block rounded-2xl w-full"
              :src="asset(step.img)" alt="cover-product">
       </div>
     </div>
diff --git a/resources/js/pages/welcome.vue b/resources/js/pages/welcome.vue
index 4a10c91..7a27be0 100644
--- a/resources/js/pages/welcome.vue
+++ b/resources/js/pages/welcome.vue
@@ -46,7 +46,10 @@
               </div>
             </div>
           </div>
-          <div class="w-full mt-8 relative px-6 mx-auto max-w-4xl sm:px-10 lg:px-0 z-10 flex items-center justify-center">
+          <div class="
+          ease-in-out delay-300 rounded shadow-lg shadow-blue-600/50 hover:skew-z-3 hover:border-blue-600
+          transition ease-in-out hover:-translate-y-1 hover:scale-110 duration-300
+          w-full mt-8 relative px-6 mx-auto max-w-4xl sm:px-10 lg:px-0 z-10 flex items-center justify-center">
             <img loading="lazy" class="w-full shadow-2xl rounded-xl block max-w-2xl lg:max-w-5xl"
                  :src="asset('img/pages/welcome/product-cover.jpg')" alt="cover-product">
           </div>