Content update w/ graphics

Author: TaddyHC

content/arduino-cloud/01.guides/01.editor/assets/collab-code-multiple.gif

@@ -114,10 +114,14 @@ The reference is an embedded version of the [Arduino Language Reference](https:/
 
 ## Collaborative Coding
 
-**Collaborative Coding** allows multiple users to work together on the same code. This feature allows makers to share and edit code across different windows, making collaboration easier.
+**Collaborative Coding** allows users to work together on the same code. This feature enables makers to edit code across multiple windows, making collaboration easier.
 
-When working together, changes made by one user are updated and visible to all others. The code editor highlights the area others edit with an orange frame, notifying users if someone else is editing the same code section. Users can edit the code in multiple windows and take turns editing, ensuring everyone stays coordinated.
+When working together, changes made in one window are updated and visible in all other windows. The code editor highlights the area being edited with an orange frame, notifying users if someone else is editing the same code. Users can take turns editing in multiple windows, ensuring everyone stays coordinated.
 
-IMAGE
+![Collaborative Coding](assets/collab-code-multiple.gif)
+
+While a user is working on the code, the area they are editing is highlighted with the orange frame, and a warning block appears. This indicates that you should wait to avoid any loss of change. Please wait for them to finish before editing the code to prevent conflicts and ensure all changes are correctly synchronized.
+
+![Collaborative Coding - Code editor orange frame highlight](assets/collab-code-orange-frame.png)
 
 By making projects more interactive and engaging, collaborative coding enhances the overall maker experience.

content/arduino-cloud/01.guides/01.editor/assets/collab-code-orange-frame.png

@@ -339,9 +339,15 @@ Arduino Cloud for Business integrates an amazing feature: Over-The-Air updates.
 
 In a collaborative coding environment, everyone can create and modify code simultaneously. Changes are updated and visible to all participants after the last user has finished editing. The code editor highlights the area being edited by others with an orange frame, helping team members stay synchronized and aware of each other's contributions.
 
-IMAGE
+The following short clip shows an idea of how the collaborative coding works from two different user perspectives:
 
-This functionality ensures that all users remain aligned and can contribute effectively. By making projects more interactive and engaging, collaborative coding improves the overall development experience.
+![Collaborative Coding](assets/collab-code-demo.gif)
+
+While a user is working on the code, the area they are editing is highlighted with the orange frame, and a warning block appears. This indicates that the user should wait to avoid any loss of change. Please wait for them to finish before editing the code to prevent conflicts and ensure all changes are correctly synchronized.
+
+![Collaborative Coding - Code editor orange frame highlight](assets/collab-code-orange-frame.png)
+
+This functionality ensures that all users remain aligned and can contribute effectively. Collaborative coding improves the overall development experience by making projects more interactive and engaging.
 
 ## Fleet Management
 

content/arduino-cloud/01.guides/01.editor/editor.md

@@ -182,11 +182,17 @@ Quickly find all the recent sketch files and IoT Dashboards worked by your stude
 
 **Collaborative coding** is a feature that allows multiple users to work together on the same code. Students and teachers can share and edit code, making it easier to collaborate and learn from each other.
 
-Everyone in the shared space can create and modify code simultaneously. Changes are updated and visible to all participants once the last user has edited them. The code editor notifies students or teachers if someone else is editing by highlighting the code area with an orange frame, as shown in the image below:
+In the shared space, everyone can create and modify code simultaneously. Changes are updated and visible to all participants once the last user has finished editing. The code editor notifies users if someone else is editing by highlighting the code area with an orange frame.
 
-IMAGE
+The following short clip shows an idea of how the collaborative coding works from a student and teacher perspectives:
 
-This helps to ensure that all students and teachers stay synchronized and can contribute effectively. Collaborative coding makes projects more interactive and engaging, improving the learning experience.
+![Collaborative Coding](assets/collab-code-demo.gif)
+
+While a student or teacher is working on the code, the area they are editing is highlighted with an orange frame, and a warning block appears. This indicates that you should wait to avoid any loss of change. Please wait for them to finish before editing the code to prevent conflicts and ensure all changes are correctly synchronized.
+
+![Collaborative Coding - Code editor orange frame highlight](assets/collab-code-orange-frame.png)
+
+This helps ensure that all students and teachers stay synchronized and can contribute effectively. Collaborative coding makes projects more interactive and engaging, improving the learning experience.
 
 ## Cloud Remote App