docs: 📝 Add doc for every block

apps/docs/src/css/custom.css

@@ -20,6 +20,7 @@ h4 {
 
 img {
   border-radius: 0.5rem;
+  margin-bottom: 1rem;
 }
 
 .docusaurus-highlight-code-line {
@@ -55,3 +56,23 @@ details {
   text-decoration: none !important;
   margin-bottom: 10px;
 }
+
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.arrow-icon {
+  margin: 0 10px;
+}
+
+@media only screen and (max-width: 600px) {
+  .flex {
+    flex-direction: column;
+  }
+
+  .arrow-icon {
+    margin: 10px 0;
+    transform: rotate(90deg);
+  }
+}

apps/docs/src/js/FlowToBot.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+export const FlowToBot = ({ flow, bot }) => (
+  <div className="flex">
+    {flow}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="50"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="arrow-icon"
+    >
+      <line x1="5" y1="12" x2="19" y2="12"></line>
+      <polyline points="12 5 19 12 12 19"></polyline>
+    </svg>
+    {bot}
+  </div>
+)