chore(docs): update example docs (#880)

Author: rohitg00

packages/docs/content/docs/examples/ai-content-moderation.mdx

@@ -16,10 +16,18 @@ Let's build a content moderation system that scales intelligently.
 
 ---
 
-## The Power of Intelligent Content Moderation
+## Explore the Workbench
 
 <div className="my-8">![AI Content Moderation Workflow](./../img/ai-content-moderation-workflow.png)</div>
 
+**Try it yourself:**
+- [View Source Code](https://github.com/MotiaDev/motia-examples/tree/main/examples/ai-content-moderation)
+- [Browse All Examples](https://github.com/MotiaDev/motia-examples)
+
+---
+
+## The Power of Intelligent Content Moderation
+
 At its core, our content moderation system solves a fundamental challenge: how do you efficiently moderate user-generated content at scale while maintaining human oversight for complex decisions? Traditional approaches often involve either fully manual processes that don't scale or fully automated systems that lack nuance.
 
 Our Motia-powered solution combines the best of both worlds through intelligent routing:

packages/docs/content/docs/examples/ai-deep-research-agent.mdx

@@ -5,6 +5,18 @@ description: A powerful research assistant that leverages the Motia Framework to
 
 import { CodeFetcher } from '../../../components/CodeFetcher'
 
+---
+
+## Explore the Workbench
+
+<div className="my-8">![AI Deep Research Agent](./../img/ai-deep-research-agent.png)</div>
+
+**Try it yourself:**
+- [View Source Code](https://github.com/MotiaDev/motia-examples/tree/main/examples/ai-deep-research-agent)
+- [Browse All Examples](https://github.com/MotiaDev/motia-examples)
+
+---
+
 ## Let's build a AI Deep Research Agent that:
 
 - **Deep Web Research**: Automatically searches the web, extracts content, and synthesizes findings

packages/docs/content/docs/examples/finance-agent.mdx

@@ -5,6 +5,18 @@ description: A powerful event-driven financial analysis workflow that combines w
 
 import { CodeFetcher } from '../../../components/CodeFetcher'
 
+---
+
+## Explore the Workbench
+
+<div className="my-8">![Finance Agent](./../img/finance-agent.gif)</div>
+
+**Try it yourself:**
+- [View Source Code](https://github.com/MotiaDev/motia-examples/tree/main/examples/finance-agent)
+- [Browse All Examples](https://github.com/MotiaDev/motia-examples)
+
+---
+
 ## Let's build a finance agent that:
 
 - Real-time Financial Analysis: Combines multiple data sources for comprehensive insights

packages/docs/content/docs/examples/github-integration-workflow.mdx

@@ -3,6 +3,18 @@ title: 'GitHub Integration'
 description: Build an automated GitHub issue and PR management system with AI-powered classification and routing
 ---
 
+---
+
+## Explore the Workbench
+
+<div className="my-8">![GitHub Issue Workflow](./../img/github-issue-workflow.png)</div>
+
+**Try it yourself:**
+- [View Source Code](https://github.com/MotiaDev/motia-examples/tree/main/examples/github-integration-workflow)
+- [Browse All Examples](https://github.com/MotiaDev/motia-examples)
+
+---
+
 ## Let's build a GitHub automation system that:
 
 1. Automatically triages and classifies new issues

packages/docs/content/docs/examples/github-stars-counter.mdx

@@ -16,6 +16,13 @@ Let's build a stars counter that updates in real-time across all connected clien
 
 ---
 
+<div className="my-8">![GitHub Stars Counter Demo](./../img/gitstars-workbench.png)</div>
+
+**Try it yourself:**
+- [View Source Code](https://github.com/MotiaDev/github-stars-counter)
+
+---
+
 ## 🏭 Production-Grade Example
 
 **This is not a tutorial project** - this is battle-tested, production-ready code that handles real traffic at scale. Every aspect has been designed for enterprise use:
@@ -45,8 +52,6 @@ That live-updating number next to the GitHub icon? That's this exact implementat
 
 ## The Power of Real-Time Simplicity
 
-<div className="my-8">![GitHub Stars Counter Demo](/docs-images/motia-star.gif)</div>
-
 At its core, our GitHub stars counter solves a fundamental challenge: how do you display live, real-time metrics without complex WebSocket infrastructure or manual state management? Traditional approaches often involve intricate server-side event handling, client connection management, and complex state synchronization.
 
 Our Motia-powered solution breaks this down into just two simple components:

packages/docs/content/docs/examples/gmail-automation.mdx

@@ -5,6 +5,18 @@ description: Build an automated email system with smart labeling, auto-responses
 
 import { GmailTab } from '../../../components/GmailCodeFetcher'
 
+---
+
+## Explore the Workbench
+
+<div className="my-8">![Gmail Automation](./../img/gmail-automation.png)</div>
+
+**Try it yourself:**
+- [View Source Code](https://github.com/MotiaDev/motia-examples/tree/main/examples/gmail-flow)
+- [Browse All Examples](https://github.com/MotiaDev/motia-examples)
+
+---
+
 ## Let's build a Gmail automation system that:
 
 - 📊 Smart email classification by category (work, personal, social, promotion, spam, update)

packages/docs/content/docs/examples/multi-language-data-processing.mdx

@@ -16,10 +16,18 @@ Let's build a production-ready data processing system where steps unify TypeScri
 
 ---
 
-## The Power of Steps: A Unified Multi-Language Primitive
+## Explore the Workbench
 
 <div className="my-8">![Multi-Language Data Processing in Motia Workbench](/docs-images/motia-build-your-app-2.gif)</div>
 
+**Try it yourself:**
+- [View Source Code](https://github.com/MotiaDev/motia-examples/tree/main/examples/multi-language-data-processing)
+- [Browse All Examples](https://github.com/MotiaDev/motia-examples)
+
+---
+
+## The Power of Steps: A Unified Multi-Language Primitive
+
 At its core, our data processing pipeline demonstrates how **steps** solve the fundamental challenge of multi-language systems: unifying different programming languages under a single, coherent abstraction. Traditional polyglot architectures require complex inter-process communication and deployment coordination. Motia's **step** primitive unifies everything.
 
 **Steps enable true language unification:**

packages/docs/content/docs/examples/rag-docling-weaviate.mdx

@@ -17,10 +17,18 @@ Let's transform your documents into an intelligent AI assistant.
 
 ---
 
-## The Power of Intelligent Document Processing
+## Explore the Workbench
 
 <div className="my-8">![RAG Workflow in Motia Workbench](./../img/rag-docling-weaviate-agent.png)</div>
 
+**Try it yourself:**
+- [View Source Code](https://github.com/MotiaDev/motia-examples/tree/main/examples/rag-docling-weaviate-agent)
+- [Browse All Examples](https://github.com/MotiaDev/motia-examples)
+
+---
+
+## The Power of Intelligent Document Processing
+
 
 At its core, our RAG agent solves a fundamental challenge: how do you make unstructured documents searchable and queryable by AI? Traditional approaches often involve complex, monolithic systems that are difficult to scale and maintain. Our Motia-powered solution breaks this down into discrete, event-driven steps that each handle a specific aspect of the pipeline.
 

packages/docs/content/docs/examples/sentiment-analysis.mdx

@@ -5,7 +5,17 @@ description: 'Dynamic Workflows: Building a Sentiment Analyzer with Motia'
 
 In modern application development, workflows are rarely linear. Whether you're building a simple "prompt => response" system or a complex, multi-stage data processing pipeline, you often need your application to make decisions and route data dynamically. This is where the power of event-driven architecture shines, and where the Motia framework provides a clear path forward.
 
-<div className="my-8">![motia workbench for sentiment analysis](./../img/sentimental-analysis.png)</div>
+---
+
+## Explore the Workbench
+
+<div className="my-8">![motia workbench for sentiment analysis](./../img/sentimental-analyzer-workbench.gif)</div>
+
+**Try it yourself:**
+- [View Source Code](https://github.com/MotiaDev/motia-examples/tree/main/examples/sentimental-analysis)
+- [Browse All Examples](https://github.com/MotiaDev/motia-examples)
+
+---
 
 This guide explores how to build a dynamic sentiment analysis application that uses an LLM to determine how to proceed. We'll cover:
 

packages/docs/content/docs/examples/trello-automation.mdx

@@ -5,6 +5,18 @@ description: Build an automated card progression system for Trello boards with A
 
 import { TrelloTab, TrelloCodeContent } from '../../../components/TrelloCodeFetcher'
 
+---
+
+## Explore the Workbench
+
+<div className="my-8">![Trello Automation](./../img/trello.png)</div>
+
+**Try it yourself:**
+- [View Source Code](https://github.com/MotiaDev/motia-examples/tree/main/examples/trello-flow)
+- [Browse All Examples](https://github.com/MotiaDev/motia-examples)
+
+---
+
 ## Let's build a Trello automation system that:
 
 1. Automatically progresses cards across board lists
@@ -50,7 +62,7 @@ The Trello board is organized into four main lists:
 
 Here's how the automation flow works:
 
-<div className="my-8">![Flow: Trello Automation Steps](../img/trello-automation.png)</div>
+<div className="my-8">![Flow: Trello Automation Steps](./../img/trello.png)</div>
 
 1. **Card Validation** → Checks for required information
 2. **Progress Tracking** → Moves cards between lists