Fixed internal <a> tag to <Link> tags

Author: jennymar

frontend/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import { Inter } from "next/font/google";
 
 import type { Metadata } from "next";
+
 import "./globals.css";
 import { HeaderBar } from "@/components/HeaderBar";
 

frontend/src/components/HeaderBar.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import React from "react";
 
 import styles from "./HeaderBar.module.css";
@@ -13,27 +14,27 @@ export const HeaderBar = () => {
         <div className={styles.aboutUs}>
           About Us
           <div className={styles.aboutUsDropdown}>
-            <a href="#">Our Mission</a>
-            <a href="#">Our Team</a>
-            <a href="#">Contact</a>
+            <Link href="/">Our Mission</Link>
+            <Link href="/">Our Team</Link>
+            <Link href="/">Contact</Link>
           </div>
         </div>
 
         {/* Use the dropdown styles for "get Involved" */}
         <div className={styles.getInvolved}>
           Get Involved
           <div className={styles.getInvolvedDropdown}>
-            <a href="#">Upcoming Events</a>
-            <a href="#">Donate</a>
+            <Link href="/">Upcoming Events</Link>
+            <Link href="/">Donate</Link>
           </div>
         </div>
 
         {/* Use the dropdown styles for "Our Impact" */}
         <div className={styles.ourImpact}>
           Our Impact
           <div className={styles.ourImpactDropdown}>
-            <a href="#">Testimonials</a>
-            <a href="#">Newsletter</a>
+            <Link href="/">Testimonials</Link>
+            <Link href="/">Newsletter</Link>
           </div>
         </div>