Merge pull request #151 from openreplay/openreplay-spot

add visual material

src/pages/en/tutorials/spot.mdx

@@ -21,7 +21,7 @@ With Spot, you can easily record bugs right from your browser and share them ins
 ## What you need to know
 
 - Spot comes with every [OpenReplay plan](https://www.openreplay.com/pricing.html) from our open-source to our enterprise offerings.
-- Spot is only available for the Google Chrome browser.
+- Spot is a *Chrome extension* that also works on any Chromium-based browser, including [Microsoft Edge](https://www.microsoft.com/en-us/edge), [Brave](https://brave.com/), [Arc](https://arc.net/)...
 
 ## How to install and set up the Spot Chrome extension
 
@@ -41,19 +41,25 @@ Installing the Spot Chrome extension is quick and easy:
 
 Before you start using Spot, you need to either log in to your existing OpenReplay account or create a new one:
 
-- **OpenReplay cloud**
+- #### OpenReplay cloud
     - **New users:**
         1. After pinning Spot, click on the Spot icon in your toolbar.
         2. Select **Create Account**.
         3. Choose your **primary use-case** for OpenReplay.
         - If you select "report bugs via Spot" as your primary use-case, you can later access the full OpenReplay features by clicking on **Setup Tracker**.
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          <img src="./images/spot/create_account.gif" alt="Create account through Spot" style={{ width: '600px', height: 'auto' }} />
+        </div>
     - **Existing users:**
         1. Click on the pinned Spot extension in your toolbar.
         2. Select **Log in** and enter your OpenReplay credentials.
         - You can find your Spots in the Spot menu in the left sidebar.
-- **OpenReplay self-host**
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          <img src="./images/spot/spots_menu.gif" alt="Spots Menu" style={{ width: '600px', height: 'auto' }} />
+        </div>
+- #### OpenReplay self-host 
     - **New and existing users:**
-        - Update your OpenReplay instance to the latest version (v1.20.0) that supports Spot.
+        - Update your OpenReplay instance to the latest version [**(v1.20.0**)](https://github.com/openreplay/openreplay/releases/tag/v1.20.0) that supports Spot.
         - Once updated, the Spot menu will appear in the left sidebar. Your Spots will be securely saved on your instance.
 
 ### 3. You’re ready to go!
@@ -74,6 +80,10 @@ Here’s how to use the Spot Chrome extension’s key features:
 - **Add comments:** You can add comments to provide additional context before saving.
 - **Save Spot:**  After stopping the recording, it will automatically save with all the relevant technical details, like console logs and network data.
 
+  <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}> 
+    <img src="./images/spot/record_tab.gif" alt="Use Record Tab feature" style={{ width: '600px', height: 'auto' }} />
+  </div>
+
 ### Record desktop
 
 - **Start recording:** Click the Spot icon and select **Record Desktop**. Choose to record your entire screen or a specific window.