feat(components): Update docs-editor.mdx (#4683)

update docs-editor

Author: iManu

pages/components/docs-editor.mdx

@@ -556,4 +556,88 @@ Here is a list of current Ultraviolet illustrations available
 Here is a list of current Ultraviolet product icons available
 
 <UvProductIcons />
----
+
+---
+
+## GuideFlow Integration
+
+<GuideFlow src="https://app.guideflow.com/player/yr4mydmtlr"/>
+
+
+## StoryLane Integration
+
+<StoryLaneIframe src="https://app.storylane.io/demo/mcoaemfz6l9v" />
+
+---
+
+## Illustration Cards
+
+Here is an example of a card component using illustrations with its troubleshooting link and automatically placed due to `IllustrationCardsContainer` wrapping each manually added cards.
+
+```jsx
+
+<Grid>
+
+<ProductCardIllustration
+  productLogo="serverlessDB"
+  url="/serverless/troubleshooting/"
+  label="Serverless"
+/>
+
+</Grid>
+
+```
+
+<Grid>
+
+  <ProductCardIllustration
+    productLogo="serverlessDB"
+    url="/serverless/troubleshooting/"
+    label="Serverless"
+  />
+
+  <ProductCardIllustration
+    productLogo="instance"
+    url="/compute/troubleshooting/"
+    label="Compute"
+  />
+
+  <ProductCardIllustration
+    productLogo="blockStorage"
+    url="/storage/troubleshooting/"
+    label="Storage"
+  />
+
+  <ProductCardIllustration
+    productLogo="webHosting"
+    url="/storage/troubleshooting/"
+    label="Web Hosting"
+  />
+
+  <ProductCardIllustration
+    productLogo="learning"
+    url="/storage/troubleshooting/"
+    label="Learning"
+  />
+
+  <ProductCardIllustration
+    productLogo="generic"
+    url="/storage/troubleshooting/"
+    label="Generic"
+  />
+
+  <ProductCardIllustration
+    productLogo="cockpit"
+    url="/storage/troubleshooting/"
+    label="Cockpit"
+  />
+
+  <ProductCardIllustration
+    productLogo="vpc"
+    url="/storage/troubleshooting/"
+    label="VPC"
+  />
+
+</Grid>
+
+---