diff --git a/frontend/packages/website/src/components/Hero.tsx b/frontend/packages/website/src/components/Hero.tsx index 873c166..9f12fd0 100644 --- a/frontend/packages/website/src/components/Hero.tsx +++ b/frontend/packages/website/src/components/Hero.tsx @@ -1,13 +1,15 @@ 'use client'; import { useState, useEffect } from 'react'; +import { motion } from 'framer-motion'; import { Terminal, Check, ArrowRight } from 'lucide-react'; -const AGENT_PROCESSES = [ - { label: 'Claude Code', color: '#D97757', x: 35, y: 70, logo: '/logos/claude.svg' }, - { label: 'Codex', color: '#10A37F', x: 185, y: 70, logo: 'openai' }, - { label: 'Amp', color: '#F59E0B', x: 35, y: 155, logo: '/logos/amp.svg' }, - { label: 'OpenCode', color: '#8B5CF6', x: 185, y: 155, logo: 'opencode' }, +const ADAPTERS = [ + { label: 'Claude Code', color: '#D97757', x: 20, y: 70, logo: '/logos/claude.svg' }, + { label: 'Codex', color: '#10A37F', x: 132, y: 70, logo: 'openai' }, + { label: 'Pi', color: '#06B6D4', x: 244, y: 70, logo: 'pi' }, + { label: 'Amp', color: '#F59E0B', x: 76, y: 155, logo: '/logos/amp.svg' }, + { label: 'OpenCode', color: '#8B5CF6', x: 188, y: 155, logo: 'opencode' }, ]; function UniversalAPIDiagram() { @@ -15,29 +17,22 @@ function UniversalAPIDiagram() { useEffect(() => { const interval = setInterval(() => { - setActiveIndex((prev) => (prev + 1) % AGENT_PROCESSES.length); + setActiveIndex((prev) => (prev + 1) % ADAPTERS.length); }, 2000); return () => clearInterval(interval); }, []); return ( -
- {/* Background Grid */} +
+ {/* Background Dots - color changes with active adapter */}
- {/* Dynamic Background Glow */} -
- @@ -49,13 +44,14 @@ function UniversalAPIDiagram() { - {/* YOUR APP NODE */} - - - - Your App - - + {/* YOUR APP NODE - Glass dark effect with backdrop blur */} + +
+ Your App +
+ {/* HTTP/SSE LINE */} @@ -73,55 +69,60 @@ function UniversalAPIDiagram() { - {/* SANDBOX BOUNDARY */} - - - - - SANDBOX - + {/* SANDBOX BOUNDARY - Glass dark effect with backdrop blur */} + +
+
+ SANDBOX +
+
+ - {/* SANDBOX AGENT SDK */} - - - + {/* SANDBOX AGENT SDK */} + + + Sandbox Agent Server - - {/* PROVIDER AGENT PROCESSES */} - {AGENT_PROCESSES.map((p, i) => { + {/* PROVIDER ADAPTERS */} + {ADAPTERS.map((p, i) => { const isActive = i === activeIndex; return ( {p.logo === 'openai' ? ( - - + + ) : p.logo === 'opencode' ? ( - + + ) : p.logo === 'pi' ? ( + + + + ) : ( - + )} @@ -133,19 +134,18 @@ function UniversalAPIDiagram() { {/* Active Agent Label */} - CONNECTED TO {AGENT_PROCESSES[activeIndex].label.toUpperCase()} + CONNECTED TO {ADAPTERS[activeIndex].label.toUpperCase()} -
); @@ -166,47 +166,104 @@ const CopyInstallButton = () => { }; return ( - +
+ +
+ Give this to your coding agent +
+
); }; export function Hero() { + const [scrollOpacity, setScrollOpacity] = useState(1); + + useEffect(() => { + const handleScroll = () => { + const scrollY = window.scrollY; + const windowHeight = window.innerHeight; + const isMobile = window.innerWidth < 1024; + + const fadeStart = windowHeight * (isMobile ? 0.3 : 0.15); + const fadeEnd = windowHeight * (isMobile ? 0.7 : 0.5); + const opacity = 1 - Math.min(1, Math.max(0, (scrollY - fadeStart) / (fadeEnd - fadeStart))); + setScrollOpacity(opacity); + }; + + window.addEventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); + }, []); + return ( -
-
-
-
-

- Run Coding Agents in Sandboxes.
- Control Them Over HTTP. -

-

- The Sandbox Agent SDK is a server that runs inside your sandbox. Your app connects remotely to control Claude Code, Codex, OpenCode, or Amp — streaming events, handling permissions, managing sessions. -

+
+ {/* Background gradient */} +
-
- +
+ + Run Coding Agents in Sandboxes. +
+ Control Them Over HTTP. + -
- + + The Sandbox Agent SDK is a server that runs inside your sandbox. Your app connects remotely to control Claude Code, Codex, OpenCode, Amp, or Pi — streaming events, handling permissions, managing sessions. + + + + + Read the Docs + + + + +
+ + {/* Right side - Diagram */} + + +
+
); }