change images

docs/docs/guidelines/custom-component.mdx

@@ -21,7 +21,10 @@ 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}>
 
     ```python
@@ -51,6 +54,20 @@ class DocumentProcessor(CustomComponent):
 
     </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
   example.
@@ -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:
+
+<div style={{
+        display: "flex",
+        justifyContent: "center",
+    }}>
 
     <ZoomableImage
-  alt="Document Processor code"
+    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
-  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">