Added and updated images for bookmarks, split-view, and workspaces sections (#163)

* Added and updated images for bookmarks, split-view, and workspaces sections

* Update documentation index with new icons and card descriptions

Author: list-jonas

content/docs/index.mdx

@@ -7,12 +7,12 @@ icon: BookOpen
 import { 
   SpeechIcon,
   BookIcon,
-  WrenchIcon,
   PaletteIcon,
   HelpCircleIcon,
-  BarChartIcon,
   HeartIcon,
-  ShieldIcon
+  ShieldIcon,
+  Paintbrush,
+  Hammer
 } from 'lucide-react';
 
 Welcome to **Zen Browser's Documentation!** Here, you'll find everything you need to get the most out of your browsing experience. Dive in to explore how Zen can make your browsing more secure, private, and efficient.
@@ -25,10 +25,16 @@ Welcome to **Zen Browser's Documentation!** Here, you'll find everything you nee
     description="Complete user guide and features" 
   />
   <Card 
-    icon={<WrenchIcon />} 
-    title="Guides" 
+    icon={<Paintbrush />} 
+    title="CSS Live Editing" 
     href="/guides/live-editing" 
-    description="Tutorials and how-to guides" 
+    description="Live CSS editing for customizing the browser" 
+  />
+  <Card
+    icon={<Hammer />}
+    title="Build the Browser"
+    href="/guides/building"
+    description="Build the browser from source"
   />
   <Card 
     icon={<PaletteIcon />} 
@@ -42,12 +48,6 @@ Welcome to **Zen Browser's Documentation!** Here, you'll find everything you nee
     href="/faq" 
     description="Frequently asked questions" 
   />
-  <Card 
-    icon={<BarChartIcon />} 
-    title="Benchmarks" 
-    href="/benchmarks" 
-    description="Performance comparisons" 
-  />
   <Card 
     icon={<ShieldIcon />} 
     title="Security" 

content/docs/user-manual/bookmarks.mdx

@@ -1,28 +1,31 @@
 ---
 title: Bookmarks in Zen
 ---
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 
 Zen, as a fork of Firefox, inherits its webpage bookmarking system from the Gecko engine, with some of that extra Zen touch added on top. Zen offers two vertical tab layouts: **Single toolbar layout**, which integrates a compact address bar into the vertical tabs toolbar, and **Multiple toolbars layout**, featuring a traditional, full-size address bar in a separate horizontal toolbar. This guide covers the basics of creating and managing bookmarks, tailored to your chosen Zen layout.
 
 ## How do I bookmark a page
 
 To bookmark a page, find and click on the bookmark icon in the address bar. A pop up dialog will allow you to name and move your bookmark.
 
-{/* TODO: insert video of popup dialog */}
 
 <Callout type="info" title="Tips:">
     Did you know Zen offers Workspaces specific bookmarks?
 </Callout>
 
-In **Multiple toolbars layout**, you will find the bookmark icon exposed on the right of your address bar, while in **Single toolbar layout**, you must first expand your compact address bar by clicking on it then find the icon there.
-
-{/* TODO: **Single toolbar layout**
-
-*insert video* 
-
-**Multiple toolbars layout**
+{/* TODO: insert video of popup dialog */}
+<Tabs groupId="toolbar" items={['Single Toolbar', 'Multiple Toolbars']} persist>
+  <Tab value="Single Toolbar">
+    In **Single toolbar layout**, you must first expand your compact address bar by clicking on it then find the icon there.
+    ![Bookmark Popup](/assets/user-manual/bookmarks/bookmark-popup-single-toolbar.png)
+  </Tab>
+  <Tab value="Multiple Toolbars">
+    In **Multiple toolbars layout**, you will find the bookmark icon exposed on the right of your address bar.
+    ![Bookmark Popup](/assets/user-manual/bookmarks/bookmark-popup-multiple-toolbars.png)
+  </Tab>
+</Tabs>
 
-*insert video* */}
 
 <Callout type="info" title="Tips:">
     While you could use your mouse to click the bookmark icon, we recommend using the keyboard shortcut `Ctrl/Cmd + D` for bookmarking, especially in **Single toolbar layout**.
@@ -42,6 +45,7 @@ Taken from the default behavior of Gecko, Zen offers 3 locations (or, groups) fo
 - **Bookmarks Toolbar**: This can be considered a public location for bookmarks, displayed in the browser's [chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome). You typically find it beneath the main browser toolbar, which is featured in **Multiple toolbars layout** in Zen, while in **Single toolbar layout**, hovering your cursor to the top edge will display the hidden Bookmarks Toolbar, next to your window controls. To toggle the visibility of your Bookmarks Toolbar, use the shortcut `Ctrl/Cmd + Shift + B`
 
 {/* TODO: *insert video* */}
+![Bookmarks Toolbar](/assets/user-manual/bookmarks/bookmarks-toolbar.png)
 
 <Callout type="info" title="Tips:">
     If you want to fully hide the Bookmarks Toolbar, you can change these settings in `about:config`
@@ -58,12 +62,13 @@ Taken from the default behavior of Gecko, Zen offers 3 locations (or, groups) fo
 Your bookmarks are also avaialbe via what is known as the [Firefox Sidebar](https://support.mozilla.org/kb/use-firefox-sidebar-access-bookmarks-history-synced). The Sidebar can be opened by adding a Sidebar button to your controls, or preferably by using the shortcut `Ctr/Cmd + B` to open the Bookmarks Sidebar. You can find all of your bookmarks here including entries from both Bookmarks Toolbar and Bookmarks Menu, in the form of a tree structure explorer with access to a searching function at the top.
 
 {/* TODO: *insert video/image* */}
+![Bookmarks Sidebar](/assets/user-manual/bookmarks/bookmarks-sidebar.png)
 
 ### Bookmarks Library
 
 The Firefox Library is a Bookmarks/History/Download Manager. You can access the Library by the shortcut `Ctrl/Cmd + Shift + O`. While you can manage your bookmarks here in the same fashion as the Sidebar with extra details, you should only open the Library for the purpose of Importing and Backing up Zen's data.
 
-*insert library image*
+![Bookmarks Library](/assets/user-manual/bookmarks/bookmarks-library.png)
 
 <Callout>
 _All shortcuts can be modified via `Settings > Keyboard Shortcuts`._

content/docs/user-manual/compact-mode.mdx

@@ -24,9 +24,7 @@ In Multiple Toolbar or Collapsed Toolbar mode, you can choose which bar to hide.
 - **Hide toolbar**: Hide the top toolbar, accessible when hovering top edge of the browser.
 - **Hide both**: Hide both top toolbar and tab sidebar.
 
-<div align="center">
-  <img src="/assets/user-manual/compact-mode/enable-compact-mode.png" alt="Compact Mode" width="500" />
-</div>
+![Compact Mode](/assets/user-manual/compact-mode/enable-compact-mode.png)
 
 You can also use these extra shortcuts to show the hidden bars, suitable for heavy keyboard users. Unlike usual hovering gesture, showing sidebar/toolbar using these shortcuts is done persistently, until you pressed the shortcut again to hide it.
 

content/docs/user-manual/split-view.mdx

@@ -15,6 +15,8 @@ You can create split view simply by open one tab, drag another tab from sidebar
 - click new tab button, insert url, load it, and drag it into the existing split.
 - right click a link from one of the tabs > click "split link in new tab"
 */}
+![Split ](/assets/user-manual/split-view/split-context-menu.png)
+
 
 ### Using split wiew
 When split view is enabled, the active tab will have an overlay on its top side, containing two buttons: **Drag Handle** `:::` button and **Unsplit Tab** `‒` button. 
@@ -37,4 +39,6 @@ Zen also provide keyboard shortcuts to help you rearrange the split tabs automat
 
 You can also press one of the Toggle Split View shortcuts to split current tab with the tab below it.
 
-> All shortcuts can be modified via `Settings > Keyboard Shortcuts`.
+<Callout>
+All shortcuts can be modified via `Settings > Keyboard Shortcuts`.
+</Callout>

content/docs/user-manual/workspaces.mdx

@@ -15,6 +15,8 @@ Perfect for power users, workspaces bring the flexibility of multiple browser wi
 ### Container Tabs / Multi-Account Containers
 Container Tabs is a feature derived from Firefox that provide separate cookie sessions within the same browser profile. With Container Tabs, you can log in with multiple accounts on the same sites without having to log out/in multiple times.
 
+![Enable Container Tabs](/assets/user-manual/workspaces/enable-container-tabs.png)
+
 By default, there are four containers provided by Firefox: **Personal**, **Work**, **Banking**, and **Shopping**. You can manage, remove, or add new containers from `"Settings" > "General" > "Container Tabs"`. You can choose between 9 colors and 13 icons to customize or create your own containers.
 
 ![Container Tabs](/assets/user-manual/workspaces/container-tabs.png)