feat: Optimize image loading in components

src/components/features.tsx

@@ -220,7 +220,7 @@ export default function Features() {
                     <span className="">How Zen compares to other browsers</span>
                   </TableHead>
                   <TableHead className="py-2 font-bold text-center">
-                    <Image
+                    <img
                       height={32}
                       width={32}
                       src="/favicon.ico"
@@ -230,7 +230,7 @@ export default function Features() {
                     Zen
                   </TableHead>
                   <TableHead className="py-2 pl-4 lg:pr-0 pr-2 font-bold text-center opacity-60">
-                    <Image
+                    <img
                       height={32}
                       width={32}
                       src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/floorp.png"
@@ -240,7 +240,7 @@ export default function Features() {
                     Floorp
                   </TableHead>
                   <TableHead className="py-2 pl-0 font-bold text-center opacity-60">
-                    <Image
+                    <img
                       height={32}
                       width={32}
                       src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/librewolf.png"

src/components/header.tsx

@@ -67,14 +67,14 @@ export default function Header() {
               colorTo="var(--color-two)"
             />
 
-            <Image
+            <img
               width={1500}
               height={700}
               src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-dark.png"
               alt="browser Image"
               className="relative hidden rounded-[inherit] border object-contain dark:block"
             />
-            <Image
+            <img
               width={1500}
               height={700}
               src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-light.png"

src/components/logo.tsx

@@ -14,7 +14,7 @@ export default function Logo({ withText, ...props }: any) {
   }, []);
   return (
     <div className="flex items-center m-0" {...props}>
-      <Image src={`https://cdn.jsdelivr.net/gh/zen-browser/www/public/logos/zen-${randomColor}.svg`} width={40} height={40} alt="Zen Logo" className={ny("transition-all duration-300 hover:scale-110", withText && "mr-2")} />
+      <img src={`https://cdn.jsdelivr.net/gh/zen-browser/www/public/logos/zen-${randomColor}.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>
   );

src/components/theme-card.tsx

@@ -20,7 +20,7 @@ export default function ThemeCard({
       if (event.target instanceof HTMLAnchorElement) return;
       window.open(`/themes/${theme.id}`, "_self");
     }} className="flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none ">
-      <Image src={theme.image} alt={theme.name} width={500} height={500} quality={100}
+      <img src={theme.image} alt={theme.name} width={500} height={500}
       className="w-full h-32 object-cover rounded-lg border shadow" />
       <h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name.substring(0, maxNameLen).trim() + (theme.name.length > maxNameLen ? "..." : "")}</h2>
       <div className="flex mt-2">

src/components/theme-page.tsx

@@ -23,7 +23,7 @@ export default async function ThemePage({ themeID }: { themeID: string }) {
           <ChevronLeft className="w-4 h-4 mr-1" />
           <h3 className="text-md">Go back</h3>
         </a>
-        <Image src={theme.image} alt={theme.name} width={500} height={500} className="w-full object-cover rounded-lg border-2 shadow" />
+        <img src={theme.image} alt={theme.name} width={500} height={500} className="w-full object-cover rounded-lg border-2 shadow" />
         <h1 className="text-2xl mt-5 font-bold">{theme.name}</h1>
         <p className="text-sm text-muted-foreground mt-2">{theme.description}</p>
         {theme.homepage && (