docs: Add media

docs/core/actions.mdx

@@ -9,8 +9,8 @@ Actions are individual tasks performed at each step of a workflow.
 You can find all available Actions in the workspace sidebar.
 
 There are only ten Action types, but they can be configured to perform almost any task.
-For example, a [HTTP request](/actions/types/http-request) can be configured to send a Slack message.
-See [Tutorial](/tutorial) for a worked example.
+For example, a [HTTP request](/actions/types/http-request) can be configured to send a GET request to an API endpoint.
+See [Quickstart](/quickstart) for a worked example.
 
 <Info>
 We refer to an action that has received an input and produced an corresponding output as an "action run".
@@ -21,11 +21,16 @@ We refer to an action that has received an input and produced an corresponding o
 <Steps>
   <Step title="Add action">
     Click or drag-and-drop an action block onto the workflow canvas.
+
+    ![Drag and drop action](/img/dnd.gif)
+
   </Step>
   <Step title="Configure action">
     Select your action onto the canvas to open its configuration panel.
     Update the action name, description, and inputs here.
     Press `save`.
+
+    ![Configure action](/img/configure-action.png)
   </Step>
 </Steps>
 
@@ -134,25 +139,32 @@ Let's use the three-step workflow from [Connecting Actions](#connecting-actions)
 ## Action Types
 
 <CardGroup cols={2}>
-  <Card title="Webhook" icon="link" href="/actions/types/webhook">
+  <Card title="Webhook" icon="link">
+    {/* href="/actions/types/webhook" */}
     Perform actions based on external triggers.
   </Card>
-  <Card title="HTTP Request" icon="globe" href="/actions/types/http-request">
+  <Card title="HTTP Request" icon="globe">
+    {/* href="/actions/types/http-request" */}
     Make HTTP requests to interact with external APIs.
   </Card>
-  <Card title="Data Transform" icon="code" href="/actions/types/data-transform">
+  <Card title="Data Transform" icon="code">
+    {/* href="/actions/types/data-transform" */}
     Transform streams of JSON data.
   </Card>
-  <Card title="Send Email" icon="envelope" href="/actions/types/send-email">
+  <Card title="Send Email" icon="envelope">
+    {/* href="/actions/types/send-email" */}
     Send emails to specified recipients.
   </Card>
-  <Card title="If Conditions" icon="question" href="/actions/types/conditions/overview">
+  <Card title="If Conditions" icon="question">
+    {/* href="/actions/types/conditions/overview" */}
     Create branching workflows using predefined rules.
   </Card>
-  <Card title="AI Actions" icon="robot" href="/actions/types/ai-actions/overview">
+  <Card title="AI Actions" icon="robot">
+    {/* href="/actions/types/ai-actions/overview" */}
     Perform AI-powered tasks (e.g. summarize, label, translate).
   </Card>
-  <Card title="Open Case" icon="folder-open" href="/actions/types/open-case">
+  <Card title="Open Case" icon="folder-open">
+    {/* href="/actions/types/open-case" */}
     Open and prepopulate a case in the case management system.
   </Card>
 </CardGroup>

docs/core/workflows.mdx

@@ -7,6 +7,22 @@ Workflows are a series of steps called [Actions](/actions).
 Think of a workflow as a recipe that runs each step needed to complete a task, from start to finish.
 
 ## Build a workflow
+
+Prefer learning through examples? Watch this video to see how to build a simple workflow.
+
+<iframe
+  width="100%"
+  height="430"
+  autoplay
+  muted
+  loop
+  playsinline
+  allowfullscreen
+  src="https://youtube.com/embed/Qt4jVqzZQOs"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+></iframe>
+
 <Steps>
   <Step title="Add starting action">
     Drag and drop an action block from the sidebar onto the workflow canvas.
@@ -19,6 +35,8 @@ Think of a workflow as a recipe that runs each step needed to complete a task, f
     which uses a large language model (LLM) to summarize the alert received in the previous action.
   </Step>
   <Step title="Connect actions">
+    <Tip>You can quickly add and connect actions by clicking, instead of dragging, action blocks.</Tip>
+
     Connect the actions together.
     This creates a sequence of actions that run in order.
   </Step>
@@ -32,20 +50,23 @@ Think of a workflow as a recipe that runs each step needed to complete a task, f
     Go to the `Send Payload` control in the bottom right panel.
     You might need to click the workflow canvas for the workflow to be in focus.
 
-    Select a webhook action from the dropdown, input the JSON payload you want to send to that webhook, and click `Send`.
+    ![Trigger Workflow](/img/trigger-workflow.png)
+
+    Select a webhook action from the dropdown, input a JSON object to send to that webhook, and click `Send`.
   </Step>
   <Step title="🎉 View workflow run status">
     You can view the status of the workflow run under `Past Runs` in the bottom right panel.
