Wrap DocsApiReference with Gitbook-style DocsLayout

cgen-89b89014dd3c4b94b370b7be3518937e

client/pages/docs/DocsApiReference.tsx

@@ -1,3 +1,4 @@
+import DocsLayout from "@/components/docs/DocsLayout";
 import { Link } from "react-router-dom";
 import {
   Card,
@@ -104,6 +105,11 @@ const errorExamples = [
 
 export default function DocsApiReference() {
   return (
+    <DocsLayout
+      title="API Reference"
+      description="Complete API documentation with examples"
+      breadcrumbs={[{ label: "API Reference" }]}
+    >
     <div className="space-y-12">
       <section id="overview" className="space-y-4">
         <Badge className="bg-blue-600/20 text-blue-200 uppercase tracking-wide">
@@ -337,5 +343,6 @@ export default function DocsApiReference() {
         </div>
       </section>
     </div>
+    </DocsLayout>
   );
 }

client/pages/docs/DocsCli.tsx

@@ -1,3 +1,4 @@
+import DocsLayout from "@/components/docs/DocsLayout";
 import {
   Card,
   CardContent,
@@ -82,6 +83,11 @@ const automationTips = [
 
 export default function DocsCli() {
   return (
+    <DocsLayout
+      title="CLI Reference"
+      description="Command-line interface documentation and commands"
+      breadcrumbs={[{ label: "CLI" }]}
+    >
     <div className="space-y-12">
       <section id="overview" className="space-y-4">
         <Badge className="bg-amber-500/20 text-amber-100 uppercase tracking-wide">
@@ -281,5 +287,6 @@ export default function DocsCli() {
         </div>
       </section>
     </div>
+    </DocsLayout>
   );
 }

client/pages/docs/DocsExamples.tsx

@@ -1,3 +1,4 @@
+import DocsLayout from "@/components/docs/DocsLayout";
 import { Link } from "react-router-dom";
 import {
   Card,
@@ -136,6 +137,11 @@ const integrationIdeas = [
 
 export default function DocsExamples() {
   return (
+    <DocsLayout
+      title="Code Examples"
+      description="Production-ready code examples and snippets"
+      breadcrumbs={[{ label: "Examples" }]}
+    >
     <div className="space-y-12">
       <section id="overview" className="space-y-4">
         <Badge className="bg-emerald-500/20 text-emerald-100 uppercase tracking-wide">
@@ -293,5 +299,6 @@ export default function DocsExamples() {
         </div>
       </section>
     </div>
+    </DocsLayout>
   );
 }