card and sidebar

.

Author: ataibarkai

docs/docs.json

@@ -21,15 +21,15 @@
                 "group": "Quickstart",
                 "pages": [
                   "quickstart/applications",
-                  "quickstart/clients",
                   {
                     "group": "Build integrations",
                     "pages": [
                       "quickstart/introduction",
                       "quickstart/server",
                       "quickstart/middleware"
                     ]
-                  }
+                  },
+                  "quickstart/clients"
                 ]
               }
             ]

docs/introduction.mdx

@@ -156,14 +156,12 @@ Built for simplicity and flexibility, it standardizes how agent state, UI intent
     </div>
   </div>
 
-  <div style={{border: '1px solid #e5e7eb', borderRadius: '8px', overflow: 'hidden', transition: 'all 0.3s ease', cursor: 'pointer'}} onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#3b82f6'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.15)'; e.currentTarget.querySelector('.content').style.maxHeight = '200px'; e.currentTarget.querySelector('.content').style.opacity = '1'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.querySelector('.content').style.maxHeight = '0px'; e.currentTarget.querySelector('.content').style.opacity = '0'; }}>
+  <div style={{border: '1px solid #e5e7eb', borderRadius: '8px', overflow: 'hidden', transition: 'all 0.3s ease', cursor: 'pointer'}} onClick={() => window.location.href = '/concepts/events'} onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#3b82f6'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.15)'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.boxShadow = 'none'; }}>
     <div style={{padding: '1rem 1.5rem', backgroundColor: '#f9fafb', fontWeight: '600', color: '#374151'}}>
-      Custom events
+      Events
     </div>
-    <div className="content" style={{maxHeight: '0px', opacity: '0', overflow: 'hidden', transition: 'all 0.3s ease', padding: '0 1.5rem', backgroundColor: '#ffffff'}}>
-      <div style={{padding: '1rem 0', color: '#6b7280', lineHeight: '1.6'}}>
-        Open-ended data exchange for needs not covered by the protocol.
-      </div>
+    <div style={{padding: '1rem 1.5rem', color: '#6b7280', lineHeight: '1.6'}}>
+      Learn about AG-UI's event-driven protocol and all available event types.
     </div>
   </div>
 </div>
@@ -269,7 +267,6 @@ Choose the path that fits your needs:
     Build agentic applications powered by AG-UI compatible agents.
   </Card>
 
-
   <Card
     title="Build new AG-UI integrations"
     icon="plug"
@@ -302,19 +299,19 @@ Dive deeper into AG-UI's core concepts and capabilities:
     icon="sitemap"
     iconType="light"
     color="#3B82F6"
-    href="/docs/concepts/architecture"
+    href="/concepts/architecture"
   >
     Understand how AG-UI connects agents, protocols, and front-ends
   </Card>
 
   <Card
-    title="Transports"
-    icon="network-wired"
+    title="Events"
+    icon="bolt"
     iconType="light"
     color="#3B82F6"
-    href="/docs/concepts/transports"
+    href="/concepts/events"
   >
-    Learn about AG-UI's communication mechanism
+    Learn about AG-UI's event-driven protocol
   </Card>
 </CardGroup>
 

docs/quickstart/clients.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Build clients"
 description:
-  "Build a conversational CLI agent from scratch using AG-UI and Mastra"
+  "Showcase: build a conversational CLI agent from scratch using AG-UI and Mastra"
 ---
 
 # Introduction