From cba501f202c9b42bf54f8e64642891fc4daaf182 Mon Sep 17 00:00:00 2001
From: Akshun-01 <akshunkuthiala2002@gmail.com>
Date: Tue, 10 Oct 2023 02:15:54 +0530
Subject: [PATCH 1/3] add green glow hover effect to cards

Signed-off-by: Akshun-01 <akshunkuthiala2002@gmail.com>
---
 .../Learn-Components/Card-Component/learn-card.style.js    | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/Learn-Components/Card-Component/learn-card.style.js b/src/components/Learn-Components/Card-Component/learn-card.style.js
index 8aa8599199c8..0f4b509d3258 100644
--- a/src/components/Learn-Components/Card-Component/learn-card.style.js
+++ b/src/components/Learn-Components/Card-Component/learn-card.style.js
@@ -5,6 +5,13 @@ const CardWrapper = styled.div`
     min-height: 16rem;
     margin: auto;
     border-radius: 1rem;
+    cursor: pointer;
+    box-shadow: rgba(0, 179, 158, 0.9) 0px 2px 10px 1px;
+    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;
+
+    &:hover{
+        box-shadow: rgba(0, 179, 158, 0.7) 0px 2px 18px 5px;
+    }
 
     .card-link{
         color: black;

From 6ef47e6e59ed214907ecbec183e2b76c215ef501 Mon Sep 17 00:00:00 2001
From: Akshun-01 <akshunkuthiala2002@gmail.com>
Date: Sun, 15 Oct 2023 19:00:52 +0530
Subject: [PATCH 2/3] adjust the hover effect for card shape

Signed-off-by: Akshun-01 <akshunkuthiala2002@gmail.com>
---
 .../Learn-Components/Card-Component/learn-card.style.js       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Learn-Components/Card-Component/learn-card.style.js b/src/components/Learn-Components/Card-Component/learn-card.style.js
index 0f4b509d3258..d44700d657f7 100644
--- a/src/components/Learn-Components/Card-Component/learn-card.style.js
+++ b/src/components/Learn-Components/Card-Component/learn-card.style.js
@@ -6,11 +6,11 @@ const CardWrapper = styled.div`
     margin: auto;
     border-radius: 1rem;
     cursor: pointer;
-    box-shadow: rgba(0, 179, 158, 0.9) 0px 2px 10px 1px;
+    box-shadow: rgba(0, 179, 158, 0.4) 0px 0px 15px 8px;
     transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;
 
     &:hover{
-        box-shadow: rgba(0, 179, 158, 0.7) 0px 2px 18px 5px;
+        box-shadow: rgba(0, 179, 158, 0.9) 0px 0px 19px 6px;
     }
 
     .card-link{

From e7aa89bb7fdfc34f70138703d4f2ea46f1818075 Mon Sep 17 00:00:00 2001
From: Akshun-01 <akshunkuthiala2002@gmail.com>
Date: Sun, 15 Oct 2023 22:09:20 +0530
Subject: [PATCH 3/3] remove hover from card with coming soon

Signed-off-by: Akshun-01 <akshunkuthiala2002@gmail.com>
---
 .../Learn-Components/Card-Component/index.js         |  2 +-
 .../Card-Component/learn-card.style.js               | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Learn-Components/Card-Component/index.js b/src/components/Learn-Components/Card-Component/index.js
index 9db7eb5322b0..d9ebfff4c657 100644
--- a/src/components/Learn-Components/Card-Component/index.js
+++ b/src/components/Learn-Components/Card-Component/index.js
@@ -40,7 +40,7 @@ const CardComponent = ({ tutorial, path, courseCount }) => {
         <Link to={path} className="card-link">
           <div
             style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}
-            className="card-parent"
+            className="card-parent card-active"
           >
 
             <div>
diff --git a/src/components/Learn-Components/Card-Component/learn-card.style.js b/src/components/Learn-Components/Card-Component/learn-card.style.js
index d44700d657f7..8740383a12ad 100644
--- a/src/components/Learn-Components/Card-Component/learn-card.style.js
+++ b/src/components/Learn-Components/Card-Component/learn-card.style.js
@@ -5,12 +5,14 @@ const CardWrapper = styled.div`
     min-height: 16rem;
     margin: auto;
     border-radius: 1rem;
-    cursor: pointer;
-    box-shadow: rgba(0, 179, 158, 0.4) 0px 0px 15px 8px;
-    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;
 
-    &:hover{
-        box-shadow: rgba(0, 179, 158, 0.9) 0px 0px 19px 6px;
+    .card-active{
+        cursor: pointer;
+        transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;
+
+        &:hover{
+            box-shadow: rgba(0, 179, 158, 0.9) 0px 0px 19px 6px;
+        }
     }
 
     .card-link{