mirror of
https://github.com/harivansh-afk/sandbox-agent.git
synced 2026-04-17 04:02:25 +00:00
feat(inspector): update visual styling to match landing page (#166)
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
This commit is contained in:
NicholasKissel
parent
89933c5f80
commit
cdbe920070
19 changed files with 1158 additions and 867 deletions
|
|
@ -1,133 +1,91 @@
|
|||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { X, Check } from 'lucide-react';
|
||||
import { Shield, Layers, Database, X, Check } from 'lucide-react';
|
||||
|
||||
const frictions = [
|
||||
{
|
||||
number: '01',
|
||||
icon: Shield,
|
||||
title: 'Coding Agents Need Sandboxes',
|
||||
problem:
|
||||
"You can't let AI execute arbitrary code on your production servers. Coding agents need isolated environments, but existing SDKs assume local execution.",
|
||||
solution: 'A server that runs inside the sandbox and exposes HTTP/SSE.',
|
||||
accentColor: 'orange',
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
icon: Layers,
|
||||
title: 'Every Coding Agent is Different',
|
||||
problem:
|
||||
'Claude Code, Codex, OpenCode, Amp, and Pi each have proprietary APIs, event formats, and behaviors. Swapping coding agents means rewriting your entire integration.',
|
||||
solution: 'One HTTP API. Write your code once, swap coding agents with a config change.',
|
||||
accentColor: 'purple',
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
icon: Database,
|
||||
title: 'Sessions Are Ephemeral',
|
||||
problem:
|
||||
'Coding agent transcripts live in the sandbox. When the process ends, you lose everything. Debugging and replay become impossible.',
|
||||
solution: 'Universal event schema streams to your storage. Persist to Postgres or Rivet, replay later, audit everything.',
|
||||
accentColor: 'blue',
|
||||
},
|
||||
];
|
||||
|
||||
const accentStyles = {
|
||||
orange: {
|
||||
gradient: 'from-orange-500/20',
|
||||
border: 'border-orange-500/30',
|
||||
glow: 'rgba(255,79,0,0.15)',
|
||||
number: 'text-orange-500',
|
||||
},
|
||||
purple: {
|
||||
gradient: 'from-purple-500/20',
|
||||
border: 'border-purple-500/30',
|
||||
glow: 'rgba(168,85,247,0.15)',
|
||||
number: 'text-purple-500',
|
||||
},
|
||||
blue: {
|
||||
gradient: 'from-blue-500/20',
|
||||
border: 'border-blue-500/30',
|
||||
glow: 'rgba(59,130,246,0.15)',
|
||||
number: 'text-blue-500',
|
||||
},
|
||||
};
|
||||
|
||||
export function PainPoints() {
|
||||
return (
|
||||
<section className="relative overflow-hidden border-t border-white/5 py-32">
|
||||
<section 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"
|
||||
>
|
||||
Running coding agents remotely is hard.
|
||||
</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-2xl text-base leading-relaxed text-zinc-500"
|
||||
>
|
||||
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>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="mb-16"
|
||||
className="grid grid-cols-1 gap-8 md:grid-cols-3"
|
||||
>
|
||||
<h2 className="mb-6 text-3xl font-medium tracking-tight text-white md:text-5xl">
|
||||
Running coding agents remotely is hard.
|
||||
</h2>
|
||||
<p className="max-w-2xl text-lg leading-relaxed text-zinc-400">
|
||||
Coding agents need sandboxes, but existing SDKs assume local execution. SSH breaks, CLI wrappers are fragile, and building from scratch means reimplementing everything for each coding agent.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
{frictions.map((friction, index) => {
|
||||
const styles = accentStyles[friction.accentColor as keyof typeof accentStyles];
|
||||
return (
|
||||
<motion.div
|
||||
key={friction.number}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
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"
|
||||
>
|
||||
{/* Top shine */}
|
||||
<div className="absolute left-0 right-0 top-0 z-10 h-[1px] bg-gradient-to-r from-transparent via-white/20 to-transparent" />
|
||||
|
||||
{/* Hover glow */}
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
|
||||
style={{
|
||||
background: `radial-gradient(circle at top left, ${styles.glow} 0%, transparent 50%)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Corner highlight */}
|
||||
<div
|
||||
className={`pointer-events-none absolute left-0 top-0 z-20 h-24 w-24 rounded-tl-2xl border-l border-t ${styles.border} opacity-0 transition-opacity duration-500 [mask-image:linear-gradient(135deg,black_0%,transparent_50%)] group-hover:opacity-100`}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 flex flex-col h-full">
|
||||
{/* Title */}
|
||||
<h3 className="mb-4 text-xl font-medium text-white">{friction.title}</h3>
|
||||
|
||||
{/* Problem */}
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="flex items-center justify-center w-5 h-5 rounded-full bg-red-500/20">
|
||||
<X className="w-3 h-3 text-red-400" />
|
||||
</div>
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-red-400">Problem</span>
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed text-zinc-500">{friction.problem}</p>
|
||||
</div>
|
||||
|
||||
{/* Solution */}
|
||||
<div className="mt-auto pt-4 border-t border-white/5">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="flex items-center justify-center w-5 h-5 rounded-full bg-green-500/20">
|
||||
<Check className="w-3 h-3 text-green-400" />
|
||||
</div>
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-green-400">Solution</span>
|
||||
</div>
|
||||
<p className="text-sm font-medium leading-relaxed text-zinc-300">{friction.solution}</p>
|
||||
</div>
|
||||
{frictions.map((friction) => (
|
||||
<div key={friction.title} className="flex flex-col border-t border-white/10 pt-6">
|
||||
<div className="mb-3 text-zinc-500">
|
||||
<friction.icon className="h-4 w-4" />
|
||||
</div>
|
||||
<h3 className="mb-4 text-base font-normal text-white">{friction.title}</h3>
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<X className="h-3 w-3 text-zinc-600" />
|
||||
<span className="text-[10px] font-medium uppercase tracking-wider text-zinc-600">Problem</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed text-zinc-500">
|
||||
{friction.problem}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-auto border-t border-white/5 pt-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Check className="h-3 w-3 text-green-400" />
|
||||
<span className="text-[10px] font-medium uppercase tracking-wider text-zinc-400">Solution</span>
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed text-zinc-300">
|
||||
{friction.solution}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue