refactor: add live preview section and all related files are moved inside it

Author: devvaannsh

docs/07-Features/01-live-preview.md …tures/01-Live Preview/01-live-preview.mddocs/07-Features/01-live-preview.md renamed to docs/07-Features/01-Live Preview/01-live-preview.md docs/07-Features/01-live-preview.md renamed to docs/07-Features/01-Live Preview/01-live-preview.md

@@ -8,36 +8,36 @@ The Live Preview feature in Phoenix Code provides instant feedback on changes ma
 
 ## Activating Live Preview for HTML Files
 1. Select the HTML file you wish to edit from the editing panel.
-   ![Open file](images/livePreview/open.png "Open the HTML file from the editing panel").
+   ![Open file](../images/livePreview/open.png "Open the HTML file from the editing panel").
 2. Click the lightning bolt icon, located on the right panel, to initiate Live Preview.
-   ![Lightning icon](images/livePreview/off.png "Initiate Live Preview by clicking the lightning icon").
+   ![Lightning icon](../images/livePreview/off.png "Initiate Live Preview by clicking the lightning icon").
 3. The icon turns gold when Live Preview is active.
-   ![Lightning icon active](images/livePreview/on.png)
+   ![Lightning icon active](../images/livePreview/on.png)
    View the side-by-side Live Preview alongside the code.
-   ![Live Preview active](images/livePreview/livepreviewon.png "Live Preview alongside code").
+   ![Live Preview active](../images/livePreview/livepreviewon.png "Live Preview alongside code").
 
 ## Detaching Live Preview to a New Window
 1. Hover over the Live Preview panel.
 2. Click the pop-out icon to detach Live Preview into a new window.
-   ![Detaching to new window](images/livePreview/popout.png "Click to detach Live Preview to a new window").
+   ![Detaching to new window](../images/livePreview/popout.png "Click to detach Live Preview to a new window").
 3. Live Preview will now display in your default web browser, allowing for uninterrupted coding and viewing.
 
 ## Selecting a Browser for Live Preview
 1. Hover over the Live Preview panel.
-2. Choose your preferred browser by clicking its icon. ![Browser selected](images/livePreview/browser-choice.png "Live Preview in selected browser").
+2. Choose your preferred browser by clicking its icon. ![Browser selected](../images/livePreview/browser-choice.png "Live Preview in selected browser").
 3. Live Preview opens in the chosen browser.
 
 ## Reload Live Preview
-![Reload Live Preview](./images/livePreview/reload.png)
+![Reload Live Preview](../images/livePreview/reload.png)
 The **Reload** button in the live preview toolbar allows you to manually refresh the Live Preview pane to ensure it reflects the latest changes in your code. While Live Preview updates automatically, the Reload button can be helpful if you encounter synchronization issues.
 
 ## Disable Live Preview
 You can disable the live preview panel at startup by following these steps:
 1. Click the settings icon in the toolbar (hover over the toolbar to make it appear).
-![Settings Icon](./images/livePreview/settings-gear.png)
+![Settings Icon](../images/livePreview/settings-gear.png)
 
 2. This will open the live preview settings menu: 
-![Settings menu](./images/livePreview/live-preview-settings-menu.png)
+![Settings menu](../images/livePreview/live-preview-settings-menu.png)
 3. Disable the `Show Live Preview Panel at Startup` option.
 
 

…/07-Features/02-live-preview-settings.md …Live Preview/02-live-preview-settings.mddocs/07-Features/02-live-preview-settings.md renamed to docs/07-Features/01-Live Preview/02-live-preview-settings.md docs/07-Features/02-live-preview-settings.md renamed to docs/07-Features/01-Live Preview/02-live-preview-settings.md

@@ -9,14 +9,14 @@ There are two ways to access the Live Preview Settings dialog:
 1. **From the File Menu**:
     - Navigate to the 'File' menu at the top left of the editor.
     - Select 'Live Preview Settings' from the dropdown.
-![live-preview-settings](images/livePreview/settings-menu.png)
+![live-preview-settings](../images/livePreview/settings-menu.png)
 1. **From the Live Preview Panel**:
     - Locate the live preview panel, typically found at the right side of the editor.
     - Hover over the live preview panel title bar and click the gear icon (⚙️) located at the top right of the panel title bar.
-![live-preview-settings](images/livePreview/settings-gear.png)
+![live-preview-settings](../images/livePreview/settings-gear.png)
 ## Configuring Your Server
 
-![settings-dialog](images/livePreview/settings-dialog.png)
+![settings-dialog](../images/livePreview/settings-dialog.png)
 
 Within the Live Preview Settings dialog, you can configure the following options:
 

docs/07-Features/03-php-live-preview.md …s/01-Live Preview/03-php-live-preview.mddocs/07-Features/03-php-live-preview.md renamed to docs/07-Features/01-Live Preview/03-php-live-preview.md docs/07-Features/03-php-live-preview.md renamed to docs/07-Features/01-Live Preview/03-php-live-preview.md

@@ -61,7 +61,7 @@ Setting up a live preview for PHP projects is straightforward with Apache and XA
 
 </Tabs>
 6. Add the following settings to your custom live preview:
-![Custom Live Preview Settings](images/phpLivePreview/phpCustomServer.png)
+![Custom Live Preview Settings](../images/phpLivePreview/phpCustomServer.png)
 Your live preview should now automatically update to reflect changes whenever PHP files are edited.
 
 ## PHP Live Preview in Action