Refactor Logo component to use next/Image

src/components/logo.tsx

@@ -6,9 +6,18 @@ import React from "react";
 
 export default function Logo({ withText, ...props }: any) {
   return (
-    <div className="flex items-center m-0" {...props}>
+    <div className="m-0 flex items-center" {...props}>
-      <img src={`https://cdn.jsdelivr.net/gh/zen-browser/www/public/logos/zen-black.svg`} width={40} height={40} alt="Zen Logo" className={ny("transition-all duration-300 hover:scale-110", withText && "mr-2")} />
+      <Image
-      {withText && <span className="text-2xl font-bold ml-2">zen</span>}
+        src={`https://cdn.jsdelivr.net/gh/zen-browser/www/public/logos/zen-black.svg`}
+        width={40}
+        height={40}
+        alt="Zen Logo"
+        className={ny(
+          "transition-all duration-300 hover:scale-110",
+          withText && "mr-2",
+        )}
+      />
+      {withText && <span className="ml-2 text-2xl font-bold">zen</span>}
     </div>
   );
 }