Refactor scroll functionality in App component

src/styles/ScrollToTop.scss

@@ -1,70 +0,0 @@
-.scrollToTop {
-	position: fixed;
-	bottom: 20px;
-	right: 20px;
-	cursor: pointer;
-
-	.arrow {
-		&.up {
-			transform: rotate(0deg);
-
-			&:hover {
-				animation: pulseUp 1s 2;
-			}
-
-			@media screen and (min-width: 768px) {
-				&:hover {
-					animation: pulseUp 1s infinite;
-				}
-			}
-		}
-
-		&.down {
-			transform: rotate(-180deg);
-
-			&:hover {
-				animation: pulseDown 1s 2;
-			}
-
-			@media screen and (min-width: 768px) {
-				width: 50px;
-				height: 50px;
-				position: fixed;
-				bottom: 15px;
-				right: 50%;
-
-				&:hover {
-					animation: pulseDown 1s infinite;
-				}
-			}
-		}
-	}
-
-	&:hover {
-		color: var(--color-accent);
-	}
-
-	@keyframes pulseUp {
-		0% {
-			transform: scale(1);
-		}
-		50% {
-			transform: scale(1.4);
-		}
-		100% {
-			transform: scale(1);
-		}
-	}
-
-	@keyframes pulseDown {
-		0% {
-			transform: scale(1) rotate(-180deg);
-		}
-		50% {
-			transform: scale(1.4) rotate(-180deg);
-		}
-		100% {
-			transform: scale(1) rotate(-180deg);
-		}
-	}
-}

src/styles/SectionScroll.scss

@@ -0,0 +1,43 @@
+.sectionScroll {
+	position: fixed;
+	bottom: 20px;
+	right: 20px;
+	cursor: pointer;
+
+	div {
+		.arrow {
+			&.up {
+				&:hover {
+					animation: pulse 1s 2;
+				}
+
+				@media screen and (min-width: 768px) {
+					&:hover {
+						animation: pulse 1s infinite;
+					}
+				}
+			}
+
+			&.down {
+				&:hover {
+					animation: pulse 1s 2;
+				}
+			}
+			&:hover {
+				color: var(--color-accent);
+			}
+		}
+	}
+
+	@keyframes pulse {
+		0% {
+			transform: scale(1);
+		}
+		50% {
+			transform: scale(1.4);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+}