Add water animation

primefaces · Dec 21, 2023 · 31f428f · 31f428f
1 parent 715b373
commit 31f428f
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 39 deletions.
diff --git a/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation.js b/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation.js
@@ -17,11 +17,12 @@ const TemplateFeaturesAnimation = ({ featuresData, title , animationSeconds = 50
             <div className='template-features-animation' ref={animationRef}>
                 <div className='template-features-animation-left'>
                     {featuresData.map((data, i) => (
-                        <div key={i} className={`template-features-animation-left-card ${!!(selectedID === data.id) && "template-features-animation-left-card-active"}`} onClick={() => handleClick(data.id)}>
+                        <div key={i} className={`template-features-animation-left-card ${(selectedID === data.id) ? "template-features-animation-left-card-active" :""}`} onClick={() => handleClick(data.id)}>
                             <div className='template-features-animation-left-card-order'>
-                                0{i + 1}
+                                <span>{(i+1).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })}</span>
+                                <span>{(i+1).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })}</span>
                             </div>
-                            <div>
+                            <div className='template-features-animation-left-card-content'>
                                 <h5>{data.title}</h5>
                                 <p>{data.description}</p>
                             </div>

diff --git a/styles/layout/templates/_templates.scss b/styles/layout/templates/_templates.scss
@@ -270,15 +270,18 @@
         justify-content: center;
         flex-wrap: wrap;
         gap: 1.5rem;
-        &-col{
+
+        &-col {
             display: flex;
             flex-direction: column;
             gap: 1.5rem;
             flex: 1;
-            &:last-child{
+
+            &:last-child {
                 margin-top: 7.5rem;
             }
         }
+
         &-card {
             width: 100%;
             padding: 1.25rem;
@@ -324,6 +327,7 @@
                 padding: 2.5rem 1rem;
                 border-radius: 1.25rem;
             }
+
             max-width: 100%;
             width: 100%;
             align-items: center;
@@ -342,27 +346,30 @@
                 &-withMargin {
                     margin-top: 0rem;
                 }
-    
+
                 &-withoutMargin {
                     margin-top: 0rem;
                 }
             }
         }
     }
 }
+
 @media only screen and (max-width: 768px) {
     .template {
         &-features2 {
             width: 70%;
             flex-direction: column;
-            &-col{
-                &:last-child{
+
+            &-col {
+                &:last-child {
                     margin-top: 0rem;
                 }
             }
         }
     }
 }
+
 @media only screen and (max-width: 576px) {
     .template {
         &-features2 {
@@ -657,7 +664,7 @@
                 padding: 1rem;
                 display: flex;
                 align-items: flex-start;
-                gap: 1.25rem;
+                gap: 1.5rem;
                 cursor: pointer;
                 transition: all 0.2s ease;
 
@@ -672,35 +679,74 @@
                     background: var(--surface-100, #F5F5F5);
                 }
 
+                &:hover &-order {
+
+                    span {
+                        &:nth-child(2) {
+                            animation: FeaturesOrderAnimation 2.5s ease-in-out ;
+                            color: var(--primary-400);
+                        }
+                    }
+                }
 
+                &-active &-order {
+                    span {
+                        &:nth-child(2) {
+                            animation: FeaturesOrderAnimation 2.5s ease-in-out ;
+                            color: var(--primary-400);
+                        }
+                    }
+                }
 
                 &-order {
-                    z-index: 34;
+                    width: 3.5rem;
+                    height: 100%;
+                    margin-top: -0.25rem;
                     position: relative;
-                    overflow: hidden;
-                    font-size: 3rem;
-                    font-weight: 700;
-                    margin: 0;
-                    color: white;
-                    text-shadow: 1px 1px 0 #9E9E9E, -1px 1px 0 #9E9E9E, -1px -1px 0 #9E9E9E, 1px -1px 0 #9E9E9E;
-                }
+                    transition: all 0.2s ease;
 
-                h5 {
-                    color: var(--surface-900, var(--color-surface-900, #212121));
-                    font-size: 1.09375rem;
-                    font-weight: 600;
-                    line-height: 1.3125rem;
-                    margin: 0;
+                    span {
+                        font-size: 2.5rem;
+                        font-weight: 700;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+
+                        &:nth-child(1) {
+                            color: transparent;
+                            -webkit-text-stroke: 0.75px var(--primary-400);
+                        }
+
+                        &:nth-child(2) {
+
+                            color: transparent;
+
+                        }
+                    }
                 }
 
-                p {
-                    color: var(--surface-600, #757575);
-                    font-size: 0.875rem;
-                    font-weight: 400;
-                    line-height: 1.3125rem;
-                    margin: 0.38rem 0 0;
+
+
+                &-content{
+                    flex: 1;
+                    h5 {
+                        color: var(--surface-900, var(--color-surface-900, #212121));
+                        font-size: 1.09375rem;
+                        font-weight: 600;
+                        line-height: 1.3125rem;
+                        margin: 0;
+                    }
+
+                    p {
+                        color: var(--surface-600, #757575);
+                        font-size: 0.875rem;
+                        font-weight: 400;
+                        line-height: 1.3125rem;
+                        margin: 0.38rem 0 0;
+                    }
+
                 }
-            }
+            }   
         }
 
         &-right {
@@ -780,6 +826,26 @@
     }
 }
 
+@keyframes FeaturesOrderAnimation {
+    0%{
+        clip-path: polygon(0% 100%, 15% 100%, 32% 100%, 54% 100%, 70% 100%, 84% 100%, 100% 100%,
+        100% 100%, 0% 100%);
+    }
+    20%{
+        clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%,
+                100% 100%, 0% 100%);
+    }
+    40% {
+        clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
+    }
+    60%{
+        clip-path: polygon(0 51%, 14% 31%, 33% 42%, 49% 53%, 68% 55%, 85% 50%, 100% 60%, 100% 100%, 0 100%);
+    }
+    100%{
+        clip-path: polygon(0 0, 15% 0, 37% 0, 53% 0, 68% 0, 84% 0, 100% 0, 100% 100%, 0 100%);
+    }
+}
+
 @media only screen and (max-width: 1440px) {
     .template {
         &-features-animation {
@@ -791,21 +857,22 @@
             &-right {
                 width: 60%;
 
-                &-inline{
-                    &-image{
+                &-inline {
+                    &-image {
                         width: 92%;
-                    }   
-                    &-tabs{
+                    }
+
+                    &-tabs {
                         width: 92%;
-    
-                        button{
+
+                        button {
                             padding: 0.21875rem 0.25rem;
                         }
                     }
                 }
             }
 
-            
+
         }
     }
 }
@@ -845,6 +912,7 @@
                 &-inline {
                     height: fit-content;
                     padding: 2rem 0;
+
                     &-image {
                         width: 90%;
                         margin: 0;
@@ -982,7 +1050,7 @@
             top: -4rem;
             left: 6rem;
             z-index: 5;
-            
+
         }
 
         &-dashboard1 {
@@ -1012,6 +1080,7 @@
     .template {
         &-hero {
             height: 32.25rem;
+
             &-card {
                 margin-left: 3.5rem;
                 margin-top: 7.81rem;
@@ -1092,7 +1161,7 @@
 @media only screen and (max-width: 576px) {
     .template {
         &-hero {
-            &-rectangle{
+            &-rectangle {
                 left: -10rem;
             }