feat: seo optimization p1

components/observability.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useEffect, useRef } from 'react'
+import Image from 'next/image'
 import { Eye } from 'lucide-react'
 
 const slides = [
@@ -97,20 +98,26 @@ export function Observability() {
           {/* Screenshot with crossfade */}
           <div className="relative rounded-lg border border-border/40 overflow-hidden bg-white">
             {/* Hidden reference image to lock container height */}
-            <img
+            <Image
               src={slides[0].src}
               alt=""
               aria-hidden="true"
+              width={1977}
+              height={1444}
               className="w-full h-auto invisible"
+              priority
             />
             {slides.map((slide, i) => (
-              <img
+              <Image
                 key={slide.label}
                 src={slide.src}
                 alt={slide.alt}
+                width={slide.src === '/pending_requests.png' ? 1752 : 1977}
+                height={slide.src === '/pending_requests.png' ? 1216 : 1444}
                 className={`absolute inset-0 w-full h-full object-contain object-top transition-opacity duration-700 ${
                   i === active ? 'opacity-100' : 'opacity-0'
                 }`}
+                priority={i === 0}
               />
             ))}
           </div>