change images

docs/docs/guidelines/custom-component.mdx

@@ -21,14 +21,17 @@ Let's take a look at the basic rules and features. Then we'll go over an example
 - Use the _`build_config`_ method to customize how these fields look and behave.
 
 Here is an example:
+<div style={{
+        display: "flex",
+        justifyContent: "center",
+    }}>
+    <CH.Code linuNumbers={false}>
 
-<CH.Code linuNumbers={false}>
+    ```python
+    from langflow import CustomComponent
+    from langchain.schema import Document
 
-```python
+    class DocumentProcessor(CustomComponent):
-from langflow import CustomComponent
-from langchain.schema import Document
-
-class DocumentProcessor(CustomComponent):
         display_name = "Document Processor"
         description = "This component processes a document"
 
@@ -47,9 +50,23 @@ class DocumentProcessor(CustomComponent):
             elif function == "Titlecase":
                 page_content = page_content.title()
             return Document(page_content=page_content)
-```
+    ```
 
-</CH.Code>
+    </CH.Code>
+
+    <ZoomableImage
+    alt="Document Processor Component"
+    sources={{
+        light: "img/document_processor.png",
+    }}
+    style={{
+        width: "40%",
+        margin: "0 auto",
+        display: "flex",
+        justifyContent: "center",
+    }}
+    />
+</div>
 
 <Admonition type="tip">
   Check out [FlowRunner Component](../examples/flow-runner) for a more complex
@@ -289,39 +306,42 @@ class DocumentProcessor(CustomComponent):
 
 </CH.Scrollycoding>
 
-In Langflow, this is how our script looks like:
 
-{" "}
+All done! This is what our script and brand-new custom component look like:
 
-<ZoomableImage
+<div style={{
-  alt="Document Processor code"
+        display: "flex",
+        justifyContent: "center",
+    }}>
+
+    <ZoomableImage
+    alt="Document Processor Code"
     sources={{
         light: "img/document_processor_code.png",
     }}
     style={{
-    maxWidth: "70%",
+        maxWidth: "100%",
         margin: "0 auto",
         display: "flex",
         justifyContent: "center",
     }}
 />
 
-And there is our brand new custom component:
 
-{" "}
 
-<ZoomableImage
+    <ZoomableImage
-  alt="Document Processor component"
+    alt="Document Processor Component"
     sources={{
         light: "img/document_processor.png",
     }}
     style={{
-    width: "50%",
+        width: "40%",
         margin: "0 auto",
         display: "flex",
         justifyContent: "center",
     }}
-/>
+    />
+</div>
 
 
 <Admonition type="tip" label="Tip">