organized folders, added components tab, adjusted mendable style.

docs/docs/guidelines/collection.mdx

@@ -0,0 +1,13 @@
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import ZoomableImage from '/src/theme/ZoomableImage.js';
+import ReactPlayer from 'react-player';
+
+# Collection
+
+A collection is a snapshot of the flows available in the database. You can download your entire collection for local storage and upload it anytime for future use.
+
+<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
+<ReactPlayer playing controls url='/videos/langflow_collection.mp4'
+  />
+</div>

docs/docs/guidelines/components.mdx

@@ -0,0 +1,44 @@
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import ZoomableImage from '/src/theme/ZoomableImage.js';
+import ReactPlayer from 'react-player';
+
+# Component
+
+Components are the building blocks of the flows. They are made of inputs, outputs, and parameters that define their functionality, providing a convenient and straightforward way to compose LLM-based applications. Learn more about components and how they work in the LangChain [documentation](https://docs.langchain.com/docs/category/components) section.
+
+
+### Component's Features
+
+<div style={{ marginBottom: '20px' }}>
+  During the flow creation process, you will notice handles (colored circles) attached to one or both sides of a component. These handles represent the availability to connect to other components, while their colors are type hints (hover over a handle to see connection details).</div>
+
+<div style={{ marginBottom: '20px' }}>
+  For example, if you select a <code>ConversationChain</code> component, you will see orange  <span style={{ color: 'orange' }}>o</span>  and purple  <span style={{ color: 'purple' }}>o</span>  input handles. They indicate that this component accepts an LLM and a Memory component as inputs. The red asterisk <span style={{ color: 'red' }}>*</span> means that at least one input of that type is required.
+</div>
+
+<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
+  <ZoomableImage
+    alt="Docusaurus themed image"
+    sources={{
+      light: useBaseUrl('img/single-compenent.png'),
+    }}
+    style={{ width: '100%', maxWidth: '800px', margin: '0 auto' }}
+  />
+</div>
+
+
+<div style={{ marginBottom: '20px' }}>
+On the top right corner, you will find the component status icon 🔴. Make the necessary connections, build the flow (⚡ zap icon on the bottom right of the canvas) and once the validation is completed, the status of each validated component should light green 🟢. Hover over the component status to reveal the outputs going through it in case of success, or the detected error in case of failure.
+</div>
+
+---
+
+### Component's Parameters
+
+LangFlow components can be edited in the component settings button. Hide parameters to reduce complexity and keep the canvas clean and intuitive for experimentation.
+
+<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
+<ReactPlayer playing controls url='/videos/langflow_parameters.mp4'
+  />
+</div>

docs/docs/guidelines/features.mdx

@@ -0,0 +1,64 @@
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import ZoomableImage from '/src/theme/ZoomableImage.js';
+import ReactPlayer from 'react-player';
+
+# Features
+
+<div style={{ marginBottom: '20px' }}>
+  When you click for New Project, you will see on the top left corner of the screen, some options such as <strong>Import</strong>, <strong>Export</strong>, <strong>Code</strong> and <strong>Save</strong>, as displayed in the image below:
+</div>
+
+
+<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
+  <ZoomableImage
+    alt="Docusaurus themed image"
+    sources={{
+      light: useBaseUrl('img/features.png'),
+    }}
+    style={{ width: '100%', maxWidth: '800px', margin: '0 auto' }}
+  />
+</div>
+
+<div style={{ marginBottom: '20px' }}>
+Further down, we will explain each of these options.
+</div>
+
+---
+
+### Import and Export
+
+Flows can be exported and imported as JSON files.
+
+:::caution
+Watch out for API keys being stored in local files.
+:::
+
+---
+
+### Code
+
+The Code button shows snippets to use your flow as a Python object or an API.
+
+**Python Code**
+
+Through the LangFlow package, you can load a flow from a JSON file and use it as a LangChain object.
+
+```py
+from langflow import load_flow_from_json
+
+flow = load_flow_from_json("path/to/flow.json")
+# Now you can use it like any chain
+flow("Hey, have you heard of LangFlow?")
+```
+
+**API**
+
+Once you save a flow, the API endpoint is created with your latest changes. Click the "code" button to use that flow as an API. You can post-adjust component parameters using the global variable TWEAKS.
+
+The example below shows a Python script making a POST request to a local API endpoint, which gets a prediction based on the message input.
+
+<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
+<ReactPlayer playing controls url='/videos/langflow_api.mp4'
+  />
+</div>