Changed Google Map to display Old Trafford & Fix styling for about us…

… container

backend/src/main/java/com/sg/backend/controllers/MapController.java

@@ -19,7 +19,7 @@ public class MapController {
     public String getMapsEmbedUrl() {
         // construct the url for the Google Maps Embed API
         // hide API key from frontend
-        String placeId = "ChIJA5LATO4Z2jER111V-v6abAI";
+        String placeId = "ChIJaX_k53Kue0gR_lVE35YOk2w";
         return "https://www.google.com/maps/embed/v1/place?q=place_id:" + placeId + "&key=" + googleMapsKey;
     }
 

frontend/src/app/components/aboutus.component.css

@@ -58,85 +58,45 @@
 }
 
 /* About Us */
-.about-us-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.background-container {
+    position: relative;
     background-image: url('../../assets/aboutus.jpg');
     background-size: cover;
     background-position: center;
     height: 93.5vh;
 }
 
-
-.about-us-card {
-    max-width: 600px;
-    width: 100%;
-    border-radius: 8px;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-    overflow: hidden;
-    transform: translateY(-80%);
-
-}
-
-.about-us-card-header {
+/* Google Map */
+.map-container {
+    position: relative;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    padding: 20px;
-    background-color: #0c0c0c;
-}
-
-.about-us-card-header-icon {
-    font-size: 40px;
-    color: #fff;
-}
-
-.about-us-card-header-title {
-    font-size: 24px;
-    font-weight: 600;
-    color: #fff;
-    margin-left: 10px;
-}
-
-.about-us-card-content {
-    padding: 20px;
-    font-size: 16px;
-    line-height: 1.5;
-    color: #333;
+    padding: 30px;
+    max-width: 600px;
+    margin: auto;
+    opacity: 0.95;
 }
 
-.about-us-card-actions {
+.aboutus-container {
+    position: relative;
+    align-items: center;
     display: flex;
-    justify-content: center;
-    padding: 20px;
-}
-
-.about-us-card-actions-button {
-    background-color: #131212;
-    color: #fff;
-    font-weight: 600;
-    border-radius: 4px;
-    padding: 12px 24px;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    transition: background-color 0.2s ease;
-}
-
-.about-us-card-actions-button:hover {
-    background-color: #1a1a1b;
-    color: white;
+    padding: 30px;
+    max-width: 600px;
+    margin: auto;
+    opacity: 0.90;
 }
 
-/* Google Map */
-
-.map-container {
-    position: relative;
+.aboutus-card {
+    font-family: 'Segoe UI', sans-serif;
+    text-align: center;
+    line-height: 1.5;
+    padding: 10px;
 }
 
-.map-container iframe {
-    position: absolute;
-    transform: translateX(-100%);
-    border: 2px solid black;
-    border-radius: 15px;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+.aboutus-card:hover {
+    opacity: 1;
+    transform: scale(1.05);
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
 }

frontend/src/app/components/aboutus.component.html

@@ -34,41 +34,30 @@
   </div>
 </mat-toolbar>
 <!-- About Us -->
-
-<div class="about-us-container">
-  <mat-card class="about-us-card">
-    <div class="about-us-card-header">
-      <mat-icon class="about-us-card-header-icon">info_outline</mat-icon>
-      <div class="about-us-card-header-title">About Us</div>
-    </div>
-    <div class="about-us-card-content">
-      This tool is designed specifically for our analysts, providing them with
-      the insights they need to make informed decisions that impact the success
-      of the Premier League. Our team is dedicated to continuously improving the
-      tool and adding new features to ensure that it remains a valuable asset to
-      the league.
-    </div>
-    <div class="about-us-card-actions">
-      <button
-        mat-raised-button
-        class="about-us-card-actions-button"
-        routerLink="/contact"
-      >
-        Contact Us
-      </button>
-    </div>
-  </mat-card>
+<div class="background-container">
+  <div class="aboutus-container">
+    <mat-card class="aboutus-card">
+      <h2>About Us</h2>
+      <p>
+        This application was developed to provide analysts with access to the
+        most current data across all Premier League fixtures using
+        Transfermarkt.com API. It offers latest information on the squad members
+        of all Premier League clubs, as well as serves as a management system
+        for player statistics.
+      </p>
+    </mat-card>
+  </div>
   <!-- Google Map -->
-  <mat-card class="map-card">
-    <div class="map-container">
+  <div class="map-container mat-elevation-z4">
+    <mat-card class="map-card">
       <iframe
         [src]="mapsUrl"
-        width="600"
-        height="450"
+        width="700"
+        height="550"
         style="border: 0"
         loading="lazy"
         allowfullscreen
       ></iframe>
-    </div>
-  </mat-card>
+    </mat-card>
+  </div>
 </div>