fix: Used astro's image component

src/components/Hero.astro

@@ -3,11 +3,16 @@ import screenshot from "../assets/screenshots/3dscreenshot.webp";
 import { Dot, Download } from "@lucide/astro";
 import { Github } from "simple-icons-astro";
 import pkg from "../../package.json";
+import { Image } from "astro:assets";
 ---
 
 <div class="hero bg-base-100 py-16 md:p-0 md:min-h-[calc(100vh-19rem)]">
   <div class="hero-content flex-col lg:flex-row gap-8 md:p-16 rounded-4xl">
-    <img src={screenshot.src} class="md:max-w-sm rounded-2xl shadow-2xl" />
+    <Image
+      src={screenshot}
+      alt="Gameflow Hero Image showing the app UI with retro games installed."
+      class="md:max-w-sm rounded-2xl shadow-2xl"
+    />
     <div>
       <small
         class="flex text-base-content/40 gap-2 justify-center md:justify-start items-center mb-2"

src/components/Screenshots.astro

@@ -1,21 +1,22 @@
 ---
-import { Image } from "@lucide/astro";
+import { ImageIcon } from "@lucide/astro";
+import { Image } from "astro:assets";
 const images = import.meta.glob("../assets/screenshots/*.webp", {
   eager: true,
 });
 ---
 
-<div class="divider sm:my-8 md:my-16"><Image size={48} />Screenshots</div>
+<div class="divider sm:my-8 md:my-16"><ImageIcon size={48} />Screenshots</div>
 <div
   class="columns-1 sm:columns-2 md:columns-3 lg:columns-4 gap-4 sm:p-8 md:p-16"
 >
   {
     Object.values(images).map((img: any, i) => (
       <a href={img.default.src} target="_blank">
-        <img
+        <Image
           class="mb-4 w-full rounded-xl"
           alt={`Screenshot ${i}`}
-          src={img.default.src}
+          src={img.default}
           loading="lazy"
         />
       </a>