Update responsive styles and class names for consistency

Refactored multiple components to improve responsive design, ensuring better usability on smaller screens. Standardized class names for clarity and consistency, and adjusted layouts and styles to enhance overall alignment and accessibility.

frontend/src/app/pages/footer/footer/footer.component.html

@@ -3,7 +3,7 @@
     <div class="footerInner">
       <div class="footerText">
         <h2>ABOUT US</h2>
-        <p>​Altitude is a community-centered {{ ALTITUDE_VERSION }} survival server. We're one of those servers you come
+        <p>Altitude is a community-centered {{ ALTITUDE_VERSION }} survival server. We're one of those servers you come
           to call "home". We are your place to get together with friends and play survival, with a few extra features
           suggested by our community!</p>
         <div class="followUs" style="height: 35px; display: flex; align-items: flex-end;">

frontend/src/app/pages/footer/footer/footer.component.scss

@@ -67,3 +67,40 @@ footer ul, footer p {
 .copyright {
   margin-top: 50px;
 }
+
+@media (max-width: 1150px) {
+  .footerInner {
+    flex-wrap: wrap;
+    text-align: center;
+  }
+
+  .footerText {
+    flex: 1 1 100%;
+    margin-right: 0;
+    margin-bottom: 30px;
+  }
+
+  .footerNav {
+    border-left: none;
+    padding-left: 0px;
+    padding-bottom: 15px;
+    min-width: 200px;
+  }
+
+  .followUs {
+    width: 100px;
+    margin: 0 auto;
+  }
+
+  .footerNav {
+    border-left: none;
+    padding-left: 0px;
+    padding-bottom: 15px;
+    min-width: 200px;
+  }
+
+  .copyright {
+    margin-top: 30px;
+    text-align: center;
+  }
+}