feat: carousel

components/observability.tsx

@@ -1,8 +1,72 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
 import { Eye } from 'lucide-react'
 
+const slides = [
+  {
+    label: 'Dashboard',
+    src: '/dashboard.png',
+    alt: 'GreyProxy dashboard overview showing connection stats and activity',
+  },
+  {
+    label: 'Pending requests',
+    src: '/pending_requests.png',
+    alt: 'GreyProxy pending network requests with Allow and Deny controls',
+  },
+  {
+    label: 'Rules',
+    src: '/rules.png',
+    alt: 'GreyProxy domain rules configuration for allow and deny policies',
+  },
+  {
+    label: 'Logs',
+    src: '/logs.png',
+    alt: 'GreyProxy connection logs showing all outbound network activity',
+  },
+]
+
+const INTERVAL = 4000
+
 export function Observability() {
+  const [active, setActive] = useState(0)
+  const [paused, setPaused] = useState(false)
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  // Key to force re-mount of the progress bar so animation restarts
+  const [tick, setTick] = useState(0)
+
+  function goTo(i: number) {
+    setActive(i)
+    setTick((t) => t + 1)
+    resetTimer()
+  }
+
+  function advance() {
+    setActive((i) => (i + 1) % slides.length)
+    setTick((t) => t + 1)
+  }
+
+  function resetTimer() {
+    if (timerRef.current) clearInterval(timerRef.current)
+    if (!paused) {
+      timerRef.current = setInterval(advance, INTERVAL)
+    }
+  }
+
+  useEffect(() => {
+    if (paused) {
+      if (timerRef.current) clearInterval(timerRef.current)
+      return
+    }
+    timerRef.current = setInterval(advance, INTERVAL)
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paused])
+
   return (
-    <section id="features" className="py-24 px-6 border-t border-border/30">
+    <section id="features" className="py-24 px-4 sm:px-6 border-t border-border/30">
       <div className="mx-auto max-w-5xl">
         <div className="max-w-2xl mb-16">
           <div className="flex items-center gap-2 mb-4">
@@ -21,21 +85,60 @@ export function Observability() {
           </p>
         </div>
 
-        <div className="mx-auto max-w-3xl">
-          <div className="flex items-center gap-3 mb-4">
-            <div className="flex items-center justify-center w-8 h-8 rounded-md bg-primary/10 text-primary">
-              <Eye className="h-4 w-4" />
-            </div>
-            <h3 className="font-sans font-semibold text-sm">GreyProxy dashboard</h3>
+        <div
+          className="mx-auto max-w-3xl"
+          onMouseEnter={() => setPaused(true)}
+          onMouseLeave={() => setPaused(false)}
+        >
+          {/* Screenshot with crossfade */}
+          <div className="relative rounded-lg border border-border/40 overflow-hidden bg-card/30">
+            {slides.map((slide, i) => (
+              <img
+                key={slide.label}
+                src={slide.src}
+                alt={slide.alt}
+                className={`w-full h-auto transition-opacity duration-700 ${
+                  i === active ? 'opacity-100 relative' : 'opacity-0 absolute inset-0'
+                }`}
+              />
+            ))}
           </div>
-          <div className="rounded-lg border border-border/40 overflow-hidden bg-card/30">
-            <img
-              src="/greyproxy.png"
-              alt="GreyProxy dashboard showing pending network requests with Allow and Deny controls"
-              className="w-full h-auto"
-            />
+
+          {/* Progress indicators + labels */}
+          <div className="flex items-center justify-center gap-4 mt-5">
+            {slides.map((slide, i) => (
+              <button
+                key={slide.label}
+                onClick={() => goTo(i)}
+                className="flex items-center gap-2 group"
+              >
+                <div className="relative h-1.5 w-8 rounded-full bg-border/50 overflow-hidden">
+                  {i === active ? (
+                    <div
+                      key={tick}
+                      className="absolute inset-y-0 left-0 rounded-full bg-primary"
+                      style={
+                        paused
+                          ? { width: '100%' }
+                          : { animation: `progress ${INTERVAL}ms linear forwards` }
+                      }
+                    />
+                  ) : (
+                    <div className="absolute inset-0 rounded-full bg-transparent group-hover:bg-muted-foreground/30 transition-colors" />
+                  )}
+                </div>
+                <span
+                  className={`text-xs font-sans transition-colors hidden sm:inline ${
+                    i === active ? 'text-foreground font-medium' : 'text-muted-foreground'
+                  }`}
+                >
+                  {slide.label}
+                </span>
+              </button>
+            ))}
           </div>
-          <p className="text-xs text-muted-foreground font-serif leading-relaxed mt-4">
+
+          <p className="text-xs text-muted-foreground font-serif leading-relaxed mt-5 text-center">
             Every outbound request is visible. Allow trusted domains, block unknown ones,
             and adjust policies live as your agent works.
           </p>