add getting started editor-header-section

src/node-red/getting-started/editor/index.md

@@ -0,0 +1,23 @@
+---
+eleventyNavigation:
+  key: Editor
+meta:
+  title: Node-RED Editor
+  description:  Learn about the powerful features of Node-RED Editor.
+  keywords: node-red, node-red editor
+---
+
+# {{meta.title}}
+
+The Node-RED Editor is one of the most important and essential components of Node-RED, as the main focus of Node-RED is to enable visual programming. The editor provides a graphical interface that allows users to create, configure, and manage flows easily.
+
+![Node-RED Editor Window](./images/node-red-editor-window.png "Node-RED Editor Window"){data-zoomable}
+
+## The main components of the Node-RED editor
+
+The Node-RED Editor has four main component as following:
+
+- Header: The [header](./header.md) contains the instance name, user profile menu and the main menu. 
+- Pallete: The palette is a sidebar containing all of the nodes that are installed and available to use.
+- Workspace: The workspace is where flows (groups of nodes) are developed by dragging nodes from the palette and wiring them together. Adding a new flow tab gives you a new workspace.
+- Sidebar: Provides additional context-sensitive options and information depending on the selected node or workspace.

src/node-red/getting-started/index.md

@@ -0,0 +1,14 @@
+---
+eleventyNavigation:
+  key: Getting Started
+meta:
+  title: Getting Started with Node-RED
+  description:  Learn the basics of Node-RED, a powerful tool for IoT integration and workflow automation.
+  keywords: node-red, node-red basics, node-red foundation, node-red editor
+---
+
+# {{ meta.title }}
+
+This section provides an overview of Node-RED, a robust visual tool designed for integrating IoT devices and automating workflows without needing extensive programming knowledge.
+
+- **Node-RED Editor**: This [documentation](./editor/index.md) provides a detailed overview of the Node-RED Editor, covering each feature included in the editor.