New docs structure

docs.mdx

@@ -4,37 +4,46 @@ sidebarTitle: Home
 icon: house
 ---
 
-import { Concepts } from '/snippets/Concepts.jsx';
-import { CodeInterpreting } from '/snippets/CodeInterpreting.jsx';
 import { Quickstart } from '/snippets/Quickstart.jsx';
+import { CodeInterpreting } from '/snippets/CodeInterpreting.jsx';
+import { Examples } from '/snippets/Examples.jsx';
+import { Reference } from '/snippets/Reference.jsx';
 
-Here you'll find all the guides, concepts, and SDK references for developing with E2B.
+## What is E2B?
 
-<CodeGroup>
-```bash JavaScript & TypeScript
-npm i @e2b/code-interpreter
-```
-```bash Python
-pip install e2b-code-interpreter
-```
-</CodeGroup>
+E2B provides isolated sandboxes that let agents safely execute code, process data, and run tools. Our [SDKs]() make it easy to start and manage these environments.
 
-## What is E2B?
-E2B is an [open-source](https://github.com/e2b-dev) infrastructure that allows you to run AI-generated code in secure isolated sandboxes in the cloud.
-To start and control sandboxes, use our [Python SDK](https://pypi.org/project/e2b/) or [JavaScript SDK](https://www.npmjs.com/package/e2b).
+## E2B Building Blocks
+
+A quick overview of the core building blocks you'll interact with when using E2B.
+
+- [**Sandbox**]() — A fast, secure Linux VM created on demand for your agent
+
+- [**Template**]() — Defines what environment a sandbox starts with
+
+## How to use the docs
+
+The documentation is split into three main sections:
+
+- [**Quickstart**](#quickstart) — Step-by-step tutorials that walk you through spinning up your first E2B sandboxes.
+
+- [**Examples**](#examples) — In-depth tutorials focused on specific use cases. Pick the topics that match what you're building.
+
+- [**API/SDK Reference**](#reference) — A complete technical reference for every feature, component, and configuration option.
+
+<div id="quickstart"></div>
+
+## 🚀 Quickstart.
 
-Some of the typical use cases for E2B are AI data analysis or visualization, running AI-generated code of various languages, playground for coding agents, environment for codegen evals, or running full AI-generated apps like in [Fragments](https://github.com/e2b-dev/fragments).
+<Quickstart />
 
-### Under the hood
-The E2B Sandbox is a small isolated VM the can be started very quickly (~150ms). You can think of it as a small computer for the AI model. You can run many sandboxes at once. Typically, you run separate sandbox for each LLM, user, or AI agent session in your app.
-For example, if you were building an AI data analysis chatbot, you would start the sandbox for every user session.
+<div id="examples"></div>
 
-## Quickstart
-<Quickstart/>
+## 🧠 Examples
 
-## Code interpreting with AI
-<CodeInterpreting/>
+<Examples />
 
-## Learn the core concepts
-<Concepts/>
+<div id="reference"></div>
 
+## 📚 Code Reference
+<Reference />

snippets/Examples.jsx

@@ -0,0 +1,48 @@
+export const Examples = () => {
+  const items = [
+    {
+      href: "/docs/",
+      title: "AI Data Analysis & Visualization",
+      description:
+        "Run data analysis and generate visualizations with AI in secure sandboxes.",
+      icon: "chart-line",
+    },
+    {
+      href: "/docs/",
+      title: "Coding Agents",
+      description:
+        "Build autonomous coding agents that write, test, and deploy code safely.",
+      icon: "robot",
+    },
+    {
+      href: "/docs/",
+      title: "Vibe Coding",
+      description:
+        "Create interactive coding experiences with real-time execution environments.",
+      icon: "wand-magic-sparkles",
+    },
+    {
+      href: "/docs/",
+      title: "Reinforcement Learning",
+      description:
+        "Train and test RL models in isolated, reproducible sandbox environments.",
+      icon: "brain",
+    },
+    {
+      href: "/docs/",
+      title: "Computer Use",
+      description:
+        "Enable AI models to interact with computers and execute tasks autonomously.",
+      icon: "computer",
+    },
+  ];
+  return (
+    <Columns cols={2}>
+      {items.map((i) => (
+        <Card title={i.title} href={i.href} icon={i.icon}>
+          {i.description}
+        </Card>
+      ))}
+    </Columns>
+  );
+};

snippets/Quickstart.jsx

@@ -8,11 +8,10 @@ export const Quickstart = () => {
       icon: "circle-play",
     },
     {
-      href: "/docs/quickstart/connect-llms",
-      title: "Connecting LLMs to E2B",
-      description:
-        "Connect your favorite LLM to E2B to run AI-generated code inside the Sandbox.",
-      icon: "brain-circuit",
+      href: "/docs/quickstart/template",
+      title: "Build your first template",
+      description: "Create a custom Sandbox template with pre-installed packages and dependencies.",
+      icon: "cube",
     },
     {
       href: "/docs/quickstart/upload-download-files",
@@ -22,11 +21,12 @@ export const Quickstart = () => {
       icon: "cloud-arrow-up",
     },
     {
-      href: "/docs/quickstart/install-custom-packages",
-      title: "Install custom packages",
-      description: "Customize your Sandbox with third-party packages.",
-      icon: "box-open-full",
-    },
+      href: "/docs/quickstart/connect-llms",
+      title: "Connecting LLMs to E2B",
+      description:
+        "Connect your favorite LLM to E2B to run AI-generated code inside the Sandbox.",
+      icon: "brain-circuit",
+    }
   ];
   return (
     <Columns cols={2}>

snippets/Reference.jsx

@@ -0,0 +1,27 @@
+export const Reference = () => {
+  const items = [
+    {
+      href: "https://e2b.dev/docs/sdk-reference",
+      title: "SDK Reference",
+      description:
+        "Complete reference for the E2B SDK with all classes and methods.",
+      icon: "code",
+    },
+    {
+      href: "https://e2b.dev/docs/api-reference",
+      title: "API Reference",
+      description:
+        "Full REST API documentation for managing sandboxes programmatically.",
+      icon: "brackets-curly",
+    }
+  ];
+  return (
+    <Columns cols={2}>
+      {items.map((i) => (
+        <Card title={i.title} href={i.href} icon={i.icon}>
+          {i.description}
+        </Card>
+      ))}
+    </Columns>
+  );
+};