feat: Add lazy loading for images and update image components

The code changes include:
- Importing the `Image` component from `next/legacy/image` instead of `next/image` in multiple files.
- Adding a new `CachedImage` component that uses the `Image` component with a custom loader.
- Updating the `Logo` component to use the `CachedImage` component instead of the `img` tag.

Recent user commits and repository commits do not provide additional context for the commit message.

src/components/logo.tsx

@@ -1,13 +1,14 @@
 "use client";
 import { LOGO_COLORS } from "@/lib/logos";
 import { ny } from "@/lib/utils";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import React from "react";
+import CachedImage from "./CachedImage";
 
 export default function Logo({ withText, ...props }: any) {
   return (
     <div className="flex items-center m-0" {...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")} />
+      <CachedImage src={`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="text-2xl font-bold ml-2">zen</span>}
     </div>
   );