docs: fix example images source and use info for examples usages

docs/docs/integrations/notion/add-content-to-page.md

@@ -97,7 +97,7 @@ class NotionPageCreator(CustomComponent):
             raise Exception(error_message)
 ```
 
-## Example Usage
+<Admonition type="info" title="Example Usage">
 
 Example of using the `AddContentToPage` component in a Langflow flow using a Markdown as input:
 
@@ -112,6 +112,8 @@ Example of using the `AddContentToPage` component in a Langflow flow using a Mar
 
 In this example, the `AddContentToPage` component connects to a `MarkdownLoader` component to provide the markdown text input. The converted Notion blocks are appended to the specified Notion page using the provided `block_id` and `notion_secret`.
 
+</Admonition>
+
 ## Best Practices
 
 When using the `AddContentToPage` component:

docs/docs/integrations/notion/list-pages.md

@@ -140,7 +140,7 @@ class NotionListPages(CustomComponent):
             return [Record(text=self.status, data=[])]
 ```
 
-## Example Usage
+<Admonition type="info" title="Example Usage">
 
 Here's an example of how you can use the `NotionListPages
 ` component in a Langflow flow and passing to the Prompt component:
@@ -157,6 +157,7 @@ Here's an example of how you can use the `NotionListPages
 
 In this example, the `NotionListPages
 ` component is used to retrieve specific pages from a Notion database based on the provided filters and sorting options. The retrieved data can then be processed further in the subsequent components of the flow.
+</Admonition>
 
 ## Best Practices
 

docs/docs/integrations/notion/list-users.md

@@ -93,19 +93,20 @@ class NotionUserList(CustomComponent):
         return records
 ```
 
-> **Example Usage**
+<Admonition type="info" title="Example Usage">
->
+Here's an example of how you can use the `NotionUserList` component in a Langflow flow and passing the outputs to the Prompt component:
-> Here's an example of how you can use the `NotionUserList` component in a Langflow flow and passing the outputs to the Prompt component:
 
 <ZoomableImage
     alt="NotionUserList Flow Example"
     sources={{
-      light: "img/NotionUserList_flow_example.png",
+      light: "img/notion/NotionUserList_flow_example.png",
-      dark: "img/NotionUserList_flow_example_dark.png",
+      dark: "img/notion/NotionUserList_flow_example_dark.png",
   }}
   style={{ width: "100%", margin: "20px 0" }}
 />
 
+</Admonition>
+
 ## Best Practices
 
 > **Best Practices**

docs/docs/integrations/notion/page-content-viewer.md

@@ -105,9 +105,9 @@ class NotionPageContent(CustomComponent):
         return text
 ```
 
-> **Example Usage**
+<Admonition type="info" title="Example Usage">
->
+
-> Here's an example of how you can use the `NotionPageContent` component in a Langflow flow:
+Here's an example of how you can use the `NotionPageContent` component in a Langflow flow:
 
 <ZoomableImage
     alt="NotionPageContent Flow Example"
@@ -117,6 +117,7 @@ class NotionPageContent(CustomComponent):
     }}
     style={{ width: "100%", margin: "20px 0" }}
 />
+</Admonition>
 
 ## Best Practices
 

docs/docs/integrations/notion/page-create.md

@@ -102,8 +102,8 @@ Here's an example of how to use the `NotionPageCreator` component in a Langflow
 <ZoomableImage
   alt="NotionPageCreator Flow Example"
   sources={{
-    light: "img/NotionPageCreator_flow_example.png",
+    light: "img/notion/NotionPageCreator_flow_example.png",
-    dark: "img/NotionPageCreator_flow_example_dark.png",
+    dark: "img/notion/NotionPageCreator_flow_example_dark.png",
   }}
   style={{ width: "100%", margin: "20px 0" }}
 />

docs/docs/integrations/notion/search.md

@@ -146,8 +146,7 @@ class NotionSearch(CustomComponent):
             return [Record(text=self.status, data=[])]
 ```
 
-## Example Usage
+<Admonition type="info" title="Example Usage">
-
 Here's an example of how you can use the `NotionSearch` component in a Langflow flow:
 
 <ZoomableImage
@@ -160,6 +159,7 @@ Here's an example of how you can use the `NotionSearch` component in a Langflow
 />
 
 In this example, the `NotionSearch` component is used to search for pages and databases in Notion based on the provided query and filter criteria. The retrieved data can then be processed further in the subsequent components of the flow.
+</Admonition>
 
 ## Best Practices