From 49897bb474911a8488ffd76121112dd8be10ee1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
 <92744169+mehmetcetin01140@users.noreply.github.com>
Date: Tue, 9 Jan 2024 14:23:58 +0300
Subject: [PATCH] Landing | border animation added

---
 .../showcase/styles/layout/landing/_main.scss | 46 +++++++++++++++++++
 .../layout/variables/landing/_dark.scss       |  1 +
 .../layout/variables/landing/_light.scss      |  1 +
 3 files changed, 48 insertions(+)

diff --git a/src/assets/showcase/styles/layout/landing/_main.scss b/src/assets/showcase/styles/layout/landing/_main.scss
index 93f374c94b7..d65577323f9 100644
--- a/src/assets/showcase/styles/layout/landing/_main.scss
+++ b/src/assets/showcase/styles/layout/landing/_main.scss
@@ -7,8 +7,54 @@
         border: 1px solid var(--home-border-color);
         border-radius: 10px;
         background-color: var(--home-box-bg);
+        position: relative;
+        z-index: 0;
+
+        &::before,
+        &::after {
+            content: "";
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            border: 2px solid var(--home-box-ring-color);
+            transition: all .5s;
+            animation: clippath 3s infinite linear;
+            border-radius: 10px;
+            opacity: 0;
+            z-index: -1;
+        }
+        
+        &::after {
+            animation: clippath 3s infinite -1.5s linear;
+        }
+
+        &:hover {
+            &::before,
+            &::after {
+                opacity: 1;
+            }
+        }
     }
 
+@keyframes clippath {
+        0%,
+        100% {
+            clip-path: inset(0 0 98% 0);
+        }
+        
+        25% {
+            clip-path: inset(0 98% 0 0);
+        }
+        50% {
+            clip-path: inset(98% 0 0 0);
+        }
+        75% {
+            clip-path: inset(0 0 0 98%);
+        }
+    }
+    
     .linkbox {
         transition: background-color .2s, border-color .2s;
         display: inline-flex;
diff --git a/src/assets/showcase/styles/layout/variables/landing/_dark.scss b/src/assets/showcase/styles/layout/variables/landing/_dark.scss
index 1df38552c4a..cf89c25280f 100644
--- a/src/assets/showcase/styles/layout/variables/landing/_dark.scss
+++ b/src/assets/showcase/styles/layout/variables/landing/_dark.scss
@@ -49,4 +49,5 @@
     --home-templates-btn-border-bottom:4px solid #424b57;
     --home-templates-btn-border-left:3px solid #424b57;
     --home-features-card-shadow: none;
+    --home-box-ring-color: rgba(96, 165, 250, 0.3);
 }
\ No newline at end of file
diff --git a/src/assets/showcase/styles/layout/variables/landing/_light.scss b/src/assets/showcase/styles/layout/variables/landing/_light.scss
index 31dec53af1b..a7a17d5a01c 100644
--- a/src/assets/showcase/styles/layout/variables/landing/_light.scss
+++ b/src/assets/showcase/styles/layout/variables/landing/_light.scss
@@ -49,4 +49,5 @@
     --home-templates-btn-border-bottom:4px solid rgba(0,0,0,.1);
     --home-templates-btn-border-left:3px solid rgba(0,0,0,.1);
     --home-features-card-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01);
+    --home-box-ring-color: var(--primary-100);
 }
\ No newline at end of file