Update ScrollToTop component and styles

src/components/ScrollToTop.tsx

@@ -38,8 +38,8 @@ export default function ScrollToTop() {
 				<svg
 					className={`arrow ${isScrolledUp ? "up" : "down"}`}
 					xmlns="http://www.w3.org/2000/svg"
-					width="24"
-					height="24"
+					width="32"
+					height="32"
 					viewBox="0 0 24 24"
 					fill="none"
 					stroke="currentColor"

src/styles/ScrollToTop.scss

@@ -1,4 +1,3 @@
-// src/styles/ScrollToTop.scss
 .scrollToTop {
 	position: fixed;
 	bottom: 20px;
@@ -6,23 +5,35 @@
 	cursor: pointer;
 
 	.arrow {
-		transition: transform 200ms ease-in-out;
+		transition: transform 300ms ease-in-out;
 
 		&.up {
 			transform: rotate(0deg);
+
+			&:hover {
+				animation: pulseUp 1s infinite;
+			}
 		}
 
 		&.down {
 			transform: rotate(-180deg);
+			width: 50px;
+			height: 50px;
+			position: fixed;
+			bottom: 15px;
+			right: 50%;
+
+			&:hover {
+				animation: pulseDown 1s infinite;
+			}
 		}
 	}
 
 	&:hover {
-		animation: pulse 1s infinite;
 		color: var(--color-accent);
 	}
 
-	@keyframes pulse {
+	@keyframes pulseUp {
 		0% {
 			transform: scale(1);
 		}
@@ -33,4 +44,16 @@
 			transform: scale(1);
 		}
 	}
+
+	@keyframes pulseDown {
+		0% {
+			transform: scale(1) rotate(-180deg);
+		}
+		50% {
+			transform: scale(1.4) rotate(-180deg);
+		}
+		100% {
+			transform: scale(1) rotate(-180deg);
+		}
+	}
 }