improvement(docs): added docs content (#2105)

Author: aadamgough

apps/docs/content/docs/en/blocks/human-in-the-loop.mdx

@@ -5,6 +5,7 @@ title: Human in the Loop
 import { Callout } from 'fumadocs-ui/components/callout'
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
 import { Image } from '@/components/ui/image'
+import { Video } from '@/components/ui/video'
 
 The Human in the Loop block pauses workflow execution and waits for human intervention before continuing. Use it to add approval gates, collect feedback, or gather additional input at critical decision points.
 
@@ -76,7 +77,7 @@ Defines the fields approvers fill in when responding. This data becomes availabl
 }
 ```
 
-Access resume data in downstream blocks using `<blockId.resumeInput.fieldName>`.
+Access resume data in downstream blocks using `<blockId.resumeInput.fieldName>`. 
 
 ## Approval Methods
 
@@ -164,6 +165,11 @@ Access using `<blockId.resumeInput.fieldName>`.
 // Condition block
 <approval1.resumeInput.approved> === true
 ```
+The example below shows an approval portal as seen by an approver after the workflow is paused. Approvers can review the data and provide inputs as a part of the workflow resumption. The approval portal can be accessed directly via the unique URL, `<blockId.url>`.
+
+<div className="mx-auto w-full overflow-hidden rounded-lg my-6">
+  <Video src="hitl-resume.mp4" width={700} height={450} />
+</div>
 
 ## Related Blocks
 

apps/docs/content/docs/en/connections/basics.mdx

@@ -4,6 +4,7 @@ title: Basics
 
 import { Callout } from 'fumadocs-ui/components/callout'
 import { Step, Steps } from 'fumadocs-ui/components/steps'
+import { Video } from '@/components/ui/video'
 
 ## How Connections Work
 
@@ -29,6 +30,10 @@ Connections are the pathways that allow data to flow between blocks in your work
   </Step>
 </Steps>
 
+<div className="mx-auto w-full overflow-hidden rounded-lg my-6">
+  <Video src="connections-build.mp4" width={700} height={450} />
+</div>
+
 ### Connection Flow
 
 The flow of data through connections follows these principles:

apps/docs/content/docs/en/copilot/index.mdx

@@ -71,6 +71,16 @@ This contextual information helps Copilot provide more accurate and relevant ass
   </Card>
 </Cards>
 
+<div className="flex justify-center">
+  <Image
+    src="/static/copilot/copilot-mode.png"
+    alt="Copilot mode selection interface"
+    width={600}
+    height={400}
+    className="my-6"
+  />
+</div>
+
 ## Depth Levels
 
 <Cards>

apps/docs/content/docs/en/introduction/index.mdx

@@ -5,6 +5,7 @@ title: Introduction
 import { Card, Cards } from 'fumadocs-ui/components/card'
 import { Callout } from 'fumadocs-ui/components/callout'
 import { Image } from '@/components/ui/image'
+import { Video } from '@/components/ui/video'
 
 Sim is an open-source visual workflow builder for building and deploying AI agent workflows. Design intelligent automation systems using a no-code interface—connect AI models, databases, APIs, and business tools through an intuitive drag-and-drop canvas. Whether you're building chatbots, automating business processes, or orchestrating complex data pipelines, Sim provides the tools to bring your AI workflows to life.
 
@@ -32,6 +33,10 @@ Transform raw data into actionable insights. Extract information from documents,
 **API Integration Workflows**  
 Orchestrate complex multi-service interactions. Create unified API endpoints, implement sophisticated business logic, and build event-driven automation systems.
 
+<div className="mx-auto w-full overflow-hidden rounded-lg my-6">
+  <Video src="introduction/chat-workflow.mp4" width={700} height={450} />
+</div>
+
 ## How It Works
 
 **Visual Workflow Editor**  
@@ -46,6 +51,10 @@ Launch workflows through multiple channels including chat interfaces, REST APIs,
 **Real-time Collaboration**  
 Enable your team to build together. Multiple users can edit workflows simultaneously with live updates and granular permission controls.
 
+<div className="mx-auto w-full overflow-hidden rounded-lg my-6">
+  <Video src="introduction/build-workflow.mp4" width={700} height={450} />
+</div>
+
 ## Integrations
 
 Sim provides native integrations with 80+ services across multiple categories:
@@ -59,6 +68,27 @@ Sim provides native integrations with 80+ services across multiple categories:
 
 For custom integrations, leverage our [MCP (Model Context Protocol) support](/mcp) to connect any external service or tool.
 
+<div className="mx-auto w-full overflow-hidden rounded-lg my-6">
+  <Video src="introduction/integrations-sidebar.mp4" width={700} height={450} />
+</div>
+
+## AI-Powered Copilot
+
+**Ask Questions & Get Guidance**  
+Copilot answers questions about Sim, explains your workflows, and provides suggestions for improvements. Use the `@` symbol to reference workflows, blocks, documentation, knowledge, and logs for contextual assistance.
+
+**Build & Edit Workflows**  
+Switch to Agent mode to let Copilot propose and apply changes directly to your canvas. Add blocks, configure settings, wire variables, and restructure workflows with natural language commands.
+
+**Adaptive Reasoning Levels**  
+Choose from Fast, Auto, Advanced, or Behemoth modes depending on task complexity. Start with Fast for simple questions, scale up to Behemoth for complex architectural changes and deep debugging.
+
+Learn more about [Copilot capabilities](/copilot) and how to maximize productivity with AI assistance.
+
+<div className="mx-auto w-full overflow-hidden rounded-lg my-6">
+  <Video src="introduction/copilot-workflow.mp4" width={700} height={450} />
+</div>
+
 ## Deployment Options
 
 **Cloud-Hosted**  

apps/docs/content/docs/en/triggers/index.mdx

@@ -4,6 +4,17 @@ description: Triggers are the core ways to start Sim workflows
 ---
 
 import { Card, Cards } from 'fumadocs-ui/components/card'
+import { Image } from '@/components/ui/image'
+
+<div className="flex justify-center">
+  <Image
+    src="/static/blocks/triggers.png"
+    alt="Triggers Overview"
+    width={500}
+    height={350}
+    className="my-6"
+  />
+</div>
 
 ## Core Triggers