feat: seo optimization p1

components/agents.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image'
 import { CheckCircle2 } from 'lucide-react'
 
 const agents = [
@@ -42,7 +43,7 @@ export function Agents() {
               rel="noopener noreferrer"
               className="group flex items-center gap-2.5 sm:gap-3 p-3 sm:p-4 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20 hover:bg-card/50 transition-all cursor-pointer"
             >
-              <img
+              <Image
                 src={`https://github.com/${agent.org}.png?size=64`}
                 alt={agent.name}
                 width={28}

components/comparison.tsx

@@ -109,22 +109,22 @@ const rows: Row[] = [
 function CellIcon({ value }: { value: CellValue }) {
   if (value === 'yes') {
     return (
-      <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-400/10">
-        <Check className="h-3 w-3 text-green-400" />
+      <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-400/10" aria-label="Supported">
+        <Check className="h-3 w-3 text-green-400" aria-hidden="true" />
       </span>
     )
   }
   if (value === 'no') {
     return (
-      <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-red-400/10">
-        <X className="h-3 w-3 text-red-400/70" />
+      <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-red-400/10" aria-label="Not supported">
+        <X className="h-3 w-3 text-red-400/70" aria-hidden="true" />
       </span>
     )
   }
   if (value === 'partial') {
     return (
-      <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-yellow-400/10">
-        <Minus className="h-3 w-3 text-yellow-400/70" />
+      <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-yellow-400/10" aria-label="Partial support">
+        <Minus className="h-3 w-3 text-yellow-400/70" aria-hidden="true" />
       </span>
     )
   }
@@ -214,19 +214,19 @@ export function Comparison() {
         <div className="mt-6 flex flex-wrap items-center gap-5 text-xs font-sans text-muted-foreground">
           <div className="flex items-center gap-1.5">
             <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-400/10">
-              <Check className="h-3 w-3 text-green-400" />
+              <Check className="h-3 w-3 text-green-400" aria-hidden="true" />
             </span>
             Supported
           </div>
           <div className="flex items-center gap-1.5">
             <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-yellow-400/10">
-              <Minus className="h-3 w-3 text-yellow-400/70" />
+              <Minus className="h-3 w-3 text-yellow-400/70" aria-hidden="true" />
             </span>
             Partial
           </div>
           <div className="flex items-center gap-1.5">
             <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-red-400/10">
-              <X className="h-3 w-3 text-red-400/70" />
+              <X className="h-3 w-3 text-red-400/70" aria-hidden="true" />
             </span>
             Not supported
           </div>

components/footer.tsx

@@ -32,6 +32,12 @@ export function Footer() {
           >
             greyhaven.co
           </a>
+          <a
+            href="/privacy"
+            className="hover:text-foreground transition-colors"
+          >
+            Privacy
+          </a>
           <span>Apache 2.0</span>
         </div>
       </div>

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>