mirror of
https://github.com/harivansh-afk/sandbox-agent.git
synced 2026-04-17 12:04:15 +00:00
chore(site): site updates and seo (#158)
This commit is contained in:
NicholasKissel
parent
a33b1323ff
commit
70287ec471
17 changed files with 756 additions and 542 deletions
|
|
@ -1,5 +1,6 @@
|
|||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { Code, Server, GitBranch } from 'lucide-react';
|
||||
import { CopyButton } from './ui/CopyButton';
|
||||
|
||||
|
|
@ -94,44 +95,55 @@ 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">
|
||||
<section id="get-started" className="border-t border-white/10 py-48">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<div className="mb-12">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl"
|
||||
>
|
||||
Get Started
|
||||
</h2>
|
||||
<p className="text-lg text-zinc-400">
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
className="max-w-xl text-base leading-relaxed text-zinc-500"
|
||||
>
|
||||
Choose the installation method that works best for your use case.
|
||||
</p>
|
||||
<p className="mt-4 text-sm text-zinc-500">
|
||||
Quick OpenCode attach: <span className="font-mono text-white">npx @sandbox-agent/gigacode</span>
|
||||
</p>
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="grid grid-cols-1 gap-4 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 className="group flex flex-col rounded-2xl border border-white/10 bg-white/[0.02] p-6 transition-colors hover:border-white/20">
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<div className="text-zinc-500">
|
||||
<Code className="h-4 w-4" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">TypeScript SDK</h3>
|
||||
<h3 className="text-base font-normal 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 min-h-[4.5rem]">
|
||||
<p className="mb-4 text-sm leading-relaxed text-zinc-500">
|
||||
Import the TypeScript SDK directly into your Node or browser application. Full type safety and streaming support.
|
||||
</p>
|
||||
|
||||
<div className="relative z-10 flex-1 flex flex-col">
|
||||
<div className="overflow-hidden rounded-lg border border-white/5 bg-black/50 flex-1 flex flex-col">
|
||||
<div className="flex items-center justify-between border-b border-white/5 bg-white/5 px-3 py-2">
|
||||
<div className="flex-1 flex flex-col">
|
||||
<div className="overflow-hidden rounded-lg border border-white/10 bg-black/50 flex-1 flex flex-col">
|
||||
<div className="flex items-center justify-between border-b border-white/10 bg-white/5 px-3 py-2">
|
||||
<span className="text-[10px] font-medium text-zinc-500">example.ts</span>
|
||||
<CopyButton text={sdkCodeRaw} />
|
||||
</div>
|
||||
|
|
@ -140,29 +152,25 @@ export function GetStarted() {
|
|||
</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)]">
|
||||
<Server className="h-5 w-5" />
|
||||
{/* Option 2: HTTP API */}
|
||||
<div className="group flex flex-col rounded-2xl border border-white/10 bg-white/[0.02] p-6 transition-colors hover:border-white/20">
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<div className="text-zinc-500">
|
||||
<Server className="h-4 w-4" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">HTTP API</h3>
|
||||
<h3 className="text-base font-normal text-white">HTTP API</h3>
|
||||
<p className="text-xs text-zinc-500">Run as a server</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="relative z-10 mb-4 text-sm leading-relaxed text-zinc-400 min-h-[4.5rem]">
|
||||
<p className="mb-4 text-sm leading-relaxed text-zinc-500">
|
||||
Run as an HTTP server and connect from any language. Deploy to E2B, Daytona, Vercel, or your own infrastructure.
|
||||
</p>
|
||||
|
||||
<div className="relative z-10 flex-1 flex flex-col">
|
||||
<div className="overflow-hidden rounded-lg border border-white/5 bg-black/50 flex-1 flex flex-col">
|
||||
<div className="flex items-center justify-between border-b border-white/5 bg-white/5 px-3 py-2">
|
||||
<div className="flex-1 flex flex-col">
|
||||
<div className="overflow-hidden rounded-lg border border-white/10 bg-black/50 flex-1 flex flex-col">
|
||||
<div className="flex items-center justify-between border-b border-white/10 bg-white/5 px-3 py-2">
|
||||
<span className="text-[10px] font-medium text-zinc-500">terminal</span>
|
||||
<CopyButton text={sandboxCommand} />
|
||||
</div>
|
||||
|
|
@ -181,29 +189,25 @@ export function GetStarted() {
|
|||
</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" />
|
||||
{/* Option 3: Open Source */}
|
||||
<div className="group flex flex-col rounded-2xl border border-white/10 bg-white/[0.02] p-6 transition-colors hover:border-white/20">
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<div className="text-zinc-500">
|
||||
<GitBranch className="h-4 w-4" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">Open Source</h3>
|
||||
<h3 className="text-base font-normal text-white">Open 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 min-h-[4.5rem]">
|
||||
<p className="mb-4 text-sm leading-relaxed text-zinc-500">
|
||||
Clone the repo and build with Cargo. Customize, contribute, or embed directly in your Rust project.
|
||||
</p>
|
||||
|
||||
<div className="relative z-10 flex-1 flex flex-col">
|
||||
<div className="overflow-hidden rounded-lg border border-white/5 bg-black/50 flex-1 flex flex-col">
|
||||
<div className="flex items-center justify-between border-b border-white/5 bg-white/5 px-3 py-2">
|
||||
<div className="flex-1 flex flex-col">
|
||||
<div className="overflow-hidden rounded-lg border border-white/10 bg-black/50 flex-1 flex flex-col">
|
||||
<div className="flex items-center justify-between border-b border-white/10 bg-white/5 px-3 py-2">
|
||||
<span className="text-[10px] font-medium text-zinc-500">terminal</span>
|
||||
<CopyButton text={sourceCommands} />
|
||||
</div>
|
||||
|
|
@ -226,7 +230,7 @@ export function GetStarted() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue