Optimized images and linting

app/components/Navbar.tsx

@@ -4,6 +4,7 @@
 
 import Link from 'next/link';
 import { useState } from 'react';
+import Image from 'next/image';
 
 export default function Navbar() {
     const [isExpanded, setIsExpanded] = useState(false);
@@ -17,7 +18,13 @@ export default function Navbar() {
 
                 <Link href="/" className="group text-white no-underline flex uppercase font-extrabold items-center tracking-[1px] transition-transform hover:scale-105" onClick={closeMenu}>
                     <div className="w-12 h-12 flex justify-center items-center rounded-full bg-[#84c0a0]/10 border border-[#84c0a0]/30 shadow-[0_0_15px_rgba(132,192,160,0.2)] group-hover:bg-[#84c0a0]/20 transition-all duration-300">
-                        <img src="/assets/logos/logo.svg" alt="Wiking" className="w-8 h-8" />
+                        <Image
+                            src="/assets/logos/logo.svg"
+                            alt="Wiking"
+                            width={32}
+                            height={32}
+                            className="w-8 h-8 filter dark:invert-0 invert"
+                        />
                     </div>
                     <span className="hidden md:block ml-4 text-sm tracking-widest text-[#84c0a0] font-mono group-hover:text-white transition-colors">
                         SODERBERG TECH