fix: add slug to resolve broken links

Author: devvaannsh

app-links.js

@@ -74,11 +74,11 @@ export const appLinks = [
 	},
     {
 		from: '/app-links/indent-guide-lines',
-		to: '/docs/editing-text#indent-guide-lines',
+		to: '/docs/customizing-editor#indent-guide-lines',
 	},
     {
 		from: '/app-links/emmet',
-		to: '/docs/editing-text#emmet',
+		to: '/docs/Features/emmet',
 	},
     {
 		from: '/app-links/git',
@@ -138,22 +138,22 @@ export const appLinks = [
 	},
 	{
 		from: '/app-links/design-mode',
-		to: '/docs/file-management',
+		to: '/docs/design-mode',
 	},
 	{
 		from: '/app-links/ai-chat',
 		to: '/docs/Pro Features/ai-chat',
 	},
 	{
 		from: '/app-links/markdown-editor',
-		to: '/docs/file-management',
+		to: '/docs/Pro Features/markdown-editor',
 	},
 	{
 		from: '/app-links/resize-ruler',
 		to: '/docs/Pro Features/device-preview',
 	},
 	{
-		from: '/app-links//terminal',
-		to: '/docs/file-management',
+		from: '/app-links/terminal',
+		to: '/docs/Features/terminal',
 	}
 ];

docs/05-design-mode.md

@@ -14,7 +14,7 @@ import VideoPlayer from '@site/src/components/Video/player';
 ## Why use Design Mode
 
 - **Pair with the AI Chat panel.** Ask the AI to make a change and see it applied instantly in the preview as the code updates without the need to open the editor. [Read More about AI Chat](./Pro%20Features/ai-chat).
-- **Edit visually with Live Preview Edit Mode.** Click elements, drag them, change text, swap images, and much more, directly in the preview. [Read More about Live Preview Edit Mode](./Pro%20Features/edit-mode-live-preview).
+- **Edit visually with Live Preview Edit Mode.** Click elements, drag them, change text, swap images, and much more, directly in the preview. [Read More about Live Preview Edit Mode](./Pro%20Features/live-preview-edit).
 - **Test responsive designs.** With Device Preview, check how your page looks on phone, tablet, and desktop sizes with just a click. [Read More about Device Preview](./Pro%20Features/device-preview).
 
 ## Switching to Design Mode

docs/12-Pro Features/02-edit-mode-live-preview.md

@@ -1,5 +1,6 @@
 ---
 title: Live Preview Edit
+slug: live-preview-edit
 ---
 
 import React from 'react';

docs/12-Pro Features/05-measurements.md

@@ -14,7 +14,7 @@ The **Measurements** feature displays ruler lines extending from the edges of a
 
 ## Enabling Measurements
 
-While in [Edit Mode](./edit-mode-live-preview), click the dropdown arrow next to the pen icon in the Live Preview toolbar. This opens a menu where you can toggle **Show Measurements** on or off.
+While in [Edit Mode](./live-preview-edit), click the dropdown arrow next to the pen icon in the Live Preview toolbar. This opens a menu where you can toggle **Show Measurements** on or off.
 > By default, measurements are disabled.
 
 ![Enable Show Measurements](./images/enable-show-measurements.png "Enable Show Measurements")

docs/12-Pro Features/06-device-preview.md

@@ -41,7 +41,7 @@ While you drag the edge of the Live Preview panel, a ruler appears across the to
 
 ### In Design Mode
 
-In [Design Mode](./edit-mode-live-preview), the Live Preview takes over the full window. In that case, you'll see resize handles directly on the page: drag the left or right handle to change the **width**, or drag the bottom handle to change the **height**. The same ruler appears, and the label now shows both dimensions, like `iPad Mini — 768px × 1024px`.  
+In [Design Mode](./live-preview-edit), the Live Preview takes over the full window. In that case, you'll see resize handles directly on the page: drag the left or right handle to change the **width**, or drag the bottom handle to change the **height**. The same ruler appears, and the label now shows both dimensions, like `iPad Mini — 768px × 1024px`.  
 In Design Mode, a **Fit to screen** option is also available in the device dropdown. This resizes the page to fit the available space in the Live Preview.
 
 

docs/13-Features/07-Live Preview/index.md

@@ -75,21 +75,21 @@ The left side of the toolbar groups three controls:
 
 * **Reload Live Preview**: The leftmost icon is the reload icon. Clicking on it refreshes the Live Preview. It is useful when Live Preview gets out of sync with your code.
 
-* **Design Mode**: The maximize icon after the reload button is for Design Mode. This mode hides the editor and expands the Live Preview to take over the full window, giving you more room to work on the page with [Edit Mode](../../Pro%20Features/edit-mode-live-preview) or [Phoenix Code AI](../../Pro%20Features/ai-chat). Click the icon again to exit Design Mode.
+* **Design Mode**: The maximize icon after the reload button is for Design Mode. This mode hides the editor and expands the Live Preview to take over the full window, giving you more room to work on the page with [Edit Mode](../../Pro%20Features/live-preview-edit) or [Phoenix Code AI](../../Pro%20Features/ai-chat). Click the icon again to exit Design Mode.
 
-* **Live Preview Modes**: The pen icon lets you quickly switch between [Edit Mode](../../Pro%20Features/edit-mode-live-preview) and Preview Mode. The pen lights up when Edit Mode is active. You can also press `F8` to toggle between these two modes.
+* **Live Preview Modes**: The pen icon lets you quickly switch between [Edit Mode](../../Pro%20Features/live-preview-edit) and Preview Mode. The pen lights up when Edit Mode is active. You can also press `F8` to toggle between these two modes.
 
   For more mode options, click the chevron next to the pen icon. This opens a dropdown where you can select from all available Live Preview modes:
 
   ![Live Preview mode dropdown](../images/livePreview/lp-mode.png "Live Preview mode dropdown")
 
   - **Preview Mode**: View-only. The page behaves like a normal browser but still updates as you edit code. All interactions with the page (clicks, hovers, etc.) are disabled.
   - **Highlight Mode**: Click any element to see its paddings and margins. Phoenix Code also jumps to that element in your source code so you can start editing right away.
-  - **Edit Mode**: Edit elements directly in the preview. Insert elements, change text, drag elements, swap images, and more. Phoenix Code updates your source code automatically. [Learn more](../../Pro%20Features/edit-mode-live-preview).
+  - **Edit Mode**: Edit elements directly in the preview. Insert elements, change text, drag elements, swap images, and more. Phoenix Code updates your source code automatically. [Learn more](../../Pro%20Features/live-preview-edit).
 
   When Edit Mode is active, two extra options appear in the same dropdown:
 
-  - **Inspect Element on Hover**: Highlights elements as you hover, instead of only on click. This option is enabled by default. [Learn more](../../Pro%20Features/edit-mode-live-preview#inspect-element-on-hover).
+  - **Inspect Element on Hover**: Highlights elements as you hover, instead of only on click. This option is enabled by default. [Learn more](../../Pro%20Features/live-preview-edit#inspect-element-on-hover).
   - **Show Measurements**: Displays ruler lines from the edges of the selected element to the edges of the Live Preview, with labels showing the exact pixel positions. This option is disabled by default. [Learn more](../../Pro%20Features/measurements).
 
   <VideoPlayer