optimising images with next image

src/app/components/Navbar.tsx

@@ -32,10 +32,11 @@ function Nav({ userImage }: { userImage: string }) {
           <div className="flex items-center justify-between h-16">
             <div className="flex items-center">
               <div className="flex-shrink-0">
-                <img
-                  className="h-10 w-24"
+                <Image
                   src="/hestiaSymbol.png"
                   alt="Workflow"
+                  width={96}
+                  height={40}
                 />
               </div>
               <div className="hidden md:block">

src/app/components/ProfileDropDown.tsx

@@ -3,16 +3,19 @@
 import { Menu } from "@headlessui/react";
 import { signOut } from "next-auth/react";
 import Link from "next/link";
+import Image from "next/image";
 
 function ProfileDropDown({ userImage }: { userImage: string }) {
   return (
     <Menu as="div" className="relative">
       <Menu.Button className="rounded-full">
         {userImage ? (
-          <img
+          <Image
             src={userImage}
             alt={"Profile"}
-            className="inline h-12 w-12 rounded-full text-white"
+            className="inline rounded-full text-white"
+            height={48}
+            width={48}
           />
         ) : (
           <span className="inline-block h-12 w-12 overflow-hidden rounded-full bg-stone-100">

src/app/components/home/Card.tsx

@@ -3,6 +3,7 @@ import StatusBadge from "@/app/components/StatusBadge";
 import { useRouter } from "next/navigation";
 import { PortfolioStatus } from "@/app/db/schema/portfolio";
 import { formatNumber } from "@/app/utils";
+import Image from "next/image";
 
 const styles = {
   wrapper:
@@ -10,7 +11,7 @@ const styles = {
   header: "relative mt-2 mx-2 border-red",
   imageWrapper: "h-56 rounded-2xl overflow-hidden flex items-center",
   wrapperAnime: "transition-all duration-500 ease-in-out",
-  image: "object-cover w-1/3 mx-auto",
+  image: "object-cover mx-auto",
   textWrapper: "pt-6 pb-3 w-full px-4 flex justify-between items-center",
 };
 
@@ -39,7 +40,13 @@ const Card = ({ id, title, image, budget, status }: CardProps) => {
       >
         <div className={styles.header}>
           <div className={styles.imageWrapper}>
-            <img src={image} className={styles.image} alt="" />
+            <Image
+              src={image}
+              className={styles.image}
+              alt=""
+              width={80}
+              height={80}
+            />
           </div>
         </div>
         <div className={styles.textWrapper}>

src/app/page.tsx

@@ -2,7 +2,7 @@ import { getServerSession } from "next-auth/next";
 import { AuthOptions } from "./api/auth/[...nextauth]/route";
 import GoogleSignInButton from "./components/signin/GoogleSignInButton";
 import { redirect } from "next/navigation";
-import Link from "next/link";
+import Image from "next/image";
 
 export default async function Home() {
   const session = await getServerSession(AuthOptions);
@@ -14,7 +14,13 @@ export default async function Home() {
   return (
     <section className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-brandblue via-hoverblue to-brandmidblue">
       <div className="w-full max-w-md p-8 bg-white rounded-lg shadow-lg flex flex-col items-center">
-        <img className="h-10 w-7 mb-8" src="/hestiaIcon.png" alt="Logo" />
+        <Image
+          className="mb-8"
+          src="/hestiaIcon.png"
+          alt="Logo"
+          height={40}
+          width={28}
+        />
         <h1 className="text-3xl font-medium text-gray-900 mb-8 text-center">
           Sign in to your account
         </h1>