Features carousel logic & basic animation

premAI-io · Feb 23, 2024 · b16e585 · b16e585
1 parent 0855123
commit b16e585
Show file tree

Hide file tree

Showing 18 changed files with 4,920 additions and 3,028 deletions.
diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
@@ -759,7 +759,7 @@ p,
 	column-gap: 1.75rem;
 }
 .hero--home {
-	padding-top: calc(var(--v-height) * 0.3506);
+	padding-top: calc(var(--v-height) * 0.3006);
 	margin-bottom: calc(var(--v-width) * 0.2);
 }
 .hero--home .hero__ill {
@@ -875,16 +875,54 @@ p,
 .features-carousel__item:not(:last-child) {
 	margin-bottom: 0.75rem;
 }
+.features-carousel__item:after {
+	content: "";
+	pointer-events: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	opacity: 0;
+	background: radial-gradient(
+		171.83% 91.93% at 92.7% 22.59%,
+		#f58e8e4d,
+		#7f96ff00 88.5%
+	);
+	transition: opacity 0.32s ease-in-out;
+}
+.features-carousel__item.is-active:after {
+	opacity: 1;
+}
+.features-carousel__item.is-active .features-carousel__item-cta {
+	--tw-rotate: 90deg;
+	transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+		rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+		scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.features-carousel__item.is-active .features-carousel__item-cta:before {
+	opacity: 1;
+}
 .features-carousel__item-content {
 	position: absolute;
 	bottom: 18px;
 	left: 2rem;
+	max-width: calc(100% - 4rem);
 }
 .features-carousel__item-title {
 	font-size: 18px;
 	font-weight: 500;
 	line-height: 1.333;
 }
+.features-carousel__item-text {
+	height: 0px;
+	overflow: hidden;
+	font-size: 12px;
+	line-height: 1.5;
+	--tw-text-opacity: 1;
+	color: rgb(234 234 234 / var(--tw-text-opacity));
+	opacity: 0;
+}
 .features-carousel__item-cta {
 	position: absolute;
 	top: 0.75rem;
@@ -896,6 +934,25 @@ p,
 	transform: translate(var(--tw-translate-x), var(--tw-translate-y))
 		rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
 		scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+	border-radius: 50%;
+	transition: transform 0.42s var(--ease-power4);
+}
+.features-carousel__item-cta:before {
+	pointer-events: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	border-radius: 50%;
+	opacity: 0;
+	background: linear-gradient(98deg, #f58e8e -3.37%, #b57487);
+	content: "";
+	transition: opacity 0.42s var(--ease-power4);
+}
+.features-carousel__timer {
+	visibility: hidden;
+	opacity: 0;
 }
 .trusted {
 	margin-bottom: 9rem;