feat: new screenshots

components/observability.tsx

@@ -8,26 +8,27 @@ const slides = [
   {
     label: 'Dashboard',
     src: '/dashboard.png',
-    alt: 'GreyProxy dashboard overview showing connection stats and activity',
-    fit: false,
+    alt: 'GreyProxy dashboard showing total requests, allowed, blocked, and allow rate stats',
   },
   {
-    label: 'Pending requests',
+    label: 'Pending',
     src: '/pending_requests.png',
-    alt: 'GreyProxy pending network requests with Allow and Deny controls',
-    fit: true,
+    alt: 'GreyProxy pending network requests with Allow and Deny controls for each domain',
   },
   {
     label: 'Rules',
     src: '/rules.png',
-    alt: 'GreyProxy domain rules configuration for allow and deny policies',
-    fit: false,
+    alt: 'GreyProxy domain rules configuration showing allow and deny policies per source',
   },
   {
-    label: 'Logs',
-    src: '/logs.png',
-    alt: 'GreyProxy connection logs showing all outbound network activity',
-    fit: false,
+    label: 'Activity',
+    src: '/activity.png',
+    alt: 'GreyProxy activity log showing real-time TCP connections with status, source, destination, and duration',
+  },
+  {
+    label: 'Conversations',
+    src: '/conversations.png',
+    alt: 'GreyProxy conversations view showing agent interactions with tool calls and results',
   },
 ]
 
@@ -102,8 +103,8 @@ export function Observability() {
               src={slides[0].src}
               alt=""
               aria-hidden="true"
-              width={1977}
-              height={1444}
+              width={2480}
+              height={1810}
               className="w-full h-auto invisible"
               priority
             />
@@ -112,8 +113,8 @@ export function Observability() {
                 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}
+                width={2480}
+                height={1810}
                 className={`absolute inset-0 w-full h-full object-contain object-top transition-opacity duration-700 ${
                   i === active ? 'opacity-100' : 'opacity-0'
                 }`}