Expand Genies section with multi-provider, terminal, editor, MCP & full feature audit
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
2685727a93
commit
ba7541c259
84
app/page.jsx
84
app/page.jsx
@ -122,7 +122,7 @@ export default function Home() {
|
||||
{icon:'🌐', label:'Web Apps', desc:'Next.js, Nuxt, SvelteKit, Remix, Rails, Django, Laravel', glow:'rgba(139,92,246,0.12)'},
|
||||
{icon:'⚙️', label:'REST & GraphQL', desc:'Express, Fastify, Go Fiber, FastAPI, NestJS, tRPC', glow:'rgba(99,102,241,0.12)'},
|
||||
{icon:'🗄️', label:'Databases', desc:'Postgres, MySQL, MongoDB, Redis, SQLite, ClickHouse', glow:'rgba(59,130,246,0.1)'},
|
||||
{icon:'🤖', label:'AI Agents', desc:'Autonomous Genies — Claude-powered, in-playground coders', glow:'rgba(167,139,250,0.12)'},
|
||||
{icon:'🤖', label:'AI Agents', desc:'Multi-provider Genies — Claude, Gemini, GPT, OpenCode — terminal, editor & MCP in every Playground', glow:'rgba(167,139,250,0.12)'},
|
||||
{icon:'🔄', label:'Preview Envs', desc:'Every branch gets its own subdomain & live URL automatically',glow:'rgba(34,197,94,0.09)'},
|
||||
{icon:'⚡', label:'Jobs & CI', desc:'One-shot Tricks: tests, migrations, cron, build pipelines', glow:'rgba(234,179,8,0.09)'},
|
||||
{icon:'🧩', label:'Microservices', desc:'Multi-repo compose: frontend + backend + workers + infra', glow:'rgba(239,68,68,0.08)'},
|
||||
@ -217,32 +217,71 @@ export default function Home() {
|
||||
{/* ── GENIES SPOTLIGHT ── */}
|
||||
<section id="genies" className="py-28 px-6 relative overflow-hidden" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
|
||||
<div className="glow-orb" style={{width:900,height:900,background:'radial-gradient(circle, rgba(139,92,246,0.1) 0%, transparent 70%)',top:'50%',left:'50%',transform:'translate(-50%,-50%)'}} />
|
||||
<div className="max-w-5xl mx-auto relative z-10">
|
||||
<div className="glass-strong rounded-3xl p-10 md:p-16 text-center">
|
||||
<div className="text-5xl mb-6">🤖</div>
|
||||
<p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(139,92,246,0.7)'}}>Genies — AI Agents</p>
|
||||
<div className="max-w-6xl mx-auto relative z-10">
|
||||
|
||||
<div className="text-center mb-16">
|
||||
<p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(139,92,246,0.7)'}}>Genies — AI Development Agents</p>
|
||||
<h2 className="font-display text-4xl md:text-6xl font-normal mb-6" style={{letterSpacing:'-0.02em'}}>
|
||||
Agents that actually<br /><em className="gradient-text not-italic">ship code.</em>
|
||||
</h2>
|
||||
<p className="text-lg max-w-2xl mx-auto mb-12 leading-relaxed" style={{color:'rgba(161,161,170,0.75)'}}>
|
||||
Genies are autonomous Claude-powered agents that live inside your Playgrounds.
|
||||
Full access to your codebase, terminal, Docker and git.
|
||||
<p className="text-lg max-w-2xl mx-auto mb-10 leading-relaxed" style={{color:'rgba(161,161,170,0.75)'}}>
|
||||
Genies are autonomous AI agents that live inside your Playgrounds.
|
||||
Full access to your codebase, a real terminal, a file editor and Docker.
|
||||
Assign a task — they plan, build, test and push.
|
||||
</p>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-4 text-left">
|
||||
{/* Provider chips */}
|
||||
<div className="flex flex-wrap justify-center gap-2">
|
||||
{[
|
||||
{title:'Full environment access', desc:'Reads code, runs commands, edits files, pushes commits — inside a live Playground with real Docker services running.'},
|
||||
{title:'Mutter stream', desc:'Real-time internal monologue. Watch the agent reason, plan and debug. Transparent by design. No black boxes.'},
|
||||
{title:'Artefacts & Feedback', desc:'Genies produce artefacts (files, reports, PRs) and request feedback. A proper async collaboration loop.'},
|
||||
].map(({title, desc}) => (
|
||||
<div key={title} className="glass rounded-xl p-5" style={{borderColor:'rgba(139,92,246,0.15)'}}>
|
||||
<h4 className="font-semibold text-white text-sm mb-2">{title}</h4>
|
||||
<p className="text-xs leading-relaxed" style={{color:'rgba(161,161,170,0.6)'}}>{desc}</p>
|
||||
{label:'Claude Code', color:'#a78bfa'},
|
||||
{label:'Gemini CLI', color:'#34d399'},
|
||||
{label:'OpenAI Codex',color:'#60a5fa'},
|
||||
{label:'OpenCode', color:'#fb923c'},
|
||||
].map(({label, color}) => (
|
||||
<span key={label} className="px-3 py-1 rounded-full text-xs font-semibold"
|
||||
style={{color, border:`1px solid ${color}40`, background:`${color}18`}}>
|
||||
{label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 6-card grid */}
|
||||
<div className="grid md:grid-cols-3 gap-4 mb-6">
|
||||
{[
|
||||
{icon:'⬛', title:'In-browser Terminal', desc:'Full PTY terminal via xterm.js. Watch your agent run commands, install packages and start servers — live, in the browser.'},
|
||||
{icon:'📝', title:'CodeMirror 6 Editor', desc:'Production-grade file editor built in. Agents edit code; you see every change — syntax-highlighted, diff-aware, instant.'},
|
||||
{icon:'🧠', title:'Activity & Thinking', desc:'Live reasoning sidebar. Thinking steps, planning and debugging surface in real time. No black boxes, no guessing.'},
|
||||
{icon:'🔌', title:'MCP Server support', desc:'Connect any Model Context Protocol server — HTTP or stdio. Extend Genie capabilities with custom tools and data sources.'},
|
||||
{icon:'💬', title:'Mutter stream', desc:'Real-time internal monologue. Agents surface blockers, proofs and problems as structured mutters you can act on immediately.'},
|
||||
{icon:'📦', title:'Artefacts & Feedback', desc:'Genies produce files, reports and PRs as artefacts. Leave feedback. A proper async human-in-the-loop collaboration loop.'},
|
||||
].map(({icon, title, desc}) => (
|
||||
<div key={title} className="glass rounded-2xl p-6 transition-all hover:scale-[1.01] hover:brightness-105"
|
||||
style={{borderColor:'rgba(139,92,246,0.15)'}}>
|
||||
<div className="text-2xl mb-3">{icon}</div>
|
||||
<h4 className="font-semibold text-white text-sm mb-2">{title}</h4>
|
||||
<p className="text-xs leading-relaxed" style={{color:'rgba(161,161,170,0.6)'}}>{desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Feature strip */}
|
||||
<div className="glass rounded-2xl p-6" style={{borderColor:'rgba(139,92,246,0.1)'}}>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
|
||||
{[
|
||||
{val:'≤ 20 MB', label:'file uploads'},
|
||||
{val:'persistent', label:'multi-conversation memory'},
|
||||
{val:'GHCR', label:'multi-arch Docker images'},
|
||||
{val:'GDPR', label:'export & delete built-in'},
|
||||
].map(({val, label}) => (
|
||||
<div key={label}>
|
||||
<div className="font-semibold text-sm gradient-text mb-0.5">{val}</div>
|
||||
<div className="text-xs" style={{color:'rgba(161,161,170,0.4)'}}>{label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -259,7 +298,7 @@ export default function Home() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-10">
|
||||
<div className="grid md:grid-cols-2 gap-10 mb-10">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(255,255,255,0.2)'}}>Platform</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
@ -283,6 +322,17 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(255,255,255,0.2)'}}>Genies stack</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{['xterm.js','CodeMirror 6','WebSocket / PTY','Claude Code','Gemini CLI','OpenAI Codex','OpenCode','MCP','GHCR multi-arch'].map(t => (
|
||||
<span key={t} className="px-3 py-1.5 rounded-lg text-sm font-mono glass"
|
||||
style={{color:'rgba(167,139,250,0.75)',borderColor:'rgba(139,92,246,0.18)'}}>
|
||||
{t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user