fix: use image component for images rendering

src/components/About.astro

@@ -38,7 +38,7 @@ import Button from "./Button.astro";
         </div>
       </div>
       <div class="flex items-start justify-end lg:order-first">
-        <Map client:idle />
+        <Map client:visible />
       </div>
     </div>
   </div>

src/components/BecomeMentor.astro

@@ -1,5 +1,7 @@
 ---
+import { Image } from "astro:assets";
 import Button from "./Button.astro";
+import hero_image from "../../public/try.jpeg";
 ---
 
 <div class="relative bg-white py-16">
@@ -22,9 +24,9 @@ import Button from "./Button.astro";
           <div
             class="aspect-h-6 aspect-w-10 sm:aspect-h-1 sm:aspect-w-2 lg:aspect-w-1"
           >
-            <img
+            <Image
               class="rounded-3xl object-cover object-center shadow-2xl"
-              src="/try.jpeg"
+              src={hero_image}
               alt=""
             />
           </div>

src/components/Blogs.astro

@@ -1,6 +1,7 @@
 ---
 import { type CollectionEntry } from "astro:content";
 import { getCollection } from "astro:content";
+import Image from "astro/components/Image.astro";
 
 const posts = (await getCollection("posts")).sort(
   (a, b) => Date.parse(b.data.date) - Date.parse(a.data.date)
@@ -18,10 +19,12 @@ const { post } = Astro.props;
   {
     posts.slice(0, 3).map((post) => (
       <article class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 px-8 pb-8 pt-80 sm:pt-48 lg:pt-80">
-        <img
+        <Image
           src={post.data.image}
           alt=""
           class="absolute inset-0 -z-10 h-full w-full object-cover"
+          width="1"
+          height="1"
         />
         <div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
         <div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10" />
@@ -45,10 +48,12 @@ const { post } = Astro.props;
               />
             </svg>
             <div class="flex items-center gap-x-2.5">
-              <img
+              <Image
                 src={post.data.profilepic}
                 alt=""
                 class="h-6 w-6 flex-none rounded-full bg-white/10"
+                height="1"
+                width="1"
               />
               {post.data.author}
             </div>

src/components/Hero.astro

@@ -1,5 +1,7 @@
 ---
+import { Image } from "astro:assets";
 import Button from "./Button.astro";
+import hero_image from "../../public/try.jpeg";
 ---
 
 <div class="bg-gray-100 pt-16 md:pt-0">
@@ -42,9 +44,9 @@ import Button from "./Button.astro";
       </div>
     </div>
     <div class="bg-gray-100 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
-      <img
+      <Image
         class="aspect-[3/2] object-cover lg:aspect-auto lg:h-full lg:w-full"
-        src="/try.jpeg"
+        src={hero_image}
         alt=""
       />
     </div>

src/components/HowTo.astro

@@ -1,3 +1,7 @@
+---
+import { Image } from "astro:assets";
+---
+
 <div class="bg-gray-100">
   <div class="mx-auto max-w-7xl py-12 sm:px-6 sm:py-16 lg:px-8">
     <div
@@ -63,7 +67,7 @@
         </p>
       </div>
       <div class="relative mt-16 h-80 lg:mt-8">
-        <img
+        <Image
           class="absolute left-0 top-0 w-[57rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10"
           src="/try.jpeg"
           alt="App screenshot"

src/components/Join.astro

@@ -1,10 +1,15 @@
+---
+import Image from "astro/components/Image.astro";
+import tudor_image from "../../public/tudor.jpeg";
+---
+
 <div class="relative bg-[#301934]">
   <div class="absolute bottom-0 h-80 w-full xl:inset-0 xl:h-full">
     <div class="h-full w-full xl:grid xl:grid-cols-2">
       <div class="h-full xl:relative xl:col-start-2">
-        <img
+        <Image
           class="h-full w-full object-cover opacity-25 xl:absolute xl:inset-0"
-          src="/tudor.jpeg"
+          src={tudor_image}
           alt="People working on laptops"
         />
         <div

src/components/MobileNav.jsx

@@ -52,7 +52,10 @@ export default function MobileNav() {
       {showNav ? (
         <div className="overflow-hidden fixed flex flex-col gap-y-8 justify-center items-center top-0 left-0 bg-gray-600/80 h-screen w-full transition-all delay-75">
           {navLinks.map((nav) => (
-            <button onClick={() => setShowNav(false)}>
+            <button
+              key={nav.index}
+              onClick={() => setShowNav(false)}
+            >
               <a
                 href={nav.href}
                 className={` tracking-wider text-2xl ${
@@ -67,7 +70,10 @@ export default function MobileNav() {
       ) : (
         <div className="overflow-hidden fixed flex flex-col gap-y-8 justify-center items-center top-0 left-0 bg-gray-600/80 h-0 w-full transition-all delay-75">
           {navLinks.map((nav) => (
-            <button onClick={() => setShowNav(false)}>
+            <button
+              key={nav.index}
+              onClick={() => setShowNav(false)}
+            >
               <a
                 href={nav.href}
                 className={`tracking-wider text-2xl shadow ${

src/components/Post.astro

@@ -1,4 +1,5 @@
 ---
+import { Image } from "astro:assets";
 import { type CollectionEntry } from "astro:content";
 type Props = {
   post: CollectionEntry<"posts">;
@@ -12,10 +13,12 @@ const { post } = Astro.props;
     <div
       class="relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-square lg:w-64 lg:shrink-0"
     >
-      <img
+      <Image
         src={post.data.image}
         alt=""
         class="absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover"
+        width="1"
+        height="1"
       />
       <div
         class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"
@@ -54,10 +57,12 @@ const { post } = Astro.props;
     </div>
     <div class="mt-6 flex border-t border-gray-900/5 pt-6">
       <div class="relative flex items-center gap-x-4">
-        <img
+        <Image
           src={post.data.profilepic}
           alt=""
           class="h-10 w-10 rounded-full bg-gray-50"
+          height="1"
+          width="1"
         />
         <div class="text-sm leading-6">
           <p class="font-semibold text-gray-900">

src/pages/contact.astro

@@ -98,7 +98,7 @@ import Button from "../components/Button.astro";
       <div
         class="flex items-start lg:-ml-12 lg:-mt-12 lg:p-12 lg:sticky lg:top-4 lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:overflow-hidden"
       >
-        <Map client:idle />
+        <Map client:visible />
       </div>
       <div
         class="lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8"

src/pages/despre.astro

@@ -4,6 +4,8 @@ import Mentors from "../components/Mentors.astro";
 import Pattern from "../components/Pattern.astro";
 import WhenWhereWhy from "../components/WhenWhereWhy.astro";
 import HowTo from "../components/HowTo.astro";
+import about_pic from "../../public/about-pic.jpeg";
+import { Image } from "astro:assets";
 ---
 
 <Layout
@@ -59,9 +61,9 @@ import HowTo from "../components/HowTo.astro";
         </p>
       </div>
       <figure class="mt-16">
-        <img
+        <Image
           class="aspect-video rounded-xl bg-gray-50 object-cover"
-          src="/about-pic.jpeg"
+          src={about_pic}
           alt=""
         />
       </figure>