feat: add hero video for styles bar doc

Author: devvaannsh

docs/02-Live Preview/03-styles-bar.md

@@ -3,45 +3,40 @@ title: Styles Bar
 slug: "/Pro Features/styles-bar"
 ---
 
+import VideoPlayer from '@site/src/components/Video/player';
+
 :::info Pro Feature
 [Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
 :::
 
 The **Styles Bar** lets you style elements visually right inside the Live Preview, and it automatically syncs your code in real time.  
 When you select an element in [Edit Mode](./live-preview-edit), a bar appears at the bottom of the Live Preview with controls for **fonts**, **colors**, **borders**, **spacing**, **layout**, and more.
 
-<!-- TODO: PLUTO - add video here showing the styles bar in action -->
+<VideoPlayer
+  src="https://docs-images.phcode.dev/videos/styles-bar/styles-bar-hero.mp4"
+/>
 
 > The controls shown depend on the selected element. For example, text controls are not shown for images.
 
 You can move the bar to the top of the Live Preview using the **dock button** at the right end of the bar.
 
-<!-- TODO: PLUTO - add image here showing the dock button -->
-
 ## Save Changes To
 
 Phoenix Code gives you control to choose where you want to save your edits. By default, all the changes are saved directly on the element as an inline style. If you want to save the changes in one of the CSS rules, you can click on the **Save changes to** button:
-<!-- TODO: PLUTO - add image here showing the save changes to button -->
 
 It shows all the available selectors for that element. Select the one you want, and all the changes made to that element will automatically get saved in that selector.
 > Each selector also shows the number of elements it affects on the page.
 
-<!-- TODO: PLUTO - add image here showing the affects x elements -->
-
 ### Creating a New Rule
 
 Click **Create new rule…** to save your edits in a new CSS rule. Type a class like `.card` or an id like `#hero` and click **Create**. Phoenix Code creates the rule and also adds the class or id to the element, so the rule applies right away.
 
-<!-- TODO: PLUTO - add video here showing the new rule creation -->
-
 ### Editing Element States
 
 The **State** dropdown in the popover lets you style the element's `hover`, `focus`, and `active` states. Pick a state and the Live Preview turns it on while you edit, with a banner showing which state you are editing.
 
 For any other state, type it in the **Create new rule** field, for example `.button:disabled`.
 
-<!-- TODO: PLUTO - add video of editing the hover state in the element -->
-
 > States need a CSS rule to live in, so they are not available when saving to inline styles.
 
 ## Font Family
@@ -54,8 +49,6 @@ Opens a font picker with three tabs:
 
 Fonts already used on the page appear in an **On this page** group, so you can reuse them quickly.
 
-<!-- TODO: PLUTO - add image here showing the font family popover -->
-
 ## Font Size
 
 Sets the font size. Type a value or use the **+/-** buttons. Click the unit button to switch between `px`, `em`, `rem`, and `%`, and the value is converted to the new unit automatically.
@@ -83,8 +76,6 @@ The **Spacing** tab:
 
 To learn more about these properties, see [MDN's text styling guide](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals).
 
-<!-- TODO: PLUTO - add image here showing the text style popover -->
-
 > Looking for bold? Use the font weight slider.
 
 ## Background Color
@@ -96,8 +87,6 @@ The **Background color** button shows the element's current background color. Cl
 - The **eyedropper** lets you pick a color from anywhere on the page.
 - **Swatches** shown on the left side displays all the colors already used in the page, plus a set of common colors.
 
-<!-- TODO: PLUTO - add image here showing the background color picker -->
-
 > The eyedropper is not available in Firefox, Safari and in the Linux desktop app.
 
 ## Text Color
@@ -123,8 +112,6 @@ The **Outline** tab has the same style, width, and color options, plus:
 
 > An outline is drawn outside the element's border and takes up no space on the page.
 
-<!-- TODO: PLUTO - add image here showing the border and outline popover -->
-
 ## Box Model
 
 The popover has three tabs, **Size**, **Padding**, and **Margin**. They sit together because they measure one element from the inside out.
@@ -146,8 +133,6 @@ The button in the center of the frame controls how the sides are linked:
 
 Linked fields are color coded so you can see which sides move together.
 
-<!-- TODO: PLUTO - add image here showing the box model popover -->
-
 ## Layout
 
 The popover has two tabs, **Display** and **Position**.
@@ -164,8 +149,6 @@ The **Position** tab:
 
 To learn more about these properties, see MDN's guides on [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) and [position](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
 
-<!-- TODO: PLUTO - add image here showing the layout popover -->
-
 ## When a Change Is Overridden
 
 Sometimes a more specific CSS rule wins over the rule you are editing, so your change has no visible effect. In that case, Phoenix Code automatically adds `!important` to your change to make it take effect.