Merge pull request #5 from PROCEED-Labs/update-create-process-css

Edited Create Process site according to feedback, removing and replacing some of the text and screenshots and made some style adjustments

re-named the CSS file for image sizes to image_sizes.css and import it only once in index.mdx, Nextra applies it to the whole site so all image adjustments can be done in this file from now on without losing the markdown expand feature

added the 'Copy and Share the Process' site and it's screenshots

added the 'Organize multiple Processes' site and it's screenshots

Author: Ph4t3

content/index.mdx

@@ -1,3 +1,5 @@
+import "/styles/image_sizes.css";
+
 # PROCEED User Documentation
 
 PROCEED is an open-source Business Process Management System (BPMS) specialized on the intelligent and user-friendly creation, execution and monitoring of processes.

content/quick-start/qs-create-process.mdx

@@ -0,0 +1,32 @@
+
+### Organizing processes
+
+In this section, we will quickly show how you can organize your processes into folders to maintain a structured and efficient workspace
+in the PROCEED editor.
+
+Using the three-dotted button next to **Create Process**, or by right-clicking on empty space, you can create new folders to organize your processes.
+
+We recommend structuring your folders by **department**, **function**, or **process type**, depending on what best suits your team's workflow.
+For example, you might create folders like **HR**, **Finance**, or **Operations** to keep related processes grouped together.
+You can also nest folders to reflect your organizational hierarchy — for instance, placing an Onboarding folder inside the HR folder.
+
+To customize your view, use the three-dotted button in the top-right corner of the table to display additional properties.
+You can sort columns by clicking on their headers, making it easier to locate specific items.
+In the top-right corner, an arrow button allows you to toggle detailed meta-data for the currently selected item.
+  ![table_options](/images/quick-start-organize/table_options.png)
+
+You can switch to a **tile view** using the button in the top-right corner of the workspace. This layout will also display preview images of your processes
+to make it easier to quickly recognize processes visually. To open a folder you now have to double-click it.
+  ![switch_to_tiles](/images/quick-start-organize/switch_to_tiles.png)
+
+You can also **drag and drop** processes to move them between folders — this works seamlessly in both list and tile view. To move a process up one level,
+you can drag it onto the Parent Folder entry at the top of the list.
+  ![drag_and_drop](/images/quick-start-organize/drag_and_drop.png)
+
+By right-clicking a process, you gain access to additional actions such as opening the process in a **new tab**, copying a direct link to **share** with others,
+or creating a **duplicate**.
+  ![right_click](/images/quick-start-organize/right_click.png)
+
+You also have the option to **export** one or multiple processes directly from this view using the action bar at the top. This allows you to quickly back up,
+share, or transfer processes as needed.
+  ![export_process_button](/images/quick-start-organize/export_process_button.png)

content/quick-start/qs-organize-processes.mdx

@@ -0,0 +1,34 @@
+
+### Copy and share the process
+
+In the following we will show how to quickly **download**, **share** and **copy** your created processes in different formats.
+  Open your process in the editor and you will find a share and download button in the top right toolbar.
+
+![share_toolbar](/images/quick-start-share-processes/share_toolbar.png)
+
+#### Create a public link
+Clicking the **Share** button will provide you a popup with multiple different options. To share the process using a public link, check the box below.
+  You can now choose which version of the process to share, display a preview and share the process using a generated link or QR code. This link will
+  lead to a page displaying the process diagram and all its meta data.
+  ![public_link](/images/quick-start-share-processes/public_link.png)
+
+#### Embed in Website
+You also have the option to directly embed the process on a website with an iFrame. Simply check the **Enable iFrame Embedding** 
+  box, pick a version and you can copy the created HTML element.
+  ![embed_in_website](/images/quick-start-share-processes/embed_in_website.png)
+
+#### Download as PDF
+When downloading the process as a **PDF** you have multiple options for what to include and how to format the PDF using the checkboxes below, then
+  simply press the download button.
+  ![download_pdf](/images/quick-start-share-processes/download_pdf.png)
+
+#### Download as an image
+To export your process as an image, you have the option between a **PNG** or **SVG** file. You can also directly copy the image to your clipboard
+  without having to download it first. Tick the box below the version you chose if you want to include the content inside of subprocesses
+  that are collapsed in the diagram.
+  ![download_png](/images/quick-start-share-processes/download_png.png)
+
+#### Export as BPMN in XML
+If you want to download the process as BPMN in **XML**, you can do so with or without including HTML and images you added to user tasks
+  or other elements by checking the box below your chosen version
+  ![download_bpmn](/images/quick-start-share-processes/download_bpmn.png)