Lighthouse fixes

src/components/Navbar.astro

@@ -1,31 +1,53 @@
+---
+import { Image } from "astro:assets";
+---
+
 <div
   class="align-center flex h-16 w-full justify-between bg-[#19333A] bg-opacity-40 px-6 pt-4 backdrop-blur-xl md:px-8"
 >
   <div class="w-12 pt-1">
-    <img class="h-6" src="/nav_logo.svg" alt="logo" />
+    <Image width="24" height="24" class="h-6" src="/nav_logo.svg" alt="logo" />
   </div>
   <div
     class="hidden w-1/2 justify-between text-lg text-white md:flex xl:text-2xl"
   >
-    <div>About</div>
-    <div>Statistics</div>
-    <div>Past Events</div>
-    <div>Sponsors</div>
-    <div>FAQ</div>
-    <div>Links</div>
+    <p>About</p>
+    <p>Statistics</p>
+    <p>Past Events</p>
+    <p>Sponsors</p>
+    <p>FAQ</p>
+    <p>Links</p>
   </div>
   <div class="hidden pt-1 md:flex">
     <a href="https://www.linkedin.com/company/deltahacks/mycompany/"
-      ><img class="ml-4 h-6" src="/nav_linkedin.svg" alt="logo" /></a
+      ><Image
+        class="ml-4"
+        width="24"
+        height="24"
+        src="/nav_linkedin.svg"
+        alt="logo"
+      /></a
     >
     <a href="https://www.instagram.com/deltahacks">
-      <img class="ml-4 h-6" src="/nav_insta.svg" alt="Instagram" /></a
+      <Image
+        class="ml-4"
+        width="24"
+        height="24"
+        src="/nav_insta.svg"
+        alt="Instagram"
+      /></a
     >
     <a href="https://twitter.com/deltaHacks"
-      ><img class="ml-4 h-6" src="/nav_twitter.svg" alt="Twitter" /></a
+      ><Image
+        class="ml-4"
+        width="24"
+        height="24"
+        src="/nav_twitter.svg"
+        alt="Twitter"
+      /></a
     >
   </div>
   <div class="flex pt-1 md:hidden">
-    <img class="h-6" src="/nav_sizing.svg" alt="NAV" />
+    <Image width="24" height="24" src="/nav_sizing.svg" alt="NAV" />
   </div>
 </div>