Add hover effect on BoxCTA component

src/style/atoms/_box-cta.scss

@@ -8,6 +8,8 @@
     background-color: $color-primary-tertiary20;
     border-radius: 12px;
     text-decoration: none;
+    box-shadow: none;
+    transition: background-color 0.8s var(--ease-quart), box-shadow 1.0s var(--ease-quart);
 
     @include bp (sm) {
         flex-direction: column;
@@ -20,6 +22,7 @@
         width: 36px;
         height: 36px;
         flex-shrink: 0;
+        transition: transform 0.6s var(--ease-quart);
 
         @include bp (sm) {
             margin: auto 0;
@@ -45,4 +48,15 @@
             text-align: center;
         }
     }
+
+    // Hover
+    &:hover {
+        $shadow-color: rgba(0, 0, 0, 0.05);
+        background-color: #77357b;
+        box-shadow: 0 6px 6px $shadow-color, 0 12px 12px $shadow-color, 0 24px 24px $shadow-color;
+
+        .icon {
+            transform: translate3d(0, -3px, 0);
+        }
+    }
 }