Fixed Image tags

app/infrastructure/page.tsx

@@ -43,7 +43,7 @@ const CAPABILITIES = [
 
 export default function InfrastructurePage() {
   return (
-    <PageLayout backLink="/" maxWidth="5xl">
+    <PageLayout backLink="/" maxWidth="6xl">
       {/* Header Section */}
       <header className="mb-16 font-mono">
         <div className="flex items-center gap-2 mb-3">
@@ -117,7 +117,7 @@ export default function InfrastructurePage() {
           </div>
 
           <div className="shrink-0">
-            <Link href="/projects/ayla">
+            <Link href="/projects/infrastructure/ayla">
               <motion.div
                 whileHover={{
                   scale: 1.02,

app/projects/[category]/[slug]/page.tsx

@@ -50,7 +50,11 @@ export default function ProjectDetail({
 
   return (
     <PageLayout
-      backLink={`/projects/${category}`}
+      backLink={
+        category == "infrastructure"
+          ? "/infrastructure"
+          : `/projects/${category}`
+      }
       backLabel={`Back to ${category}`}
       maxWidth="6xl"
     >

app/projects/[category]/page.tsx

@@ -64,7 +64,7 @@ export default function CategoryPage({
   if (!meta) return <PageLayout backLink="/">Sector not found.</PageLayout>;
 
   return (
-    <PageLayout backLink="/" maxWidth="5xl">
+    <PageLayout backLink="/" maxWidth="6xl">
       <div className="mb-16">
         <h1 className="flex items-center gap-4 text-5xl font-bold tracking-tighter mb-6">
           {meta.icon} {meta.title}

components/Footer.tsx

@@ -1,4 +1,5 @@
 "use client";
+import Image from "next/image";
 
 export default function Footer() {
   return (
@@ -6,10 +7,13 @@ export default function Footer() {
       <div className="flex items-center gap-6">
         <div className="flex items-center gap-2">
           <p>Pipeline Status</p>
-          <img
+          <Image
             src="https://ci.georgew.dev/api/badges/11/status.svg"
-            alt="Build Status"
+            alt="CI Build Status"
-            className="h-3 grayscale opacity-50 hover:opacity-100 hover:grayscale-0 transition-all"
+            width={64}
+            height={20}
+            unoptimized
+            className="h-3 w-auto grayscale opacity-50 hover:opacity-100 hover:grayscale-0 transition-all"
           />
         </div>
         <div className="hidden md:block w-[1px] h-3 bg-neutral-800" />

components/MonitorCard.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Activity } from "lucide-react";
+import Image from "next/image";
 
 const MONITORS = [
   { id: 2, name: "Datasaur" },
@@ -116,15 +117,21 @@ function RegistrySlider({ isHovered }: { isHovered: boolean }) {
                 {m.name}
               </span>
               <div className="flex gap-1 shrink-0 scale-75 origin-right">
-                <img
+                <Image
                   src={`https://status.georgew.dev/api/badge/${m.id}/status`}
-                  className="h-5"
+                  width={60} // Set a base width
-                  alt="up"
+                  height={20} // Set a base height
+                  className="h-5 w-auto" // Keep your CSS for sizing
+                  alt="System Status"
+                  unoptimized // Essential for live status badges
                 />
-                <img
+                <Image
                   src={`https://status.georgew.dev/api/badge/${m.id}/avg-response/24`}
-                  className="h-5 opacity-60"
+                  width={80}
-                  alt="ms"
+                  height={20}
+                  className="h-5 w-auto opacity-60"
+                  alt="Average Response Time"
+                  unoptimized
                 />
               </div>
             </div>

components/ProjectShowcase.tsx

@@ -43,11 +43,16 @@ export default function ProjectShowcase({ images }: { images: string[] }) {
                 : "border-neutral-800 opacity-40 hover:opacity-100"
             }`}
           >
-            <img
+            <div className="relative h-full w-full overflow-hidden">
+              <Image
                 src={img}
-              className="h-full w-full object-cover"
+                alt={`Project showcase thumbnail ${i}`}
-              alt={`Thumb ${i}`}
+                fill
+                className="object-cover transition-transform duration-500 group-hover:scale-105"
+                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
               />
+            </div>
+
             {i === index && (
               <motion.div
                 layoutId="active-thumb"