Fix architecture diagram light mode and responsiveness (#836)

* Fix architecture diagram for light mode and responsiveness

Replace <picture> element with next/image components using dark:hidden/hidden dark:block
pattern to properly respond to the site's theme toggle instead of OS-level
prefers-color-scheme. Add max-w-full for responsive sizing.

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

* Regenerate clean markdown files

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 3 people

app/en/get-started/about-arcade/page.mdx

@@ -4,6 +4,7 @@ description: "Learn how Arcade helps with auth and tool calling"
 ---
 
 import { Tabs } from "nextra/components";
+import Image from "next/image";
 
 # About Arcade
 
@@ -19,13 +20,20 @@ Without auth, AI agents are severely limited in what they can do.
 
 Arcade provides an authorization system that handles OAuth 2.0, API keys, and user tokens needed by AI agents to access external services through tools. This means AI agents can now act on behalf of users securely and privately.
 
-<picture>
-  <source
-    srcSet="/images/overview-dark.png"
-    media="(prefers-color-scheme: dark)"
-  ></source>
-  <img src="/images/overview-light.png" alt="Arcade architecture overview" />
-</picture>
+<Image
+  alt="Arcade architecture overview"
+  className="max-w-full dark:hidden mt-4"
+  src="/images/overview-light.png"
+  width={3112}
+  height={1741}
+/>
+<Image
+  alt="Arcade architecture overview"
+  className="hidden max-w-full dark:block mt-4"
+  src="/images/overview-dark.png"
+  width={3112}
+  height={1741}
+/>
 
 With Arcade, developers can now create agents that can _act as the end users of their application_ to perform tasks like:
 

public/_markdown/en/get-started/about-arcade.md

@@ -18,7 +18,7 @@ Without auth, AI  are severely limited in what they can do.
 
 Arcade provides an authorization system that handles OAuth 2.0, , and user tokens needed by AI  to access external services through . This means AI agents can now act on behalf of  securely and privately.
 
-![Arcade architecture overview](/images/overview-light.png)
+![Arcade architecture overview](/_next/image?url=%2Fimages%2Foverview-light.png&w=3840&q=75) ![Arcade architecture overview](/_next/image?url=%2Fimages%2Foverview-dark.png&w=3840&q=75)
 
 With Arcade, developers can now create  that can _act as the end  of their application_ to perform tasks like:
 
@@ -74,7 +74,7 @@ const response = await client.tools.execute({
 console.log(response.output.value);
 ```
 
-Last updated on January 30, 2026
+Last updated on February 27, 2026
 
 [Docs Home](/en/home.md)
 [Get an API key](/en/get-started/setup/api-keys.md)