+
+    ![Past Runs](/img/past-runs.png)
+
   </Step>
 </Steps>
 
-<Tip>You can quickly add and connect actions by clicking, instead of dragging, action blocks.</Tip>
-
 ## What next?
 
 ### Deploy
 
-You can deploy your workflow.
+You can deploy your workflow using the `Publish` button in the top right corner of the workflow view.
 
 <Info>Deployed workflows runs automatically whenever a starting [Webhook action](/actions/types/webhook) receives new data.</Info>
 

docs/introduction.mdx

@@ -5,16 +5,16 @@ description: Open source Tines / Palo Alto XSOAR alternative
 
 *Note: Tracecat is currently in Public Alpha.*
 
-Tracecat is an open source automation platform for security teams.
+[Tracecat](https://github.com/TracecatHQ/tracecat) is an open source automation platform for security teams.
 We're building the easiest way to automate technical workflows, orchestrate alerts, and close cases fast.
 
 Don't feel ready for security orchestration, automation, and response (SOAR)?
-Check out our [15 minute tutorial](/quickstart) and start easy with Tracecat Cloud.
+Check out our [15 minute tutorial](/quickstart) and start easy with [Tracecat Cloud](https://platform.tracecat.com).
 
 ## New to Tracecat?
 
 Build your first AI workflow in [15 minutes](/quickstart).
-Ready for more? Discover [common use cases](/use-cases) in security automation.
+{/* Ready for more? Discover [common use cases](/use-cases) in security automation. */}
 
 <CardGroup cols={2}>
   <Card
@@ -25,12 +25,11 @@ Ready for more? Discover [common use cases](/use-cases) in security automation.
     Automate a phishing email investigation in 15 minutes
   </Card>
   <Card
-    title="Use cases"
+    title="Use cases (coming soon)"
     icon="lightbulb"
-    href="/use-cases"
   >
-    Learn how to automate common security tasks
-    (coming soon)
+    Learn how to automate almost any security task
+    with reusable patterns
   </Card>
 </CardGroup>
 

docs/mint.json

@@ -46,7 +46,7 @@
   "navigation": [
     {
       "group": "Getting Started",
-      "pages": ["introduction", "quickstart", "tutorial", "use-cases"]
+      "pages": ["introduction", "quickstart", "power-guide"]
     },
     {
       "group": "Core Features",
@@ -58,6 +58,10 @@
         "core/integrations"
       ]
     },
+    {
+      "group": "Tutorials",
+      "pages": ["tutorials/phishing"]
+    },
     {
       "group": "Self-hosted",
       "pages": ["installation", "deployment"]

docs/power-guide.mdx

@@ -0,0 +1,28 @@
+---
+title: Power Guide
+description: Reusable patterns for security automation
+---
+
+*Work-in-progress:*
+*we'd love to know what use cases interest you most.*
+*We working with the security community to build this automation power guide.*
+*The best way to be part of Tracecat's future is to join us on [Discord](https://discord.gg/n3GF4qxFU8)!*
+
+The following guide presents three basic workflow patterns.
+You can reuse and combine these patterns to build almost any security automation workflow.
+
+<Note>
+If you are looking for use cases, check out Tines's awesome database of [SOC automation examples](https://tinesio.notion.site/4fd14ccf93e7408c8faf96c5aca8c3fd?v=6c62326a57444ca9890e41daad193e3c).
+</Note>
+
+## Linear Pattern
+
+Commonly used for: remediating known alerts.
+
+## Diamond Pattern
+
+Commonly used for: for enriching alerts.
+
+## Branching Pattern
+
+Commonly used for: for triaging alerts.

docs/quickstart.mdx

@@ -2,3 +2,35 @@
 title: Quickstart
 description: Automate a phishing email investigation in 15 minutes
 ---
+
+Let's build a security automation that:
+- Receives a suspicious email using a webhook
+- Extracts URLs from the email using ChatGPT
+- Requests a phishing report from URL scan
+- Labels the email as malicious or not based on AI sentiment analysis
+- Dumps the collected evidence in a [case](/core/case-management) for further investigation
+
+This is what the final workflow looks like:
+
+<img height="100%" src="/img/branching.png" />
+
+## Video Tutorial
+
+<Note>
+Need help with the tutorial? We're doing live walkthroughs on [Discord](https://discord.gg/8KvA3J9)
+every Tuesday at 9am PST and every Thursday at 4pm PST!
+</Note>
+
+<iframe
+  width="100%"
+  height="430"
+  autoplay
+  muted
+  loop
+  playsinline
+  allowfullscreen
+  src="https://www.youtube.com/embed/xl2qxce8Xw8"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+></iframe>

docs/tutorial.mdx → docs/tutorials/phishing.mdx

@@ -1,5 +1,5 @@
 ---
-title: Tutorial
+title: Advanced Example
 description: Learn about branching workflows, case management, and more.
 ---