mirror of
https://github.com/harivansh-afk/sandbox-agent.git
synced 2026-04-15 14:03:52 +00:00
chore(site): update wording, add GetStarted section, fix code samples
This commit is contained in:
Nicholas Kissel
Nathan Flurry
parent
edea1887e5
commit
5ff6f6790e
6 changed files with 256 additions and 97 deletions
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill="none" viewBox="0 0 19 19"><path fill="#F34E3F" d="M3.41508 17.2983L7.88484 12.7653L9.51146 18.9412L11.8745 18.2949L9.52018 9.32758L0.69527 6.93747L0.066864 9.35199L6.13926 11.0015L1.68806 15.5279L3.41508 17.2983Z"/><path fill="#F34E3F" d="M16.3044 12.0436L18.6675 11.3973L16.3132 2.43003L7.48824 0.0399246L6.85984 2.45444L14.312 4.47881L16.3044 12.0436Z"/><path fill="#F34E3F" d="M12.9126 15.4902L15.2756 14.8439L12.9213 5.87659L4.09639 3.48648L3.46799 5.901L10.9201 7.92537L12.9126 15.4902Z"/></svg>
|
||||
<svg viewBox="0 0 281 124" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M236.014 0C260.431 9.71106e-05 280.602 17.4115 280.603 44.7432C280.602 73.5337 260.065 94.1657 233.52 94.166C224.158 94.166 215.639 92.4222 208.63 88.4902C202.886 85.2698 198.203 80.6054 194.919 74.3379L188.115 121.822L187.946 123.016H174.214L174.448 121.423L191.772 2.49414H205.372L203.937 11.3369C212.143 3.86078 223.2 0.000153635 236.014 0ZM47.082 0.154297C56.4435 0.154297 65.0012 1.8991 72.0488 5.84863C77.8222 9.08305 82.5323 13.7713 85.8271 20.085L88.1201 3.69238L88.2861 2.49316H101.863L89.1611 90.6328L88.9873 91.8262H75.4092L76.7227 82.8555C68.5854 90.4564 57.3981 94.3231 44.5889 94.3232C20.1709 94.3232 0.000167223 76.9087 0 49.5771C0.000149745 20.7854 20.54 0.154871 47.082 0.154297ZM116.234 90.6357L116.061 91.8271H102.485L115.351 3.68555L115.521 2.49414H129.083L116.234 90.6357ZM140.673 90.6357L140.499 91.8271H126.924L139.789 3.68555L139.96 2.49414H153.521L140.673 90.6357ZM177.958 2.49414L165.108 90.6357L164.935 91.8271H151.36L164.225 3.68555L164.396 2.49414H177.958ZM48.4854 11.9844C27.8638 11.985 14.0133 28.3799 14.0127 48.9521C14.0127 57.7907 16.8094 66.1771 22.3145 72.334C27.7973 78.4657 36.0631 82.4932 47.2402 82.4932C67.8534 82.4925 81.7122 65.9487 81.7129 45.3682C81.7129 35.4076 78.2493 27.0792 72.4131 21.2441C66.5794 15.4088 58.2871 11.9844 48.4854 11.9844ZM233.362 11.8291C212.749 11.8297 198.89 28.3716 198.89 48.9521C198.89 58.9123 202.356 67.2403 208.189 73.0742C214.023 78.9107 222.315 82.3358 232.116 82.3359C252.738 82.3355 266.589 65.9407 266.59 45.3682C266.59 36.5296 263.795 28.1424 258.29 21.9863C252.807 15.8551 244.542 11.8291 233.362 11.8291Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 572 B After Width: | Height: | Size: 1.6 KiB |
|
|
@ -1,5 +1 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" stroke="#3B82F6" stroke-width="2" fill="none"/>
|
||||
<path d="M8 12L11 15L16 9" stroke="#3B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<circle cx="12" cy="12" r="1.5" fill="#3B82F6"/>
|
||||
</svg>
|
||||
<svg width='32' height='40' viewBox='0 0 32 40' fill='none' xmlns='http://www.w3.org/2000/svg'><g clip-path='url(#clip0_1311_94973)'><path d='M24 32H8V16H24V32Z' fill='#4B4646'/><path d='M24 8H8V32H24V8ZM32 40H0V0H32V40Z' fill='#F1ECEC'/></g><defs><clipPath id='clip0_1311_94973'><rect width='32' height='40' fill='white'/></clipPath></defs></svg>
|
||||
|
Before Width: | Height: | Size: 376 B After Width: | Height: | Size: 347 B |
|
|
@ -44,7 +44,7 @@ export function FeatureGrid() {
|
|||
<div className="mb-16">
|
||||
<h2 className="mb-6 text-3xl font-medium tracking-tight text-white md:text-5xl">
|
||||
Full feature coverage. <br />
|
||||
<span className="text-zinc-500">Solving the fundamental friction points.</span>
|
||||
<span className="text-zinc-500">Available as an HTTP API or TypeScript SDK.</span>
|
||||
</h2>
|
||||
<p className="text-lg leading-relaxed text-zinc-400">
|
||||
Everything you need to integrate coding agents in record time.
|
||||
|
|
@ -98,7 +98,7 @@ export function FeatureGrid() {
|
|||
const curvedPaths = [
|
||||
{ d: "M480 225 C540 225, 560 90, 620 90", label: "Claude", color: "#d97757" },
|
||||
{ d: "M480 225 C540 225, 560 180, 620 180", label: "OpenAI", color: "#ffffff" },
|
||||
{ d: "M480 225 C540 225, 560 270, 620 270", label: "Devin", color: "#10B981" },
|
||||
{ d: "M480 225 C540 225, 560 270, 620 270", label: "OpenCode", color: "#10B981" },
|
||||
{ d: "M480 225 C540 225, 560 360, 620 360", label: "Amp", color: "#F59E0B" }
|
||||
];
|
||||
|
||||
|
|
@ -146,53 +146,54 @@ export function FeatureGrid() {
|
|||
<text x="80" y="52" fill="white" textAnchor="middle" fontSize="14" fontWeight="800">Sandbox Agent SDK</text>
|
||||
</g>
|
||||
|
||||
{/* Provider Nodes with Logos */}
|
||||
{/* Provider Nodes with Logos - Vertical Layout (centered) */}
|
||||
{/* Claude */}
|
||||
<g transform="translate(620, 60)">
|
||||
<rect width="140" height="60" rx="10" fill="#111" stroke="#222" strokeWidth="1" />
|
||||
<foreignObject x="25" y="15" width="30" height="30">
|
||||
<img
|
||||
src="/logos/claude.svg"
|
||||
alt="Claude"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
<g transform="translate(620, 50)">
|
||||
<rect width="140" height="80" rx="10" fill="#111" stroke="#222" strokeWidth="1" />
|
||||
<foreignObject x="0" y="10" width="140" height="32">
|
||||
<div className="flex justify-center">
|
||||
<img src="/logos/claude.svg" alt="Claude" className="h-8 w-8" />
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="85" y="35" fill="#999" textAnchor="middle" fontSize="12" fontWeight="600">Claude</text>
|
||||
<text x="70" y="62" fill="#999" textAnchor="middle" fontSize="11" fontWeight="600">Claude Code</text>
|
||||
</g>
|
||||
|
||||
{/* OpenAI */}
|
||||
<g transform="translate(620, 150)">
|
||||
<rect width="140" height="60" rx="10" fill="#111" stroke="#222" strokeWidth="1" />
|
||||
<g transform="translate(25, 15) scale(1.25)">
|
||||
<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" />
|
||||
</g>
|
||||
<text x="85" y="35" fill="#999" textAnchor="middle" fontSize="12" fontWeight="600">OpenAI</text>
|
||||
{/* Codex */}
|
||||
<g transform="translate(620, 140)">
|
||||
<rect width="140" height="80" rx="10" fill="#111" stroke="#222" strokeWidth="1" />
|
||||
<foreignObject x="0" y="10" width="140" height="32">
|
||||
<div className="flex justify-center">
|
||||
<svg className="h-8 w-8" 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>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="70" y="62" fill="#999" textAnchor="middle" fontSize="11" fontWeight="600">Codex</text>
|
||||
</g>
|
||||
|
||||
{/* Devin */}
|
||||
<g transform="translate(620, 240)">
|
||||
<rect width="140" height="60" rx="10" fill="#111" stroke="#222" strokeWidth="1" />
|
||||
<foreignObject x="25" y="15" width="30" height="30">
|
||||
<img
|
||||
src="https://mintcdn.com/cognitionai/k89q9Lsp7DOurdC0/logo/devin.png?fit=max&auto=format&n=k89q9Lsp7DOurdC0&q=85&s=e83fbc727ea2cae8f1b80442fa772c50"
|
||||
alt="Devin"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
{/* OpenCode */}
|
||||
<g transform="translate(620, 230)">
|
||||
<rect width="140" height="80" rx="10" fill="#111" stroke="#222" strokeWidth="1" />
|
||||
<foreignObject x="0" y="10" width="140" height="32">
|
||||
<div className="flex justify-center">
|
||||
<svg className="h-8 w-auto" viewBox="0 0 32 40" fill="none">
|
||||
<path d="M24 32H8V16H24V32Z" fill="#4B4646"/>
|
||||
<path d="M24 8H8V32H24V8ZM32 40H0V0H32V40Z" fill="#F1ECEC"/>
|
||||
</svg>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="85" y="35" fill="#999" textAnchor="middle" fontSize="12" fontWeight="600">Devin</text>
|
||||
<text x="70" y="62" fill="#999" textAnchor="middle" fontSize="11" fontWeight="600">OpenCode</text>
|
||||
</g>
|
||||
|
||||
{/* Amp / Custom */}
|
||||
<g transform="translate(620, 330)">
|
||||
<rect width="140" height="60" rx="10" fill="#111" stroke="#222" strokeWidth="1" />
|
||||
<foreignObject x="25" y="15" width="30" height="30">
|
||||
<img
|
||||
src="/logos/amp.svg"
|
||||
alt="Amp"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
{/* Amp */}
|
||||
<g transform="translate(620, 320)">
|
||||
<rect width="140" height="80" rx="10" fill="#111" stroke="#222" strokeWidth="1" />
|
||||
<foreignObject x="0" y="12" width="140" height="28">
|
||||
<div className="flex justify-center">
|
||||
<img src="/logos/amp.svg" alt="Amp" className="h-6 w-auto" style={{ filter: 'brightness(0) invert(1)' }} />
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="85" y="35" fill="#999" textAnchor="middle" fontSize="12" fontWeight="600">Amp</text>
|
||||
<text x="70" y="62" fill="#999" textAnchor="middle" fontSize="11" fontWeight="600">Amp</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
|||
155
frontend/packages/website/src/components/GetStarted.tsx
Normal file
155
frontend/packages/website/src/components/GetStarted.tsx
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
'use client';
|
||||
|
||||
import { Code, Cloud, GitBranch } from 'lucide-react';
|
||||
import { CopyButton } from './ui/CopyButton';
|
||||
|
||||
const sdkCode = `import { SandboxAgent } from "sandbox-agent";
|
||||
|
||||
const client = await SandboxAgent.start();
|
||||
|
||||
await client.createSession("my-session", {
|
||||
agent: "claude-code",
|
||||
});
|
||||
|
||||
await client.postMessage("my-session", {
|
||||
message: "Hello, world!",
|
||||
});
|
||||
|
||||
for await (const event of client.streamEvents("my-session")) {
|
||||
console.log(event.type, event.data);
|
||||
}`;
|
||||
|
||||
const sandboxCommand = `curl -sSL https://sandboxagent.dev/install | sh`;
|
||||
|
||||
const sourceCommands = `git clone https://github.com/rivet-dev/sandbox-agent
|
||||
cd sandbox-agent
|
||||
cargo run -p sandbox-agent --release`;
|
||||
|
||||
export function GetStarted() {
|
||||
return (
|
||||
<section id="get-started" className="relative overflow-hidden border-t border-white/5 py-32">
|
||||
<div className="relative z-10 mx-auto max-w-7xl px-6">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-3xl font-medium tracking-tight text-white md:text-5xl">
|
||||
Get Started
|
||||
</h2>
|
||||
<p className="text-lg text-zinc-400">
|
||||
Choose the installation method that works best for your use case.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
||||
{/* Option 1: SDK */}
|
||||
<div className="group relative flex flex-col overflow-hidden rounded-2xl border border-white/5 bg-zinc-900/30 p-6 backdrop-blur-sm transition-colors duration-500 hover:bg-zinc-900/50">
|
||||
<div className="absolute left-0 right-0 top-0 z-10 h-[1px] bg-gradient-to-r from-transparent via-white/20 to-transparent" />
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(59,130,246,0.15)_0%,transparent_50%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
||||
<div className="pointer-events-none absolute left-0 top-0 z-20 h-24 w-24 rounded-tl-2xl border-l border-t border-blue-500 opacity-0 transition-opacity duration-500 [mask-image:linear-gradient(135deg,black_0%,transparent_50%)] group-hover:opacity-100" />
|
||||
|
||||
<div className="relative z-10 mb-4 flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-500/10 text-blue-400 transition-all duration-300 group-hover:bg-blue-500/20 group-hover:shadow-[0_0_15px_rgba(59,130,246,0.5)]">
|
||||
<Code className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">TypeScript SDK</h3>
|
||||
<p className="text-xs text-zinc-500">Embed in your application</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="relative z-10 mb-4 text-sm leading-relaxed text-zinc-400">
|
||||
Import the SDK directly into your Node.js or browser application. Full type safety and streaming support.
|
||||
</p>
|
||||
|
||||
<div className="relative z-10 mt-auto">
|
||||
<div className="overflow-hidden rounded-lg border border-white/5 bg-black/50">
|
||||
<div className="flex items-center justify-between border-b border-white/5 bg-white/5 px-3 py-2">
|
||||
<span className="text-[10px] font-medium text-zinc-500">example.ts</span>
|
||||
<CopyButton text={sdkCode} />
|
||||
</div>
|
||||
<pre className="overflow-x-auto p-3 font-mono text-[11px] leading-relaxed text-zinc-300">
|
||||
<code>{sdkCode}</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Option 2: Sandbox */}
|
||||
<div className="group relative flex flex-col overflow-hidden rounded-2xl border border-white/5 bg-zinc-900/30 p-6 backdrop-blur-sm transition-colors duration-500 hover:bg-zinc-900/50">
|
||||
<div className="absolute left-0 right-0 top-0 z-10 h-[1px] bg-gradient-to-r from-transparent via-white/20 to-transparent" />
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(34,197,94,0.15)_0%,transparent_50%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
||||
<div className="pointer-events-none absolute left-0 top-0 z-20 h-24 w-24 rounded-tl-2xl border-l border-t border-green-500 opacity-0 transition-opacity duration-500 [mask-image:linear-gradient(135deg,black_0%,transparent_50%)] group-hover:opacity-100" />
|
||||
|
||||
<div className="relative z-10 mb-4 flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-green-500/10 text-green-400 transition-all duration-300 group-hover:bg-green-500/20 group-hover:shadow-[0_0_15px_rgba(34,197,94,0.5)]">
|
||||
<Cloud className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">Cloud Sandbox</h3>
|
||||
<p className="text-xs text-zinc-500">Run in isolated environment</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="relative z-10 mb-4 text-sm leading-relaxed text-zinc-400">
|
||||
Spin up a sandboxed environment with E2B, Daytona, or Vercel. Secure isolation with full network access.
|
||||
</p>
|
||||
|
||||
<div className="relative z-10 mt-auto">
|
||||
<div className="overflow-hidden rounded-lg border border-white/5 bg-black/50">
|
||||
<div className="flex items-center justify-between border-b border-white/5 bg-white/5 px-3 py-2">
|
||||
<span className="text-[10px] font-medium text-zinc-500">terminal</span>
|
||||
<CopyButton text={sandboxCommand} />
|
||||
</div>
|
||||
<div className="p-3 font-mono text-[11px] text-zinc-300">
|
||||
<span className="text-zinc-500">$ </span>
|
||||
<span className="text-green-400">{sandboxCommand}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{['E2B', 'Daytona', 'Vercel', 'Docker'].map((provider) => (
|
||||
<span
|
||||
key={provider}
|
||||
className="rounded-md border border-white/5 bg-zinc-800/50 px-2 py-1 text-[10px] font-mono text-zinc-400"
|
||||
>
|
||||
{provider}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Option 3: Build from Source */}
|
||||
<div className="group relative flex flex-col overflow-hidden rounded-2xl border border-white/5 bg-zinc-900/30 p-6 backdrop-blur-sm transition-colors duration-500 hover:bg-zinc-900/50">
|
||||
<div className="absolute left-0 right-0 top-0 z-10 h-[1px] bg-gradient-to-r from-transparent via-white/20 to-transparent" />
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(245,158,11,0.15)_0%,transparent_50%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
||||
<div className="pointer-events-none absolute left-0 top-0 z-20 h-24 w-24 rounded-tl-2xl border-l border-t border-amber-500 opacity-0 transition-opacity duration-500 [mask-image:linear-gradient(135deg,black_0%,transparent_50%)] group-hover:opacity-100" />
|
||||
|
||||
<div className="relative z-10 mb-4 flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-500/10 text-amber-400 transition-all duration-300 group-hover:bg-amber-500/20 group-hover:shadow-[0_0_15px_rgba(245,158,11,0.5)]">
|
||||
<GitBranch className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">Build from Source</h3>
|
||||
<p className="text-xs text-zinc-500">Full control</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="relative z-10 mb-4 text-sm leading-relaxed text-zinc-400">
|
||||
Clone the repo and build with Cargo. Customize, contribute, or embed directly in your Rust project.
|
||||
</p>
|
||||
|
||||
<div className="relative z-10 mt-auto">
|
||||
<div className="overflow-hidden rounded-lg border border-white/5 bg-black/50">
|
||||
<div className="flex items-center justify-between border-b border-white/5 bg-white/5 px-3 py-2">
|
||||
<span className="text-[10px] font-medium text-zinc-500">terminal</span>
|
||||
<CopyButton text={sourceCommands} />
|
||||
</div>
|
||||
<pre className="overflow-x-auto p-3 font-mono text-[11px] leading-relaxed text-zinc-300">
|
||||
<code>{sourceCommands}</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@ import { Terminal, Check, ArrowRight } from 'lucide-react';
|
|||
|
||||
const CopyInstallButton = () => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const installCommand = 'npx rivet-dev/sandbox-agent';
|
||||
const installCommand = 'npx skills add https://sandboxagent.dev/docs';
|
||||
|
||||
const handleCopy = async () => {
|
||||
try {
|
||||
|
|
@ -66,43 +66,75 @@ export function Hero() {
|
|||
</div>
|
||||
<div className="font-mono text-xs text-zinc-500">example_agent.ts</div>
|
||||
</div>
|
||||
<div className="p-6 font-mono text-sm leading-relaxed">
|
||||
<div className="overflow-x-auto p-6 font-mono text-sm leading-relaxed">
|
||||
<CodeLine num="01">
|
||||
<span className="text-purple-400">import</span>{' '}
|
||||
<span className="text-white">{'{ SandboxAgent }'}</span>{' '}
|
||||
<span className="text-purple-400">from</span>{' '}
|
||||
<span className="text-green-400">"@sandbox/sdk"</span>;
|
||||
<span className="text-purple-400">const</span>
|
||||
<span className="text-white"> agents = </span>
|
||||
<span className="text-purple-400">await</span>
|
||||
<span className="text-white"> client.</span>
|
||||
<span className="text-blue-400">listAgents</span>
|
||||
<span className="text-white">();</span>
|
||||
</CodeLine>
|
||||
<div className="h-4" />
|
||||
<CodeLine num="02">
|
||||
<span className="text-zinc-500">// Start Claude Code with E2B</span>
|
||||
<span className="text-purple-400">await</span>
|
||||
<span className="text-white"> client.</span>
|
||||
<span className="text-blue-400">createSession</span>
|
||||
<span className="text-white">(</span>
|
||||
<span className="text-green-400">"demo"</span>
|
||||
<span className="text-white">{", {"}</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="03">
|
||||
<span className="text-purple-400">const</span>{' '}
|
||||
<span className="text-white">agent = </span>
|
||||
<span className="text-purple-400">await</span>{' '}
|
||||
<span className="text-white">SandboxAgent.</span>
|
||||
<span className="text-blue-400">spawn</span>
|
||||
<span className="text-white">{'({'}</span>
|
||||
<span className="text-white">{" agent: "}</span>
|
||||
<span className="text-green-400">"codex"</span>
|
||||
<span className="text-white">,</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="04">
|
||||
<span className="text-white"> provider: </span>
|
||||
<span className="text-green-400">"e2b"</span>,
|
||||
<span className="text-white">{" agentMode: "}</span>
|
||||
<span className="text-green-400">"default"</span>
|
||||
<span className="text-white">,</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="05">
|
||||
<span className="text-white"> engine: </span>
|
||||
<span className="text-green-400">"claude-code"</span>
|
||||
<span className="text-white">{" permissionMode: "}</span>
|
||||
<span className="text-green-400">"plan"</span>
|
||||
<span className="text-white">,</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="06">
|
||||
<span className="text-white">{'}'});</span>
|
||||
<span className="text-white">{"});"}</span>
|
||||
</CodeLine>
|
||||
<div className="h-4" />
|
||||
<CodeLine num="07">
|
||||
<span className="text-purple-400">const</span>{' '}
|
||||
<span className="text-white">transcript = </span>
|
||||
<span className="text-purple-400">await</span>{' '}
|
||||
<span className="text-white">agent.</span>
|
||||
<span className="text-blue-400">getTranscript</span>
|
||||
<span className="text-white">();</span>
|
||||
<span className="text-purple-400">await</span>
|
||||
<span className="text-white"> client.</span>
|
||||
<span className="text-blue-400">postMessage</span>
|
||||
<span className="text-white">(</span>
|
||||
<span className="text-green-400">"demo"</span>
|
||||
<span className="text-white">{", { message: "}</span>
|
||||
<span className="text-green-400">"Hello from the SDK."</span>
|
||||
<span className="text-white">{" });"}</span>
|
||||
</CodeLine>
|
||||
<div className="h-4" />
|
||||
<CodeLine num="08">
|
||||
<span className="text-purple-400">for await</span>
|
||||
<span className="text-white"> (</span>
|
||||
<span className="text-purple-400">const</span>
|
||||
<span className="text-white"> event </span>
|
||||
<span className="text-purple-400">of</span>
|
||||
<span className="text-white"> client.</span>
|
||||
<span className="text-blue-400">streamEvents</span>
|
||||
<span className="text-white">(</span>
|
||||
<span className="text-green-400">"demo"</span>
|
||||
<span className="text-white">{", { offset: "}</span>
|
||||
<span className="text-amber-400">0</span>
|
||||
<span className="text-white">{" })) {"}</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="09">
|
||||
<span className="text-white">{" console."}</span>
|
||||
<span className="text-blue-400">log</span>
|
||||
<span className="text-white">(event.type, event.data);</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="10">
|
||||
<span className="text-white">{"}"}</span>
|
||||
</CodeLine>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -116,35 +148,10 @@ export function Hero() {
|
|||
|
||||
function CodeLine({ num, children }: { num: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex gap-4">
|
||||
<div className="flex gap-4 whitespace-nowrap">
|
||||
<span className="text-zinc-600 select-none">{num}</span>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DaytonaLogo() {
|
||||
return (
|
||||
<a href="https://daytona.io" target="_blank" rel="noopener noreferrer" className="opacity-60 hover:opacity-100 transition-opacity">
|
||||
<img src="/logos/daytona.svg" alt="Daytona" className="h-6 w-auto" style={{ filter: 'brightness(0) invert(1)' }} />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function E2BLogo() {
|
||||
return (
|
||||
<a href="https://e2b.dev" target="_blank" rel="noopener noreferrer" className="opacity-60 hover:opacity-100 transition-opacity">
|
||||
<img src="/logos/e2b.svg" alt="E2B" className="h-7 w-auto" style={{ filter: 'brightness(0) invert(1)' }} />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function VercelLogo() {
|
||||
return (
|
||||
<a href="https://vercel.com/docs/sandbox" target="_blank" rel="noopener noreferrer" className="opacity-60 hover:opacity-100 transition-opacity flex items-center gap-2">
|
||||
<svg viewBox="0 0 24 24" className="h-7 w-7 fill-current text-white">
|
||||
<path d="M24 22.525H0l12-21.05 12 21.05z"/>
|
||||
</svg>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import Layout from '../layouts/Layout.astro';
|
|||
import { Navigation } from '../components/Navigation';
|
||||
import { Hero } from '../components/Hero';
|
||||
import { FeatureGrid } from '../components/FeatureGrid';
|
||||
import { GetStarted } from '../components/GetStarted';
|
||||
import { FAQ } from '../components/FAQ';
|
||||
import { CTASection } from '../components/CTASection';
|
||||
import { Footer } from '../components/Footer';
|
||||
---
|
||||
|
||||
|
|
@ -14,8 +14,8 @@ import { Footer } from '../components/Footer';
|
|||
<main>
|
||||
<Hero client:load />
|
||||
<FeatureGrid client:visible />
|
||||
<GetStarted client:visible />
|
||||
<FAQ client:visible />
|
||||
<CTASection client:visible />
|
||||
</main>
|
||||
<Footer client:visible />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue