feat: add assets to the features in blog post

Author: devvaannsh

blog/2026-01-18-Release-5.0/index.md

@@ -5,6 +5,9 @@ authors: [arun, charly, devvaannsh, phoenixBot]
 tags: [Phoenix Pro, Live Preview Edit, Emmet, Tab Bar, Custom Snippets, Collapse Folders, Smarter hint suggestions, Stability Improvements, Windows, Linux, Mac, Release]
 ---
 
+import React from 'react';
+import VideoPlayer from '@site/src/components/Video/player';
+
 2026 January release (5.0) of Phoenix Code is now available for download at [phcode.io](https://phcode.io).
 
 This is the biggest release of Phoenix Code ever! This brings lots of much-awaited features into Phoenix Code and we bump to the latest 5.0 version with this.
@@ -24,40 +27,47 @@ Now, you can edit the live preview directly without worrying about your source c
 
 Read more about [Live Preview Edit](https://docs.phcode.dev/docs/pro-features/live-preview-edit), [Image Gallery](https://docs.phcode.dev/docs/pro-features/image-gallery), [Measurements](https://docs.phcode.dev/docs/pro-features/measurements).
 
-<!-- add some assets here -->
+<VideoPlayer
+  src="https://docs-images.phcode.dev/videos/live-preview-edit/live-preview-edit.mp4"
+/>
 
 ## Emmet
 
 One of the most awaited features of Phoenix Code **Emmet** is finally here. Now you can write Emmet snippets and Phoenix Code will show you hints, selecting them will expand the hint into the whole code snippet. With Emmet, you can code even faster now! [Read More](https://docs.phcode.dev/docs/features/emmet)
 
-<!-- add emmet assets -->
+<VideoPlayer
+  src="https://docs-images.phcode.dev/videos/editing-text/emmet-html.mp4"
+/>
 
 ## Tab Bar
 
 Phoenix Code now also adds the Tab Bar support which is shown at the top of the editor that displays the list of all the open files which helps you in viewing and navigating between files even more quickly. You can choose what suits you, Tab Bar or Working Files or have both enabled at the same time.
 [Read More](https://docs.phcode.dev/docs/file-management#tab-bar)
 
-<!-- add tab bar assets here -->
+![Tab Bar](../../docs/images/fileManagement/tab-bar.png "Tab Bar")
 
 ## Custom Snippets
 
 Custom Snippets allows you to define your own code hints. Create your own code hints which when selected turn into full code blocks. You can also add cursor positions in your code blocks so that Phoenix Code will automatically place the cursor at the right position after expanding the code block.
 [Read More](https://docs.phcode.dev/docs/features/custom-snippets)
 
-<!-- add custom snippets assets here -->
+<VideoPlayer
+  src="https://docs-images.phcode.dev/videos/custom-snippets/custom-snippets-main.mp4"
+/>
 
 ## Collapse Folders
 
 After working for some time, your project structure gets messy, lots of open directories with nested directories and all. But no worries now, Phoenix Code now supports Collapse All Folders feature using which in one click you can reset your view by collapsing all the expanded folders to their root level. [Read More](https://docs.phcode.dev/docs/file-management#collapse-all-folders)
 
-<!-- add Collapse folders assets here -->
+<VideoPlayer
+  src="https://docs-images.phcode.dev/videos/file-management/collapse-folders.mp4"
+/>
 
 ## Smarter Color hints
 
 Phoenix Code code hints are now smarter than ever. When typing a color property Phoenix Code will prioritize the previously used colors which helps you in reusing frequently used colors without manually searching for them. [Read More](https://docs.phcode.dev/docs/editing-colors#color-hints)
 
-<!-- add color suggestions assets here -->
-
+![Previously Used Colors](../../docs/images/editingColors/previously-used-colors.png "Previously Used Colors")
 
 ## Notable changes and fixes