feat: add design mode docs assets

Author: devvaannsh

docs/05-design-mode.md

@@ -2,9 +2,14 @@
 title: Design Mode
 ---
 
+import React from 'react';
+import VideoPlayer from '@site/src/components/Video/player';
+
 **Design Mode** is a layout that hides the code editor and gives that entire space to your **Live Preview**. It is built for visual-first work: chatting with the AI while you watch changes land in the preview, editing your page directly in Live Preview Edit Mode, or testing how your design looks at different device sizes.
 
-<!-- Add a video here showing the toggle going from the normal layout into Design Mode and back. The editor should disappear, the Live Preview should take over the editor area, and the sidebar should stay visible. -->
+<VideoPlayer
+  src="https://docs-images.phcode.dev/videos/design-mode/design-mode.mp4"
+/>
 
 ## Why use Design Mode
 
@@ -20,14 +25,14 @@ There are three ways to switch to Design Mode:
 - Click the **fullscreen** button *(expand icon)* in the Live Preview toolbar, right after the reload button.
 - Choose **File > Toggle Design Mode** from the menu bar.
 
-All three toggle the same mode. Use any of them again to switch back to the code editor.
+![Design Mode entry points](./images/designMode/design-mode-toggle.png "Design Mode entry points")
 
-<!-- Add an image here showing both entry points side by side: the Control Bar Design Mode button (pen nib icon) and the Live Preview toolbar fullscreen button (expand icon), each with an arrow pointing to it. -->
+All three toggle the same mode. Use any of them again to switch back to the code editor.
 
 ## The Design Mode layout
 
 When Design Mode is on, the sidebar stays visible alongside the maximized Live Preview. The recommended setup is to keep **AI Chat** open in the sidebar so you can ask for changes and watch them appear in the preview as the AI works. If the Live Preview is not already open, Phoenix Code opens it for you.
 
-<!-- Add a side-by-side image here comparing the normal layout (sidebar | editor | live preview) with the Design Mode layout (sidebar | live preview filling the rest of the window). -->
+![Design Mode layout](./images/designMode/design-mode-layout.png "Design Mode layout")
 
 To hide the sidebar too, click the **toggle sidebar** button *(double left-arrow icon)* just below the Design Mode toggle in the Control Bar. Click it again to bring the sidebar back.