docs: update intro page with hero image and Geist font

- Replace bg-light/bg-dark images with new hero.png
- Add "Welcome to Cua" header with sky accent color
- Switch from Inter to Geist/Geist Mono fonts
- Hide redundant "Introduction" title on home page

docs/content/docs/index.mdx

@@ -4,23 +4,30 @@ title: Introduction
 
 import { Monitor, Code, BookOpen, Zap, Bot, Boxes, Rocket } from 'lucide-react';
 
-<div className="not-prose relative rounded-xl overflow-hidden mb-8 w-full h-40 -mt-4">
-  <img src="/docs/img/bg-light.jpg" alt="Cua" className="w-full h-full object-cover block dark:hidden rounded-xl" />
-  <img src="/docs/img/bg-dark.jpg" alt="Cua" className="w-full h-full object-cover hidden dark:block rounded-xl" />
-  <div className="absolute inset-0 flex items-center justify-center"><div className="bg-black/50 backdrop-blur-sm rounded-lg py-3 px-5 [&_p]:m-0 [&_p]:p-0"><span className="text-white text-lg font-medium" style={{display: 'block', margin: 0, padding: 0, lineHeight: '1.2'}}>Build AI agents that see, understand, and control any computer</span></div></div>
+<div className="not-prose -mt-2 mb-6">
+  <p className="text-fd-primary font-semibold text-sm mb-1">Welcome</p>
+  <h1 className="text-3xl font-bold tracking-tight md:text-4xl">Welcome to Cua</h1>
 </div>
 
-**Cua** ("koo-ah") is an open-source framework for Computer-Use Agents - enabling AI systems to autonomously operate computers through visual understanding and action execution. Used for research, evaluation, and production deployment of desktop, browser, and mobile automation agents.
+**Cua** is an open-source framework for building, deploying and evaluating Computer-Use Agents - AI systems that autonomously interact with computer interfaces by understanding visual elements and executing actions. Cua provides SDKs for easy integration with 100+ vision-language models (VLMs), supporting everything from simple task automation to complex multi-step workflows across Windows, Linux, and macOS environments.
 
-## What are Computer-Use Agents?
+<div className="not-prose relative rounded-xl overflow-hidden my-8 w-full">
+  <img src="/docs/img/hero.png" alt="Cua" className="w-full h-auto rounded-xl" />
+</div>
 
-Computer-Use Agents (CUAs) are AI systems that can autonomously interact with computer interfaces through visual understanding and action execution. Unlike traditional automation tools that rely on brittle selectors or APIs, CUAs use vision-language models to perceive screen content and reason about interface interactions - enabling them to adapt to UI changes and handle complex, multi-step workflows across applications.
+## What is a Computer-Use Agent?
+
+Computer-Use Agents (CUAs) are AI systems that can autonomously interact with computer interfaces through visual understanding and action execution.
+
+## What is a Computer-Use Sandbox?
+
+Computer-Use Sandboxes are isolated, controlled environments where AI agents can safely interact with computer interfaces. They provide a secure execution space for agents to perform actions such as clicking, typing, and running code, test automation workflows, and learn from interactions without affecting production systems.
 
 ## Key Features
 
 With the **Computer SDK**, you can:
-- Automate **Windows, Linux, and macOS** VMs with a consistent, pyautogui-like API
-- Create & manage VMs locally or using **Cua Cloud**
+- Automate **Windows, Linux, and macOS** sandboxes with a consistent, pyautogui-like API
+- Create & manage sandboxes locally or using **Cua Cloud**
 
 With the **Agent SDK**, you can:
 - Run computer-use models with a consistent schema

docs/src/app/(home)/[[...slug]]/page.tsx

@@ -200,7 +200,7 @@ export default async function Page(props: { params: Promise<{ slug?: string[] }>
       <div className="flex flex-row w-full items-start">
         <div className="flex-1">
           <div className="flex flex-row w-full">
-            <DocsTitle>{page.data.title}</DocsTitle>
+            {slug.length > 0 && <DocsTitle>{page.data.title}</DocsTitle>}
 
             <div className="ml-auto flex items-center gap-2">
               {apiSection && versionItems.length > 1 && (

docs/src/app/global.css

@@ -9,6 +9,8 @@
   --color-fd-ring: hsl(199, 89%, 48%); /* sky-500 */
   --color-fd-muted: hsl(160, 84%, 95%); /* emerald-50 */
   --color-fd-accent: hsl(152, 76%, 92%); /* emerald-100 */
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
 }
 
 .dark {

docs/src/app/layout.tsx

@@ -1,6 +1,6 @@
 import './global.css';
 import { RootProvider } from 'fumadocs-ui/provider';
-import { Inter } from 'next/font/google';
+import { Geist, Geist_Mono } from 'next/font/google';
 import type { ReactNode } from 'react';
 import { PHProvider, PostHogPageView } from '@/providers/posthog-provider';
 import { AnalyticsTracker } from '@/components/analytics-tracker';
@@ -8,13 +8,19 @@ import { CookieConsent } from '@/components/cookie-consent';
 import { Footer } from '@/components/footer';
 import { Suspense } from 'react';
 
-const inter = Inter({
+const geist = Geist({
   subsets: ['latin'],
+  variable: '--font-geist-sans',
+});
+
+const geistMono = Geist_Mono({
+  subsets: ['latin'],
+  variable: '--font-geist-mono',
 });
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className={inter.className} suppressHydrationWarning>
+    <html lang="en" className={`${geist.variable} ${geistMono.variable} font-sans`} suppressHydrationWarning>
       <head>
         <link rel="icon" href="/docs/favicon.ico" sizes="any" />
       </head>