mirror of
https://github.com/harivansh-afk/sandbox-agent.git
synced 2026-04-16 08:02:25 +00:00
cdbe920070
feat(inspector): update visual styling to match landing page - Update color scheme to match website (black bg, white/10 borders) - Add Open Sans font - Update button styles (white primary buttons) - Add collapsible tool results and status messages - Replace avatar letters with icons (User, Settings, AlertTriangle) - Add status dividers for session/turn events - Update feature coverage badges to lighter grey - Remove pill styling from event times - Update popup menus to solid black background feat(website): add Pi agent to hero diagram and update styling - Add Pi agent with cyan color (#06B6D4) to the diagram - Update layout to 3 agents on top row, 2 on bottom row - Add backdrop-blur glass effects for modern look - Add animated dot background that changes with active adapter - Add scroll fade effect for hero section - Update subtitle to include Pi in supported agents list - Increase 'CONNECTED TO' label font size feat(website): add site styling updates and SEO improvements - Update component styling to match Rivet design (FAQ, FeatureGrid, etc.) - Add SEO improvements (sitemap, robots.txt, meta tags, Open Graph) - Remove CTASection component - Update footer tagline - Add Pi logo
269 lines
12 KiB
TypeScript
269 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Terminal, Check, ArrowRight } from 'lucide-react';
|
|
|
|
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() {
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setActiveIndex((prev) => (prev + 1) % ADAPTERS.length);
|
|
}, 2000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="relative w-full aspect-[16/9] bg-[#050505] rounded-2xl border border-white/10 overflow-hidden flex items-center justify-center shadow-2xl">
|
|
{/* Background Dots - color changes with active adapter */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.15] pointer-events-none transition-all duration-1000"
|
|
style={{
|
|
backgroundImage: `radial-gradient(circle, ${ADAPTERS[activeIndex].color} 1px, transparent 1px)`,
|
|
backgroundSize: '24px 24px',
|
|
}}
|
|
/>
|
|
|
|
<svg viewBox="0 0 800 450" className="w-full h-full relative z-10">
|
|
<defs>
|
|
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur stdDeviation="3" result="blur" />
|
|
<feComposite in="SourceGraphic" in2="blur" operator="over" />
|
|
</filter>
|
|
<filter id="invert-white" colorInterpolationFilters="sRGB">
|
|
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
|
|
</filter>
|
|
</defs>
|
|
|
|
{/* YOUR APP NODE - Glass dark effect with backdrop blur */}
|
|
<foreignObject x="60" y="175" width="180" height="100">
|
|
<div
|
|
className="w-full h-full rounded-2xl border border-white/10 bg-black/40 backdrop-blur-md flex items-center justify-center"
|
|
>
|
|
<span className="text-white text-xl font-bold">Your App</span>
|
|
</div>
|
|
</foreignObject>
|
|
|
|
{/* HTTP/SSE LINE */}
|
|
<g>
|
|
<path d="M240 225 L360 225" stroke="#3B82F6" strokeWidth="2" strokeDasharray="6 4" fill="none" opacity="0.6" />
|
|
<circle r="4" fill="#3B82F6" filter="url(#glow)">
|
|
<animateMotion path="M240 225 L360 225" dur="2s" repeatCount="indefinite" />
|
|
</circle>
|
|
<circle r="4" fill="#3B82F6" filter="url(#glow)">
|
|
<animateMotion path="M360 225 L240 225" dur="2s" repeatCount="indefinite" />
|
|
</circle>
|
|
|
|
<rect x="255" y="195" width="90" height="22" rx="11" fill="#111" stroke="#333" strokeWidth="1" />
|
|
<text x="300" y="210" fill="#60A5FA" textAnchor="middle" fontSize="11" fontWeight="800" fontFamily="monospace">
|
|
HTTP / SSE
|
|
</text>
|
|
</g>
|
|
|
|
{/* SANDBOX BOUNDARY - Glass dark effect with backdrop blur */}
|
|
<foreignObject x="360" y="45" width="410" height="360">
|
|
<div className="w-full h-full rounded-3xl border border-white/10 bg-black/40 backdrop-blur-md">
|
|
<div className="text-white text-sm font-extrabold tracking-[0.2em] text-center pt-4">
|
|
SANDBOX
|
|
</div>
|
|
</div>
|
|
</foreignObject>
|
|
|
|
{/* SANDBOX AGENT SDK */}
|
|
<g transform="translate(385, 110)">
|
|
<rect width="360" height="270" rx="20" fill="rgba(0,0,0,0.4)" stroke="rgba(255,255,255,0.2)" strokeWidth="1" />
|
|
<text x="180" y="35" fill="#FFFFFF" textAnchor="middle" fontSize="18" fontWeight="800">
|
|
Sandbox Agent Server
|
|
</text>
|
|
|
|
{/* PROVIDER ADAPTERS */}
|
|
{ADAPTERS.map((p, i) => {
|
|
const isActive = i === activeIndex;
|
|
return (
|
|
<g key={i} transform={`translate(${p.x}, ${p.y})`}>
|
|
<rect
|
|
width="95"
|
|
height="58"
|
|
rx="10"
|
|
fill={isActive ? '#1A1A1E' : '#111'}
|
|
stroke={isActive ? p.color : '#333'}
|
|
strokeWidth={isActive ? 2 : 1.5}
|
|
/>
|
|
<g opacity={isActive ? 1 : 0.4}>
|
|
{p.logo === 'openai' ? (
|
|
<svg x="36.75" y="8" width="22" height="22" viewBox="0 0 24 24" fill="none">
|
|
<path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" fill="#ffffff" />
|
|
</svg>
|
|
) : p.logo === 'opencode' ? (
|
|
<svg x="38.5" y="8" width="17" height="22" viewBox="0 0 32 40" fill="none">
|
|
<path d="M24 32H8V16H24V32Z" fill="#4B4646"/>
|
|
<path d="M24 8H8V32H24V8ZM32 40H0V0H32V40Z" fill="#F1ECEC"/>
|
|
</svg>
|
|
) : p.logo === 'pi' ? (
|
|
<svg x="36.75" y="8" width="22" height="22" viewBox="0 0 800 800" fill="none">
|
|
<path fill="#fff" fillRule="evenodd" d="M165.29 165.29H517.36V400H400V517.36H282.65V634.72H165.29ZM282.65 282.65V400H400V282.65Z"/>
|
|
<path fill="#fff" d="M517.36 400H634.72V634.72H517.36Z"/>
|
|
</svg>
|
|
) : (
|
|
<image href={p.logo} x="36.75" y="8" width="22" height="22" filter="url(#invert-white)" />
|
|
)}
|
|
</g>
|
|
<text
|
|
x="47.5"
|
|
y="46"
|
|
fill="#FFFFFF"
|
|
textAnchor="middle"
|
|
fontSize="10"
|
|
fontWeight="600"
|
|
opacity={isActive ? 1 : 0.4}
|
|
>
|
|
{p.label}
|
|
</text>
|
|
</g>
|
|
);
|
|
})}
|
|
|
|
{/* Active Agent Label */}
|
|
<text
|
|
x="180"
|
|
y="250"
|
|
fill={ADAPTERS[activeIndex].color}
|
|
textAnchor="middle"
|
|
fontSize="12"
|
|
fontWeight="800"
|
|
fontFamily="monospace"
|
|
letterSpacing="0.1em"
|
|
>
|
|
CONNECTED TO {ADAPTERS[activeIndex].label.toUpperCase()}
|
|
</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const CopyInstallButton = () => {
|
|
const [copied, setCopied] = useState(false);
|
|
const installCommand = 'npx skills add rivet-dev/skills -s sandbox-agent';
|
|
|
|
const handleCopy = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(installCommand);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
} catch (err) {
|
|
console.error('Failed to copy:', err);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="relative group w-full sm:w-auto">
|
|
<button
|
|
onClick={handleCopy}
|
|
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white font-mono"
|
|
>
|
|
{copied ? <Check className="h-4 w-4 text-green-400" /> : <Terminal className="h-4 w-4" />}
|
|
{installCommand}
|
|
</button>
|
|
<div className="absolute left-1/2 -translate-x-1/2 top-full mt-3 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-200 ease-out text-xs text-zinc-500 whitespace-nowrap pointer-events-none font-mono">
|
|
Give this to your coding agent
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
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 (
|
|
<section className="relative flex min-h-screen flex-col overflow-hidden">
|
|
{/* Background gradient */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-zinc-900/20 via-transparent to-transparent pointer-events-none" />
|
|
|
|
{/* Main content */}
|
|
<div
|
|
className="flex flex-1 flex-col justify-start pt-32 lg:justify-center lg:pt-0 lg:pb-20 px-6"
|
|
style={{ opacity: scrollOpacity, filter: `blur(${(1 - scrollOpacity) * 8}px)` }}
|
|
>
|
|
<div className="mx-auto w-full max-w-7xl">
|
|
<div className="flex flex-col gap-12 lg:flex-row lg:items-center lg:justify-between lg:gap-16 xl:gap-24">
|
|
{/* Left side - Text content */}
|
|
<div className="max-w-xl lg:max-w-2xl">
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="mb-6 text-3xl font-medium leading-[1.1] tracking-tight text-white md:text-5xl"
|
|
>
|
|
Run Coding Agents in Sandboxes.
|
|
<br />
|
|
<span className="text-zinc-400">Control Them Over HTTP.</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.1 }}
|
|
className="mb-8 text-lg text-zinc-500 leading-relaxed"
|
|
>
|
|
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.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.2 }}
|
|
className="flex flex-col gap-3 sm:flex-row"
|
|
>
|
|
<a
|
|
href="/docs"
|
|
className="selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-5 py-2.5 text-sm font-medium text-black transition-colors hover:bg-zinc-200"
|
|
>
|
|
Read the Docs
|
|
<ArrowRight className="h-4 w-4" />
|
|
</a>
|
|
<CopyInstallButton />
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Right side - Diagram */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
className="flex-1 w-full max-w-2xl"
|
|
>
|
|
<UniversalAPIDiagram />
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
);
|
|
}
|