+
{data.title}
{data.description}
diff --git a/styles/layout/templates/_templates.scss b/styles/layout/templates/_templates.scss
index ab9097c48a..39d70995a9 100644
--- 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,7 +346,7 @@
&-withMargin {
margin-top: 0rem;
}
-
+
&-withoutMargin {
margin-top: 0rem;
}
@@ -350,19 +354,22 @@
}
}
}
+
@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;
}