new testimonial effect

packages/website/_includes/default.html

@@ -157,7 +157,7 @@
 						}
 						.hero-img {
 							margin-top: 30px;
-						perspective: 400px;
+							perspective: 800px;
 						}
 
 						.btn {
@@ -288,8 +288,10 @@
 
 						.people-say {
 							margin: 4em 0 4em;
-						/* width: 100vw; */
-						overflow-x: hidden;
+							/* overflow-x: hidden; */
+							transform-style: preserve-3d;
+							perspective: 800px;
+							padding:0 2rem;
 						}
 
 						.people-say-top {
@@ -302,20 +304,21 @@
 
 						.say {
 							color: inherit;
-						padding: 10px 20px;
-						margin: 10px 10px;
+							padding: 1rem 2rem;
+							margin: 1rem 0.8rem;
 							display: block;
 							flex-shrink: 0;
 							border-radius: 5px;
 							font-size: 0.95rem;
-						background: #f8f8f8;
+							background: #faf8fc;
 							text-align: left;
-						border: 1px solid rgba(0, 0, 0, 0.05);
+							border: 2px solid #222;
 							text-decoration: none;
+							transition: 0.3s ease;
 						}
 
 						.say:hover {
-						border-color: rgba(0, 0, 0, 0.2);
+							transform: scale(1.05);
 						}
 
 						.say p {
@@ -418,7 +421,7 @@
 							}
 
 							.say {
-							width: 18vw;
+								width: 25ch;
 								flex-shrink: 0;
 								padding: 20px;
 							}
@@ -439,6 +442,46 @@
 								--base-font-size: 2.1em;
 							}
 						}
+
+
+			@keyframes rotate-progress {
+				from {
+					transform: rotateY(8deg);
+				}
+
+				to {
+					transform: rotateY(-8deg);
+				}
+			}
+			@property --shadow-x {
+				syntax: "<length>";
+				inherits: false;
+				initial-value: 0px;
+			}
+			@keyframes shadow-progress {
+				from {
+					--shadow-x: -10px;
+				}
+
+				to {
+					--shadow-x: 10px;
+				}
+			}
+
+			.people-say-top,.people-say-bottom {
+				scroll-timeline: --page-scroll inline;
+				animation: rotate-progress auto linear;
+				animation-timeline: --page-scroll;
+			}
+			.say {
+				box-shadow: var(--shadow-x, -10px) var(--shadow-y,5px) 0px 2px rgba(0, 0, 0, 0.15);
+				animation: shadow-progress auto linear;
+				animation-timeline: --page-scroll;
+				will-change: box-shadow, scale, transform;
+			}
+			.people-say-bottom .say {
+				--shadow-y: -5px;
+			}
 		</style>
 	</head>
 

packages/website/_includes/footer.html

@@ -42,20 +42,17 @@
 	>
 		<img
 			src="https://cssbattle.dev/images/avatar-chang.png"
-			style="width: 180px; border-radius: 40px; position: relative; top: 2rem"
+			style="width: 180px; border-radius: 40px"
 		/>
 		<p
 			style="
-				position: absolute;
-				bottom: 0;
+				position: relative;
 				background: black;
 				border-radius: 1in;
-				padding: 5px 10px;
+				padding: 0.3rem 3rem;
 				color: white;
 				display: inline-block;
-				width: 30ch;
-				margin: -1rem 0 0;
-				left: calc(50% - 15ch);
+				margin: -1.6rem 0 0;
 			"
 		>
 			Made by

packages/website/index.html

@@ -2,7 +2,7 @@
 layout: default.html
 ---
 
-<h2 style="font-size: 2em; " class="ta-c">Awesome Features</h2>
+<h2 style="font-size: 2em" class="ta-c">Awesome Features</h2>
 
 <div class="flex feature-box">
 	<div class="feature">
@@ -64,8 +64,8 @@ layout: default.html
 </div>
 
 <div class="people-say">
-	<h2 style="font-size: 2em;" class="ta-c" aria-label="Love from all around">
-		<span style="color:red;">♥</span> from all around
+	<h2 style="font-size: 2em" class="ta-c" aria-label="Love from all around">
+		<span style="color: red">♥</span> from all around
 	</h2>
 	<div class="people-say-top">
 		<a
@@ -269,7 +269,7 @@ layout: default.html
 		or you can set up a filter in Adblock Plus or similar ad blocker tools like
 		AdBlock, uBlock or Adblock Pro.
 	</p>
-	<div style="text-align: center;">
+	<div style="text-align: center">
 		<a class="btn" href="javascript:void(0)" onclick="closeInfo()">Close</a>
 	</div>
 </div>