Links added to each team in live score cards

ProjectSourceCode/src/resources/css/navigation-bar/scoreboard-header/game-card.css

@@ -13,7 +13,6 @@
     overflow: hidden; /* Hide the overflowing skewed content */
     transform: skewX(-20deg); /* Skew the banner to create a triangular side */
     transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for smooth transformation and box-shadow */
-    cursor: pointer; /* Change cursor to pointer on hover */
     
     transition: transform 0.4s ease; /* Add transition for smooth effect */
 }
@@ -61,11 +60,17 @@
 
 /* Container for each team in card's information */
 .team {
-    display: flex; /* Keeps all items in a row */
     align-items: center; /* Center items vertically */
     padding: 5px;
 }
 
+.team a {
+    color: black;
+    display: flex;
+    text-decoration: none;
+    margin: 0;
+}
+
 
 .team p {
     margin: 0; /* Remove default margin */

ProjectSourceCode/src/resources/middleware/navigation-bar/current-match-information.js

@@ -35,10 +35,12 @@ const fetchMatchesData = async (req, res, next) => {
             // Extract relevant data from the API response
             const matches = response.data.matches.map(match => ({
                 homeTeam: {
+                    teamID: match.homeTeam.id,
                     name: match.homeTeam.tla,
                     crest: match.homeTeam.crest,
                 },
                 awayTeam: {
+                    teamID: match.awayTeam.id,
                     name: match.awayTeam.tla,
                     crest: match.awayTeam.crest,
                 },

ProjectSourceCode/src/views/partials/navigation-bar/scoreboard-header/game-card.hbs

@@ -6,15 +6,19 @@
 
             <!-- Team 1 Name with Score -->
             <div class="team">
+                <a href="/club/{{homeTeam.teamID}}">
                     <img src="{{ homeTeam.crest }}" alt="{{ homeTeam.name }} Crest">
                     <p id="team-name">{{ homeTeam.name }}</p> <!-- {{team1.name}} -->
                     <p id="team-score">{{ score.homeScore }}</p>
+                </a>
             </div>
             <!-- Team 2 Name with Score -->
             <div class="team">
+                <a href="/club/{{awayTeam.teamID}}">
                     <img src="{{ awayTeam.crest }}" alt="{{ awayTeam.name }} Crest">
                     <p id="team-name">{{ awayTeam.name }}</p> <!-- {{team1.name}} -->
                     <p id="team-score">{{ score.awayScore }}</p>
+                </a>
             </div>
         </div>