Update image and description for user interface in quick start page

- Updated UI description to include five main areas instead of four.
- Added Roster Subwindow.
- Enhanced clarity in wording for new users.
- Consolidated all UI images into a single image for simplicity and clarity.
- Updated image reference from PNG to WebP format.

src/content/docs/getting-started/quick-start.md

@@ -23,39 +23,16 @@ $ profanity -h
 
 ## User Interface
 
-![CProof User Interface](@assets/CProof-ui-1.png)
+![CProof User Interface](@assets/CProof-ui-1.webp)
 
-The user interface is split into four main areas:
+The user interface is split into five main areas:
+1. **Title Bar:** Shows the name of the person or chat room you’re with, plus your current status (e.g., online or away). It’s configurable using the [`/titlebar`](/command-reference/#titlebar) command.
+2. **Main Window Area:** Used to show the current active window. The first window (1) is reserved for the 'console' where system messages, roster and some command responses are shown.
+3. **Status Bar:** Displays the current time, your logged-in account, and the status of open windows. A highlighted number indicates new messages, while "-1-" marks the currently active window. It's configurable using the [`/statusbar`](/command-reference/#statusbar) command.
+4. **Input Area:** Where you type messages or commands. Press Tab to autocomplete them easily.
+5. **Roster Subwindow:** Lists your contacts, their online status, and any new messages.
 
-### Title bar
-
-![CProof User Interface](@assets/CProof-ui-2.png)
-
-Shows the title for the current window (usually the contact you are chatting with, or the chat room you have joined), and your current presence.
-
-### Main window area
-
-![CProof User Interface](@assets/CProof-ui-3.png)
-
-Used to show the current active window. The first window (1) is reserved for the 'console' where system messages and command responses are shown.
-
-### Status bar
-
-![CProof User Interface](@assets/CProof-ui-4.png)
-
-Shows the time, the user you are logged in as, and status of each window. If a window is used, its number will appear, if it has new messages of any kind, the number will be highlighted. The current window is shown as -1-.
-
-### Input area
-
-![CProof User Interface](@assets/CProof-ui-5.png)
-
-Where commands and messages are entered. Commands and command arguments can be autocompleted with the tab key.
-
-All commands start with a / character e.g.:
-
-```bash
-/help
-```
+All commands start with a / character. For example, [`/help`](/command-reference/#help).
 
 ## Account setup