[Docs] - Refactor folders and leftnav (#1781)

* refactor-leftnav

* bump-whats-new

* comment-out-some-tutorials

* links

* guidelines

* comma

* starter-projects

* try-links

* add-new-component-location

docs/docs/administration/components.mdx

@@ -0,0 +1,58 @@
+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://python.langchain.com/docs/integrations/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>
+
+{" "}
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/single-compenent.png"),
+    dark: useBaseUrl("img/single-compenent.png"),
+  }}
+  style={{ width: "100%", maxWidth: "800px", margin: "20px auto" }}
+/>
+
+<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>