Use separate img tags with dark: variant for theme switching

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

docs/content/docs/index.mdx

@@ -4,12 +4,17 @@ title: Introduction
 
 import { Monitor, Code, BookOpen, Zap, Bot, Boxes, Rocket } from 'lucide-react';
 
-<div className="relative rounded-xl overflow-hidden mb-8">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcSet="/docs/img/bg-dark.jpg" />
-    <source media="(prefers-color-scheme: light)" srcSet="/docs/img/bg-light.jpg" />
-    <img src="/docs/img/bg-light.jpg" alt="Cua" style={{width: '100%', height: 'auto', display: 'block'}} />
-  </picture>
+<div className="relative rounded-xl overflow-hidden mb-8 w-full">
+  <img
+    src="/docs/img/bg-light.jpg"
+    alt="Cua"
+    className="w-full h-auto block dark:hidden"
+  />
+  <img
+    src="/docs/img/bg-dark.jpg"
+    alt="Cua"
+    className="w-full h-auto hidden dark:block"
+  />
   <div className="absolute inset-0 flex items-center justify-center bg-black/10">
     <span className="text-white text-xl font-medium text-center px-4 drop-shadow-lg">Build AI agents that see, understand, and control any computer</span>
   </div>